<!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"> <!--Do Not Duplicate Link--> <link rel = "canonical" href = ""> <meta name = "description" content = "Flavor Fusion is your gateway to an exceptional culinary journey, offering a wide range of delectable dishes delivered right to your doorstep. With a dedication to quality and flavor, we carefully craft each meal to deliver an unforgettable dining experience."> <meta name="keywords" content="" /> <!--Social Media Display--> <meta property="og:title" content="Flavor Fusion | Hamburgers, Cheeseburgers, Smoothies, Milkshakes, and More." /> <meta property="og:type" content="website"/> <meta property="og:url" content="" /> <meta property="og:image" content="" /> <meta property="og:image:secure_url" content="" /> <meta property = "og:description" content = "Flavor Fusion is your gateway to an exceptional culinary journey, offering a wide range of delectable dishes delivered right to your doorstep. With a dedication to quality and flavor, we carefully craft each meal to deliver an unforgettable dining experience."> <!--Favicons--> <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" /> <link rel="manifest" href="assets/favicon/site.webmanifest"/> <meta name="theme-color" content="#ffffff" /> <!--Preload--> <link rel="preload" as="font" type="font/woff2" href="" crossorigin /> <link rel="preload" as="font" type="font/woff2" href="" crossorigin /> <link rel = "stylesheet" href = "dist/style.css"> <script src="script.js" defer></script> <title>Flavor Fusion | Hamburgers, Cheeseburgers, Smoothies, Milkshakes, and More.</title> </head> <body> <!------------------------------------------------> <!---- TOPPER ----> <!------------------------------------------------> <div class = "banner"> <div class = "banner__image-wrapper" decoding = 'async' aria-hidden = "true"></div> <span class = "banner__text">We offer takeaway and delivery services for your convenience.<a class = "banner__order" href = "menu.html" aria-label = "Click here to order now."> Order Now!</a></span> </div> <!------------------------------------------------> <!---- NAVIGATION ----> <!------------------------------------------------> <header id = "navigation-bar" class = "Navigation-bar"> <div class = "navigation"> <!--LOGO--> <a class = "navigation__logo" aria-label="Go back to home page" href = "/"><img width = "50" aria-hidden = "true" decoding = "async" height = "50" alt = "logo" src = "/image/logo.png"></a> <nav class = "navigation__wrapper"> <!--NAVIGATION LIST--> <ul class = "navigation__ul"> <li><a class = "navigation__links" aria-label = "Go to home page" href = "/">Home</a></li> <li><a class = "navigation__links" aria-label = "Go to about section" href = "menu.html">Order</a></li> <li><a class = "navigation__links" aria-label = "Go to projects section" href = "about.html">About</a></li> <li><a class = "navigation__links" aria-label = "Go to contact us" href = "mailto:someone@thissite.com">Contact</a></li> </ul> </nav> <!--ORDER MENU--> <div class = "navigation__order-wrapper" aria-hidden="true"> <div class = "navigation__order"> <div class = "navigation__order-flexRow"> <span class = "order-heading">Your Order</span> <button aria-label = "close the order menu" id = "closeToggle" class = "closeToggle"><span class = "close-span" aria-hidden = "true"></span></button> </div> <div class = "navigation__order-item-container"> <div class = "navigation__order-item"> <img class = "navigation__order-image" src = "/image/menuImages/Rocket Burger.jpg" width = 50 height = 50 decoding="async" aria-hidden="true"> <div class = "navigation__order-flex-col-right"> <span class = "navigation__order-item-heading">Rocket Burger</span> <span class = "navigation__order-item-price">$7.20 USD</span> <button class = "btn-danger navigation__order-item-remove">Remove</button> </div> <div class = "navigation__order-quantity"> <img src = "image/icons/plus.svg" alt = "increase the amount" width = 20 height = 20 decoding="async" loading="lazy"> <span class = "order-capacity">0</span> <img src = "image/icons/minus.svg" alt = "Decrease the amount" width = 20 height = 20 decoding="async" loading="lazy"> </div> </div> </div> <div class = "checkout"> <div class = "subtotal"> <span> Subtotal</span> <span class = "price">$0.00</span> </div> <button>Continue to Checkout</button> <div class = "popup-warning"> <span>Checkout is disabled</span> </div> </div> </div> </div> <!--Shopping CART TOGGLE--> <button class = "navigation__order-toggle" aria-label = "order cart toggle" id = "shoppingToggle"> <img src = "/image/icons/cart.svg" aria-hidden = "true" alt = "shopping cart" width = "20" height = "20" decoding = "async"> <span aria-label = "Total amount of items in the cart" class = "navigation__order-capacity cart_Capacity"> 0 </span> </button> <!--MOBILE MENU TOGGLE--> <button class = "navigation__toggle" aria-label = "mobile menu toggle" id = "menuToggle"><span class = "navigation__toggle-span" aria-hidden = "true"></span></button> </div> </header> <main> <!------------------------------------------------> <!--- LANDING PAGE ---> <!------------------------------------------------> <section id = "landing-section"> <div class = "landing-container"> <div class = "landing"> <div class = "landing__textContainer"> <h1 class = "landing__heading">Flavor Fusion: Delightful <span>Delivery</span></h1> <p class = "landing__paragraph">Welcome to Flavor Fusion, your go-to destination for exquisite culinary experiences delivered straight to your doorstep.</p> </div> <a class = "landing__button" aria-label = "Go to order" href = "menu.html"> Place an Order </a> <div class = "landing__review"> <img src = "/image/icons/review.png" width = "60" height = "40" decoding = "async"> <span class = "review-span"><span>4.9 out of 5 stars</span> based on 4000+ reviews</span> </div> </div> <div class = "landing__image-container"> <img class = "landing__image-utility" src = "image/Utility/phone.jpg" aria-hidden="true" alt = "phone" width = "50" height = "50"> <picture class = "landing__img" aria-hidden = "true"> <source media ="(max-width: 600px)" srcset = "/image/sectionImages/landing-mobileImg.jpg"> <source media ="(min-width: 601px)" srcset = "/image/sectionImages/landing-desktopImg.webp"> <img src = "/image/sectionImages/landing-desktopImg.webp" alt = "food" width = "300" height = "350" decoding="async"> </picture> </div> </div> </section> <!------------------------------------------------> <!--- ABOUT SECTION ---> <!------------------------------------------------> <section id = "about-section"> <div class = "about"> <div class = "about__info"> <h2 class = "about__heading">Discover Culinary Delivery: Flavor Fusion!</h2> <div class = "background-text" decoding = "async" aria-hidden = "true"></div> <p class = "about__paragraph"> Flavor Fusion is your gateway to an exceptional culinary journey, offering a wide range of delectable dishes delivered right to your doorstep. With a dedication to quality and flavor, we carefully craft each meal to deliver an unforgettable dining experience. </p> <a class = "about__button" aria-label = "Go to learn more about us" href = "about.html">Learn about us</a> </div> <picture class = "about__img" aria-hidden = "true"> <source media ="(max-width: 600px)" srcset = "image/sectionImages/about-mobileImg.jpg"> <source media ="(min-width: 601px)" srcset = "image/sectionImages/about-desktopImg.webp"> <img src = "image/sectionImages/about-desktopImg.webp" alt = "" width = "300" height = "500" decoding="async"> </picture> </div> </section> <!------------------------------------------------> <!--- OPERATION SECTION ---> <!------------------------------------------------> <section id = "operation-section"> <div class = "operation"> <h2 class = "operation__heading">How it Works.</h2> <div class = "operation__content-wrapper"> <div class = "operation__content"> <picture class = "operation__image" aria-hidden = "true"> <img src = "/image/sectionImages/operation-img.jpg" aria-hidden = "true" loading = "lazy" width = "200" height = "200" decoding="async"> </picture> <div class = "operation__context"> <h3 class = "operation__context-heading">Adapt your menu items</h3> <p class = "operation__context-paragraph">Our intuitive online platform allows you to effortlessly customize your order by selecting your favorite items from our diverse menu.</p> </div> <span class = "operation__dotted-line" aria-hidden = "true"></span> </div> <div class = "operation__content"> <picture class = "operation__image" aria-hidden = "true"> <img src = "/image/sectionImages/operation-imgTwo.jpg" aria-hidden = "true" loading = "lazy" width = "200" height = "200" decoding="async"> </picture> <div class = "operation__context"> <h3 class = "operation__context-heading">Accept online orders & takeout</h3> <p class = "operation__context-paragraph">With just a few simple clicks, you can easily place your order online, eliminating the need to wait in line or make a phone call.</p> </div> <span class = "operation__dotted-line" aria-hidden = "true"></span> </div> <div class = "operation__content"> <picture class = "operation__image" aria-hidden = "true"> <img src = "/image/sectionImages/operation-imgThree.jpg" aria-hidden = "true" loading = "lazy" width = "200" height = "200" decoding="async" alt = ""> </picture> <div class = "operation__context"> <h3 class = "operation__context-heading">Manage delivery or takeout</h3> <p class = "operation__context-paragraph">Choose between the convenience of delivery or the flexibility of takeout, ensuring that you can enjoy your meal wherever and however you prefer.</p> </div> </div> </div> </div> </section> <!------------------------------------------------> <!--- MENU SECTION ---> <!------------------------------------------------> <section id = "menu-section"> <div class = "menu"> <div class = "menu__info"> <h2 class = "menu__heading"> Flavorful Menu Options </h2> <p class = "menu__paragraph">Order online using our menu or <span>call</span> our store for convenient pickup. Enjoy quick and delectable cuisine.</p> </div> <div class = "menu__buttons-wrapper"> <button class = "menu__button menu__button-active" data-id="all">Full Menu</button> <button class = "menu__button" data-id = "burgers">Burgers</button> <button class = "menu__button " data-id = "sides">Sides</button> <button class = "menu__button" data-id = "drinks">Drinks</button> </div> <div class = "menu__food-wrapper"> <div class = "menu__food-card"> <picture class = "menu__food-img"> <img src = "/image/menuImages/Rocket Burger.jpg" width = "150" height = "250" decoding = "async" loading = "lazy"> </picture> <h3 class = "menu__food-name">Rocket Burger</h3> <span class = "menu__food-price">$7.20 USD</span> <p class = "menu__food-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, quasi!</p> <div class = "menu__add-to-cart"> <button onclick = "addToCart()" class = "menu__cart-button">Add to cart</button> </div> </div> </div> <a class = "menu__button-end" aria-label = "Go to see our full menu" href = "">Our Full Menu</a> </div> </section> <!------------------------------------------------> <!--- CONTACT SECTION ---> <!------------------------------------------------> <section id = "contact-section"> <div class = "contact"> <div class = "contact__wrapper"> <img class = "background-text" src = "/image/Utility/Background-text.svg" loading = "lazy" width = "50" height = "30" decoding = "async" aria-hidden = "true"/> <h2 class = "contact__heading">Conveniently order takeaway by contacting our store. </h2> <p class = "contact__paragraph"> Indulge in the utmost flexibility and convenience as you take full control of your dining experience by reaching out to our store, where you can effortlessly request and enjoy a delectable takeaway meal that perfectly aligns with your schedule and preferences.</p> <a href = "mailto:someone@thissite.com" class = "contact__button" aria-label = "Go to our contact page">Contact Us</a> </div> <picture class = "contact__img" aria-hidden="true"> <source media ="(max-width: 600px)" srcset = "image/sectionImages/contact-mobileImg.webp"> <source media ="(min-width: 601px)" srcset = "image/sectionImages/contact-desktopImg.jpg"> <img src = "image/sectionImages/contact-desktopImg.jpg" width = 300 height = 400 decoding="async" loading="lazy"> </picture> </div> </section> <!------------------------------------------------> <!--- FOOTER SECTION ---> <!------------------------------------------------> <section id = "footer-section"> <footer class = "footer"> <div class = "footer__links-wrapper"> <ul class = "footer__ul"> <li><span class = "footer__heading">QuickLinks</span></li> <li><a class = "footer__links" href = "/">Home</a></li> <li><a class = "footer__links" href = "menu.html">Order</a></li> <li><a class = "footer__links" href = "about.html">About</a></li> <li><a class = "footer__links" href = "mailto:someone23@email.com">Contact</a></li> </ul> <ul class = "footer__ul"> <li><span class = "footer__heading">Socials</span></li> <div class = "footer__socials"> <li><img class = "footer__social-icons" src = "image/icons/instagram.svg" width = "25" height = "25" decoding="async" alt = "Instagram" loading = "lazy"></li> <li><img class = "footer__social-icons" src = "image/icons/facebook.svg" width = "25" height = "25" decoding="async" alt = "Instagram" loading = "lazy"></li> <li><img class = "footer__social-icons" src = "image/icons/twitter.svg" width = "25" height = "25" decoding="async" alt = "Instagram" loading = "lazy"></li> </div> </ul> </div> <div class = "footer__copyright"> <span>© Copyright 2023 - Made by Alijaha Nielsen</span> </div> </footer> </section> </main> </body> </html>