diff --git a/css/style.css b/css/style.css
index f1351c0..a01f344 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,37 +1,86 @@
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Roboto', sans-serif;
 }
 
-body{
-    font-family: 'Libre Baskerville', serif;
+.row {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+#profile img {
+  display: block;
+  width: 50%;
+  margin: 0 25%;
+}
+#profile p {
+  margin: 20px;
+  color: grey;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: justify;
+}
+.title {
+  text-align: center;
+  padding: 10px;
+}
+
+body {
+  font-family: 'Libre Baskerville', serif;
 }
 
 /* profile section */
-.row{
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
+.row {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
 }
 
-.title{
-    text-align: center;
-    padding:10px;
+.title {
+  text-align: center;
+  padding: 10px;
 }
 
-#profile img{
-    width: 50%;
-    margin: 0 25%;
+#profile img {
+  width: 50%;
+  margin: 0 25%;
 }
-#profile p{
-    margin: 20px;
-    color: #777;
-    font-size: 14px;
-    line-height: 1.75;
-    text-align: justify;
+#profile p {
+  margin: 20px;
+  color: #777;
+  font-size: 14px;
+  line-height: 1.75;
+  text-align: justify;
+}
+/* project section */
+#project {
+  background: lightgray;
+  min-height: 1000px;
+}
+#project h2 {
+  margin: 20px;
+  text-align: center;
+}
+#project img {
+  width: 60%;
+}
+#project a {
+  position: relative;
+  padding: 33%;
+  bottom: 10px;
+  margin: 0 auto;
+}
+
+.project {
+  background-color: #fff;
+  margin: 10px;
+  min-height: 250px;
 }
 
 /* Project section */
@@ -60,50 +109,119 @@ body{
 }
 /* responsive media queries */
 /* For mobile phones: */
-[class*="col-"] {
+[class*='col-'] {
   width: 100%;
 }
 
 @media only screen and (min-width: 600px) {
-/*larger than 601px - 768px*/
+  #profile p {
+    font-size: 1.7em;
+  }
+  #profile img {
+    width: 45%;
+    margin: 0 auto;
+  }
+  .title {
+    font-size: 2.5rem;
+  }
   /* For tablets: */
-  .col-s-1 {width: 8.33%;}
-  .col-s-2 {width: 16.66%;}
-  .col-s-3 {width: 25%;}
-  .col-s-4 {width: 33.33%;}
-  .col-s-5 {width: 41.66%;}
-  .col-s-6 {width: 50%;}
-  .col-s-7 {width: 58.33%;}
-  .col-s-8 {width: 66.66%;}
-  .col-s-9 {width: 75%;}
-  .col-s-10 {width: 83.33%;}
-  .col-s-11 {width: 91.66%;}
-  .col-s-12 {width: 100%;}
-  #profile p{ font-size: 1.7em;}
-  #profile img {width: 40%; margin: 0 30%}
-  .title{font-size: 2.5em;}
-  .project h2, a{font-size: 2em;}
-  #projects{min-height: 1900px;}
-} 
-@media only screen and (min-width: 769px) {
-/*anything beyoud 769px*/
+
+
+  .col-s-1 {
+    width: 8.33%;
+  }
+  .col-s-2 {
+    width: 16.66%;
+  }
+  .col-s-3 {
+    width: 25%;
+  }
+  .col-s-4 {
+    width: 33.33%;
+  }
+  .col-s-5 {
+    width: 41.66%;
+  }
+  .col-s-6 {
+    width: 50%;
+  }
+  .col-s-7 {
+    width: 58.33%;
+  }
+  .col-s-8 {
+    width: 66.66%;
+  }
+  .col-s-9 {
+    width: 75%;
+  }
+  .col-s-10 {
+    width: 83.33%;
+  }
+  .col-s-11 {
+    width: 91.66%;
+  }
+  .col-s-12 {
+    width: 100%;
+  }
+}
+@media only screen and (min-width: 770px) {
   /* For desktop: */
-  .col-1 {width: 8.33%;}
-  .col-2 {width: 16.66%;}
-  .col-3 {width: 25%;}
-  .col-4 {width: 33.33%;}
-  .col-5 {width: 41.66%;}
-  .col-6 {width: 50%;}
-  .col-7 {width: 58.33%;}
-  .col-8 {width: 66.66%;}
-  .col-9 {width: 75%;}
-  .col-10 {width: 83.33%;}
-  .col-11 {width: 91.66%;}
-  .col-12 {width: 100%;}
-  .container{margin: 0px 150px;}
-  #profile img{width: 70%; margin: 0 15%;}
-  #profile p{font-size: 1.2em;}
-  .project img{min-height: 300px;}
-  .project h2, a { font-size: 1.3em;}
-  #projects{min-height: 600px;}
-}
\ No newline at end of file
+  .col-1 {
+    width: 8.33%;
+  }
+  .col-2 {
+    width: 16.66%;
+  }
+  .col-3 {
+    width: 25%;
+  }
+  .col-4 {
+    width: 33.33%;
+  }
+  .col-5 {
+    width: 41.66%;
+  }
+  .col-6 {
+    width: 50%;
+  }
+  .col-7 {
+    width: 58.33%;
+  }
+  .col-8 {
+    width: 66.66%;
+  }
+  .col-9 {
+    width: 75%;
+  }
+  .col-10 {
+    width: 83.33%;
+  }
+  .col-11 {
+    width: 91.66%;
+  }
+  .col-12 {
+    width: 100%;
+  }
+  .row {
+    justify-content: space-evenly;
+  }
+  .container {
+    margin: 0 15px;
+  }
+  #profile img {
+    width: 70%;
+    margin: 0 15%;
+  }
+  #profile p {
+    font-size: 1.2rem;
+  }
+  #project img {
+    min-height: 300px;
+  }
+  #project h2 a {
+    font-size: 1.2em;
+  }
+  #project {
+    min-height: 600px;
+  }
+}
diff --git a/index.html b/index.html
index 76d304e..49f48ad 100644
--- a/index.html
+++ b/index.html
@@ -1,57 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="css/style.css">
-    <title>Portfolio Page</title>
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
+  <body>
     <header></header>
