diff --git a/css/about.css b/css/about.css
new file mode 100644
index 0000000..b1f281a
--- /dev/null
+++ b/css/about.css
@@ -0,0 +1,163 @@
+.about {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #273838;
+    color: rgb(249, 250, 252);
+    box-sizing: content-box;
+    height: calc(100vh - 88px);
+    font-family: tanker;
+}
+
+.body1 {
+    padding: 30px 0px 30px 0px;
+    width: 80%;
+
+    > h1 {
+        font-size: 4rem;
+        text-decoration: underline dotted;
+        margin-bottom: 30px;
+    }
+}
+
+.about-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.card-body{
+    margin: 10px;
+    padding: 20px;
+    border: 2px white solid;
+    height: 120px;
+    overflow: hidden;
+    display: flex;
+    /* width: calc(500px - 60px); */
+    width: 42%;
+    background-color: #242824;
+}
+.card-content{
+    height: 120px;
+}
+.card-image{
+    margin-left: 20px;
+    width: 100px;
+    height: 120px;
+    display: flex;
+    align-items: center;
+}
+.card-image > img{
+    border-radius: 100px;
+    width: 170px;
+}
+.card-image > img:nth-last-child(1){
+    border-radius: 100px;
+    width: 200px;
+}
+
+.card-body:nth-child(1){
+    background-color: #242824;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:hover:nth-child(1){
+    background-color: #4D5564;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:nth-child(2){
+    background-color: #242824;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:hover:nth-child(2){
+    background-color: #20A9E1;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:nth-child(3){
+    background-color: #242824;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:hover:nth-child(3){
+    background-color: #77C2AE;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:nth-child(4){
+    background-color: #242824;
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear;
+}
+.card-body:hover:nth-child(4){
+    -webkit-transition: background-color 0.4s linear;
+    -ms-transition: background-color 0.4s linear;
+    transition: background-color 0.4s linear; 
+    background-color: #F78D8D;
+}
+@media (max-width:1100px) {
+    .card-content > p{
+        font-size: 14px;
+    }
+}
+@media (max-width:1000px) {
+    .card-body{
+        width: 80%;
+    }
+}
+@media (max-width:700px) {
+    .body1 > h1{
+        font-size: 2.5rem;
+        margin-bottom: 10px;
+        margin-left: 10px;
+    }
+    .about{
+        height: auto;
+    }
+    .card-body{
+        width: 90%;
+        height: 90px;
+        padding: 10px;
+    }
+    .card-content{
+        height: 120px;
+    }
+    .card-content > h1{
+        font-size: 1.5rem;
+    }
+    .card-content > p{
+        font-size: .7rem;
+    }
+    .card-image{
+        width: 50px;
+        height: 90px;
+        display: flex;
+        align-items: center;
+    }
+    .card-image > img{
+        border-radius: 100px;
+        width: 200px;
+    }
+
+    .card-image{
+        margin-left: 10px;
+        width: 50px;
+        height: 90px;
+        display: flex;
+        align-items: center;
+    }
+    .card-image > img:nth-last-child(1){
+        border-radius: 100px;
+        width: 120px;
+    }
+}
\ No newline at end of file
diff --git a/css/form.css b/css/form.css
new file mode 100644
index 0000000..bf9f18e
--- /dev/null
+++ b/css/form.css
@@ -0,0 +1,110 @@
+.forms{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #273838;
+    color: aliceblue;
+    font-family: tanker;
+    .body1{
+      width: 80vw;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+}
+
+.form-content{
+  /* background: #13121A; */
+  
+  border-bottom: 4px grey solid;
+  border-right: 4px #070707 solid;
+  box-shadow: -5px -3px #0000002a;
+  width: 100%;
+  height: auto;
+  padding: 30px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 30px;
+}
+.form-info{
+  backdrop-filter: blur(1px);
+  width: 50%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  border-left: 5px white solid;
+  border-radius: 10px;
+  padding: 10px 0px 20px 10px;
+  
+  p{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 500;
+    margin-bottom: 0px;
+  }
+  h2{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: clash;
+    text-decoration: white underline;
+    font-weight: 500;
+    font-size: 1.3rem;
+    margin-top: 0px;
+  }
+  .form-info-heading{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+  }
+  .line{
+    position: absolute;
+    left: 0;
+    width: 15px;
+    height: 3px;
+    background: white;
+  }
+  .line2{
+    position: absolute;
+    left: 0;
+    width: 18px;
+    height: 4px;
+    background: #67C15E;
+  }
+  .line3{
+    position: absolute;
+    left: 0;
+    width: 18px;
+    height: 4px;
+    background: #8791F6;
+  }
+  .form-info-heading:nth-child(1){
+    margin-top: 0;
+  }
+  img{
+    height: 2rem;
+    padding-right: 10px;
+  }
+}
+.form-content{
+    --s: 84px; /* control the size*/
+    --c1: #466565;
+    --c2: #314747;
+    --c3: #1d2929;
+    
+    --_g: 0 120deg,#0000 0;
+    background:
+      conic-gradient(from    0deg at calc(500%/6) calc(100%/3),var(--c3) var(--_g)),
+      conic-gradient(from -120deg at calc(100%/6) calc(100%/3),var(--c2) var(--_g)),
+      conic-gradient(from  120deg at calc(100%/3) calc(500%/6),var(--c1) var(--_g)),
+      conic-gradient(from  120deg at calc(200%/3) calc(500%/6),var(--c1) var(--_g)),
+      conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2)  60deg,var(--c1) var(--_g)),
+      conic-gradient(from   60deg at calc(200%/3) 50%,var(--c1)  60deg,var(--c3) var(--_g)),
+      conic-gradient(from  -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0);
+    background-size: calc(var(--s)*1.732) var(--s);
+}
+@media (max-width:800px) {
+  .form-info{
+    width: 100%;
+    backdrop-filter: blur(0);
+  }
+}
\ No newline at end of file
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..7ede0dc
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,188 @@
+.header-menu{
+    background-color: #354b4b;
+    width: 100vw;
+    height: calc(100vh);
+    display: flex;
+    justify-content: center;
+}
+.header-menu > div{
+    margin-top: 88px;
+    width: 40vw;
+    height: calc(100vh - 88px);
+}
+.header-left>p{
+    font-size: 1.8rem;
+    font-family: clash;
+}
+.header-left>h1{
+    font-size: 4rem;
+}
+.header-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.header-right{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+.card-container{
+    background-color: #2A3C3C;
+	border-radius: 12px;
+    border: 1px #3b3b3b solid;
+	box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
+	color: #d9e0fc;
+	padding-top: 30px;
+	width: 350px;
+	max-width: 100%;
+	text-align: center;
+
+    h3 {
+        margin: 10px 0;
+    }
+    h6 {
+        margin: 5px 0;
+        text-transform: uppercase;
+    }
+    p {
+        font-size: 14px;
+        line-height: 21px;
+    }
+    .skills {
+        font-family: clash;
+        border-top: #3b3b3b 1px solid;
+        text-align: left;
+        padding: 15px;
+        margin-top: 30px;
+        border-radius: 0px 0px 12px 12px;
+    }
+    .skills ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .skills ul li {
+        border: 1px solid #2D2747;
+        border-radius: 2px;
+        display: inline-block;
+        font-size: 12px;
+        margin: 0 7px 7px 0;
+        padding: 7px;
+        background-color: #304646;
+    }
+    .round {
+        border-radius: 50%;
+        border: 2px solid #03BFCB;
+        padding: 2px;
+        animation: round 3s infinite;
+    }
+}
+@keyframes round {
+    0%{
+        border: solid #5daa67;
+
+    }
+    50%{
+        border: solid #608eac;
+        /* border: solid #4a7283; */
+    }
+    100%{
+        border: solid #5daa67;
+    }
+}
+.bn13 {
+    display: inline-block;
+    padding: 0.65em 1.6em;
+    border: 3px solid #ffffff;
+    margin: 0 0.3em 0.3em 0;
+    border-radius: 0.12em;
+    box-sizing: border-box;
+    text-decoration: none;
+    font-weight: 300;
+    background-color: #fff;
+    color: #000000;
+    text-align: center;
+    transition: all 0.2s;
+}
+.bn13:hover {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0);
+}
+.bn13:nth-child(2) {
+    background-color: #00000000;
+    color: #fff;
+}
+.bn13:hover:nth-child(2) {
+    background-color: #fff;
+    color: #000000;
+}
+.pattren {
+    width: 100%;
+    height: 100%;
+    /* Add your background pattern here */
+    background-image: radial-gradient(rgba(255, 255, 255, 0.171) 2px, transparent 0);
+    background-size: 30px 30px;
+    background-position: -5px -5px;
+    animation: pattren 1s infinite;
+}
+@keyframes pattren {
+    0%{
+        background-position: -5px -5px;
+        background-image: radial-gradient(rgba(255, 255, 255, 0.171) 3px, transparent 0);
+    }
+    50%{
+        background-image: radial-gradient(rgba(255, 255, 255, 0.171) 2px, transparent 0);
+
+    }
+    100%{
+        background-image: radial-gradient(rgba(255, 255, 255, 0.171) 3px, transparent 0);
+        background-position: -33px -33px;
+
+    }
+}
+@media (max-width:1280px) {
+    .header-menu > div{
+        margin-top: 88px;
+        width: 45vw;
+        height: calc(100vh - 88px);
+    }
+}
+@media (max-width:1000px) {
+    .header-menu{
+        padding-top: 64px;
+        width: 100vw;
+        height: calc(100vh - 64px);
+    }
+    .header-menu > div{
+        margin: 30px;
+        width: 90vw;
+        height: auto;
+    }
+    .header-menu{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-;
+        align-items: center;
+    }
+}
+@media (max-width:700px) {
+    .header-right{
+        display: none;
+    }
+    .header-left{
+        text-align: center;
+    }
+    .header-left>p{
+        font-size: 1.5rem;
+        font-weight: 400;
+        font-family: clash;
+    }
+    .header-left>h1{
+        font-size: 3rem;
+    }
+}
diff --git a/css/homepage.css b/css/homepage.css
new file mode 100644
index 0000000..6e365e7
--- /dev/null
+++ b/css/homepage.css
@@ -0,0 +1,33 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+@font-face {
+    font-family: 'tanker';
+    src: url('../fonts/Tanker/Tanker-Regular.woff2') format('woff2'),
+        url('../fonts/Tanker/Tanker-Regular.woff') format('woff'),
+        url('../fonts/Tanker/Tanker-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'clash';
+    src: url('../fonts/ClashDisplay/ClashDisplay-Variable.woff2') format('woff2'),
+        url('../fonts/ClashDisplay/ClashDisplay-Variable.woff') format('woff'),
+        url('../fonts/ClashDisplay/ClashDisplay-Variable.ttf') format('truetype');
+    font-weight: 200 700;
+    font-display: swap;
+    font-style: normal;
+}
+:root{
+    --pcard-height:500px;
+    --pcard-width:300px;
+}
+a{
+    color: aliceblue;
+    text-decoration: none;
+}
+body{
+    cursor: crosshair;
+}
\ No newline at end of file
diff --git a/css/navbar.css b/css/navbar.css
new file mode 100644
index 0000000..d1b922e
--- /dev/null
+++ b/css/navbar.css
@@ -0,0 +1,70 @@
+.nav-body{
+    width: calc(100vw - 24px);
+    height: 64px;
+    background-color: #435f5f;
+    padding: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: #272727 1px solid;
+}
+.nav-content{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 200px;
+    width: 85%;
+    height: 64px;
+}
+.nav-content > div{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.nav-logo{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.nav-logo> img {
+    margin: 0;
+    border-radius: 40px;
+}
+.nav-logo>a{
+    color: #ffffff;
+}
+.nav-headings > a{
+    color: white;
+    text-decoration: none;
+    padding-left: 20px;
+    font-size: 1.5rem;
+}
+.nav-headings > a:nth-child(1){
+    padding-left: 0px;
+}
+.nav-headings{
+    color: white;
+    font: tanker;
+}
+.nav-logo > a{
+    font-size: 30px;
+}
+.nav-icon{
+    height: 64px;
+}
+
+@media (max-width:700px) {
+    .nav-content{
+        width: 95%;
+    }
+    .nav-headings > a{
+        font-size: 1rem;
+        padding-left: 5px;
+    }
+    .nav-logo > a{
+        font-size: 1rem;
+    }
+    .nav-icon{
+        height: 50px;
+    }
+}
\ No newline at end of file
diff --git a/css/project.css b/css/project.css
new file mode 100644
index 0000000..35a0e69
--- /dev/null
+++ b/css/project.css
@@ -0,0 +1,64 @@
+.project{
+    display: flex;
+    justify-content: center;
+    background-color: #274141;
+    color: rgb(249, 250, 252);
+    box-sizing: content-box;
+    font-family: tanker;
+    padding: 50px 0px 50px 0px;
+}
+.project-content{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+}
+.project-cards{
+    background-color: #242824;
+    margin-bottom: 30px;
+    margin-right: 10px;
+    margin-left: 10px;
+    width: var(--pcard-width);
+    height: var(--pcard-height);
+    border: 1px #383838 solid;
+    display: grid;
+    border-bottom: 3px rgb(119, 118, 118) solid;
+    border-right: 3px rgb(27, 27, 27) solid;
+    .project-img{
+        height: calc(var(--pcard-height) - 100px);
+        background-size: cover;
+        background-position: top;
+        border-bottom:1px #383838 solid;
+    }
+    #project1{
+        background-image: url(../media/project/home.jpg);
+    }
+    #project2{
+        background-image: url(../media/project/gallery.jpg);
+    }
+    #project3{
+        background-image: url(../media/project/home.jpg);
+    }
+    .project-card-content{
+        font-weight: 500;
+        padding: 10px;
+        font-size: 1.9rem;
+        height: calc(var(--pcard-height) - 4000px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+@media (max-width:1200px) {
+    :root{
+        --pcard-height:400px;
+        --pcard-width: 200px;
+    }
+    .project{
+        .project-card-content{
+            font-size: 1.5rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/fonts/ClashDisplay/ClashDisplay-Bold.eot b/fonts/ClashDisplay/ClashDisplay-Bold.eot
new file mode 100644
index 0000000..ade9e62
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Bold.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Bold.ttf b/fonts/ClashDisplay/ClashDisplay-Bold.ttf
new file mode 100644
index 0000000..d6b2a34
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Bold.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Bold.woff b/fonts/ClashDisplay/ClashDisplay-Bold.woff
new file mode 100644
index 0000000..0bfbe7c
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Bold.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Bold.woff2 b/fonts/ClashDisplay/ClashDisplay-Bold.woff2
new file mode 100644
index 0000000..87f15ca
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Bold.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Extralight.eot b/fonts/ClashDisplay/ClashDisplay-Extralight.eot
new file mode 100644
index 0000000..22673f4
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Extralight.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Extralight.ttf b/fonts/ClashDisplay/ClashDisplay-Extralight.ttf
new file mode 100644
index 0000000..152f5d3
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Extralight.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Extralight.woff b/fonts/ClashDisplay/ClashDisplay-Extralight.woff
new file mode 100644
index 0000000..50c2b10
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Extralight.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Extralight.woff2 b/fonts/ClashDisplay/ClashDisplay-Extralight.woff2
new file mode 100644
index 0000000..d4580eb
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Extralight.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Light.eot b/fonts/ClashDisplay/ClashDisplay-Light.eot
new file mode 100644
index 0000000..83522c8
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Light.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Light.ttf b/fonts/ClashDisplay/ClashDisplay-Light.ttf
new file mode 100644
index 0000000..b4f3711
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Light.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Light.woff b/fonts/ClashDisplay/ClashDisplay-Light.woff
new file mode 100644
index 0000000..18b89f5
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Light.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Light.woff2 b/fonts/ClashDisplay/ClashDisplay-Light.woff2
new file mode 100644
index 0000000..9e42e53
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Light.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Medium.eot b/fonts/ClashDisplay/ClashDisplay-Medium.eot
new file mode 100644
index 0000000..faee17b
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Medium.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Medium.ttf b/fonts/ClashDisplay/ClashDisplay-Medium.ttf
new file mode 100644
index 0000000..9e704d1
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Medium.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Medium.woff b/fonts/ClashDisplay/ClashDisplay-Medium.woff
new file mode 100644
index 0000000..a60d904
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Medium.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Medium.woff2 b/fonts/ClashDisplay/ClashDisplay-Medium.woff2
new file mode 100644
index 0000000..2e975d3
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Medium.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Regular.eot b/fonts/ClashDisplay/ClashDisplay-Regular.eot
new file mode 100644
index 0000000..00732ea
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Regular.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Regular.ttf b/fonts/ClashDisplay/ClashDisplay-Regular.ttf
new file mode 100644
index 0000000..4237664
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Regular.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Regular.woff b/fonts/ClashDisplay/ClashDisplay-Regular.woff
new file mode 100644
index 0000000..fb84ab8
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Regular.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Regular.woff2 b/fonts/ClashDisplay/ClashDisplay-Regular.woff2
new file mode 100644
index 0000000..496b089
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Regular.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Semibold.eot b/fonts/ClashDisplay/ClashDisplay-Semibold.eot
new file mode 100644
index 0000000..6ae3364
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Semibold.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Semibold.ttf b/fonts/ClashDisplay/ClashDisplay-Semibold.ttf
new file mode 100644
index 0000000..6715249
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Semibold.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Semibold.woff b/fonts/ClashDisplay/ClashDisplay-Semibold.woff
new file mode 100644
index 0000000..3b2f19f
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Semibold.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Semibold.woff2 b/fonts/ClashDisplay/ClashDisplay-Semibold.woff2
new file mode 100644
index 0000000..217e88e
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Semibold.woff2 differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Variable.eot b/fonts/ClashDisplay/ClashDisplay-Variable.eot
new file mode 100644
index 0000000..8da313d
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Variable.eot differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Variable.ttf b/fonts/ClashDisplay/ClashDisplay-Variable.ttf
new file mode 100644
index 0000000..24f060c
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Variable.ttf differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Variable.woff b/fonts/ClashDisplay/ClashDisplay-Variable.woff
new file mode 100644
index 0000000..c25e41e
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Variable.woff differ
diff --git a/fonts/ClashDisplay/ClashDisplay-Variable.woff2 b/fonts/ClashDisplay/ClashDisplay-Variable.woff2
new file mode 100644
index 0000000..f06199f
Binary files /dev/null and b/fonts/ClashDisplay/ClashDisplay-Variable.woff2 differ
diff --git a/fonts/Tanker/Tanker-Regular.eot b/fonts/Tanker/Tanker-Regular.eot
new file mode 100644
index 0000000..d9c60bd
Binary files /dev/null and b/fonts/Tanker/Tanker-Regular.eot differ
diff --git a/fonts/Tanker/Tanker-Regular.ttf b/fonts/Tanker/Tanker-Regular.ttf
new file mode 100644
index 0000000..170a83f
Binary files /dev/null and b/fonts/Tanker/Tanker-Regular.ttf differ
diff --git a/fonts/Tanker/Tanker-Regular.woff b/fonts/Tanker/Tanker-Regular.woff
new file mode 100644
index 0000000..990fc79
Binary files /dev/null and b/fonts/Tanker/Tanker-Regular.woff differ
diff --git a/fonts/Tanker/Tanker-Regular.woff2 b/fonts/Tanker/Tanker-Regular.woff2
new file mode 100644
index 0000000..f400317
Binary files /dev/null and b/fonts/Tanker/Tanker-Regular.woff2 differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f5a6081
--- /dev/null
+++ b/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="shortcut icon" href="media/icon/pfp.jpg" type="image/x-icon">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fateh Mudassar | FreeLancer</title>
+    <link rel="stylesheet" href="css/homepage.css">
+</head>
+<body>
+    <div class="nav-bar"style="position:fixed;">
+        <link rel="stylesheet" href="css/navbar.css">
+        <div class="nav-body">
+            <div class="nav-content" style="font-family:tanker;">
+                <div class="nav-logo">
+                        <img class="nav-icon" src="media/icon/pfp.jpg">
+                        <a style="text-decoration: none;padding-left: 10px;" href="index.html">Fateh Mudassar</a>
+                </div>
+                <div class="nav-headings">
+                    <a href="index.html">HOME</a>
+                    <a href="">Services</a>
+                    <a href="">PROJECTS</a>
+                    <a href="">CONTACT</a>
+                </div>
+            </div>
+        </div>
+    </div>    
+    <div class="header">
+        <link rel="stylesheet" href="css/header.css">
+        <div class="header-menu pattren" style="font-family: tanker; color: rgb(255, 255, 255);">
+            <div class="header-left">
+                <h1>Fateh Mudassar</span></h1>
+                <p>Hello, I am Fateh Mudassar,</p>
+                <p>Website Developer</p>
+                <p style="font-size: 1rem;text-align: center;margin-top: 5px;">A Web Developer who can Build, Manage and Debug your Web Applications and to fullfill all your needs.</p>
+            </div>
+            <div class="header-right">
+                <div class="bio-card">
+                    <div class="card-container">
+                        <img class="round" src="media/icon/pfp.jpg" style="width: 100px;border-radius: 100px;" alt="user" />
+                        <h3>Fateh Mudassar</h3>
+                        <h6>Website Developer</h6>
+                        <p>User interface designer and <br/> front-end developer</p>
+                        <br>
+                        <div class="buttons" style="font-family: tanker;">
+                            <a href="/" class="bn13">Contact Me!</a>
+                            <a href="/" class="bn13">Projects</a>
+                        </div>
+                        <div class="skills">
+                            <h6>Skills</h6>
+                            <ul>
+                                <li>HTML</li>
+                                <li>CSS</li>
+                                <li>JavaScript</li>
+                                <li>UI / UX</li>
+                                <li>Video Editor</li>
+                                <li>Image Editor</li>
+                                
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="about">
+      <link rel="stylesheet" href="css/about.css">
+      <div class="body1">
+        <h1>Services:</h1>
+        <div class="about-content">
+          <div class="card-body">
+            <div class="card-content">
+            <h1>Web Developer</h1>
+            <p>I am able to build a website acquire to your desire. I am a Web Devloper who can bring your dream website come to life.</p>
+            </div>
+            <div class="card-image"><img src="media/icon/coding-icon.webp" alt=""></div>
+          </div>
+          <div class="card-body">
+            <div class="card-content">
+            <h1>Video Editor</h1>
+            <p>Have a Video to be edited? Want your to make short clips? Want to cut out the messed up part? I can do it all for you with my video editing skills</p>
+            </div>
+            <div class="card-image"><img src="/media/icon/video-icon.webp" alt="video player"></div>
+          </div>
+          <div class="card-body">
+            <div class="card-content">
+            <h1>Photo Editor</h1>
+            <p>Want to add some fun background image or Want to be fix out a ruined photo? I am all in to help you with that task.</p>
+            </div>
+            <div class="card-image"><img src="media/icon/draw-icon.jpg" alt=""></div>
+          </div>
+          <div class="card-body">
+            <div class="card-content">
+            <h1>UX/UI (Designing)</h1>
+            <p>Suck at designing? Want some help with designing the product? Let it be a mockup or full edged design. I am willing to come up be most effective solution.</p>
+            </div>
+            <div class="card-image"><img src="media/icon/uxui.jpg" alt=""></div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+    <div class="project">
+      <link rel="stylesheet" href="css/project.css">
+      <div class="body1">
+        <h1>Project:</h1>
+        <div class="project-content">
+          <div class="project-cards">
+            <div class="project-img" id="project1"></div>
+            <div class="project-card-content" id="pcontent1">Pizza Template</div>
+          </div>
+          <div class="project-cards">
+            <div class="project-img" id="project2"></div>
+            <div class="project-card-content" id="pcontent2">Gallery Template</div>
+          </div>
+          <div class="project-cards">
+            <div class="project-img" id="project3"></div>
+            <div class="project-card-content" id="pcontent3">Template Porfolio</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="forms">
+      <link rel="stylesheet" href="css/form.css">
+      <div class="body1">
+        <h1>Contact Me!:</h1>
+        <div class="form-content">
+          <div class="form-btn">
+          </div>
+          <div class="form-info">
+            <main>
+              <div class="form-mail">
+                <div class="form-info-heading">
+                  <img src="media/icon/mail-arrow-up-svgrepo-com.svg" alt="Mail">
+                  <h1>Gmail</h1>
+                  <div class="line"></div>
+                </div>
+                <p>contact me on:</p>
+                <h2><a title="Mail Using Mails" href="mailto:howtorespawn@gmail.com?subject=Website%20Needed">HowToRespawn@gmail.com</a></h2>
+                <div class="form-info-heading">
+                  <img src="media/icon/whatsapp-color-svgrepo-com.svg" alt="WhatsApp">
+                  <h1>Whats App:</h1>
+                  <div class="line2"></div>
+                </div>
+                <p>For WhatsApp:</p>
+                <h2><a title="Chat Using WhatsApp" href="https://wa.me/923054824877?text=I%20would%20request%20a%20website!!!">+92 305 4824877</a></h2>
+                <div class="form-info-heading">
+                  <img src="media/icon/discord-icon-svgrepo-com.svg" alt="Discord">
+                  <h1>Discord:</h1>
+                  <div class="line3"></div>
+                </div>
+                <p>Talk On Discord:</p>
+                <h2><a title="Talk Using Discord" href="https://discordapp.com/users/743776395183915028">HowToRespawnz</a></h2>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/media/icon/coding-icon.webp b/media/icon/coding-icon.webp
new file mode 100644
index 0000000..128f4ff
Binary files /dev/null and b/media/icon/coding-icon.webp differ
diff --git a/media/icon/discord-icon-svgrepo-com.svg b/media/icon/discord-icon-svgrepo-com.svg
new file mode 100644
index 0000000..8bce596
--- /dev/null
+++ b/media/icon/discord-icon-svgrepo-com.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#8791f6" fill-rule="nonzero">
+
+</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/media/icon/draw-icon.jpg b/media/icon/draw-icon.jpg
new file mode 100644
index 0000000..e02c6cb
Binary files /dev/null and b/media/icon/draw-icon.jpg differ
diff --git a/media/icon/mail-arrow-up-svgrepo-com.svg b/media/icon/mail-arrow-up-svgrepo-com.svg
new file mode 100644
index 0000000..a5ad3c0
--- /dev/null
+++ b/media/icon/mail-arrow-up-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 21V15M19 15L17 17M19 15L21 17M21 11V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.0799 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.0799 19 6.2 19H13M20.6067 8.26229L15.5499 11.6335C14.2669 12.4888 13.6254 12.9165 12.932 13.0827C12.3192 13.2295 11.6804 13.2295 11.0677 13.0827C10.3743 12.9165 9.73279 12.4888 8.44975 11.6335L3.14746 8.09863" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/media/icon/pfp.jpg b/media/icon/pfp.jpg
new file mode 100644
index 0000000..9d93dd0
Binary files /dev/null and b/media/icon/pfp.jpg differ
diff --git a/media/icon/uxui.jpg b/media/icon/uxui.jpg
new file mode 100644
index 0000000..3e47dbe
Binary files /dev/null and b/media/icon/uxui.jpg differ
diff --git a/media/icon/video-icon.webp b/media/icon/video-icon.webp
new file mode 100644
index 0000000..715adcb
Binary files /dev/null and b/media/icon/video-icon.webp differ
diff --git a/media/icon/whatsapp-color-svgrepo-com.svg b/media/icon/whatsapp-color-svgrepo-com.svg
new file mode 100644
index 0000000..056da7c
--- /dev/null
+++ b/media/icon/whatsapp-color-svgrepo-com.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    
+    <title>Whatsapp-color</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+
+</defs>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Color-" transform="translate(-700.000000, -360.000000)" fill="#67C15E">
+            <path d="M723.993033,360 C710.762252,360 700,370.765287 700,383.999801 C700,389.248451 701.692661,394.116025 704.570026,398.066947 L701.579605,406.983798 L710.804449,404.035539 C714.598605,406.546975 719.126434,408 724.006967,408 C737.237748,408 748,397.234315 748,384.000199 C748,370.765685 737.237748,360.000398 724.006967,360.000398 L723.993033,360.000398 L723.993033,360 Z M717.29285,372.190836 C716.827488,371.07628 716.474784,371.034071 715.769774,371.005401 C715.529728,370.991464 715.262214,370.977527 714.96564,370.977527 C714.04845,370.977527 713.089462,371.245514 712.511043,371.838033 C711.806033,372.557577 710.056843,374.23638 710.056843,377.679202 C710.056843,381.122023 712.567571,384.451756 712.905944,384.917648 C713.258648,385.382743 717.800808,392.55031 724.853297,395.471492 C730.368379,397.757149 732.00491,397.545307 733.260074,397.27732 C735.093658,396.882308 737.393002,395.527239 737.971421,393.891043 C738.54984,392.25405 738.54984,390.857171 738.380255,390.560912 C738.211068,390.264652 737.745308,390.095816 737.040298,389.742615 C736.335288,389.389811 732.90737,387.696673 732.25849,387.470894 C731.623543,387.231179 731.017259,387.315995 730.537963,387.99333 C729.860819,388.938653 729.198006,389.89831 728.661785,390.476494 C728.238619,390.928051 727.547144,390.984595 726.969123,390.744481 C726.193254,390.420348 724.021298,389.657798 721.340985,387.273388 C719.267356,385.42535 717.856938,383.125756 717.448104,382.434484 C717.038871,381.729275 717.405907,381.319529 717.729948,380.938852 C718.082653,380.501232 718.421026,380.191036 718.77373,379.781688 C719.126434,379.372738 719.323884,379.160897 719.549599,378.681068 C719.789645,378.215575 719.62006,377.735746 719.450874,377.382942 C719.281687,377.030139 717.871269,373.587317 717.29285,372.190836 Z" id="Whatsapp">
+
+</path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/media/project/gallery.jpg b/media/project/gallery.jpg
new file mode 100644
index 0000000..f20b6da
Binary files /dev/null and b/media/project/gallery.jpg differ
diff --git a/media/project/home.jpg b/media/project/home.jpg
new file mode 100644
index 0000000..9607acb
Binary files /dev/null and b/media/project/home.jpg differ