Restaurant Food Munch Model

HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/20c5629a29.js" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top"> <div class="container"> <a class="navbar-brand" href="#"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-munch-img.png" class="food-munch-logo" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ml-auto"> <a class="nav-link active" id="navItem1" href="#wcuSection"> Why Choose Us? <span class="sr-only">(current)</span> </a> <a class="nav-link" href="#exploreMenuSection" id="navItem2">Explore Menu</a> <a class="nav-link" href="#deliveryPaymentSection" id="navItem3">Delivery & Payment</a> <a class="nav-link" href="#followUsSection" id="navItem4">Follow Us</a> </div> </div> </div> </nav> <div class="banner-section-bg-container d-flex justify-content-center flex-column"> <div class="text-center"> <h1 class="banner-heading mb-3">Get Delicious Food Anytime</h1> <p class="banner-caption mb-4">Eat Smart & Healthy</p> <button class="custom-button">View Menu</button> <button class="custom-outline-button">Order Now</button> </div> </div> <div class="wcu-section pt-5 pb-5" id="wcuSection"> <div class="container"> <div class="row"> <div class="col-12"> <h1 class="wcu-section-heading">Why Choose Us?</h1> <p class="wcu-section-description"> We use both original recipes and classic versions of famous food items. </p> </div> <div class="col-12 col-md-4"> <div class="wcu-card p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-serve.png" class="wcu-card-image" /> <h1 class="wcu-card-title mt-3">Food Service</h1> <p class="wcu-card-description"> Experience fine dining at the comfort of your home. All our orders are carefully packed and arranged to give you the nothing less than perfect. </p> </div> </div> <div class="col-12 col-md-4"> <div class="wcu-card p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/fruits-img.png" class="wcu-card-image" /> <h1 class="wcu-card-title mt-3">Fresh Food</h1> <p class="wcu-card-description"> The Fresh Food group provides fresh-cut fruits and vegetables directly picked from our partner farms and farm houses so that you always get them tree to plate. </p> </div> </div> <div class="col-12 col-md-4"> <div class="wcu-card p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/offers-img.png" class="wcu-card-image" /> <h1 class="wcu-card-title mt-3">Best Offers</h1> <p class="wcu-card-description"> Food Coupons & Offers upto <span class="offers">50% OFF</span> and Exclusive Promo Codes on All Online Food Orders. </p> </div> </div> </div> </div> </div> <div class="explore-menu-section pt-5 pb-5" id="exploreMenuSection"> <div class="container"> <div class="row"> <div class="col-12"> <h1 class="menu-section-heading">Explore Menu</h1> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="shadow menu-item-card p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-ginger-fried-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Non-Veg Starters</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right-short" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="shadow menu-item-card p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-veg-starters-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Veg Starters</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-soup-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Soups</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-grilled-seafood-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Fish & Sea food</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-hyderabadi-biryani-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Main Course</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-mushroom-noodles-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Noodles</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-gluten-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Salads</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="menu-item-card shadow p-3 mb-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/em-coffee-bourbon-img.png" class="menu-item-image w-100" /> <h1 class="menu-card-title">Desserts</h1> <a href="" class="menu-item-link"> View All <svg width="16px" height="16px" viewBox="0 0 16 16" class="bi bi-arrow-right" fill="#d0b200" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" /> </svg> </a> </div> </div> </div> </div> </div> <div class="healthy-food-section pt-5 pb-5"> <div class="container"> <div class="row"> <div class="col-12 col-md-5"> <div class="text-center"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/healthy-food-plate-img.png" class="healthy-food-section-img" /> </div> </div> <div class="col-12 col-md-7"> <h1 class="healthy-food-section-heading"> Fresh, Healthy, Organic, Delicious Fruits </h1> <p class="healthy-food-section-description"> Say no to harmful chemicals and go fully organic with our range of fresh fruits and veggies. Pamper your body and your senses with the true and unadulterated gifts from mother nature. with the true and unadulterated gifts from mother nature. </p> <button class="custom-button">Watch Video</button> </div> </div> </div> </div> <div class="delivery-and-payment-section pt-5 pb-5" id="deliveryPaymentSection"> <div class="container"> <div class="row"> <div class="col-12 col-md-5 order-1 order-md-2"> <div class="text-center"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/delivery-payment-section-img.png" class="delivery-and-payment-section-img" /> </div> </div> <div class="col-12 col-md-7 order-2 order-md-1"> <h1 class="delivery-and-payment-section-heading"> Delivery and Payment </h1> <p class="delivery-and-payment-section-description"> Enjoy hassle-free payment with the plenitude of payment options available for you. Get live tracking and locate your food on a live map. It's quite a sight to see your food arrive to your door. Plus, you get a 5% discount on every order every time you pay online. </p> <button class="custom-button">Order Now</button> <div class="mt-3"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/visa-card-img.png" class="payment-card-img" /> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/master-card-img.png" class="payment-card-img" /> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/paypal-card-img.png" class="payment-card-img" /> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/american-express-img.png" class="payment-card-img" /> </div> </div> </div> </div> </div> <div class="thanking-customers-section pt-5 pb-5"> <div class="container"> <div class="row"> <div class="col-12 col-md-7 d-flex flex-column justify-content-center"> <h1 class="thanking-customers-section-heading"> Thank you for being a valuable customer to us. </h1> <p class="thanking-customers-section-description"> We have a surprise gift for you </p> <div class="d-md-none"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/thanking-customers-section-img.png" class="thanking-customers-section-img" /> </div> <div> <button type="button" class="custom-button" data-toggle="modal" data-target="#exampleModal"> Redeem Gift </button> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog mt-5"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title thanking-customers-section-modal-title" id="exampleModalLabel"> Gift Voucher </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/gift-voucher-img.png" class="w-100" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-5 d-none d-md-block"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/thanking-customers-section-img.png" class="thanking-customers-section-img" /> </div> </div> </div> </div> <div class="follow-us-section pt-5 pb-5" id="followUsSection"> <div class="container"> <div class="row"> <div class="col-12"> <h1 class="follow-us-section-heading">Follow Us</h1> </div> <div class="col-12"> <div class="d-flex flex-row justify-content-center"> <div class="follow-us-icon-container"> <i class="fab fa-twitter icon"></i> </div> <div class="follow-us-icon-container"> <i class="fab fa-instagram icon"></i> </div> <div class="follow-us-icon-container"> <i class="fab fa-facebook icon"></i> </div> </div> </div> </div> </div> </div> <div class="footer-section pt-5 pb-5"> <div class="container"> <div class="row"> <div class="col-12 text-center"> <img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/food-munch-logo-light.png" class="food-munch-logo" /> <h1 class="footer-section-mail-id">orderfood@foodmunch.com</h1> <p class="footer-section-address"> 123 Ayur Vigyan Nagar, New Delhi, India. </p> </div> </div> </div> </div> </body> </html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); .food-munch-logo { width: 80px; height: 70px; } #navItem1 { color: #323f4b; font-family: "Roboto"; } #navItem2 { color: #323f4b; font-family: "Roboto"; } #navItem3 { color: #323f4b; font-family: "Roboto"; } #navItem4 { color: #323f4b; font-family: "Roboto"; } .banner-section-bg-container { background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/foodmunch-banner-bg.png"); height: 100vh; background-size: cover; } .banner-heading { color: white; font-family: "Roboto"; font-size: 45px; font-weight: 300; } .banner-caption { color: #f5f7fa; font-family: "Roboto"; font-size: 24px; font-weight: 300; } .custom-button { color: white; background-image: linear-gradient(#d0b200, #a58d00); width: 130px; height: 45px; border-width: 0; border-radius: 8px; margin-right: 10px; } .custom-outline-button { color: #d0b200; background-color: transparent; width: 130px; height: 45px; border-style: solid; border-width: 1px; border-color: #d0b200; border-radius: 8px; } .wcu-section { background-color: #f9fbfe; } .wcu-section-heading { color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .wcu-section-description { color: #5a7184; font-family: "Roboto"; font-size: 16px; } .wcu-card { text-align: center; background-color: white; border-style: solid; border-width: 1px; border-color: #e5eaf4; border-radius: 16px; } .wcu-card-image { width: 87px; height: 90px; } .wcu-card-title { color: #323f4b; font-family: "Roboto"; font-size: 22px; font-weight: 500; } .wcu-card-description { color: #7b8794; font-family: "Roboto"; font-size: 16px; } .offers { color: #323f4b; font-style: italic; font-weight: 600; } .explore-menu-section { background-color: white; } .menu-section-heading { color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .menu-item-image { border-radius: 16px; } .menu-card-title { color: #323f4b; font-family: "Roboto"; font-size: 18px; font-weight: 500; margin-top: 24px; } .menu-item-link { color: #d0b200; font-family: "Roboto"; font-size: 14px; font-weight: 500; } .menu-item-card { border-radius: 16px; } .healthy-food-section { background-color: #f9fbfe; } .healthy-food-section-img { width: 270px; } .healthy-food-section-heading { color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .healthy-food-section-description { color: #5a7184; font-family: "Roboto"; font-size: 16px; } .delivery-and-payment-section { background-color: white; } .delivery-and-payment-section-img { width: 270px; } .delivery-and-payment-section-heading { color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .delivery-and-payment-section-description { color: #5a7184; font-family: "Roboto"; font-size: 16px; } .payment-card-img { width: 50px; height: 50px; margin-right: 28px; } .thanking-customers-section { background-image: radial-gradient(#fff8db, #fae38c); } .thanking-customers-section-heading { color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .thanking-customers-section-description { color: #5a7184; font-family: "Roboto"; font-size: 16px; } .thanking-customers-section-img { width: 270px; margin-bottom: 20px; } .thanking-customers-section-modal-title { color: #d0b200; font-weight: 800; } .follow-us-section { background-color: white; } .follow-us-section-heading { text-align: center; color: #183b56; font-family: "Roboto"; font-size: 28px; font-weight: 700; } .follow-us-icon-container { background-color: #faf7e8; width: 80px; height: 80px; border-radius: 40px; margin: 15px; padding-top: 22px; padding-bottom: 14px; padding-right: 16px; padding-left: 22px; } .icon { color: #d0b200; font-size: 35px; } .footer-section { background-color: #0d2436; } .footer-section-mail-id { color: #959ead; font-family: "Roboto"; font-weight: bold; font-size: 16px; margin-top: 20px; } .footer-section-address { color: #959ead; font-family: "Roboto"; font-size: 14px; }
JAVASCRIPT
Expand for more options Login