diff --git a/index.html b/index.html
index 64867a7..8e74594 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,95 @@
 <!--Paste your html code here-->
+<!-- Markup the content below with tags and attributes such that it can be styled in CSS-->
+<!DOCTYPE html>
+<html lang="en">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<head>
+  <link rel="stylesheet" href="styles.css">
+<!-- Link your CSS stylesheet -->
+    
+</head>
+<body>
+
+<!-- company name -->
+
+<div class="Fatuma">
+  
+<p> Fatuma Restaurant</p> 
+<!-- Navigation -->
+  <nav>
+      <ul>
+        <li>About</li>
+           <li>Menu</li>
+           <li>Catering</li>
+        <li>Contact</li>
+    </ul>
+ </nav>
+
+  </div>
+
+<!-- Hero Area -->
+<div class="Hero">
+   <div class="hero-text">
+      <h1> TASTE THE DIFFERENCE</h1>
+       <h2> Local. Fresh & Delicious</h2>
+  </div>
+  
+  <img src="assets\images\hero_image.jpg">
+</div>
+
+<!-- header -->
+<div class="sec1">
+  <h2> About Fatuma Restaurant </h2>
+
+<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>
+<!-- content -->
+<div class="total"> 
+  <div class="past_banana">
+      <img src="assets\images\pasta_banana.jpg">
+     <p>it was popularised in the 1960s with the release </p>
+</div>
+
+ <div class="rice_banana">
+       <img src="assets\images\rice_banana.jpg">
+   <div> scrambled  it make a type specimen book</div>
+</div>
+ 
+<div class="catering">
+    <img src="assets\images\catering.jpg">
+    <p>  duis consectetur sit amet metus .</p>
+  </div>
+</div>
+
+<div class="contact">
+<h2>contact</h2>
+<form>
+  <input type="text" class="name" placeholder="name">
+  <input type="text" class="email" placeholder="email">
+  <input type="text" class="email" placeholder="message">
+
+  <button>Submit</button>
+
+</form>
+
+</div>
+
+<!-- footer -->
+  
+<footer>
+  <div class="sec4">
+    <p> Fatuma Restaurant</p>
+    <nav>
+      <ol>
+        <li>About</li>
+           <li>Menu</li>
+           <li> Catering</li>
+        <li>Contact</li>
+      </ol>
+     </nav>
+  </div>
+  <div class="sec5">
+ <p2> Copyright Fatuma Restaurant 2020</p2>
+</footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 945c1b5..c721bc6 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1,201 @@
 /* Paste your css code here */
+
+.Fatuma{
+    background-color: #454f6f;
+    padding: 20px;
+    display: flex;
+    color: white; 
+    align-items: center;
+
+   }
+
+
+ 
+   
+   
+   nav{
+    width: 100%;
+   }
+   
+
+
+   ul{ 
+     
+    display: flex;
+    width: 60%;
+    justify-content: space-around;
+    margin: auto;
+   
+
+
+}
+
+
+
+   li{
+    text-decoration: none;
+    list-style: none;
+   }
+   
+   
+   .Hero{
+   
+       background-color : #974f0c;
+       margin: top 5rem;
+       margin-bottom: 4rem;
+       text-align: center;
+       padding-top: 3rem;
+       padding-bottom: 1.5rem;
+       display: flex;
+       align-items: center;
+       justify-content: space-around;
+   color: white;
+   }
+
+   
+
+.Hero img{
+
+    border-radius: 100%;
+    height: 50%;
+    width: 50%;
+}
+
+.sec1{
+    background-color: #f3f2f2;
+    padding: 2rem;
+  width: 95%;
+  margin:auto; 
+  text-align: center;
+}
+
+.sec1 p{
+text-align: justify;
+padding: 1rem;
+line-height: 21px;
+}
+
+
+
+ .total{
+    display: flex;
+    margin-top: 3rem;
+    width: 100%;
+  
+    
+ }  
+   
+
+
+
+.rice_banana{
+   margin: 0 2rem;
+}
+
+.past_banana img{
+    width: 100%;
+    border-radius: 5px;
+}
+
+.rice_banana img{
+    width: 100%;
+    border-radius: 5px;
+}
+   
+   
+.catering img{
+    width: 100%;
+    border-radius: 5px;
+}
+
+
+.contact{
+    background-color: #f3f2f2;
+}
+
+
+.contact h2{
+    text-align: center;
+}
+
+
+
+form{
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    margin: auto;
+
+}
+
+
+form input{
+    padding: 0.5rem;
+    margin: 1rem;
+    border-radius: 2px;
+    border: none;
+
+
+}
+
+
+
+
+
+
+form button{
+    background-color: #ac5d13 ;
+    color: white;
+    border: none;
+    padding: .5rem;
+    margin: 1rem;
+    border-radius: 2px;
+}
+
+
+.sec4{
+display: flex;
+color: white;
+background-color: #454f6f;
+width: 100%;
+justify-content: center;
+}
+
+ol{
+    display: flex;
+    width: 80%;
+    justify-content: space-around;
+    margin-top: 2rem;
+    
+
+}
+.sec5{
+    text-align: center;
+    padding-top: 1rem;
+    background-color: #ac5d13 ;
+    padding-bottom: .3rem;
+    
+}
+
+/*     */
+ 
+
+@media (max-width: 400px){
+.Fatuma{
+    flex-direction: column
+}
+
+.Hero{
+    flex-direction: column;
+}
+
+.total{
+    flex-direction: column;
+}
+
+.sec4{
+    flex-direction: column;
+
+}
+
+}
\ No newline at end of file
