0silverback0 · agarg2004 · Oct 25, 2023 · Oct 25, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/Food Order Website/images/OIP.jpeg b/Food Order Website/images/OIP.jpeg
diff --git a/Food Order Website/index.html b/Food Order Website/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Foodie</title>
+    <link rel="stylesheet" href="styles.css">
+
+    <nav class="navbar">
+        <ul>
+            <li><a href="/index.html">HOME</a></li>
+            <li><a href="about.html">ABOUT</a></li>
+            <li><a href="services.html">SERVICES</a></li>
+            <li><a href="contact.html">CONTACT</a></li>
+        </ul>
+        <input id="search" type="text" placeholder="Search this website">
+    </nav>
+</head>
+<body>
+    <section id=section1>
+        <div class="heading">Welcome to Foodie !<br>
+        <div id="sub" >You Order, We Serve </div>
+        </div>
+    </section>
+
+    <div class="container">
+        <img id="main" src="images/OIP.jpeg">
+        <p class="text">Foodie is a prominent restaurant in your locality and is renowned for its excellence in quality, flavor, service, and atmosphere. We take pride in bringing you the authentic flavors of India, with a diverse menu that spans from Chinese to Continental, North Indian to South Indian, and Punjabi to Gujarati cuisines.We also offer home delivery within 10 Kms distance</p>
+    </div>
+
+    <div class="heading" id="food-items-heading">Explore Different Cusines</div>
+    <div class="food-images">
+        <img id="pizza" src="https://www.engelvoelkers.com/wp-content/uploads/2014/07/pizza-stock.jpg">
+        <img id="burger" src="https://brookrest.com/wp-content/uploads/2020/05/AdobeStock_282247995-scaled.jpeg">
+        <img id="chinese" src="https://tallypress.com/wp-content/uploads/2017/06/top-10-chinese-food-catering-services-in-kl-selangor.jpg">
+        <img id="south-indian" src="https://th.bing.com/th?id=OIP.qBGMgKyOm3RCxsG5VK2_hwHaJ0&w=217&h=287&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2">
+        <img id="indian-street-food" src="https://www.bing.com/th?id=OIP.2lMvtt_WsvAg6XtoDZXBdQHaLG&w=146&h=219&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2">
+        <img id="arrow" src="https://th.bing.com/th/id/R.0673093bbfcecc10fc43a2e61243415c?rik=1pH9V0jCRyiRdQ&riu=http%3a%2f%2fclipart-library.com%2fimages_k%2farrow-image-transparent%2farrow-image-transparent-9.png&ehk=tGpJQDxnJ%2bq7S2HVaT2wMHWwaLHTtpQ%2b%2baxiZvotuvY%3d&risl=&pid=ImgRaw&r=0">
+    </div>
+
+    <div class="heading" id="best-seller-heading">Best Seller Food Items</div>
+
+    <div class="best-seller-items">
+        <div id="BSI1"><img class="BSI-images" src="https://th.bing.com/th/id/OIP.NvMcy59PJuXYWO5-yoZAKAHaE8?pid=ImgDet&rs=1"><p class="BSI-text">Veg Farmhouse Pizza</p><button class="Order-Now">Order Now</button></div>
+
+        <div id="BSI2"><img class="BSI-images" src="https://th.bing.com/th/id/OIP.pj9gkdfxDbpqwfcPtgwHuAHaFj?pid=ImgDet&rs=1"><p class="BSI-text">Cheese Burger</p><button class="Order-Now">Order Now</button></div>
+
+        <div id="BSI3"><img class="BSI-images" src="https://www.pepperbowl.com/wp-content/uploads/2021/06/paneer-dosa.jpg"><p class="BSI-text">Paneer Dosa</p><button class="Order-Now">Order Now</button></div></div>
+    </div>
+
+    <section id="offers">
+        <div class="heading" id="offers-heading">Best Deals on Food Orders</div>
+        <div class="offers">
+            <div id="offer1"><p class="offers-text">Get Flat 20% Cashback on orders above Rs 999</p><button class="offer-btn">Know More</button></div>
+            <div id="offer2"><p class="offers-text">Exclusive 10% off on Special Veg Thaali</p><button class="offer-btn">Know More</button></div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/Food Order Website/styles.css b/Food Order Website/styles.css
@@ -0,0 +1,253 @@
+body{
+    height:100%;
+    background: linear-gradient(white,lightyellow);
+    height:100vh;
+}
+nav li{
+    padding: 0 15px;
+    display: flex;
+    list-style: none;
+    align-items: center;
+}
+
+nav{
+    display: flex;
+    background-color: #FA7C7C;
+    border-radius: 30px;
+}
+
+.navbar li, a{
+    float:left;
+    margin:0px 10px;
+    text-decoration: none;
+    color: white;
+    font-size: 20px;
+}
+
+nav ul li a:hover{
+    color:lightyellow;
+    text-decoration: underline;
+    font-weight: bolder;
+    text-align: center;
+    justify-content: center;
+    padding: 5px;
+}
+
+#search{
+    float: right;
+    border: 2px solid #FA7C7C;
+    color: black;
+    font-size: large;
+    padding: 10px solid black;
+}
+
+.heading{
+    font-size: 3.5rem;
+    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    font-family: 'Lucida Handwriting', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    display: flex;
+    color: #FA7C7C;
+    text-align: center;
+    justify-content: center;
+    flex-direction: column;
+    text-transform: uppercase;
+}
+
+#sub{
+    color:#00FF66;
+}
+
+#main{
+    width: 60%;
+
+}
+
+.container{
+    display: flex;
+    justify-content: flex-start;
+    align-items:center;
+    padding:100px;
+    gap:40px;
+    scroll-behavior: smooth;
+}
+
+.text{
+    font-size: xx-large;
+    font-family: garamond;
+    color: orange;
+}
+
+.food-images{
+    display:flex;
+    flex-direction: row;
+    gap:10px;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 40px;
+    margin-left: 0%;
+}
+
+#pizza,#burger,#chinese,#indian-street-food,#south-indian{
+    width:17%;
+    height:40vh;
+    border-radius:50%;
+}
+#pizza:hover,#burger:hover,#chinese:hover,#indian-street-food:hover,#south-indian:hover{
+    transform: scale(1.1);
+}
+
+#arrow{
+    width:10%;
+    height:30px;
+}
+#arrow:hover{
+    transform: scale(1.1);
+}
+
+#best-seller-heading, #food-items-heading,#offers-heading{
+    margin-top:40px;
+    padding:10px;
+    background-color: #00FF66;
+}
+
+.best-seller-items{
+    display: flex;
+    flex-direction: row;
+    gap:3%;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+
+
+
+}
+
+#BSI1,#BSI2,#BSI3{
+    padding: 20px;
+    background-color: #D9D9D9;
+    width: 25%;
+    height: 450px;
+}
+
+.BSI-images{
+    width:100%;
+    height: 300px;
+}
+.BSI-text{
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color:#FA7C7C;
+}
+
+.Order-Now{
+    display: flex;
+    align-items:center;
+    justify-content: center;
+    width: 80%;
+    font-size: 2rem;
+    margin-left: 10%;
+}
+.Order-Now:hover{
+    background-color: lightyellow;
+    color: #FA7C7C;
+}
+
+.offers{
+    display: flex;
+    flex-direction: row;
+    gap:40px;
+    justify-content: space-around;
+    margin:40px;
+}
+
+.offers-text{
+    font-size: 2rem;
+    text-align: center;
+    font-weight: bold;
+    color:#FA7C7C;
+}
+
+#offer1,#offer2{
+    width:40%;
+    height:20vh;
+    padding:50px;
+    background-color: #D9D9D9;
+}
+
+.offer-btn{
+    display: flex;
+    text-align: center;
+    font-size: 2rem;
+    align-items:center;
+    flex-direction: row;
+    margin-left: 35%;
+}
+
+.offer-btn:hover{
+    background-color: lightyellow;
+    color: #FA7C7C;
+}
+
+
+/* Responsiveness Code */
+@media only screen and (max-width:600px){
+    .heading{
+        font-size: 2rem;
+    }
+
+    .container{
+        flex-direction: column;
+        gap:10px;
+        padding:0px;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+    }
+    .text{
+        font-size: x-large;
+    }
+    #main{
+        width:100%;
+    }
+
+    #pizza,#burger,#chinese,#indian-street-food,#south-indian{
+        width:15%;
+        height:20vh;
+        border-radius:50%;
+    }
+    /* .best-seller-items{
+        height: 20vh;
+    } */
+    #BSI1,#BSI2,#BSI3{
+        height:100%;
+
+    }
+    .BSI-images{
+        height:30vh;
+        width: 100%;
+    }
+    .BSI-text{
+        font-size: x-large;
+    }
+    .Order-Now{
+        font-size: large;
+    }
+    .offers{
+        flex-direction: column;
+    }
+    #offer1,#offer2{
+        width:80%;
+        margin-left: 0;
+        height:20vh;
+        padding:20px;
+        background-color: #D9D9D9;
+    }
+    .offers-text{
+        font-size: x-large;
+    }
+    .offer-btn{
+        font-size: x-large;
+        margin-left: 25%;
+    }
+}
diff --git a/index.html b/index.html
@@ -260,6 +260,28 @@ <h1 class="text-white d-flex flex-column">
                     </div>
                 </div>
 
