diff --git a/index.html b/index.html
index 64867a7..44f9f05 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,98 @@
 <!--Paste your html code here-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Fatuma Restaurant</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+   <header class="nav">
+<!-- company name -->
+      <label class="logo">
+Fatuma Restaurant
+      </label>
+<!-- Navigation (Add link) -->
+      <nav>
+     
+     <a class="active" href="#" >About</a>
+     <a href="#" >Menu</a>
+     <a href="#" >Catering</a>
+     <a href="#" >Contact</a>
+    
+      </nav>
+
+    </header>
+<div class="main">
+<h1 class="local">taste the difference</h1>
+<p class="local"> local. fresh & delicious</p>
+</div>
+<!-- header (add color)-->
+<div class="content">
+    <h3 class="first-h3">About Fatuma Restaurant</h3>
+
+<p class="first-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 -->
+    <section>
+      <div>
+<img src=" " alt="Pasta with Banana">
+<p>
+It was popularised in the 1960s with the release 
+        </p>
+</div>
+      <div>
+<img src=" " alt="Catering">
+<p>
+scrambled it to make a type specimen book
+        </p>
+</div>
+      <div>
+<img src=" " alt="Rice with Banana">
+<p>
+ It has survived not only five centuries but also 
+        </p>
+      </div>
+    </section>
+<div class="form">
+  <form action="">
+  <h1>Contact</h1>
+    <label for="name">Name</label>
+    <input type="text" id="name" name="name" placeholder="Name">
+
+    <label for="email">Email</label>
+    <input type="email" id="name" name="name" placeholder="Email">
+
+    <label for="message">Message</label>
+    <input type="text" name="message" placeholder="Message">
+
+  
+    <input type="submit" value="Submit">
+  </form>
+</div>
+
+<!-- footer -->
+  <footer class="footer">
+    <label class="logo">Fatuma Restaurant</label>
+
+      <nav class="foot">
+      
+     <a class="active" href="#" >About</a>
+     <a href="#" >Menu</a>
+     <a href="#" >Catering</a>
+     <a href="#" >Contact</a>
+    
+      </nav>
+<div class="copy">
+    <p>Copyright Fatuma Restaurant 2020</p>
+</div>
+  </footer>
+</body>
diff --git a/styles.css b/styles.css
index 945c1b5..dd3caee 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1,133 @@
 /* Paste your css code here */
+<style>
+*{ 
+   box-sizing: border-box; 
+   padding: 0; margin: 0; 
+   text-decoration: none; 
+}
+body {  
+   font-family: arial,arial black,arial bold;
+}
+.nav { 
+   background-color: #454f6f; 
+ }
+label.logo  { 
+    padding: 0 3.125rem; 
+   color: white; 
+   line-height: 5rem; 
+   font-weight: bold; 
+}
+nav {
+   float: right; 
+   margin-right: 2.5rem; 
+   transition: 3s; }
+ nav  {
+   display: inline-block;
+   line-height: 5rem;
+   margin: 0 0.313rem;
+}
+.nav nav a {
+  color: white;
+  font-size: 1rem;
+  padding:0.3rem;
+  text-decoration: none;
+}
+a:hover { 
+  background-color: #e6834c;
+}
+
+h3 {
+  text-transform: uppercase;
+}
+
+.main {
+  background-color: #e6834c;
+  height: 18.75rem;
+  width: 100%;
+  text-align: center;
+  padding-top: 3rem;
+  color: white;
+  text-transform: uppercase;
+}
+
+h1.local {
+  font-weight: bold;
+  font-size: 4rem;
+}
+p.local {
+  font-size: 2.8rem;
+}
+div.content {
+  text-align: center;
+  margin: 2.5rem;
+  background-color: #E8E8E8;
+}
+.first-h3 {
+  padding-top: 2rem;
+  padding-bottom: -2rem;
+}
+.first-p { 
+  text-align: justify; 
+  padding: 0 4rem 4rem 4rem; 
+         }
+section {
+     display: flex;
+     justify-content: space-evenly;
+}
+
+input[type=text], [type="email"] {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+input[type=submit] {
+  width: 100%;
+  background-color: #e6843a;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: #e6553a;
+}
+
+div.form {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 4rem;
+}
+h1 {
+  text-align: center;
+  font-size:2rem;
+}
+
+.footer { 
+  background-color: #454f6f;
+}
+
+.foot { 
+  float: right; 
+  padding-right: 2rem;
+}
+.foot { 
+  display: inline-block; 
+  line-height: 5.5rem;
+}
+.foot a {
+  color: white;
+  transition: 3s; 
+  text-decoration: none;
+} 
+.copy { 
+  background-color: #e6834c; 
+  text-align: center;
+      }
