diff --git a/index.html b/index.html
index 64867a7..dee5cf3 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Fatuma Restaurant</h1>
+
+      <!-- Navigation -->
+      <nav>
+        <a href="#">About</a>
+        <a href="#">Menu</a>
+        <a href="#">Catering</a>
+        <a href="#">Contact</a>
+      </nav>
+    </header>
+
+    <!-- Hero Area -->
+    <div class="taste">
+      <div class="textArea">
+        <h1>TASTE THE DIFFERENCE</h1>
+        <p>Local. Fresh. Delicius</p>
+        <button>Order Now</button>
+      </div>
+      <img
+        id="heroImage"
+        src="./assets/images/hero_image.jpg"
+        alt="hero image"
+      />
+    </div>
+
+    <div class="about">
+      <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 -->
+    <section>
+      <div class="inner">
+        <img src="./assets/images/rice_banana.jpg" alt="rice" />
+        <h3>Rice with Banana</h3>
+        <p>
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries, but also the leap into electronic.
+        </p>
+      </div>
+
+      <div class="inner">
+        <img src="./assets/images/pasta_banana.jpg" alt="pasta" />
+        <h3>Pasta with Banana</h3>
+        <p>
+          scrambled it to make a type specimen book. It has survived not only
+          five centuries. but also the leap into electronic.
+        </p>
+      </div>
+      <div class="inner">
+        <img src="./assets/images/catering.jpg" alt="pizza" />
+        <h3>Catering</h3>
+        <p>
+          Nullam quis odio sit amet arcu sagittis ullamcorper vel vel ex. Duis
+          consectetur sit amet metus quis congue.
+        </p>
+      </div>
+    </section>
+
+    <!-- contact -->
+    <div class="contact">
+      <h4>Contact</h4>
+      <form method="POST">
+        <input type="text" id="name" name="name" placeholder="Name" />
+        <input type="email" id="email" name="email" placeholder="Email" />
+        <textarea name="message" id="message" placeholder="Message"></textarea>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+
+    <!-- footer -->
+    <footer>
+      <div class="top">
+        <h1>Fatuma Restaurant</h1>
+        <nav>
+          <a href="#">About</a>
+          <a href="#">Menu</a>
+          <a href="#">Catering</a>
+          <a href="#">Contact</a>
+        </nav>
+      </div>
+      <div class="bottom">
+        <p>Copyright &copy; 2022 Fatuma Restaurant</p>
+      </div>
+    </footer>
+  </body>
+</html>
 <!--Paste your html code here-->
