fikrcamp · melmi4455 · Apr 2, 2022
diff --git a/Fast Foods.jpg b/Fast Foods.jpg
diff --git a/Mini Fast foods.jpg b/Mini Fast foods.jpg
diff --git a/cart-regular-24.png b/cart-regular-24.png
diff --git a/facebook.png b/facebook.png
diff --git a/index.html b/index.html
@@ -4,10 +4,66 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Elmi ast-Food</title>
     <link rel="stylesheet" href="style/style.css" />
+    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
   </head>
   <body>
-    <!-- start here -->
+
+    <header class="bar-top">
+      <img class="img" src="Mini Fast foods.jpg" alt="Logo"> 
+      <div>
+        <ul class="menu-bar">
+        <li>Home</li>
+        <li>Menu</li>
+        <li>Events</li>
+        <li>Contacts</li>
+      </ul></div>
+
+      <p class="p">24/7 Online</p>
+      <img class="img2" src="cart-regular-24.png" >
+    </header>
+
+
+
+<div class="main-d">
+  <div class="div1">  
+    <h2>Perfect Fast-Food,<br>Perfect Date</h2>
+    <p>The best burgers and fast food the ones<br> shared with friends!</p>
+    <button>Order Now!</button>
+  </div>
+  <div class="d" >
+    <img src="Fast Foods.jpg" alt="Fast foods" class="img3">
+
+  </div>
+
+</div>
+
+
+
   </body>
+
+  <footer class="footer">
+
+    <div class="address">
+      <h4>Address</h4>
+      <p>Jigjiga Yar</p>
+      <p>Hargesia, Somaliland</p>
+    </div>
+
+          <div>
+            <p>Telephone Number <br> 0634404946</p>
+          </div>
+          <div>
+            <div>
+              <img class="social-link" src="/facebook.png" alt="logo">
+              <img class="social-link" src="/instagram.jpg" alt="logo">
+              <img class="social-link" src="/whatsapp.jpg" alt="logo">
+            </div>
+          </div>
+
+
+  </footer>
+
 </html>
+
diff --git a/instagram.jpg b/instagram.jpg
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,105 @@
+
+.bar-top{
+    display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 10px 150px;
+  background: white;
+  border-bottom: 1px solid #d8d8d8;
+
+}
+
+.menu-bar{ 
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    gap: 20px;
+    font-size: 25px;
+    margin-left: 30%;
+
+
+
+}
+
+.menu-bar li{
+    list-style-type: none;
+
+}
+
+
+
+.p{
+margin-left:40%;
+
+}
+
+.img2{
+    height: 35px;
+    width: 55px;
+
+}
+
+.img3 {
+    height: 300px;
+    width: 300px;
+}
+
+.main-d{
+    display: flex; 
+    justify-content: space-around;
+    margin-top: 10%;
+    align-items: center;
+
+}
+
+.main-d div{
+    width: 50%;
+
+}
+
+
+.div1{
+    font-size: 30px;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+}
+
+.div1 button{
+    color: white;
+    background-color: red;
+    font-size: 25px;
+
+}
+.img3{
+    width: 500px;
+    height: 500px;
+
+
+}
+
+.footer{
+    display: flex;
+    justify-content: space-between;
+   align-items: center;
+   margin-top: 30px;
+   border-top: 1px solid #d8d8d8;
+
+}
+
+
+    .social-link{
+        height: 50px;
+        margin : 20px;
+        gap:3px;
+        width: 40px;
+
+    }
+
+
+
+
+
+
diff --git a/whatsapp.jpg b/whatsapp.jpg