-        <section id="profile">
-            <h1 class="title">Nandini Nayak</h1>
-            <div class="row container">
-                <div class="col-4 col-s-12">
-                    <img src="img/profile.jpg" alt="profile-pic">
-                </div>
-                <div class="col-8 col-s-12">
-                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo beatae dolores eveniet, ducimus exercitationem velit dolore eius quis incidunt aut minima, porro consequatur fugit, similique ratione tempore distinctio! Animi, earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa possimus ducimus tempora odio veniam delectus, totam consequuntur tempore, itaque explicabo a dolorum accusantium ullam placeat reprehenderit, quo reiciendis porro necessitatibus!</p>
-                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id ipsa vel deleniti sit? Magni facilis excepturi molestias rerum aliquid. Alias facere voluptas officiis sint veniam dolorum veritatis cupiditate autem iste.</p>
-                </div>
-            </div>
-        </section>
-        <section id="projects">
-            <h1 class="title">PROJECTS</h1>
-            <div class="row container">
-                <div class="col-4 col-s-12">
-                    <div class="project">
-                        <img src="img/iot.jpeg" alt="iot">
-                        <h2>Internet Of Things</h2>
-                        <a href="/">Show More</a>
-                    </div>
-                </div>
-                <div class="col-4 col-s-12">
-                    <div class="project">
-                        <img src="img/vehicle_diagnostics.jpeg" alt="iot">
-                        <h2>vehicle diagnostics</h2>
-                        <a href="/">Show More</a>
-                    </div>
-                </div>
-                <div class="col-4 col-s-12">
-                    <div class="project">
-                        <img src="img/web-development.jpeg" alt="iot">
-                        <h2>Web development</h2>
-                        <a href="/">Show More</a>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section id="skills"></section>
-    <footer>
-        <div class="contact">
-            
+
+    <section id="profile">
+      <h1 class="title">saman fayazi</h1>
+      <div class="row container">
+        <div class="col-4">
+          <img src="./img/profile.jpg" alt="" />
+        </div>
+        <div class="col-8">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. A sequi
+            aliquam temporibus, modi nobis natus. Eos maiores similique ducimus
+            voluptatibus.
+          </p>
+          <p>
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam
+            aut incidunt veritatis aspernatur assumenda ipsa! Sequi officiis
+            nemo adipisci aspernatur deserunt quod sed amet accusantium! Rem
+            velit iusto ex repudiandae.
+          </p>
+        </div>
+      </div>
+    </section>
+    <section id="project">
+      <h1 class="title">Project</h1>
+      <div class="row container">
+        <div class="col-4 col-s-12">
+          <div class="project">
+            <!-- first project -->
+            <img src="./img/iot.jpeg" alt="" />
+            <h2>Internet of things</h2>
+            <a href="/">Show more</a>
+            <!-- end of first project -->
+          </div>
+        <div class="col-4 col-s-12">
+          <div class="project">
+            <!-- first project -->
+            <img src="./img/vehicle_diagnostics.jpeg" alt="" />
+            <h2>Vehicle and diagnostic</h2>
+            <a href="/">Show more</a>
+            <!-- end of first project -->
+          </div>
         </div>
+        <div class="col-4 col-s-12">
+          <div class="project">
+            <!-- first project -->
+            <img src="./img/web-development.jpeg" alt="" />
+            <h2>web development</h2>
+            <a href="/">Show more</a>
+            <!-- end of first project -->
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="skills"></section>
+    <footer>
+      <div class="contacts"></div>
     </footer>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>