diff --git a/index.html b/index.html
index 9e34deb..5606633 100644
--- a/index.html
+++ b/index.html
@@ -4,41 +4,42 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>My Name - Homepage</title>
+  <title>Evan and Hameed- Homepage</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
   <header>
-    <nav>
-      <div>
+    <nav class="nav-bar">
+      <div class="logo-container">
         <a href="#">
-          <img src="./imgs/logo.png" alt="logo">
+          <img src="./imgs/logo.png" alt="logo" class="recoded-logo">
         </a>
       </div>
-      <ul>
+      <ul class="nav-ul">
         <li>
-          <a href="#">About</a>
+          <a href="#about">About</a>
         </li>
         <li>
-          <a href="#">Skills</a>
+          <a href="#skills">Skills</a>
         </li>
         <li>
-          <a href="#">Projects</a>
+          <a href="#projects">Projects</a>
         </li>
         <li>
-          <a href="#">Contact Me</a>
+          <a href="#contact">Contact Me</a>
         </li>
       </ul>
     </nav>
   </header>
   <main>
-    <section>
-      <h1>My Name</h1>
-      <h2>My Title</h2>
-      <h3>Where I am From</h3>
+    <section class="intro-section">
+      <h1>Evan Hameed & Hameed al naser</h1>
+      <h2> web developers</h2>
+      <h3>based in Irbil</h3>
     </section>
-    <section>
-      <div>
+    <section class="about-wrapper" id="about">
+      <div class="about-container">
         <h2>
           About me
         </h2>
@@ -53,13 +54,13 @@ <h2>
         </p>
       </div>
     </section>
-    <section>
+    <section class="skill-section" id="skills">
       <h2>My Skills</h2>
-      <div>
-        <ul>
+      <div class="skill-ul-container">
+        <ul class="skill-ul">
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -67,8 +68,8 @@ <h3>Skill Name</h3>
             </div>
           </li>
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -76,8 +77,8 @@ <h3>Skill Name</h3>
             </div>
           </li>
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -85,8 +86,8 @@ <h3>Skill Name</h3>
             </div>
           </li>
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -94,8 +95,8 @@ <h3>Skill Name</h3>
             </div>
           </li>
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -103,8 +104,8 @@ <h3>Skill Name</h3>
             </div>
           </li>
           <li>
-            <div>
-              <div><img src="./imgs/skill.png" alt="icon"></div>
+            <div class="skill-card">
+              <div><img src="./imgs/skill.png" alt="icon" class="skill-logo"></div>
               <h3>Skill Name</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, laboriosam! Odit possimus sit quod,
                 ipsum voluptatibus voluptatum incidunt quas cum numquam hic, deserunt voluptatem modi eum quisquam
@@ -114,21 +115,47 @@ <h3>Skill Name</h3>
         </ul>
       </div>
     </section>
-    <section>
+    <section class="grid-wrapper">
       <!-- Put your divs here as required for that section grid style-->
+      
+      <section class="grid-container">
+        <div class="abcde">
+            <div class="ab">
+                    <div class="a">a</div>
+                    <div class="b">b</div>
+            </div>
+            <div class="cde">
+                    <div class="cd">
+                            <div class="c">c</div>
+                            <div class="d">d</div>
+                    </div>
+                    <div class="e">e</div>
+            </div>
+        </div>
+        <div class="fgh"> 
+                <div class="f">f</div>
+                <div class="gh">
+                        <div class="g">g</div>
+                        <div class="h">h</div>
+                </div>
+        </div>
+        
+
+        
+    </section>
     </section>
-    <section>
+    <section class="exp-section" id="projects">
       <h2>My Experience</h2>
-      <div>
-        <div>
-          <div>
-            <img src="./imgs/code.png" alt="icon">
+      <div class="row-container">
+        <div class="exp-row">
+          <div class="code-img-container">
+            <img src="./imgs/code.png" alt="icon" class="code-img">
           </div>
-          <div>
+          <div class="row-title">
             <h3>Job Title</h3>
             <h3>Company Name</h3>
           </div>
-          <div>
+          <div class="row-description">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus
               dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro,
               provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea
@@ -136,15 +163,15 @@ <h3>Company Name</h3>
               ab? Amet unde molestiae sit.</p>
           </div>
         </div>
-        <div>
-          <div>
-            <img src="./imgs/code.png" alt="icon">
+        <div class="exp-row">
+          <div class="code-img-container">
+            <img src="./imgs/code.png" alt="icon" class="code-img">
           </div>