+
+                <div class="col-12 col-lg-4 col-md-6">
+                    <div class="project bg-black bg-opacity-75 p-4 rounded-5">
+                        <p class="fs-5 fw-medium text-white">Foodie</p>
+                        <p class="d-flex align-items-center gap-2">
+                            <i class="fa-brands fa-github text-white"></i>
+                            <a href="https://github.com/anuamloh07" target="_blank"
+                                class="text-decoration-none text-white">Anirudh Garg</a>
+                        </p>
+                        <div class="w-100 d-flex align-items-center justify-content-end">
+                            <button
+                                class="d-inline-flex flex-row align-items-center gap-2 px-4 py-3 rounded-pill bg-transparent border border-white">
+                                <a href="Food Order Website/index.html" target="_blank"
+                                    class="text-decoration-none text-white d-flex align-items-center gap-2">
+                                    <p class="fw-medium">View project</p>
+                                    <i class="fa-solid fa-eye"></i>
+                                </a>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="col-12 col-lg-4 col-md-6">
                     <div class="project bg-black bg-opacity-75 p-4 rounded-5">
                         <p class="fs-5 fw-medium text-white">Headphones Website</p>
@@ -381,6 +403,7 @@ <h1 class="text-white d-flex flex-column">
                     </div>
                 </div>
                 <!-- Put your informtion above!!! copy the format from Contributing file -->
+>>>>>>> upstream/main
             </div>
         </div>
     </section>