From 850fb76438fc609233a485e13852393d79010535 Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:41:43 +0300
Subject: [PATCH 1/6] styles.css

---
 styles.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
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;
+      }

From 2777a2cfe277db13e3b3673d9e3cc35b310528eb Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:45:08 +0300
Subject: [PATCH 2/6] index.html

---
 index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)

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>

From 0307cbc75480fad5c6235fcdefbba45813704b95 Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:52:21 +0300
Subject: [PATCH 3/6] index.html

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 44f9f05..1cb04c6 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@ <h1 class="local">taste the difference</h1>
 <!-- header (add color)-->
 <div class="content">
     <h3 class="first-h3">About Fatuma Restaurant</h3>
-
+<img src="./hero_image.jpg" alt="hero_image">
 <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,
@@ -44,19 +44,19 @@ <h3 class="first-h3">About Fatuma Restaurant</h3>
 <!-- content -->
     <section>
       <div>
-<img src=" " alt="Pasta with Banana">
+<img src="./pasta_banana.jpg" alt="Pasta with Banana">
 <p>
 It was popularised in the 1960s with the release 
         </p>
 </div>
       <div>
-<img src=" " alt="Catering">
+<img src="./catering.jpg" alt="Catering">
 <p>
 scrambled it to make a type specimen book
         </p>
 </div>
       <div>
-<img src=" " alt="Rice with Banana">
+<img src="./rice_banaba" alt="Rice with Banana">
 <p>
  It has survived not only five centuries but also 
         </p>

From d16f0418578dcba049c224d4f5bdee37633affbe Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 5 Dec 2023 05:53:31 -0800
Subject: [PATCH 4/6] styles.css

---
 styles.css | 290 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 162 insertions(+), 128 deletions(-)