diff --git a/styles.css b/styles.css
index 945c1b5..1c4a7dd 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1,365 @@
 /* Paste your css code here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  margin: 0 auto;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  background-color: #454f6f;
+  color: #fff;
+  padding: 1.5rem;
+  text-align: center;
+  width: 100%;
+}
+
+header h1 {
+  font-size: 1.5rem;
+}
+
+header nav {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 1rem;
+}
+
+header nav a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+header nav a:hover {
+  color: #b9c9ff;
+}
+
+.taste {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: #e6834c;
+  gap: 1rem;
+  padding: 1.8rem 1rem;
+  width: 100%;
+  text-align: center;
+}
+
+.taste h1 {
+  font-size: 2.8rem;
+  color: #fff;
+}
+
+.taste p {
+  font-size: 1.5rem;
+  color: #fff;
+  padding: 1rem;
+}
+
+.taste button {
+  background-color: #454f6f;
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.taste button:hover {
+  background-color: #b9c9ff;
+  color: #454f6f;
+}
+
+#heroImage {
+  display: inline-block;
+  width: 320px;
+  border-radius: 100%;
+}
+
+.about {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f4ff;
+  gap: 1rem;
+  padding: 2rem;
+  margin: 1.5rem;
+  border-radius: 0.5rem;
+}
+
+.about h2 {
+  text-align: center;
+}
+
+.about p {
+  text-align: justify;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+section .inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1.8rem 1rem;
+  margin: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  background-color: #f5f5f5;
+}
+
+section .inner img {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+}
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f4ff;
+  gap: 1rem;
+  padding: 2rem;
+  margin: 1.5rem 0;
+}
+
+.contact h4 {
+  font-size: 1.2rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.contac form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+.contact form input,
+.contact form textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  outline: none;
+  margin-bottom: 1rem;
+}
+
+.contact form button {
+  background-color: #e6834c;
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.8rem;
+  cursor: pointer;
+  width: 100%;
+  transition: all 0.3s ease-in-out;
+}
+
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+footer .top {
+  background-color: #454f6f;
+  color: #fff;
+  padding: 1.5rem;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+footer .top h1 {
+  font-size: 1.5rem;
+}
+
+footer .top nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+footer .top nav a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1rem;
+}
+
+footer .top nav a:hover {
+  color: #b9c9ff;
+}
+
+footer .bottom {
+  background-color: #e6834c;
+  color: #000;
+  padding: 1rem;
+  text-align: center;
+  width: 100%;
+}
+
+/* TASK: Write Media query here, use 500px */
+@media screen and (max-width: 500px) {
+  header {
+    flex-direction: column;
+  }
+  .taste {
+    flex-direction: column;
+  }
+  section {
+    flex-direction: column;
+  }
+  footer .top {
+    flex-direction: column;
+  }
+  p {
+    font-size: 0.9rem;
+    text-align: center;
+    line-height: 1.5rem;
+  }
+}
+
+/* for tablet screens */
+@media screen and (max-width: 768px) and (min-width: 500px) {
+  header {
+    flex-direction: column;
+  }
+  .taste {
+    flex-direction: row;
+  }
+  section {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  footer .top {
+    flex-direction: column;
+  }
+  #heroImage {
+    min-width: 250px;
+    border-radius: 12px;
+  }
+}
+@media (min-width: 485px) and (max-width: 565px) {
+  .textArea h1 {
+    font-size: 1.7rem;
+  }
+  #heroImage {
+    min-width: 180px;
+  }
+}
+/* between mobile and watch */
+@media (min-width: 280px) and (max-width: 340px) {
+  #heroImage {
+    max-width: 240px;
+    border-radius: 12px;
+  }
+}
+/* Watch Screen Size */
+@media (max-width: 280px) {
+  header,
+  footer .top {
+    padding: 1rem 0rem;
+    justify-content: center;
+    align-items: center;
+    margin: 0%;
+  }
+  header h1,
+  footer .top h1 {
+    font-size: 1rem;
+  }
+  header nav,
+  footer .top nav {
+    padding: 0%;
+    gap: 0.4rem;
+    max-width: 150px;
+  }
+  header nav a,
+  footer .top nav a {
+    font-size: 0.7rem;
+  }
+  .textArea h1 {
+    font-size: 1.1rem;
+  }
+  .textArea p {
+    font-size: 0.8rem;
+  }
+  .textArea button {
+    max-width: 150px;
+    font-size: 0.8rem;
+  }
+  #heroImage {
+    max-width: 150px;
+    display: none;
+  }
+  .about {
+    margin: 0%;
+  }
+  .about h2 {
+    font-size: 0.7rem;
+  }
+  .about p {
+    font-size: 0.55rem;
+    line-height: 0.9rem;
+  }
+  section {
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+  section .inner {
+    margin: 0;
+    gap: 0.5rem;
+  }
+  .inner h3 {
+    font-size: 0.7rem;
+  }
+  .inner p {
+    font-size: 0.5rem;
+    line-height: 0.8rem;
+  }
+  .contact h4 {
+    font-size: 0.7rem;
+  }
+  .contact form input,
+  .contact form textarea {
+    padding: 0.3rem;
+    border-radius: 3px;
+    font-size: 0.6rem;
+  }
+  footer .bottom {
+    padding: 0.2rem;
+  }
+  footer .bottom p {
+    font-size: 0.6rem;
+  }
+}
