diff --git a/.DS_Store b/.DS_Store
index 80a9037..a5742aa 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/index.html b/index.html
index 64867a7..1660f86 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,118 @@
-<!--Paste your html code here-->
+<html lang="en">
+  <HEAD>
+    <meta charset="UTF-8">
+    <meta name="description"content="Fatuma Restaurant">
+    <meta name="keywords" content="HTML &CSS Project">
+    <meta name="author" content="Hodan">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css"/>
+    <title>
+    Fatuma Restaurant
+     </TITLE>
+  </HEAD>  
+  <body>
+    <header>
+        <div class="wrapper">
+          <h4>
+            Fatuma Restaurant
+          </h4>
+          <nav>
+            <a href="#"> About </a>
+            <a href="#"> Menu </a>
+            <a href="#"> Catering </a>
+            <a href="#"> Contact </a>
+          </nav>
+ 
+         </div>
+    </header>
+      <div class="first">
+          <div class="header">
+             <h1>
+               TASTE THE DIFFERENCE  
+            </h1> 
+             <H3>
+               LOCAL. FRESH & DELICIOUS 
+             </H3> 
+        </div>
+          <img  class="img" src="assets/images/hero_image.jpg"/>
+      </div>
+        <br>
+    <SECTION>
+       <div class="para1">
+         <H4>
+           ABOUT FATUMA RESTAURANT
+        </H4> 
+       <P>
+            Lorem Ipsum is simply dummy text of the      printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+       </P>
+     </div>
+   </SECTION>
+     <div class="boxes">
+           <div class="box">
+              <img src="assets/images/pasta_banana.jpg">
+           </div>
+               
+             <p>
+            It was popularised in the 1960s with the release
+             </p>
+           <div class="box">
+            <img src="assets/images/rice_banana.jpg">
+           </div> 
+              <p>
+                scrambled it to make a type specimen book.
+              </p>
+           <div class="box">
+            <img src="assets/images/catering.jpg">
+           </div>
+               <p>
+                Duis consectetur sit amet metus quis congue.
+               </p>
+       </div>
+    <form>
+         <div class="form1">
+              <h4>
+                CONTACT
+              </h4>
+             <div class=" name">
+                <input type="text" placeholder="Name">
+             </div>
+             <br>
+             <div class="email">
+              <input type="text" placeholder="Email">
+             </div>
+             <br>
+             <div class="message">
+              <input type="text" placeholder="Message"> <br><br>
+                <button type="submit">Submit</button>
+            </div>
+          
+
+         </div>
+
+         
+    </form>
+ <footer>
+         
+        <div class="container">
+          <h4>
+            Fatuma Restaurant
+          </h4>
+          <nav>
+            <a href="#"> About </a>
+            <a href="#"> Menu </a>
+            <a href="#"> Catering </a>
+            <a href="#"> Contact </a>
+          </nav>
+         </div>
+            <br>
+           <div class="a">
+            <p>
+              Copyright Fatuma Restaurant 2020
+            </p>
+           </div>
+          <h5>
+            
+          </h5>
+    </footer>
+</body>
+</html>
diff --git a/styles.css b/styles.css
index 945c1b5..9fcb45a 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1,70 @@
-/* Paste your css code here */
+body{ font-family: Arial, Helvetica, sans-serif; 
+      margin:0;}
+    .wrapper{ display: flex;
+      justify-content: space-around; 
+      color:white;}
+    .wrapper nav a{ text-decoration:none; 
+      color:white;}
+    nav{ margin-top:18px;
+      margin-left: 350px;}
+    header{ background: #454f6f}
+    .first{ display:flex;
+      background-color: #e6834c;
+      padding: 18px;}
+   .first img{ width:30%;
+      padding:18px 25px;
+      border-radius: 60%;}
+   .header{color:white;
+      padding: 10px 5px;
+      margin: 0px;} 
+   .para1{ text-align:center;
+       background-color:#f2f3f4;
+       padding:25 28px;}
+   .para1 p{ text-align: center;text-align: justify;
+       margin:0px 60px;}
+    .boxes{ display:flex; 
+       justify-content: space-around;
+       padding:50px;}
+    .box{ width: 30%;
+       background-color: white;
+       text-align: center;
+       margin-bottom: 45px;}
+    .box img{width:100%;
+       height:auto;
+       margin-top:20px;
+       border-radius: 5px;}
+    .form1{text-align: center;width:300px;border:none;
+       border-radius: 5px;
+       padding:0px 10px;
+       background-color:#b6bdc5;
+       color:black;}
+    .form1 input:focus {outline: none;}
+    .form1 button:hover {background-color: #48617d;
+      cursor:pointer;}
+    .form1 button{background-color:#e6834c;
+      padding: 5 51px;
+      border-radius: 3px;}
+    .container{display: flex;
+      justify-content: space-around;}
+    .conatiner{ display: block-inline;} 
+    .container{ background-color:#454f6f; padding:10px;
+      color:white}
+    .container nav a{text-decoration:none; color:white}
+    div.a{text-align: center; background-color:#e6834c;
+      padding:1px;}
+
+ @media (max-width: 540px) {
+  .wrapper{ flex-direction: column;}
+  .first{ flex-direction: column;}
+
+  .nav a {flex-direction: column; 
+         padding:12 20px;
+         color:rgb(73, 62, 231);}
+  .box img { width:100%;
+         margin-bottom: 15px;;}
+  .form{ width:100%;
+       padding:10px}
+
+ }
+    
+    
