Gourmet Fresh Burger Corner
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Burger Corner - Gourmet Burgers & Fresh Fries</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Fredoka+One:wght@400&display=swap" rel="stylesheet"> </head> <body> <!-- Header Banner --> <div class="header-banner" id="headerBanner"> <div class="container"> ? Welcome to Burger Corner! | Fresh Ingredients Daily | Free Delivery on Orders $25+ | Call: (555) 123-BURGER ? </div> </div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom"> <div class="container"> <a class="navbar-brand display-font" href="#home"> <i class="fas fa-hamburger"></i> Burger Corner </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#menu">Menu</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#gallery">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> <li class="nav-item"> <button class="btn btn-order" onclick="orderOnline()"> <i class="fas fa-shopping-cart me-2"></i>Order Now </button> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero-section"> <div class="container"> <div class="row"> <div class="col-lg-8"> <div class="hero-content"> <h1 class="hero-title display-font">Gourmet Burgers Made Fresh</h1> <p class="hero-subtitle">Sink your teeth into our juicy, handcrafted burgers made with premium ingredients, fresh-baked buns, and our signature sauces that'll make your taste buds dance!</p> <div class="hero-features"> <div class="feature-item"> <i class="fas fa-leaf feature-icon"></i> <span>Fresh Ingredients</span> </div> <div class="feature-item"> <i class="fas fa-clock feature-icon"></i> <span>Quick Service</span> </div> <div class="feature-item"> <i class="fas fa-truck feature-icon"></i> <span>Fast Delivery</span> </div> </div> <div class="hero-buttons"> <a href="#menu" class="btn btn-custom btn-primary-custom">View Menu</a> <a href="#contact" class="btn btn-custom btn-secondary-custom">Order Online</a> </div> </div> </div> </div> </div> </section> <!-- Menu Section --> <section id="menu" class="menu-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Our Delicious Menu</h2> <p class="section-subtitle animate-on-scroll">Handcrafted burgers, crispy fries, and refreshing drinks made fresh daily</p> </div> </div> <!-- Signature Burgers --> <div class="menu-category animate-on-scroll"> <div class="category-header"> <div class="category-icon"> <i class="fas fa-hamburger"></i> </div> <h3 class="category-title">Signature Burgers</h3> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">The Corner Classic</h4> <p class="item-description">Our signature beef patty with lettuce, tomato, onion, pickles, and our special Corner sauce on a toasted brioche bun</p> <div class="item-tags"> <span class="tag popular">Popular</span> <span class="tag">Beef</span> </div> </div> <div class="item-price">$12.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">BBQ Bacon Deluxe</h4> <p class="item-description">Double beef patty, crispy bacon, cheddar cheese, BBQ sauce, onion rings, and coleslaw on a sesame seed bun</p> <div class="item-tags"> <span class="tag popular">Popular</span> <span class="tag">Bacon</span> <span class="tag">Double Patty</span> </div> </div> <div class="item-price">$16.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Spicy JalapeƱo Heat</h4> <p class="item-description">Beef patty with pepper jack cheese, jalapeƱos, spicy mayo, lettuce, and tomato on a jalapeƱo-cheddar bun</p> <div class="item-tags"> <span class="tag spicy">Spicy</span> <span class="tag">JalapeƱo</span> </div> </div> <div class="item-price">$14.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Mushroom Swiss Melt</h4> <p class="item-description">Beef patty topped with sautĆ©ed mushrooms, Swiss cheese, caramelized onions, and garlic aioli</p> <div class="item-tags"> <span class="tag">Mushroom</span> <span class="tag">Swiss</span> </div> </div> <div class="item-price">$15.49</div> </div> </div> <!-- Chicken & Fish --> <div class="menu-category animate-on-scroll"> <div class="category-header"> <div class="category-icon"> <i class="fas fa-drumstick-bite"></i> </div> <h3 class="category-title">Chicken & Fish</h3> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Crispy Chicken Deluxe</h4> <p class="item-description">Hand-breaded crispy chicken breast, lettuce, tomato, pickles, and mayo on a brioche bun</p> <div class="item-tags"> <span class="tag popular">Popular</span> <span class="tag">Crispy</span> </div> </div> <div class="item-price">$13.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Buffalo Chicken Ranch</h4> <p class="item-description">Grilled chicken breast tossed in buffalo sauce, ranch dressing, lettuce, and celery on a whole wheat bun</p> <div class="item-tags"> <span class="tag spicy">Spicy</span> <span class="tag">Buffalo</span> </div> </div> <div class="item-price">$14.49</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Fish & Chips Burger</h4> <p class="item-description">Beer-battered cod fillet, tartar sauce, lettuce, and pickles served with a side of crispy fries</p> <div class="item-tags"> <span class="tag">Fish</span> <span class="tag new">New</span> </div> </div> <div class="item-price">$15.99</div> </div> </div> <!-- Vegetarian Options --> <div class="menu-category animate-on-scroll"> <div class="category-header"> <div class="category-icon"> <i class="fas fa-seedling"></i> </div> <h3 class="category-title">Vegetarian & Vegan</h3> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Beyond Burger</h4> <p class="item-description">Plant-based patty with vegan cheese, lettuce, tomato, onion, and vegan mayo on a whole grain bun</p> <div class="item-tags"> <span class="tag">Vegan</span> <span class="tag popular">Popular</span> </div> </div> <div class="item-price">$14.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Portobello Mushroom</h4> <p class="item-description">Grilled portobello mushroom cap, roasted red peppers, spinach, and balsamic glaze on focaccia bread</p> <div class="item-tags"> <span class="tag">Vegetarian</span> <span class="tag">Healthy</span> </div> </div> <div class="item-price">$12.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Black Bean Quinoa</h4> <p class="item-description">House-made black bean and quinoa patty, avocado, sprouts, and chipotle mayo on a multigrain bun</p> <div class="item-tags"> <span class="tag">Vegetarian</span> <span class="tag">Protein Rich</span> </div> </div> <div class="item-price">$13.49</div> </div> </div> <!-- Sides & Drinks --> <div class="menu-category animate-on-scroll"> <div class="category-header"> <div class="category-icon"> <i class="fas fa-glass-cheers"></i> </div> <h3 class="category-title">Sides & Beverages</h3> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Corner Fries</h4> <p class="item-description">Golden crispy fries seasoned with our signature spice blend</p> <div class="item-tags"> <span class="tag popular">Popular</span> <span class="tag">Crispy</span> </div> </div> <div class="item-price">$4.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Loaded Cheese Fries</h4> <p class="item-description">Crispy fries topped with melted cheese, bacon bits, and green onions</p> <div class="item-tags"> <span class="tag">Loaded</span> <span class="tag">Cheese</span> </div> </div> <div class="item-price">$7.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Onion Rings</h4> <p class="item-description">Beer-battered onion rings served with ranch dipping sauce</p> <div class="item-tags"> <span class="tag">Crispy</span> <span class="tag">Beer Battered</span> </div> </div> <div class="item-price">$5.99</div> </div> <div class="menu-item"> <div class="item-details"> <h4 class="item-name">Craft Sodas & Shakes</h4> <p class="item-description">Choose from our selection of craft sodas, fresh juices, or thick milkshakes (vanilla, chocolate, strawberry)</p> <div class="item-tags"> <span class="tag">Refreshing</span> <span class="tag">Variety</span> </div> </div> <div class="item-price">$3.99 - $6.99</div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Our Story</h2> <p class="section-subtitle animate-on-scroll">Crafting the perfect burger experience since 2010</p> </div> </div> <div class="about-content animate-on-scroll"> <div class="about-text"> <h3 class="mb-4">Welcome to Burger Corner</h3> <p class="mb-4"> Founded in 2010 with a simple mission: to create the most delicious, high-quality burgers using only the freshest ingredients. What started as a small corner shop has grown into a beloved local institution, but our commitment to quality and flavor remains unchanged. </p> <p class="mb-4"> Every burger at Burger Corner is handcrafted to order. We source our beef from local farms, bake our buns fresh daily, and prepare our signature sauces in-house. From our flame-grilled patties to our hand-cut fries, everything is made with passion and attention to detail. </p> <p class="mb-4"> Whether you're craving a classic cheeseburger or want to try something adventurous like our Spicy JalapeƱo Heat, we've got something to satisfy every taste. Our friendly team is dedicated to providing fast, friendly service in a fun, welcoming atmosphere. </p> <div class="row mt-4"> <div class="col-md-6"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-award text-warning me-3" style="font-size: 1.5rem;"></i> <div> <h6 class="mb-0">Best Burger 2023</h6> <small class="text-muted">City Food Awards Winner</small> </div> </div> </div> <div class="col-md-6"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-heart text-warning me-3" style="font-size: 1.5rem;"></i> <div> <h6 class="mb-0">Community Favorite</h6> <small class="text-muted">10,000+ happy customers</small> </div> </div> </div> </div> </div> <div class="about-image"> <img src="https://images.unsplash.com/photo-1571091718767-18b5b1457add?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80" alt="Burger Corner Kitchen" class="about-img"> <div class="experience-badge"> <span class="experience-years">13+</span> <span class="experience-text">Years</span> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Our Services</h2> <p class="section-subtitle animate-on-scroll">Fast, fresh, and convenient - however you want your burger fix</p> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-utensils"></i> </div> <h4 class="service-title">Dine-In Experience</h4> <p class="service-description">Enjoy our burgers in our modern, comfortable restaurant with a fun, casual atmosphere.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Comfortable booth and table seating</li> <li><i class="fas fa-check"></i> Free Wi-Fi for all customers</li> <li><i class="fas fa-check"></i> Family-friendly environment</li> <li><i class="fas fa-check"></i> Open kitchen concept</li> <li><i class="fas fa-check"></i> Sports TV and music</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-motorcycle"></i> </div> <h4 class="service-title">Fast Delivery</h4> <p class="service-description">Hot, fresh burgers delivered to your door in 30 minutes or less.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Free delivery on orders $25+</li> <li><i class="fas fa-check"></i> 30-minute delivery guarantee</li> <li><i class="fas fa-check"></i> Real-time order tracking</li> <li><i class="fas fa-check"></i> Contactless delivery available</li> <li><i class="fas fa-check"></i> Hot bag insulated packaging</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-shopping-bag"></i> </div> <h4 class="service-title">Quick Pickup</h4> <p class="service-description">Order ahead and skip the line with our convenient pickup service.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Order online or by phone</li> <li><i class="fas fa-check"></i> Ready in 10-15 minutes</li> <li><i class="fas fa-check"></i> Dedicated pickup counter</li> <li><i class="fas fa-check"></i> Mobile app ordering</li> <li><i class="fas fa-check"></i> Loyalty rewards program</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-birthday-cake"></i> </div> <h4 class="service-title">Party Catering</h4> <p class="service-description">Make your events delicious with our burger catering packages.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Birthday party packages</li> <li><i class="fas fa-check"></i> Office lunch catering</li> <li><i class="fas fa-check"></i> Event planning assistance</li> <li><i class="fas fa-check"></i> Bulk order discounts</li> <li><i class="fas fa-check"></i> Setup and cleanup included</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-mobile-alt"></i> </div> <h4 class="service-title">Mobile Ordering</h4> <p class="service-description">Order from anywhere with our easy-to-use mobile app and website.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> iOS and Android apps</li> <li><i class="fas fa-check"></i> Save favorite orders</li> <li><i class="fas fa-check"></i> Multiple payment options</li> <li><i class="fas fa-check"></i> Order history tracking</li> <li><i class="fas fa-check"></i> Push notifications for deals</li> </ul> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="service-card animate-on-scroll"> <div class="service-icon"> <i class="fas fa-gift"></i> </div> <h4 class="service-title">Rewards Program</h4> <p class="service-description">Earn points with every purchase and unlock exclusive deals and free food.</p> <ul class="service-features"> <li><i class="fas fa-check"></i> Earn 1 point per $1 spent</li> <li><i class="fas fa-check"></i> 100 points = $10 reward</li> <li><i class="fas fa-check"></i> Birthday month bonuses</li> <li><i class="fas fa-check"></i> Exclusive member deals</li> <li><i class="fas fa-check"></i> Early access to new items</li> </ul> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll display-font">Food Gallery</h2> <p class="section-subtitle animate-on-scroll">A visual feast of our mouth-watering burgers and delicious sides</p> </div> </div> <div class="gallery-grid"> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">The Corner Classic</h5> </div> </div> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1571091718767-18b5b1457add?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">BBQ Bacon Deluxe</h5> </div> </div> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1724426057815-a12b34f027c1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHJlc3R1cmFudHxlbnwwfHwwfHx8MA%3D%3D')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">Crispy Chicken Deluxe</h5> </div> </div> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1723744910344-370bc4305972?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cmVzdHVyYW50fGVufDB8fDB8fHww')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">Corner Fries & Sides</h5> </div> </div> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1550547660-d9450f859349?ixlib=rb-4.0.3&auto=format&fit=crop&w=1065&q=80')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">Beyond Burger</h5> </div> </div> <div class="gallery-item animate-on-scroll"> <div class="gallery-image" style="background-image: url('https://images.unsplash.com/photo-1571091655789-405eb7a3a3a8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1172&q=80')"></div> <div class="gallery-overlay"> <h5 class="gallery-title">Restaurant Interior</h5> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section section-padding"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center mb-5"> <h2 class="section-title animate-on-scroll text-white display-font">Visit Burger Corner</h2> <p class="section-subtitle animate-on-scroll text-white-50">Come taste the difference fresh ingredients make</p> </div> </div> <div class="row"> <div class="col-lg-6 mb-4"> <div class="contact-info animate-on-scroll"> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h5>Restaurant Location</h5> <p>456 Burger Street, Food District<br>Downtown Plaza, Level 1<br>New York, NY 10001</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h5>Phone & Orders</h5> <p>(555) 123-BURGER<br>(555) 123-2874</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h5>Email</h5> <p>info@burgercorner.com<br>orders@burgercorner.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h5>Opening Hours</h5> <p>Monday - Thursday: 11:00 AM - 10:00 PM<br> Friday - Saturday: 11:00 AM - 11:00 PM<br> Sunday: 12:00 PM - 9:00 PM</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="order-form animate-on-scroll"> <h4 class="mb-4 text-white">Quick Order Form</h4> <form id="orderForm"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Your Name</label> <input type="text" class="form-control" placeholder="Enter your name" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="form-label">Phone Number</label> <input type="tel" class="form-control" placeholder="Enter phone number" required> </div> </div> </div> <div class="form-group"> <label class="form-label">Order Type</label> <select class="form-control" required> <option value="">Select Order Type</option> <option value="pickup">Pickup</option> <option value="delivery">Delivery</option> <option value="dine-in">Dine-In</option> </select> </div> <div class="form-group"> <label class="form-label">Delivery Address (if applicable)</label> <input type="text" class="form-control" placeholder="Enter delivery address"> </div> <div class="form-group"> <label class="form-label">Your Order</label> <textarea class="form-control" rows="4" placeholder="Tell us what burgers and sides you'd like..." required></textarea> </div> <div class="form-group"> <label class="form-label">Special Instructions</label> <textarea class="form-control" rows="2" placeholder="Any special requests or dietary restrictions..."></textarea> </div> <button type="submit" class="btn-submit"> <i class="fas fa-shopping-cart me-2"></i>Place Order </button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer-section"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-4"> <div class="footer-brand display-font">? Burger Corner</div> <p class="text-white-50 mb-4">Serving the juiciest, most delicious gourmet burgers since 2010. Made fresh daily with premium ingredients and served with a smile. Come taste the Corner difference!</p> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Quick Links</h5> <div class="footer-links"> <a href="#home">Home</a> <a href="#menu">Menu</a> <a href="#about">About Us</a> <a href="#services">Services</a> <a href="#gallery">Gallery</a> <a href="#contact">Contact</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Our Services</h5> <div class="footer-links"> <a href="#" onclick="showService('dine-in')">Dine-In</a> <a href="#" onclick="showService('delivery')">Fast Delivery</a> <a href="#" onclick="showService('pickup')">Quick Pickup</a> <a href="#" onclick="showService('catering')">Party Catering</a> <a href="#" onclick="showService('mobile')">Mobile App</a> <a href="#" onclick="showService('rewards')">Rewards Program</a> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <h5 class="fw-bold mb-3 text-white">Contact Info</h5> <div class="footer-links"> <a href="tel:5551232874">? (555) 123-BURGER</a> <a href="mailto:info@burgercorner.com">? info@burgercorner.com</a> <a href="#">? 456 Burger Street, NY</a> <a href="#" onclick="showHours()">? Opening Hours</a> <a href="#" onclick="orderOnline()">? Order Online</a> </div> </div> </div> <hr class="my-4"> <div class="row align-items-center"> <div class="col-md-6"> <p class="text-white-50 mb-0">© 2024 Burger Corner. All rights reserved.</p> </div> <div class="col-md-6 text-md-end"> <a href="#" class="text-white-50 me-3">Privacy Policy</a> <a href="#" class="text-white-50 me-3">Terms of Service</a> <a href="#" class="text-white-50">Nutrition Info</a> </div> </div> </div> </footer> <!-- Success Message --> <div class="success-message" id="successMessage"> <i class="fas fa-check-circle me-2"></i> <span id="successText">Success!</span> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'976a8a0080f8a3b5',t:'MTc1NjQ1NDY4Mi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-red: #E53E3E; --secondary-orange: #FF8C00; --accent-yellow: #FFD700; --accent-green: #38A169; --dark-brown: #2D1B0E; --light-cream: #FFF8DC; --warm-beige: #F7FAFC; --deep-red: #C53030; --soft-orange: #FED7AA; --gradient-primary: linear-gradient(135deg, #E53E3E 0%, #FF8C00 100%); --gradient-secondary: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%); --gradient-dark: linear-gradient(135deg, #2D1B0E 0%, #1A202C 100%); --shadow-soft: 0 4px 6px -1px rgba(229, 62, 62, 0.1); --shadow-medium: 0 10px 15px -3px rgba(229, 62, 62, 0.1); --shadow-heavy: 0 25px 50px -12px rgba(229, 62, 62, 0.25); --border-radius: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--dark-brown); overflow-x: hidden; } .display-font { font-family: 'Fredoka One', cursive; } /* Header Banner */ .header-banner { background: var(--gradient-primary); color: white; padding: 12px 0; text-align: center; font-weight: 500; animation: slideDown 0.5s ease-out; } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Navigation */ .navbar-custom { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); transition: all 0.3s ease; padding: 1rem 0; } .navbar-brand { font-weight: 700; font-size: 2.2rem; color: var(--primary-red) !important; display: flex; align-items: center; } .navbar-brand i { margin-right: 10px; font-size: 2.5rem; color: var(--secondary-orange); } .nav-link { font-weight: 500; color: var(--dark-brown) !important; margin: 0 0.5rem; transition: all 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-red) !important; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 50%; background: var(--gradient-primary); transition: all 0.3s ease; transform: translateX(-50%); } .nav-link:hover::after { width: 100%; } .btn-order { background: var(--gradient-primary); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; margin-left: 15px; transition: all 0.3s ease; } .btn-order:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* Hero Section */ .hero-section { height: 100vh; background: linear-gradient(rgba(229, 62, 62, 0.449), rgba(255, 140, 0, 0.449)), url('https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=2012&q=80') center/cover; display: flex; align-items: center; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 2; } .hero-title { font-size: 3.5rem; font-weight: 700; color: white; /* margin-bottom: 1.5rem; */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: fadeInUp 1s ease-out; } .hero-subtitle { font-size: 1.5rem; color: rgba(255, 255, 255, 0.9); /* margin-bottom: 2rem; */ animation: fadeInUp 1s ease-out 0.3s both; } .hero-features { display: flex; gap: 2rem; margin-bottom: 3rem; animation: fadeInUp 1s ease-out 0.6s both; flex-wrap: wrap; } .feature-item { display: flex; align-items: center; color: white; background: rgba(255, 255, 255, 0.15); padding: 15px 20px; border-radius: 25px; backdrop-filter: blur(10px); } .feature-icon { font-size: 1.5rem; margin-right: 10px; color: var(--accent-yellow); } .hero-buttons { animation: fadeInUp 1s ease-out 0.9s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .btn-custom { padding: 15px 35px; font-weight: 600; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; margin: 0 10px; text-decoration: none; display: inline-block; } .btn-primary-custom { background: var(--gradient-secondary); color: var(--dark-brown); } .btn-primary-custom:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); color: var(--dark-brown); } .btn-secondary-custom { background: transparent; color: white; border: 2px solid white; } .btn-secondary-custom:hover { background: white; color: var(--primary-red); transform: translateY(-3px); } /* Section Styling */ .section-padding { padding: 100px 0; } .section-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--dark-brown); text-align: center; } .section-subtitle { font-size: 1.3rem; color: var(--primary-red); margin-bottom: 4rem; text-align: center; opacity: 0.9; } /* Menu Section */ .menu-section { background: var(--light-cream); } .menu-category { background: white; border-radius: var(--border-radius); padding: 2.5rem; margin-bottom: 3rem; box-shadow: var(--shadow-soft); transition: all 0.3s ease; border: 3px solid transparent; } .menu-category:hover { transform: translateY(-8px); box-shadow: var(--shadow-heavy); border-color: var(--soft-orange); } .category-header { display: flex; align-items: center; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 3px solid var(--soft-orange); } .category-icon { width: 70px; height: 70px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; font-size: 2rem; color: white; } .category-title { font-size: 2.2rem; font-weight: 700; color: var(--dark-brown); margin: 0; } .menu-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 2rem 0; border-bottom: 1px solid var(--soft-orange); transition: all 0.3s ease; } .menu-item:last-child { border-bottom: none; } .menu-item:hover { background: var(--warm-beige); margin: 0 -1rem; padding: 2rem 1rem; border-radius: 15px; } .item-details { flex: 1; } .item-name { font-size: 1.4rem; font-weight: 700; color: var(--dark-brown); margin-bottom: 0.8rem; } .item-description { color: #666; margin-bottom: 0.8rem; font-size: 1rem; line-height: 1.5; } .item-tags { display: flex; gap: 0.8rem; flex-wrap: wrap; } .tag { background: var(--accent-green); color: white; padding: 4px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; } .tag.spicy { background: var(--primary-red); } .tag.popular { background: var(--accent-yellow); color: var(--dark-brown); } .tag.new { background: var(--secondary-orange); } .item-price { font-size: 1.6rem; font-weight: 800; color: var(--primary-red); margin-left: 2rem; min-width: 100px; text-align: right; } /* About Section */ .about-section { background: white; } .about-content { display: flex; align-items: center; gap: 5rem; } .about-text { flex: 1; } .about-image { flex: 1; position: relative; } .about-img { width: 100%; border-radius: var(--border-radius); box-shadow: var(--shadow-medium); } .experience-badge { position: absolute; top: -30px; right: -30px; background: var(--gradient-primary); color: white; padding: 25px; border-radius: 50%; text-align: center; box-shadow: var(--shadow-medium); } .experience-years { font-size: 2.5rem; font-weight: 800; display: block; } .experience-text { font-size: 0.9rem; margin-top: 5px; } /* Services Section */ .services-section { background: var(--warm-beige); } .service-card { background: white; border-radius: var(--border-radius); padding: 3rem 2.5rem; text-align: center; box-shadow: var(--shadow-soft); transition: all 0.4s ease; height: 100%; position: relative; overflow: hidden; border: 3px solid transparent; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.3s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); border-color: var(--soft-orange); } .service-icon { width: 90px; height: 90px; background: var(--gradient-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; font-size: 2.5rem; color: var(--dark-brown); transition: transform 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--dark-brown); } .service-description { color: #666; margin-bottom: 2rem; font-size: 1.1rem; } .service-features { list-style: none; text-align: left; } .service-features li { padding: 0.8rem 0; color: var(--dark-brown); display: flex; align-items: center; font-weight: 500; } .service-features li i { color: var(--accent-green); margin-right: 0.8rem; font-size: 1.1rem; } /* Gallery Section */ .gallery-section { background: white; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem; margin-top: 3rem; } .gallery-item { position: relative; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: all 0.3s ease; height: 280px; } .gallery-item:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .gallery-image { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.3s ease; } .gallery-item:hover .gallery-image { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)); display: flex; align-items: flex-end; padding: 2.5rem; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-title { color: white; font-size: 1.4rem; font-weight: 700; } /* Contact Section */ .contact-section { background: var(--gradient-dark); color: white; } .contact-info { background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 3.5rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .contact-item { display: flex; align-items: center; margin-bottom: 2.5rem; } .contact-icon { width: 70px; height: 70px; background: var(--accent-yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 2rem; font-size: 1.8rem; color: var(--dark-brown); } .contact-details h5 { margin-bottom: 0.8rem; font-weight: 700; font-size: 1.3rem; } .contact-details p { margin: 0; opacity: 0.9; font-size: 1.1rem; } /* Order Form */ .order-form { background: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); padding: 3.5rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .form-group { margin-bottom: 2rem; } .form-label { font-weight: 600; color: white; margin-bottom: 0.8rem; font-size: 1.1rem; } .form-control { border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 15px 20px; font-size: 1.1rem; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.1); color: white; } .form-control::placeholder { color: rgba(255, 255, 255, 0.7); } .form-control:focus { border-color: var(--accent-yellow); box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25); background: rgba(255, 255, 255, 0.2); } .btn-submit { background: var(--gradient-secondary); color: var(--dark-brown); border: none; padding: 18px 40px; border-radius: 25px; font-weight: 700; font-size: 1.2rem; width: 100%; transition: all 0.3s ease; } .btn-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Footer */ .footer-section { background: var(--dark-brown); color: white; padding: 80px 0 40px; } .footer-brand { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; color: var(--accent-yellow); } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; display: block; margin-bottom: 0.8rem; font-size: 1.1rem; } .footer-links a:hover { color: var(--accent-yellow); } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--gradient-primary); color: white; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease; text-decoration: none; } .social-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Animations */ .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Success Messages */ .success-message { position: fixed; top: 100px; right: 20px; background: var(--accent-green); color: white; padding: 18px 30px; border-radius: 15px; box-shadow: var(--shadow-medium); z-index: 1060; transform: translateX(400px); transition: transform 0.3s ease; } .success-message.show { transform: translateX(0); } /* Loading Animation */ .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 3.5rem; } .section-title { font-size: 2.8rem; } .hero-features { flex-direction: column; gap: 1rem; } .about-content { flex-direction: column; gap: 3rem; } .experience-badge { position: relative; top: 0; right: 0; margin-top: 2rem; align-self: center; } .gallery-grid { grid-template-columns: 1fr; } }
JavaScript
// Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.animate-on-scroll'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < window.innerHeight - elementVisible) { element.classList.add('animated'); } }); } // Navbar background on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar-custom'); if (window.scrollY > 50) { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 20px rgba(229, 62, 62, 0.15)'; } else { navbar.style.background = 'rgba(255, 255, 255, 0.98)'; navbar.style.boxShadow = '0 4px 6px -1px rgba(229, 62, 62, 0.1)'; } animateOnScroll(); }); // Order online function function orderOnline() { showSuccessMessage('Redirecting to online ordering...'); setTimeout(() => { alert('? BURGER CORNER - ONLINE ORDERING ?\n\n? Order Methods:\n⢠Download our mobile app (iOS/Android)\n⢠Visit our website: burgercorner.com\n⢠Call: (555) 123-BURGER\n⢠DoorDash, Uber Eats, Grubhub\n\n? Delivery Info:\n⢠Free delivery on orders $25+\n⢠Delivery time: 25-35 minutes\n⢠Service area: 5-mile radius\n⢠Real-time tracking available\n\n? Popular Combos:\n⢠Corner Classic Combo: $16.99 (Burger + Fries + Drink)\n⢠BBQ Bacon Deluxe Combo: $20.99\n⢠Family Pack: $49.99 (4 Burgers + 4 Fries + 4 Drinks)\n⢠Veggie Lover Combo: $18.99\n\n? Payment Options:\n⢠Credit/Debit cards\n⢠PayPal, Apple Pay, Google Pay\n⢠Cash (pickup/delivery)\n\n? First-time customers get 15% off!\nUse code: WELCOME15\n\n? Questions? Call (555) 123-BURGER'); }, 1000); } // Show service details function showService(serviceType) { const services = { 'dine-in': { title: 'Dine-In Experience', details: '? DINE-IN AT BURGER CORNER ?\n\n⨠Restaurant Features:\n⢠Modern, casual dining atmosphere\n⢠Comfortable booth and table seating\n⢠Open kitchen concept - watch your burger being made\n⢠Free Wi-Fi for all customers\n⢠Family-friendly environment with kids menu\n⢠Sports TV and curated music playlist\n\n? Dine-In Specials:\n⢠Happy Hour: 3-6 PM (20% off appetizers)\n⢠Family Night Tuesdays: Kids eat free with adult entrĆ©e\n⢠Burger & Beer Combo: $18.99\n⢠Unlimited fries with any burger\n\n? Entertainment:\n⢠Arcade games corner\n⢠Weekly trivia nights (Wednesdays)\n⢠Live music on weekends\n⢠Birthday party packages available\n\n? Reserve a table: (555) 123-BURGER' }, 'delivery': { title: 'Fast Delivery', details: '? FAST DELIVERY SERVICE ?\n\n? Delivery Details:\n⢠Free delivery on orders $25+\n⢠Delivery fee: $2.99 (under $25)\n⢠Delivery time: 25-35 minutes\n⢠Service area: 5-mile radius\n⢠Real-time order tracking\n⢠Contactless delivery available\n\n? Hot & Fresh Guarantee:\n⢠Insulated delivery bags\n⢠Temperature-controlled packaging\n⢠Fresh preparation upon order\n⢠Quality guarantee or remake\n\n? Payment & Ordering:\n⢠Online: burgercorner.com\n⢠Mobile app (iOS/Android)\n⢠Phone: (555) 123-BURGER\n⢠Third-party: DoorDash, Uber Eats, Grubhub\n\n? Delivery Hours:\n⢠Monday-Thursday: 11:30 AM - 9:30 PM\n⢠Friday-Saturday: 11:30 AM - 10:30 PM\n⢠Sunday: 12:30 PM - 8:30 PM' }, 'pickup': { title: 'Quick Pickup', details: '? QUICK PICKUP SERVICE ?\n\nā” Fast & Convenient:\n⢠Order ready in 10-15 minutes\n⢠Dedicated pickup counter\n⢠Skip the line with pre-orders\n⢠Curbside pickup available\n⢠Mobile app notifications\n\n? Pickup Benefits:\n⢠10% discount on pickup orders\n⢠Loyalty points on every order\n⢠No delivery fees\n⢠Fresh, hot food guarantee\n⢠Priority preparation\n\n? How to Order:\n1. Call (555) 123-BURGER\n2. Order via mobile app\n3. Visit burgercorner.com\n4. Walk-in orders welcome\n\n? Curbside Pickup:\n⢠Call when you arrive\n⢠We\'ll bring your order to your car\n⢠Contactless payment options\n⢠Available during all operating hours\n\n? Pickup Hours:\n⢠Monday-Thursday: 11:00 AM - 10:00 PM\n⢠Friday-Saturday: 11:00 AM - 11:00 PM\n⢠Sunday: 12:00 PM - 9:00 PM' }, 'catering': { title: 'Party Catering', details: '? PARTY CATERING SERVICES ?\n\n? Catering Packages:\n⢠Office Lunch Package: $12.99/person\n⢠Birthday Party Package: $15.99/person\n⢠Corporate Event Package: $18.99/person\n⢠Custom packages available\n\n? What\'s Included:\n⢠Assorted gourmet burgers\n⢠Fresh-cut fries and onion rings\n⢠Variety of beverages\n⢠Plates, napkins, utensils\n⢠Setup and cleanup service\n⢠Dedicated catering coordinator\n\n? Special Occasions:\n⢠Birthday party decorations\n⢠Custom burger bar setup\n⢠Kids\' activity packages\n⢠Photo booth props\n⢠Balloon arrangements\n\n? Booking Information:\n⢠Minimum 24-hour notice\n⢠10-person minimum order\n⢠Free delivery for orders $200+\n⢠Payment: 50% deposit required\n\n? Book your event:\n⢠Call: (555) 123-BURGER\n⢠Email: catering@burgercorner.com\n⢠Online booking form available' }, 'mobile': { title: 'Mobile App', details: '? BURGER CORNER MOBILE APP ?\n\n? App Features:\n⢠Easy ordering with saved favorites\n⢠Real-time order tracking\n⢠Exclusive app-only deals\n⢠Loyalty points tracking\n⢠Push notifications for offers\n⢠Store locator with directions\n\n? Payment Options:\n⢠Credit/debit cards\n⢠Apple Pay & Google Pay\n⢠PayPal integration\n⢠Gift card redemption\n⢠Loyalty points redemption\n\n? App Exclusive Benefits:\n⢠15% off first app order\n⢠Double points on Fridays\n⢠Early access to new menu items\n⢠Birthday month special offers\n⢠VIP customer support\n\n? Download Now:\n⢠iOS: Available on App Store\n⢠Android: Available on Google Play\n⢠Search "Burger Corner Official"\n⢠Free download and setup\n\n? Rated 4.8/5 stars by users!\n"Best burger ordering app in the city!"' }, 'rewards': { title: 'Rewards Program', details: '? BURGER CORNER REWARDS ?\n\n? How It Works:\n⢠Earn 1 point per $1 spent\n⢠100 points = $10 reward\n⢠No expiration on points\n⢠Instant point tracking\n⢠Redeem anytime, anywhere\n\n? Bonus Point Opportunities:\n⢠Birthday month: Double points\n⢠Referral bonus: 50 points\n⢠Social media check-ins: 5 points\n⢠App reviews: 25 points\n⢠Survey completion: 10 points\n\n? VIP Tier Benefits:\n⢠Silver (500 points): 5% bonus points\n⢠Gold (1000 points): 10% bonus + free birthday burger\n⢠Platinum (2000 points): 15% bonus + exclusive events\n\n? Exclusive Member Perks:\n⢠Members-only deals and coupons\n⢠Early access to new menu items\n⢠Free appetizer on sign-up\n⢠Priority customer service\n⢠Special event invitations\n\n? Join Today:\n⢠Sign up in-store, online, or via app\n⢠Instant welcome bonus: 25 points\n⢠Start earning immediately\n⢠Free to join, no fees ever!' } }; const service = services[serviceType]; if (service) { alert(service.details); } } // Show opening hours function showHours() { alert('? BURGER CORNER - OPENING HOURS ?\n\n? Weekly Schedule:\n⢠Monday - Thursday: 11:00 AM - 10:00 PM\n⢠Friday - Saturday: 11:00 AM - 11:00 PM\n⢠Sunday: 12:00 PM - 9:00 PM\n\n? Kitchen Hours:\n⢠Last food order: 30 minutes before closing\n⢠Fresh burgers made to order all day\n⢠No pre-made patties - everything fresh!\n\n? Delivery Hours:\n⢠Monday - Thursday: 11:30 AM - 9:30 PM\n⢠Friday - Saturday: 11:30 AM - 10:30 PM\n⢠Sunday: 12:30 PM - 8:30 PM\n\n? Special Hours:\n⢠Holiday hours may vary\n⢠Extended hours during special events\n⢠New Year\'s Eve: Open until 1:00 AM\n⢠Check our app for real-time updates\n\n? Questions about hours?\nCall: (555) 123-BURGER\n? 456 Burger Street, New York, NY'); } // Order form submission document.getElementById('orderForm').addEventListener('submit', function(e) { e.preventDefault(); const submitBtn = this.querySelector('.btn-submit'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<span class="loading-spinner"></span> Processing...'; submitBtn.disabled = true; setTimeout(() => { submitBtn.innerHTML = originalText; submitBtn.disabled = false; this.reset(); showSuccessMessage('Order received! We\'ll call you shortly.'); setTimeout(() => { alert('? ORDER CONFIRMATION - BURGER CORNER ?\n\nā Your order has been received!\n? We\'ll call you within 5 minutes to confirm\nā° Estimated preparation time: 15-20 minutes\n\n? Burger Corner\n? 456 Burger Street, New York, NY\n? (555) 123-BURGER\n\n? What happens next:\n1. We\'ll call to confirm your order details\n2. Payment will be processed\n3. Your fresh burger will be prepared\n4. You\'ll receive updates via text/app\n5. Enjoy your delicious meal!\n\n? Pro Tips:\n⢠Download our app for faster ordering\n⢠Join our rewards program for points\n⢠Follow us on social media for deals\n⢠Rate your experience for bonus points\n\n? Thank you for choosing Burger Corner!\nWe can\'t wait to serve you! ?'); }, 1000); }, 2000); }); // Show success message function showSuccessMessage(message) { const successMessage = document.getElementById('successMessage'); const successText = document.getElementById('successText'); successText.textContent = message; successMessage.classList.add('show'); setTimeout(() => { successMessage.classList.remove('show'); }, 3000); } // Initialize animations on page load document.addEventListener('DOMContentLoaded', function() { animateOnScroll(); });
Output Preview
Desktop
Mobile
Fullscreen