diff --git a/styles.css b/styles.css
index dd3caee..7ed443f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,133 +1,167 @@
-/* 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;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+body{
+    max-width: 75rem;
+    margin: 0 auto;
+    font-family: sans-serif;
+}
+* {
+    box-sizing: border-box;
+}
+h2 {
+    margin-top: 1rem;
+    font-size: large;
+}
+nav{
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    
+}
+nav a {
+    color: black;
+    text-decoration: none;
+    padding: 0.5rem 0;
+    background-color: #a8a5a5;
+    margin: 0.1rem 0;
+}
+ 
+header{
+    background-color: #d6dbdb;
+    padding: 4rem;
+    margin: 1rem 0 0.4rem;
+    text-align: center;
+}
+.con1 {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+.con2 {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+.con3 {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+h2{
+    text-align: center;
 }
 
-h3 {
-  text-transform: uppercase;
+.img1{
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0rem;
+    text-align: center; 
+}
+.img2{
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0rem;  
+    text-align: center;
+}
+.img3{
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0rem;
+    text-align: center; 
+}
+.img4{
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0rem;
+    text-align: center; 
+}
+.img{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+.sub {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+.act {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+.info {
+    background-color: #d5dada;
+    padding: 3rem;
+    margin: 0.4rem 0;
+    text-align: center;
+}
+.info p {
+    font-size: large;
+}
+footer {
+    background-color: #d5dada;
+    padding: 1rem;
+    margin-top: -0.6rem;
+    text-align: center;
+}
+footer p {
+    font-size: small;
 }
 
-.main {
-  background-color: #e6834c;
-  height: 18.75rem;
-  width: 100%;
-  text-align: center;
-  padding-top: 3rem;
-  color: white;
-  text-transform: uppercase;
+@media screen and (min-width: 31.25rem) {
+    nav {
+        flex-direction: row;
+        justify-content: space-around;
+    }
+    nav a {
+        background-color: white;
+    }
 }
-
-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;
-      }

From 3ebbcc5ec029a97d182a7dca00257f6c39a0d3ee Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 5 Dec 2023 05:54:13 -0800
Subject: [PATCH 5/6] index.html

---
 index.html | 146 ++++++++++++++++++-----------------------------------
 1 file changed, 49 insertions(+), 97 deletions(-)

diff --git a/index.html b/index.html
index 1cb04c6..188c59e 100644
--- a/index.html
+++ b/index.html
@@ -1,98 +1,50 @@
-<!--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>
-<img src="./hero_image.jpg" alt="hero_image">
-<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="./pasta_banana.jpg" alt="Pasta with Banana">
-<p>
-It was popularised in the 1960s with the release 
-        </p>
-</div>
-      <div>
-<img src="./catering.jpg" alt="Catering">
-<p>
-scrambled it to make a type specimen book
-        </p>
-</div>
-      <div>
-<img src="./rice_banaba" 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>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Web Responsive</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <h2>Web Responsive</h2>
+        <section id="navbar">
+        <nav>
+            <!--Logo is here-->
+            <a href="">Home</a>
+            <a href="">Service</a>
+            <a href="">About</a>
+            <a href="">Contact</a>
+        </nav>
+        </section>
+        <header class="hero">
+            <p>HERO SECTION</p>
+        </header>
+        <section class="con">
+            <div class="con1">CONTENT 1</div>
+            <div class="con2">CONTENT 2</div>
+            <div class="con3">CONTENT 3</div>
+        </section>
+        <h2>Gallery</h2>
+        <section class="img">
+            <div class="img1">IMG 1</div>
+            <div class="img2">IMG 2</div>
+            <div class="img3">IMG 3</div>
+            <div class="img4">IMG 4</div>
+        </section>
+        <div class="sub">
+            <p>SUBSCRIBE TO </p>
+            <p>NEWSLETTER FORM</p>
+        </div>
+        <div class="act">
+            <p>ALL TO ACTION</p>
+        </div>
+        <div  class="info">
+            <p>Contact info</p>
+        </div>
+        <footer>
+            
+            <p>Coryright info</p>
+        </footer>
+    </body>
+</html>

From ec92324cc67e5c85ca03f82b8d2e9d7b40271bf0 Mon Sep 17 00:00:00 2001
From: Suleban <144885910+Suleban@users.noreply.github.com>
Date: Tue, 5 Dec 2023 06:38:55 -0800
Subject: [PATCH 6/6] Add files via upload

---
 index.html | 146 ++++++++++++++++++---------
 styles.css | 290 +++++++++++++++++++++++------------------------------
 2 files changed, 225 insertions(+), 211 deletions(-)

diff --git a/index.html b/index.html
index 188c59e..44f9f05 100644
--- a/index.html
+++ b/index.html
@@ -1,50 +1,98 @@
+<!--Paste your html code here-->
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Web Responsive</title>
-        <link rel="stylesheet" href="styles.css">
-    </head>
-    <body>
-        <h2>Web Responsive</h2>
-        <section id="navbar">
-        <nav>
-            <!--Logo is here-->
-            <a href="">Home</a>
-            <a href="">Service</a>
-            <a href="">About</a>
-            <a href="">Contact</a>
-        </nav>
-        </section>
-        <header class="hero">
-            <p>HERO SECTION</p>
-        </header>
-        <section class="con">
-            <div class="con1">CONTENT 1</div>
-            <div class="con2">CONTENT 2</div>
-            <div class="con3">CONTENT 3</div>
-        </section>
-        <h2>Gallery</h2>
-        <section class="img">
-            <div class="img1">IMG 1</div>
-            <div class="img2">IMG 2</div>
-            <div class="img3">IMG 3</div>
-            <div class="img4">IMG 4</div>
-        </section>
-        <div class="sub">
-            <p>SUBSCRIBE TO </p>
-            <p>NEWSLETTER FORM</p>
-        </div>
-        <div class="act">
-            <p>ALL TO ACTION</p>
-        </div>
-        <div  class="info">
-            <p>Contact info</p>
-        </div>
-        <footer>
-            
-            <p>Coryright info</p>
-        </footer>
-    </body>
-</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 7ed443f..dd3caee 100644
--- a/styles.css
+++ b/styles.css
@@ -1,167 +1,133 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-body{
-    max-width: 75rem;
-    margin: 0 auto;
-    font-family: sans-serif;
-}
-* {
-    box-sizing: border-box;
-}
-h2 {
-    margin-top: 1rem;
-    font-size: large;
-}
-nav{
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    
-}
-nav a {
-    color: black;
-    text-decoration: none;
-    padding: 0.5rem 0;
-    background-color: #a8a5a5;
-    margin: 0.1rem 0;
-}
- 
-header{
-    background-color: #d6dbdb;
-    padding: 4rem;
-    margin: 1rem 0 0.4rem;
-    text-align: center;
-}
-.con1 {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-.con2 {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-.con3 {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-h2{
-    text-align: center;
+/* 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;
 }
 
-.img1{
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0rem;
-    text-align: center; 
-}
-.img2{
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0rem;  
-    text-align: center;
-}
-.img3{
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0rem;
-    text-align: center; 
-}
-.img4{
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0rem;
-    text-align: center; 
-}
-.img{
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-.sub {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-.act {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-.info {
-    background-color: #d5dada;
-    padding: 3rem;
-    margin: 0.4rem 0;
-    text-align: center;
-}
-.info p {
-    font-size: large;
-}
-footer {
-    background-color: #d5dada;
-    padding: 1rem;
-    margin-top: -0.6rem;
-    text-align: center;
-}
-footer p {
-    font-size: small;
+h3 {
+  text-transform: uppercase;
 }
 
-@media screen and (min-width: 31.25rem) {
-    nav {
-        flex-direction: row;
-        justify-content: space-around;
-    }
-    nav a {
-        background-color: white;
-    }
+.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;
+      }