-          <div>
+          <div class="row-title">
             <h3>Job Title</h3>
             <h3>Company Name</h3>
           </div>
-          <div>
+          <div class="row-description">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus
               dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro,
               provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea
@@ -152,15 +179,15 @@ <h3>Company Name</h3>
               ab? Amet unde molestiae sit.</p>
           </div>
         </div>
-        <div>
-          <div>
-            <img src="./imgs/code.png" alt="icon">
+        <div class="exp-row">
+          <div class="code-img-container">
+            <img src="./imgs/code.png" alt="icon" class="code-img">
           </div>
-          <div>
+          <div class="row-title">
             <h3>Job Title</h3>
             <h3>Company Name</h3>
           </div>
-          <div>
+          <div class="row-description">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore dolores quas officiis debitis natus
               dicta animi, doloremque harum asperiores nostrum voluptatum delectus, aliquam iste nesciunt porro,
               provident aliquid impedit! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam obcaecati ea
@@ -171,22 +198,22 @@ <h3>Company Name</h3>
       </div>
     </section>
   </main>
-  <footer>
-    <section>
+  <footer class="footer" id="contact">
+    <section class="get-in-touch-section">
       <h2>Get in Touch</h2>
-      <form>
-        <input type="text">
-        <input type="text">
-        <textarea></textarea>
+      <form class="contact-form">
+        <input type="text" placeholder="Name">
+        <input type="text" placeholder="youremail@example.com">
+        <textarea placeholder="Write a message"></textarea>
         <input type="submit">
       </form>
     </section>
-    <section>
-      <div>
-        <img src="./imgs/social.png" alt="social">
-        <img src="./imgs/social.png" alt="social">
-        <img src="./imgs/social.png" alt="social">
-        <img src="./imgs/social.png" alt="social">
+    <section class="social-media-section">
+      <div class="social-logo-container">
+        <img src="./imgs/social.png" alt="social" class="social-logo">
+        <img src="./imgs/social.png" alt="social" class="social-logo">
+        <img src="./imgs/social.png" alt="social" class="social-logo">
+        <img src="./imgs/social.png" alt="social" class="social-logo">
       </div>
     </section>
   </footer>
