From 679935dd597e95368a5ec2914c982f813a9b8c18 Mon Sep 17 00:00:00 2001
From: fuludu onome <fuluduedward1@gmail.com>
Date: Sun, 30 Jul 2023 12:39:08 +0100
Subject: [PATCH] landing dom tasl

---
 submissions/onomeFuludu/DOM/landingDOM.js |  66 +++
 submissions/onomeFuludu/css/landing.css   | 506 +++++++++-------------
 submissions/onomeFuludu/css/landing.html  | 192 +++++---
 3 files changed, 405 insertions(+), 359 deletions(-)
 create mode 100644 submissions/onomeFuludu/DOM/landingDOM.js

diff --git a/submissions/onomeFuludu/DOM/landingDOM.js b/submissions/onomeFuludu/DOM/landingDOM.js
new file mode 100644
index 000000000..cff5e6b66
--- /dev/null
+++ b/submissions/onomeFuludu/DOM/landingDOM.js
@@ -0,0 +1,66 @@
+var userSelection = document.getElementById("select-state");
+var errorBlock = document.querySelector(".error-block");
+var submitForm = document.getElementById('submitForm')
+var submitForm1 = document.getElementById('submitForm1')
+var submitForm2 = document.getElementById('submitForm2')
+var submitForm13 = document.getElementById('submitForm3')
+
+function Validate() {
+    if (userSelection.value == "") {
+        errorBlock.innerHTML = "Please select your prefer location!"
+        return false
+    } else {
+        errorBlock.innerHTML = "";
+        return true;
+    }
+}
+
+function SubmitInput() {
+    return Validate();
+}
+
+submitForm.addEventListener('click', () => {
+    if (userSelection.value == "") {
+        errorBlock.innerHTML = "please select your prefer location"
+        return false;
+    } else {
+        location.href = "./vendor.html";
+        return true;
+    }
+})
+
+submitForm1.addEventListener('click', () => {
+    if (userSelection.value == "") {
+        errorBlock.innerHTML = "please select your prefer location"
+        return false;
+    } else {
+        location.href = "./vendor.html";
+        return true;
+    }
+})
+
+submitForm2.addEventListener('click', () => {
+    if (userSelection.value == "") {
+        errorBlock.innerHTML = "please select your prefer location"
+        return false;
+    } else {
+        location.href = "./vendor.html";
+        return true;
+    }
+})
+
+submitForm3.addEventListener('click', () => {
+    if (userSelection.value == "") {
+        errorBlock.innerHTML = "please select your prefer location"
+        return false;
+    } else {
+        location.href = "./vendor.html";
+        return true;
+    }
+})
+
+submitForm.addEventListener('click', SubmitInput);
+submitForm1.addEventListener('click', SubmitInput);
+submitForm2.addEventListener('click', SubmitInput);
+submitForm3.addEventListener('click', SubmitInput);
+
diff --git a/submissions/onomeFuludu/css/landing.css b/submissions/onomeFuludu/css/landing.css
index 4d4067a9e..08b4adf1d 100644
--- a/submissions/onomeFuludu/css/landing.css
+++ b/submissions/onomeFuludu/css/landing.css
@@ -1,358 +1,282 @@
-body{
-    margin-left: 2px;
-}
-h4{
-    position: absolute;
-    padding: 3px;
-    float: left;
-    margin-top: 18px;
+
+body {
+    max-width: 1240px;
+    margin: 0px auto;
 }
-ul{
-    width: auto;
-    float: right;
-    margin-top: 2px;
+
+.header-container {
+    margin-top: 50px;
+    display: flex;
+    justify-content: space-between;
 }
 
-li{
-    display: inline-block;
-    padding: 15px 30px;
+.header-container ul {
+    display: flex;
+    list-style: none;
+    
 }
 
- .head{
-    margin-left: 40%;
- }
+.header-container ul li {
+    padding: 10px 10px;
+    text-decoration: none;
+}
 
-.st{
-    margin-left:-8%;
-    opacity: 0.8;
+.header-container ul li a {
+    text-decoration: none;
+    color: #696969;
+    font-weight: 400;
 }
 
-.in{
-    width:90%;
-    height:30px;
-    border-radius:4px;
+.error-block {
+    color: red;
+    font-size: 16px;
+    
 }
-.comp{
-display: flex;
-padding: 2px;
+
+.select-state{
+    color: red;
 }
 
-.com{
-    margin-left: 20px;
-    width: 25%;
+.header-container  ul .link-item  a{
+    color:#AD4C4C ;
+    border: 1px solid #AD4C4C;
+    padding: 5px;
+    border-radius: 5px;
 }
 
-.omp{
-    display: flex;
-padding: 2px;
+.logo-container {
+    font-weight: 500;
+    font-style: normal;
+    font-size: 20px;
+    line-height: 30px;
 }
 
-.mp{
-width: 75%;
-margin-left: 30px;
+.logo-container span{
+    color:  #AD4C4C;  
 }
 
-.we{
-     margin-left:38%;
-    }
+  .banner-container {
+   margin-top: 100px;
+}
 
-    .tat{
-        margin-top: 10%; 
-        margin-left: 44%;
-    }
-.s{
-    display: flex;
-    justify-content: center;
-    margin-top: 6.5%;
-    margin-left: 50px;
+.banner-heading {
+    text-align: center;
 }
-.sm{
-    padding: -90px;
-    margin: -80px;
+.banner-paragraph {
+    text-align: center;
 }
 
-.spi{
-    float:right; margin-top:-19px;
+.banner-heading {
+    font-weight: 600;
+    font-size: 40px;
+    margin-top: 10px;
+    
 }
 
-@media screen and (max-width: 600px) {
-    
-    ul{
-        width: auto;
-        margin-right:6%;
-        margin-top: 15px;
-    }
+.banner-paragraph {
+   font-weight: 400;
+   font-style: normal;
+   font-size: 20px;
+   margin-top: -30px;
 
-    li{
-        display: inline-block;
-        padding: 3px;
-    }
-    
-     .head{
-    margin-left: 1%;
- }
- .st{
-    margin-left:-1%;
 }
-.in{
-    width: 80%;
+
+#address-container {
+    margin-top: 60px;
 }
-.comp{
-    display: block;
+
+#address-container .select-container {
+    width: 100%;
+    height: 40px;
     padding: 2px;
-  
-    }
+    border: 1px solid #C4C4C4;
+    border-radius: 5px;
+}
 
-    .com{
-        border: 1px solid rgba(187, 176, 176, 0.8);
-        border-radius: 3px;
-        width: 80%;
-    }
+.food-container{
+    margin-top: 42px;
+}
 
-    .we{
-        margin-left: 20%;
-    }
+.food-container hr {
+  color: #F2F2F2;
+}
 
-    .omp{
-        display: block;
-        margin-left: 10%;
-    }
-    
-   .tat{
-    margin-top: -3%;
-     margin-left: 35%;
-   }
+.food-items {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
 
-.s{
-    margin-top: 25%;
-    margin-left: 34%;
+.item-list {
+    width: 230px;
+    height: 169px;
+    box-shadow: 0px 0px 3px 1.5px rgba(0, 0, 0, 0.1);
+    padding: 30px;
 }
 
-.spit{
-    position: absolute;
-    top:310%;
-    left:20%;
-    opacity: 0.7;
+.services-container {
+    margin-top: 60px;
 }
 
-.spi{
-position: absolute;
-top: 320%;
-left: 20%;
-opacity: 0.7;
+.services-container h3 {
+    text-align: center;
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 45px;
+    color: #4E4D4D;
 }
 
+.service-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
-@media screen and (min-width: 768px) {
-    
-    ul{
-        width: auto;
-        margin-top: 2px;
-        margin-right: 19%;
-    }
-    
-    li{
-        display: inline-block;
-        padding: 7px 10px;
-    }
-    
-     .head{
-        margin-left: 25%;
-     }
+.service-item h4 {
+  color: #696969;
+  text-align: center;
+}
 
-     .st{
-        margin-left:-8%;
-        opacity: 0.8;
-    }
-    
-    .in{
-        width:80%;
-        height:30px;
-        border-radius:4px;
-    }
-    .comp{
-    display: flex;
-    padding: 2px;
-    margin-left:-3%;
-    }
-    
-    .com{
-        margin-left: 20px;
-        width: 19%;
-    }
-    
-    .omp{
-        display: flex;
-    padding: 2px;
-    margin-left:-4.5%;
-    }
- 
-    .mp{
-        width: 25%;
-        margin-left: 30px;
-        }
-        
-        .we{
-             margin-left:28%;
-            }
-        
-            .tat{
-                margin-top: 2%; 
-                margin-left: 34%;
-            }
-        .s{
-            display: flex;
-            justify-content: center;
-            margin-top: 9.5%;
-            margin-left: 5px;
-        }
-        .sm{
-            padding: -90px;
-            margin: -80px;
-        }
-        
-        .spi{
-         margin-top:-19px;
-         margin-right: 10%;
-        }
+.service-item h4{
+    font-weight: 500;
+    font-style: normal;
+    font-size: 25px;
+    line-height: 37.5px;
 }
 
-@media screen and (min-width: 1200px){
-    ul{
-        width: auto;
-        margin-right:5%;
-        margin-top: 15px;
-    }
+.service-item p {
+    margin-top: -25px;
+    color: #696969;
+}
 
-    li{
-        display: inline-block;
-        padding: 3px;
-    }
-    
-     .head{
-    margin-left: 1%;
- }
- .st{
-    margin-left:-1%;
+.footer-container h3 {
+   text-align: center;
 }
-.in{
-    width: 80%;
+
+.footer-content-1 {
+    display: flex;
+    justify-content: center;
 }
-.comp{
-    display: block;
-    padding: 2px;
-  
+
+.footer-items {
+    padding: 10px;
+}
+
+.footer-content-2 {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+@media screen and (max-width: 540px){
+    .header-container h3 {
+        margin-left: 10px;
+    }
+    .food-items {
+        margin-left: 100px;
+        padding: 10px;
     }
 
-    .com{
-        border: 1px solid rgba(187, 176, 176, 0.8);
-        border-radius: 3px;
-        width: 80%;
+    .service-item {
+        margin-left: 70px;
     }
 
-    .we{
-        margin-left: 20%;
+    #address-container .select-container{
+        width: 90%;
+        margin-left: 15px;
     }
 
-    .omp{
-        display: block;
-        margin-left: 15%;
+    #address-container h4 {
+        margin-left: 10px;
     }
-    
-   .tat{
-    margin-top: -3%;
-     margin-left: 35%;
-   }
 
-.s{
-    margin-top: 25%;
-    margin-left: 34%;
-}
+    .footer-container.footer-heading {
+        margin-left: 25px;
+     } 
+  
+     .footer-content-2 .footer-items-2 {
+        margin-left: 130px;
 
-.spit{
-    position: absolute;
-    top:310%;
-    left:20%;
-    opacity: 0.7;
-}
+     }
 
-.spi{
-position: absolute;
-top: 320%;
-left: 20%;
-opacity: 0.7;
-}
+     .footer-content-2 .footer-items-3 {
+        margin-left: 70px;
+     }
 
+   
 }
 
-@media screen and (min-width: 1200px) {
-    
-    ul{
-        width: auto;
-        float: right;
-        margin-top: 2px;
+@media screen and (max-width: 360px) {
+    .header-container h3 {
+        margin-left: 10px;
     }
-    
-    li{
-        display: inline-block;
-        padding: 15px 30px;
+    .banner-heading {
+        text-align: inherit;
+        margin-left: 10px;
+        font-size: 25px;
+        margin-top: -50px;
+
+    }
+    .banner-paragraph {
+        text-align: start;
+        font-size: 16px;
+        padding-top: 7px;
+        margin-left: 10px;
+         
     }
-    
-     .head{
-        margin-left: 40%;
-     }
 
-     .st{
-        margin-left:-8%;
-        opacity: 0.8;
+    .header-container ul li {
+        margin-top: -2px;
     }
-    
-    .in{
-        width:90%;
-        height:30px;
-        border-radius:4px;
+
+    #address-container .select-container{
+        width: 90%;
+        margin-left: 10px;
+        margin-top: -5px;
+        
     }
-    .comp{
-    display: flex;
-    padding: 2px;
+    #address-container h4 {
+        margin-left: 10px;
+        margin-top: -5px;
     }
-    
-    .com{
-        margin-left: 20px;
-        width: 25%;
+
+    .item-list {
+        width: 200px;
+        margin-top: 20px;
     }
-    
-    .omp{
-        display: flex;
-    padding: 2px;
+
+    .food-container h4 {
+        margin-left: 10px;
+
+    }
+    .food-items {
+        margin-left: 35px;
+        padding: 10px;
     }
- 
-    .mp{
-        width: 75%;
+
+    .service-container{
         margin-left: 30px;
-        }
-        
-        .we{
-             margin-left:38%;
-            }
-        
-            .tat{
-                margin-top: 10%; 
-                margin-left: 44%;
-            }
-        .s{
-            display: flex;
-            justify-content: center;
-            margin-top: 6.5%;
-            margin-left: 50px;
-        }
-        .sm{
-            padding: -90px;
-            margin: -80px;
-        }
-        
-        .spi{
-            float:right; margin-top:-19px;
-        }
-}
\ No newline at end of file
+    }
+
+    .service-item {
+        margin-left: 0px;
+    }
+
+
+   .footer-container.footer-heading {
+      margin-left: 25px;
+   } 
+
+   .footer-content-2 .footer-items-2 {
+      margin-left: 45px;
+   }
+
+   .footer-content-2 .footer-items-3 {
+       margin-left: 20px;
+       font-size: 14px;
+   }
+    
+}
+
+
diff --git a/submissions/onomeFuludu/css/landing.html b/submissions/onomeFuludu/css/landing.html
index 9fea30afe..a68911bb4 100644
--- a/submissions/onomeFuludu/css/landing.html
+++ b/submissions/onomeFuludu/css/landing.html
@@ -1,79 +1,135 @@
- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
+
 <head>
     <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>
-    <link rel="stylesheet" href="landing.css">
+    <title>Responsive E-commerce Landing Page</title>
+    <link rel="stylesheet" href="../CSS/index.css">
 </head>
-    <header>
-            <h4>Food<span style="color:rgb(223, 23, 23);">Bag</span></h4>
-            <nav>
-            <ul>
-                <li><a href="#"></a>cart</li>
-                <li><a href="#"></a>login</li>
-                <li><button style="border-radius:4px; color: rgb(207, 21, 21); border-color: rgb(207, 21, 21);padding: 5px;"><a href="#"></a>sign-up</button></li>
-            </ul>
-        </nav>
-    </header><br><br><br><br><br>
+
 <body>
-<div class="head">
-    <h2>FoodBag</h2>
-    <p class="st">Anything food, we have you covered.</p>
-</div><br><br>
- <label for="location">Where are you?</label><br><br>
- <input class="in" type="text" id="country" list="country" name="country" placeholder="Bodija Market">
- <img src="images/" alt="">
-</datalist>
- </label>
- <section>
-    <h4>pick an interest</h4><br><br><br><br>
-    <div class="comp">
-        <div class="com"><img src="images/fast-food.svg.png" alt="" style="width:80px ;">
-       <div style="margin-left:15px; color: rgb(255, 30, 0);">Fast food</div>
-       <p style="margin-left:15px;">All sorrows are less with bread</p>
-        </div>
-        <div class="com"><img src="images/Vegetables & Drinks.svg.png" alt="" style="width:80px ;">
-            <div style="margin-left:15px; color: rgb(223, 33, 26);">Vegetables & Fruits</div>
-            <p style="margin-left:15px;">May not want it,but good for you</p>
-             </div>
-             <div class="com"><img src="images/Drinks & Cocktails.svg.png" alt="" style="width:80px ;">
-                <div style="margin-left:15px; color: rgb(238, 35, 20);">Drinks & Cocktails</div>
-                <p style="margin-left:15px;">I feel sad for those who dont drink</p>
-                 </div>
-                 <div class="com"><img src="images/resturant.svg.png" alt="" style="width:80px ;">
-                    <div style="margin-left:15px; color: rgb(221, 14, 14);">Resturants</div>
-                    <p style="margin-left:15px;">All sorrows are less with bread</p>
-                     </div>
-    </div>
- </section><br><br><br>
-<h2  class="we">How we serve you</h2>
-<section>
-    <div class="omp">
-        <div class="mp"><img src="images/Illustration_1.svg.png" alt="">
-        <div style="margin-left:15px;">Tell us where you are</div>
-        <p style="margin-left:15px; opacity:0.5;">select the location you want us to deliver</p>
-        </div>
-        <div class="mp"><img src="images/Illustration_2.svg.png" alt="">
-            <div style="margin-left:15px;">Tell us what you want</div>
-            <p style="margin-left:15px; opacity:0.5;">Browse the type of food that interests you</p>
+    <!-- Header section -->
+    <header class="header-container">
+        <h3 class="logo-container">Food<span>Bag</span></h3>
+
+        <!-- nav item -->
+        <ul>
+            <li><a href="">Cart</a></li>
+            <li><a href=""> Login</a> </li>
+            <li class="link-item"><a href="">Sign up</a></li>
+        </ul>
+    </header>
+
+    <main>
+
+        <!-- banner container -->
+        <section class="banner-container">
+            <h1 class="banner-heading">FoodBag</h1>
+            <p class="banner-paragraph">Anything food, we have you covered.</p>
+        </section>
+
+        <!-- end of banner container -->
+
+        <!-- address container  -->
+        <section id="address-container">
+            <h4>Where are you?</h4>
+            <select name="" id="select-state" class="select-container" required>
+                <option value=""> 
+                </option>
+                <option value="Oba market">Oba market</option>
+                <option value="Hausa market">Hausa market</option>
+                <option value="Banshee">Banshee </option>
+            </select>
+  
+        </section>
+        <span class="error-block"></span>
+        <!-- end of address container -->
+
+        <!-- food container -->
+        <section class="food-container">
+            <h4>Pick an interest</h4>
+            <div class="food-items">
+                <div class="item-list" type="submit" value="Validate" id="submitForm" >
+                    <img src="../images/fast-food 1.svg" alt="">
+                    <h5>Fast food</h5>
+                    <p>All sorrows are less with bread.</p>
+                </div>
+                <div class="item-list" type="submit" value="Validate" id="submitForm1" >
+                    <img src="../images/healthy-food 1.svg" alt="">
+                    <h5>Vegetables & Fruits</h5>
+                    <p>Vegetables & Fruits</p>
+                </div>
+                <div class="item-list" type="submit" value="Validate" id="submitForm2" >
+                    <img src="../images/mai-thai 1.svg" alt="">
+                    <h5>Drinks & Cocktails</h5>
+                    <p>I feel sad for those who don't drink.</p>
+                </div>
+                <div class="item-list" type="submit" value="Validate" id="submitForm3" >
+                    <img src="../images/fork 1.svg" alt="">
+                    <h5>Resturants</h5>
+                    <p>All sorrows are less with bread.</p>
+                </div>
+            </div>
+            </div>
+            <hr style="margin-top: 81px; color: #F2F2F2;">
+        </section>
+        <!-- end of food container -->
+
+
+        <!-- services container -->
+        <section class="services-container">
+            <h3>How we serve you</h3>
+            <div class="service-container">
+                <div class="service-item">
+                    <img src="../images/Map_Two Color 1.svg" alt="world in search">
+                    <h4>Tell us where you are</h4>
+                    <p>Select the location you want us to deliver.</p>
+                </div>
+                <div class="service-item">
+                    <img src="../images/Fast food_Two Color (1) 1.svg" alt="world in search">
+                    <h4>Tell us what you want</h4>
+                    <p>Browse the type of food that interest you.</p>
+                </div>
+                <div class="service-item">
+                    <img src="../images/Scooter_Two Color 1.svg" alt="world in search">
+                    <h4>We’ll come running</h4>
+                    <p>Your order will be delivered to you in no time.</p>
+                </div>
+            </div>
+        </section>
+        <!-- end of services container -->
+        <hr style="margin-top: 81px; color: #F2F2F2;">
+    </main>
+
+    <footer>
+        <div class="footer-container">
+            <h3 class="footer-heading">Contact us</h3>
+            <div class="footer-content-1">
+                <div class="footer-items">
+                    <img src="../images/twitter 2.svg" alt="twitter icon">
+                </div>
+                <div class="footer-items">
+                    <img src="../images/youtube 1.svg" alt="twitter icon">
+                </div>
+                <div class="footer-items">
+                    <img src="../images/facebook-f 1.svg" alt="twitter icon">
+                </div>
             </div>
-             <div class="mp"><img src="images/Illustration_3.svg.png" alt="">
-        <div style="margin-left:15px;">We'll come running</div>
-        <p style="margin-left:15px; opacity:0.5;">Your order will be delivered to you in no time</p>
-    </div>
-</section><br><br><br>
 
-<footer>
-    <div class="tat">contact us</div>
-    <div class="s">
-        <div class="sm"><img src="images/twitter 2.svg.png" alt="" style="width:20%;"></div>
-        <div class="sm"><img src="images/youtube 1.svg.png" alt="" style="width:20%;"></div>
-        <div class="sm"><img src="images/facebook-f 1.svg.png" alt="" style="width:20%;"></div>
-    </div>
-    <div class="spit">Terms & Conditions. privacy policy</div>
-    <div class="spi">&#169 copyright 2021 Foodbag is a registered trademark</div>
-</footer>
+            <div class="footer-content-2">
+                <div class="footer-items-2">
+                    Terms & Conditions . Privacy Policy
+                </div>
+                <div class="footer-items-3">
+                    © Copyright 2021 FoodBag is a registered trademark
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="../DOM/landing.js"></script>
 </body>
+
 </html>
\ No newline at end of file