diff --git a/style.css b/style.css
index e69de29..7df433d 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,384 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    color: rgb(85, 85, 85);
+    text-decoration: none;
+    list-style-type: none;
+    font-family: sans-serif;
+}
+main{
+
+    display: flex;
+    flex-direction: column;
+}
+img{
+
+    width: 100%;
+    max-width: 100%;
+}
+.logo-container{
+
+    width: 5%;
+    margin: 25px;
+}
+.nav-bar{
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rosybrown;
+    min-height: 8vh;
+  
+  
+}
+.nav-ul{
+    color: white;
+    display: flex;
+    justify-content: space-around;
+width: 30%;
+
+margin: 25px;
+
+
+}
+.nav-ul a{
+
+    color: rgb(230, 220, 220);
+    font-size: 17px;
+    transition: font-size 0.5s;
+   
+} .nav-ul a:hover{
+    font-size: 22px;
+        color: rgba(0, 0, 0, 0.322);
+    }
+.intro-section{
+
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    
+}
+.about-wrapper{
+
+  
+    height: 100vh;
+    background-color: sandybrown;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.about-container{
+    
+        width: 60vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: rgb(197, 141, 91);
+    
+    padding: 20px;
+}
+.about-container h2{
+        margin: 20px;
+    font-size: 3em;
+    color: rgb(236, 236, 236);
+}
+.about-container p {
+    color: white;
+    
+}
+/* skill section */
+/* skill section */
+/* skill section */
+.skill-logo{
+
+    width: 25px;
+    height: 25px;
+}
+
+.skill-section{
+
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: rosybrown;
+    justify-content: space-around;;
+
+
+}
+.skill-card{
+
+    border: 3px solid rgb(82, 82, 82);
+    width: 300px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 10px;
+    border-radius: 8px;
+}
+.skill-ul li {
+display: inline-block;
+flex-basis: 400px;
+
+   
+   margin: 10px;
+   display: flex;
+   justify-content: center;
+   align-items: center; 
+}
+.skill-ul{
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.skill-ul-container{
+
+
+}
+ /* The experience section */
+ /* The experience section */
+ /* The experience section */
+ /* The experience section */
+ .code-img{
+
+    width: 60px;
+    height: 60px;
+ }
+ .exp-section{
+
+    min-height: 100vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    background-color: sandybrown;
+    
+ }
+ .exp-section h2{
+     margin: 30px;
+ }
+ .exp-row{
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    margin: 20px;
+    border-radius: 50px;
+    border: 4px solid rgb(197, 141, 91);
+    padding: 15px;
+   
+ }
+ .row-container{
+
+    min-height: 60vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    width: 95%;
+    padding: 60px;
+
+ }
+ /* STYLING ROW CHILDREN */
+ /* STYLING ROW CHILDREN */
+ /* STYLING ROW CHILDREN */
+ .code-img-container{
+    width: 30%;
+ 
+ }
+ .row-title{
+     width: 30%;
+   
+
+ }
+ .row-description{
+width: 40%;
+
+text-align: justify;
+ }
+ /* STYLING FOOTER SECTION*/
+ /* STYLING FOOTER SECTION*/
+ /* STYLING FOOTER SECTION*/
+ /* STYLING FOOTER SECTION*/
+
+ .social-logo{
+
+    width: 50px;
+    height: 50px;
+ }
+ .footer{
+
+    min-height: 70vh;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    background-color: rgb(110, 110, 110);
+ }
+ .get-in-touch-section{
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+   
+    min-height: 30vh;
+    width: 30%;
+ }
+ .get-in-touch-section h2{
+    color: rgb(230, 230, 230);
+ }
+ .contact-form{
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    
+ }
+ .contact-form input[type="text"]{
+
+    width: 400px;
+    height: 30px;
+    margin: 10px;
+    border-radius: 10px;
+    border: 3px solid rgb(85, 84, 84);
+    text-align: center;
+ }
+ .contact-form textarea{
+    width: 400px;
+    height: 200px;
+    border-radius: 10px;
+    border: 3px solid rgb(85, 84, 84);
+    text-align: center;
+    padding:20px;
+ }
+ .contact-form input[type="submit"]{
+    font-size: 1em;
+   display: inline-block;
+   width: 400px;
+   margin: 10px;
+   height: 30px;
+   border-radius: 10px;
+   -webkit-appearance: none;
+   color: white;
+ background-color: rgb(197, 141, 91);
+  text-transform: uppercase;
+  border: 3px solid rgb(85, 84, 84);
+ }  
+ .social-media-section{
+
+    width: 30%;
+ }
+ .social-logo-container{
+
+    display: flex;
+    justify-content: space-around;
+ }
+ /* styling the grid section */
+ /* styling the grid section */
+ /* styling the grid section */
+ /* styling the grid section */
+
+.grid-wrapper{
+
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: rgb(173, 170, 170);
+}
+.grid-container{
+
+    background-color: rgb(199, 199, 199);
+    min-height: 80vh;
+    display: flex;
+    width: 80vw;
+    padding: 20px;
+  
+}
+.a,.b,.c,.d,.e,.f,.g,.h{
+    
+   
+    box-shadow: 0 0 0 10px white; /* All the borders by using the spread properties */
+
+    
+}
+.abcde{
+width: 60%;
+oyalblue;
+}
+.ab{
+   
+    height: 30%;
+    display: flex;
+}
+.a{
+    background-color: rgb(173, 170, 170);
+    flex-grow: 1;
+}
+.b{
+    background-color: rgb(173, 170, 170);    flex-grow: 2;
+}
+.cde{
+
+    height: 70%;
+    display: flex;
+}
+.cd{
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+.e{
+flex-grow: 4;
+background-color: rgb(173, 170, 170);}
+.c{
+    background-color: rgb(173, 170, 170);    flex-grow: 1;
+}
+.d{
+    background-color: rgb(173, 170, 170);
+    flex-grow: 1;
+}
+.fgh{
+width: 40%;
+display: flex;
+
+}
+.f{
+    background-color: rgb(173, 170, 170);
+    flex-grow: 1;
+}
+.gh{
+
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+.g{
+    background-color: rgb(173, 170, 170);
+    flex-grow: 3;
+}
+.h{
+    flex-grow: 1;
+    background-color: rgb(173, 170, 170);
+}
+/* media query*/
+/* media query*/
+/* media query*/
+
+@media screen and (max-width:900px){
+
+.nav-ul{
+
+    width: 60%;
+}
+}
\ No newline at end of file
