FastFood Corner Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastFood Corner - Quick, Fresh & Delicious</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

</head>
<body>
    
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>

<header class="header">
        <div class="header-top">
            <div class="container">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>? Free Delivery on Orders Over $25 | ? Order Hotline: (555) FAST-FOOD</div>
                    <div style="display: flex; gap: 1rem;">
                        <span>Open 24/7</span>
                        <span>Track Order</span>
                        <span>Find Location</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="header-main">
            <div class="container">
                <div class="header-content">
                    <a href="#" class="logo">
                        <div class="logo-icon">
                            <i class="fas fa-hamburger"></i>
                        </div>
                        FastFood Corner
                    </a>

<nav>
                        <ul class="nav-menu">
                            <li><a href="#menu">Menu</a></li>
                            <li><a href="#deals">Deals</a></li>
                            <li><a href="#locations">Locations</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>

<div class="header-actions">
                        <a href="#" class="order-btn" id="orderBtn">
                            <i class="fas fa-shopping-bag"></i>
                            Order Now
                        </a>
                        <button class="cart-btn" id="cartBtn">
                            <i class="fas fa-shopping-cart"></i>
                            <span class="cart-count" id="cartCount">0</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <h1>Fast. Fresh. Delicious.</h1>
                    <p>Craving something amazing? Order your favorite fast food favorites and get them delivered hot and fresh to your door in under 30 minutes!</p>
                    <a href="#menu" class="hero-cta">
                        <i class="fas fa-utensils"></i>
                        Browse Menu
                    </a>
                </div>
                <div class="hero-image">
                    ?
                </div>
            </div>
        </div>
    </section>

<section class="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="feature-title">30-Min Delivery</h3>
                    <p class="feature-description">Hot and fresh food delivered to your door in 30 minutes or less, guaranteed.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-fire"></i>
                    </div>
                    <h3 class="feature-title">Always Fresh</h3>
                    <p class="feature-description">Made-to-order with the freshest ingredients. No pre-made, reheated food here!</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="feature-title">Easy Ordering</h3>
                    <p class="feature-description">Order online, through our app, or call us. Track your order in real-time.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3 class="feature-title">Top Rated</h3>
                    <p class="feature-description">Rated #1 fast food in the city with over 10,000 five-star reviews.</p>
                </div>
            </div>
        </div>
    </section>

<section class="menu-categories" id="categories">
        <div class="container">
            <h2 class="section-title">Our Menu Categories</h2>
            <div class="categories-grid">
                <div class="category-card" data-category="burgers">
                    <div class="category-image" style="background: linear-gradient(135deg, #ff6b35, #ff4757); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Burgers</h3>
                        <p class="category-description">Juicy beef, chicken, and veggie burgers with fresh toppings</p>
                        <p class="category-count">15+ varieties available</p>
                    </div>
                </div>
                <div class="category-card" data-category="pizza">
                    <div class="category-image" style="background: linear-gradient(135deg, #ffd23f, #ffa502); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Pizza</h3>
                        <p class="category-description">Hand-tossed pizzas with premium toppings and cheese</p>
                        <p class="category-count">20+ flavors available</p>
                    </div>
                </div>
                <div class="category-card" data-category="chicken">
                    <div class="category-image" style="background: linear-gradient(135deg, #ff4757, #ff3838); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Fried Chicken</h3>
                        <p class="category-description">Crispy, golden fried chicken pieces and wings</p>
                        <p class="category-count">12+ options available</p>
                    </div>
                </div>
                <div class="category-card" data-category="sides">
                    <div class="category-image" style="background: linear-gradient(135deg, #2ed573, #20bf6b); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Sides & Snacks</h3>
                        <p class="category-description">Crispy fries, onion rings, and delicious appetizers</p>
                        <p class="category-count">25+ sides available</p>
                    </div>
                </div>
                <div class="category-card" data-category="drinks">
                    <div class="category-image" style="background: linear-gradient(135deg, #3742fa, #2f3542); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Beverages</h3>
                        <p class="category-description">Soft drinks, shakes, juices, and specialty drinks</p>
                        <p class="category-count">30+ drinks available</p>
                    </div>
                </div>
                <div class="category-card" data-category="desserts">
                    <div class="category-image" style="background: linear-gradient(135deg, #ff6348, #ff4757); color: white;">
                        ?
                    </div>
                    <div class="category-content">
                        <h3 class="category-name">Desserts</h3>
                        <p class="category-description">Sweet treats, ice cream, and decadent desserts</p>
                        <p class="category-count">18+ desserts available</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="menu-items" id="menu">
        <div class="container">
            <h2 class="section-title">Popular Menu Items</h2>
            
            <div class="menu-filters">
                <button class="filter-btn active" data-filter="all">All Items</button>
                <button class="filter-btn" data-filter="burgers">Burgers</button>
                <button class="filter-btn" data-filter="pizza">Pizza</button>
                <button class="filter-btn" data-filter="chicken">Chicken</button>
                <button class="filter-btn" data-filter="sides">Sides</button>
                <button class="filter-btn" data-filter="drinks">Drinks</button>
            </div>

<div class="menu-grid" id="menuGrid">
                <div class="menu-item" data-category="burgers" data-price="12.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #ff6b35, #ff4757); color: white;">
                        ?
                        <div class="item-badge">Bestseller</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Burgers</div>
                        <h3 class="item-title">Classic Cheeseburger</h3>
                        <p class="item-description">Juicy beef patty with melted cheese, lettuce, tomato, onion, and our special sauce on a toasted bun.</p>
                        <div class="item-details">
                            <span>? Spicy Level: Mild</span>
                            <span>⏱️ 15 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(2,847)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$12.99</span>
                                <span class="original-price">$15.99</span>
                                <span class="discount">19% off</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="Classic Cheeseburger" data-price="12.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>

<div class="menu-item" data-category="pizza" data-price="18.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #ffd23f, #ffa502); color: white;">
                        ?
                        <div class="item-badge">Large Size</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Pizza</div>
                        <h3 class="item-title">Pepperoni Supreme Pizza</h3>
                        <p class="item-description">Hand-tossed pizza with pepperoni, mozzarella cheese, bell peppers, and Italian herbs on our signature sauce.</p>
                        <div class="item-details">
                            <span>? Large (14")</span>
                            <span>⏱️ 20 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(1,923)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$18.99</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="Pepperoni Supreme Pizza" data-price="18.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>

<div class="menu-item" data-category="chicken" data-price="14.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #ff4757, #ff3838); color: white;">
                        ?
                        <div class="item-badge">Crispy</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Chicken</div>
                        <h3 class="item-title">Buffalo Chicken Wings</h3>
                        <p class="item-description">8 pieces of crispy chicken wings tossed in our signature buffalo sauce, served with ranch dipping sauce.</p>
                        <div class="item-details">
                            <span>? Spicy Level: Hot</span>
                            <span>⏱️ 18 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="far fa-star star"></i>
                            </div>
                            <span class="rating-count">(1,456)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$14.99</span>
                                <span class="original-price">$17.99</span>
                                <span class="discount">17% off</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="Buffalo Chicken Wings" data-price="14.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>

<div class="menu-item" data-category="sides" data-price="4.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #2ed573, #20bf6b); color: white;">
                        ?
                        <div class="item-badge">Crispy</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Sides</div>
                        <h3 class="item-title">Loaded Cheese Fries</h3>
                        <p class="item-description">Golden crispy fries topped with melted cheddar cheese, bacon bits, and green onions. Served with sour cream.</p>
                        <div class="item-details">
                            <span>? Extra Cheese</span>
                            <span>⏱️ 10 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(3,241)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$4.99</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="Loaded Cheese Fries" data-price="4.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>

<div class="menu-item" data-category="drinks" data-price="3.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #3742fa, #2f3542); color: white;">
                        ?
                        <div class="item-badge">Refreshing</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Beverages</div>
                        <h3 class="item-title">Chocolate Milkshake</h3>
                        <p class="item-description">Rich and creamy chocolate milkshake made with premium ice cream, topped with whipped cream and chocolate chips.</p>
                        <div class="item-details">
                            <span>? Large (20oz)</span>
                            <span>⏱️ 5 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(2,156)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$3.99</span>
                                <span class="original-price">$4.99</span>
                                <span class="discount">20% off</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="Chocolate Milkshake" data-price="3.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>

<div class="menu-item" data-category="burgers" data-price="16.99">
                    <div class="item-image" style="background: linear-gradient(135deg, #ff6b35, #ff4757); color: white;">
                        ?
                        <div class="item-badge">Premium</div>
                        <div class="item-favorite">
                            <i class="far fa-heart"></i>
                        </div>
                    </div>
                    <div class="item-content">
                        <div class="item-category">Burgers</div>
                        <h3 class="item-title">BBQ Bacon Burger</h3>
                        <p class="item-description">Double beef patty with crispy bacon, BBQ sauce, onion rings, and cheddar cheese on a brioche bun.</p>
                        <div class="item-details">
                            <span>? Extra Bacon</span>
                            <span>⏱️ 18 mins</span>
                        </div>
                        <div class="item-rating">
                            <div class="stars">
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                                <i class="fas fa-star star"></i>
                            </div>
                            <span class="rating-count">(1,789)</span>
                        </div>
                        <div class="item-price-section">
                            <div class="item-price">
                                <span class="current-price">$16.99</span>
                            </div>
                        </div>
                        <div class="item-actions">
                            <button class="btn-primary add-to-cart" data-product="BBQ Bacon Burger" data-price="16.99">Add to Cart</button>
                            <button class="btn-secondary">Customize</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="deals" id="deals">
        <div class="container">
            <h2 class="section-title">Today's Special Deals</h2>
            <div class="deals-grid">
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Burger Combo Deal</h3>
                    <p class="deal-description">Any burger + fries + drink for just $15.99. Save up to $8 on your favorite combo meal!</p>
                    <button class="deal-cta">Order Combo</button>
                </div>
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Pizza Family Pack</h3>
                    <p class="deal-description">2 Large pizzas + 2 sides + 4 drinks for $39.99. Perfect for family dinner or game night!</p>
                    <button class="deal-cta">Order Family Pack</button>
                </div>
                <div class="deal-card">
                    <div class="deal-icon">
                        ?
                    </div>
                    <h3 class="deal-title">Free Delivery Friday</h3>
                    <p class="deal-description">Free delivery on all orders today! No minimum order required. Use code: FREEDEL</p>
                    <button class="deal-cta">Order Now</button>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>Customer Service</h3>
                    <ul>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Track Your Order</a></li>
                        <li><a href="#">Returns & Refunds</a></li>
                        <li><a href="#">Delivery Info</a></li>
                        <li><a href="#">FAQ</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Menu</h3>
                    <ul>
                        <li><a href="#">Burgers</a></li>
                        <li><a href="#">Pizza</a></li>
                        <li><a href="#">Fried Chicken</a></li>
                        <li><a href="#">Sides & Snacks</a></li>
                        <li><a href="#">Beverages</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Services</h3>
                    <ul>
                        <li><a href="#">Online Ordering</a></li>
                        <li><a href="#">Mobile App</a></li>
                        <li><a href="#">Catering</a></li>
                        <li><a href="#">Party Orders</a></li>
                        <li><a href="#">Gift Cards</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>About FastFood Corner</h3>
                    <ul>
                        <li><a href="#">Our Story</a></li>
                        <li><a href="#">Locations</a></li>
                        <li><a href="#">Nutrition Info</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Franchise</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 FastFood Corner. All rights reserved. | Privacy Policy | Terms of Service | Allergen Information</p>
            </div>
        </div>
    </footer>

<div class="cart-sidebar" id="cartSidebar">
        <div class="cart-header">
            <h3 class="cart-title">Your Order</h3>
            <button class="cart-close" id="cartClose">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="cart-items" id="cartItems">
            <p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                <span>Total: $<span id="cartTotal">0.00</span></span>
            </div>
            <button class="checkout-btn" id="checkoutBtn">
                Place Order
            </button>
        </div>
    </div>

<div class="order-modal" id="orderModal">
        <div class="order-content">
            <button class="order-close" id="orderClose">
                <i class="fas fa-times"></i>
            </button>
            <h2>Place Your Order</h2>
            <p>Fill in your details and we'll have your delicious food ready for pickup or delivery!</p>
            <form class="order-form" id="orderForm">
                <div class="form-group">
                    <label class="form-label">Order Type *</label>
                    <select class="form-input" required>
                        <option value="">Select order type</option>
                        <option value="delivery">Delivery</option>
                        <option value="pickup">Pickup</option>
                        <option value="dine-in">Dine In</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Full Name *</label>
                    <input type="text" class="form-input" placeholder="Your full name" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Phone Number *</label>
                    <input type="tel" class="form-input" placeholder="For order updates" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Delivery Address</label>
                    <input type="text" class="form-input" placeholder="Street address (for delivery orders)">
                </div>
                <div class="form-group">
                    <label class="form-label">Preferred Time</label>
                    <select class="form-input">
                        <option value="">ASAP</option>
                        <option value="15min">In 15 minutes</option>
                        <option value="30min">In 30 minutes</option>
                        <option value="45min">In 45 minutes</option>
                        <option value="1hour">In 1 hour</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Special Instructions</label>
                    <textarea class="form-input form-textarea" placeholder="Extra sauce, no onions, cooking preferences, etc."></textarea>
                </div>
                <button type="submit" class="form-submit">Confirm Order</button>
            </form>
        </div>
    </div>

CSS

:root {
            --primary-color: #ff6b35;
            --primary-dark: #e55a2b;
            --secondary-color: #ffd23f;
            --accent-color: #ff4757;
            --success-color: #2ed573;
            --warning-color: #ffa502;
            --danger-color: #ff3838;
            --light-orange: #fff5f0;
            --medium-orange: #ffe8d6;
            --light-gray: #f8fafc;
            --medium-gray: #e5e7eb;
            --dark-gray: #6b7280;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --white: #ffffff;
            --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.15);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background-color: var(--white);
        }

/* Header */
        .header {
            background: var(--white);
            box-shadow: var(--shadow-light);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.header-top {
            background: var(--primary-color);
            color: white;
            padding: 0.5rem 0;
            font-size: 0.9rem;
        }

.header-main {
            padding: 1rem 0;
        }

.container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1rem;
        }

.header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
            text-decoration: none;
            font-family: 'Poppins', sans-serif;
        }

.logo-icon {
            background: var(--primary-color);
            color: white;
            padding: 0.5rem;
            border-radius: var(--border-radius);
        }

.nav-menu {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
        }

.nav-menu a {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

.nav-menu a:hover {
            background: var(--light-orange);
            color: var(--primary-color);
        }

.header-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.order-btn {
            background: var(--primary-color);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.order-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

.cart-btn {
            position: relative;
            background: var(--secondary-color);
            color: var(--text-primary);
            padding: 0.8rem;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            font-size: 1.1rem;
        }

.cart-btn:hover {
            background: #f4c430;
            transform: translateY(-2px);
        }

.cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent-color);
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
        }

/* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-color), #ff4757);
            color: white;
            padding: 4rem 0;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

.hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

.hero-text h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.1;
            font-family: 'Poppins', sans-serif;
        }

.hero-text p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

.hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--secondary-color);
            color: var(--text-primary);
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
        }

.hero-cta:hover {
            background: #f4c430;
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

.hero-image {
            text-align: center;
            font-size: 15rem;
            opacity: 0.9;
        }

/* Features */
        .features {
            padding: 4rem 0;
            background: var(--white);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

.feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }

.feature-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.feature-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.5rem;
        }

.feature-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

.feature-description {
            color: var(--text-secondary);
            line-height: 1.6;
        }

/* Menu Categories */
        .menu-categories {
            padding: 4rem 0;
            background: var(--light-orange);
        }

.section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 3rem;
            color: var(--text-primary);
            font-family: 'Poppins', sans-serif;
        }

.categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

.category-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            cursor: pointer;
        }

.category-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.category-image {
            height: 200px;
            background: var(--medium-gray);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
        }

.category-content {
            padding: 1.5rem;
        }

.category-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

.category-description {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

.category-count {
            color: var(--primary-color);
            font-weight: 600;
        }

/* Menu Items */
        .menu-items {
            padding: 4rem 0;
            background: var(--white);
        }

.menu-filters {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

.filter-btn {
            background: transparent;
            color: var(--text-secondary);
            border: 2px solid var(--border-color);
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

.filter-btn.active,
        .filter-btn:hover {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

.menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }

.menu-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow-light);
        }

.menu-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-color);
        }

.item-image {
            position: relative;
            height: 200px;
            background: var(--light-gray);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
        }

.item-badge {
            position: absolute;
            top: 1rem;
            left: 1rem;
            background: var(--accent-color);
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: var(--border-radius);
            font-size: 0.8rem;
            font-weight: 600;
        }

.item-favorite {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

.item-favorite:hover {
            background: var(--primary-color);
            color: white;
        }

.item-content {
            padding: 1.5rem;
        }

.item-category {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            font-weight: 600;
        }

.item-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            line-height: 1.4;
        }

.item-description {
            color: var(--text-secondary);
            margin-bottom: 1rem;
            line-height: 1.5;
        }

.item-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

.item-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

.stars {
            display: flex;
            gap: 0.2rem;
        }

.star {
            color: var(--warning-color);
            font-size: 0.9rem;
        }

.rating-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

.item-price-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

.item-price {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.current-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--primary-color);
        }

.original-price {
            font-size: 1.1rem;
            color: var(--text-secondary);
            text-decoration: line-through;
        }

.discount {
            background: var(--success-color);
            color: white;
            padding: 0.2rem 0.5rem;
            border-radius: var(--border-radius);
            font-size: 0.8rem;
            font-weight: 600;
        }

.item-actions {
            display: flex;
            gap: 0.5rem;
        }

.btn-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            flex: 1;
            font-size: 0.9rem;
        }

.btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

.btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 0.8rem 1rem;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }

.btn-secondary:hover {
            background: var(--light-gray);
            border-color: var(--primary-color);
        }

/* Deals Section */
        .deals {
            padding: 4rem 0;
            background: var(--light-orange);
        }

.deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

.deal-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.deal-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 107, 53, 0.1), transparent);
            transform: rotate(45deg);
            transition: var(--transition);
            opacity: 0;
        }

.deal-card:hover::before {
            opacity: 1;
            animation: shine 0.6s ease-in-out;
        }

.deal-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-medium);
        }

.deal-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

.deal-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }

.deal-description {
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

.deal-cta {
            background: var(--primary-color);
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }

.deal-cta:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }

/* Footer */
        .footer {
            background: var(--text-primary);
            color: white;
            padding: 3rem 0 1rem;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

.footer-section h3 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

.footer-section ul {
            list-style: none;
        }

.footer-section ul li {
            margin-bottom: 0.5rem;
        }

.footer-section ul li a {
            color: #d1d5db;
            text-decoration: none;
            transition: var(--transition);
        }

.footer-section ul li a:hover {
            color: var(--primary-color);
        }

.footer-bottom {
            border-top: 1px solid #374151;
            padding-top: 2rem;
            text-align: center;
            color: #d1d5db;
        }

/* Cart Sidebar */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background: white;
            box-shadow: var(--shadow-heavy);
            z-index: 10000;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

.cart-sidebar.open {
            right: 0;
        }

.cart-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--light-orange);
        }

.cart-title {
            font-size: 1.3rem;
            font-weight: 700;
        }

.cart-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
        }

.cart-items {
            flex: 1;
            padding: 1.5rem;
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            gap: 1rem;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
        }

.cart-item-image {
            width: 80px;
            height: 80px;
            background: var(--light-gray);
            border-radius: var(--border-radius);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }

.cart-item-details {
            flex: 1;
        }

.cart-item-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            line-height: 1.3;
        }

.cart-item-price {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

.cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid var(--border-color);
            background: white;
            border-radius: var(--border-radius);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }

.quantity-btn:hover {
            background: var(--light-gray);
        }

.cart-footer {
            padding: 1.5rem;
            border-top: 1px solid var(--border-color);
            background: var(--light-orange);
        }

.cart-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            font-size: 1.2rem;
            font-weight: 700;
        }

.checkout-btn {
            width: 100%;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: var(--border-radius);
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
        }

.checkout-btn:hover {
            background: var(--primary-dark);
        }

/* Order Modal */
        .order-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

.order-modal.open {
            opacity: 1;
            visibility: visible;
        }

.order-content {
            background: white;
            border-radius: var(--border-radius);
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            max-height: 90%;
            overflow-y: auto;
            position: relative;
        }

.order-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
        }

.order-form {
            margin-top: 2rem;
        }

.form-group {
            margin-bottom: 1.5rem;
        }

.form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--text-primary);
        }

.form-input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 1rem;
            transition: var(--transition);
        }

.form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
        }

.form-textarea {
            resize: vertical;
            min-height: 100px;
        }

.form-submit {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
        }

.form-submit:hover {
            background: var(--primary-dark);
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

@media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-menu {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .hero-text h1 {
                font-size: 2rem;
            }
            
            .menu-grid {
                grid-template-columns: 1fr;
            }
            
            .cart-sidebar {
                width: 100%;
                right: -100%;
            }
        }

@media (max-width: 480px) {
            .container {
                padding: 0 0.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .hero {
                padding: 2rem 0;
            }
        }

/* Animations */
        @keyframes shine {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.animate-fade-in {
            animation: fadeInUp 0.6s ease forwards;
        }

/* Loading Animation */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease;
        }

.loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 4px solid var(--light-gray);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

JavaScript

// Loading screen
        window.addEventListener('load', () => {
            const loading = document.getElementById('loading');
            setTimeout(() => {
                loading.classList.add('hidden');
            }, 1000);
        });

// Cart functionality
        let cart = [];
        let cartTotal = 0;

function updateCartUI() {
            const cartCount = document.getElementById('cartCount');
            const cartItems = document.getElementById('cartItems');
            const cartTotalElement = document.getElementById('cartTotal');

cartCount.textContent = cart.length;
            cartTotalElement.textContent = cartTotal.toFixed(2);

if (cart.length === 0) {
                cartItems.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p>';
            } else {
                cartItems.innerHTML = cart.map(item => `
                    <div class="cart-item">
                        <div class="cart-item-image">
                            ${getProductEmoji(item.name)}
                        </div>
                        <div class="cart-item-details">
                            <div class="cart-item-title">${item.name}</div>
                            <div class="cart-item-price">$${item.price}</div>
                            <div class="cart-item-quantity">
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', -1)">-</button>
                                <span>${item.quantity}</span>
                                <button class="quantity-btn" onclick="updateQuantity('${item.id}', 1)">+</button>
                                <button class="quantity-btn" onclick="removeFromCart('${item.id}')" style="margin-left: 1rem; color: var(--danger-color);">×</button>
                            </div>
                        </div>
                    </div>
                `).join('');
            }
        }

function getProductEmoji(productName) {
            if (productName.includes('Burger')) return '?';
            if (productName.includes('Pizza')) return '?';
            if (productName.includes('Wings') || productName.includes('Chicken')) return '?';
            if (productName.includes('Fries')) return '?';
            if (productName.includes('Milkshake') || productName.includes('Drink')) return '?';
            if (productName.includes('Dessert')) return '?';
            return '?️';
        }

function removeFromCart(itemId) {
            cart = cart.filter(item => item.id !== itemId);
            cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            updateCartUI();
        }

// Event listeners
        document.querySelectorAll('.add-to-cart').forEach(btn => {
            btn.addEventListener('click', function() {
                const productName = this.getAttribute('data-product');
                const price = this.getAttribute('data-price');
                addToCart(productName, price);
            });
        });

// Cart sidebar toggle
        document.getElementById('cartBtn').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('cartSidebar').classList.add('open');
        });

document.getElementById('cartClose').addEventListener('click', () => {
            document.getElementById('cartSidebar').classList.remove('open');
        });

// Order modal toggle
        document.getElementById('orderBtn').addEventListener('click', (e) => {
            e.preventDefault();
            document.getElementById('orderModal').classList.add('open');
        });

document.getElementById('orderClose').addEventListener('click', () => {
            document.getElementById('orderModal').classList.remove('open');
        });

// Menu filtering
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active class from all buttons
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                // Add active class to clicked button
                this.classList.add('active');
                
                const filter = this.getAttribute('data-filter');
                const menuItems = document.querySelectorAll('.menu-item');
                
                menuItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });

// Category cards
        document.querySelectorAll('.category-card').forEach(card => {
            card.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                
                // Trigger the corresponding filter button
                const filterBtn = document.querySelector(`[data-filter="${category}"]`);
                if (filterBtn) {
                    filterBtn.click();
                }
                
                // Scroll to menu section
                document.getElementById('menu').scrollIntoView({ behavior: 'smooth' });
            });
        });

// Wishlist functionality
        document.querySelectorAll('.item-favorite').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.style.background = 'var(--primary-color)';
                    this.style.color = 'white';
                    alert('Added to your favorites! ❤️');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.style.background = 'rgba(255, 255, 255, 0.9)';
                    this.style.color = 'var(--text-primary)';
                    alert('Removed from favorites!');
                }
            });
        });

// Deal buttons
        document.querySelectorAll('.deal-cta').forEach(btn => {
            btn.addEventListener('click', function() {
                const dealTitle = this.parentElement.querySelector('.deal-title').textContent;
                alert(`? ${dealTitle} activated! This special offer has been applied to your next order.`);
            });
        });

// Customize buttons
        document.querySelectorAll('.btn-secondary').forEach(btn => {
            if (btn.textContent === 'Customize') {
                btn.addEventListener('click', function() {
                    const itemTitle = this.closest('.item-content').querySelector('.item-title').textContent;
                    alert(`?️ Customizing ${itemTitle}! Choose your toppings, size, and special requests.`);
                });
            }
        });

// Order form submission
        document.getElementById('orderForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (cart.length === 0) {
                alert('Please add items to your cart before placing an order!');
                return;
            }
            
            const orderType = this.querySelector('select').value;
            const estimatedTime = orderType === 'pickup' ? '15-20 minutes' : '25-30 minutes';
            
            alert(`? Order confirmed! Your delicious food will be ready for ${orderType} in ${estimatedTime}. You'll receive SMS updates on your order status.`);
            
            // Clear cart and close modal
            cart = [];
            cartTotal = 0;
            updateCartUI();
            document.getElementById('orderModal').classList.remove('open');
            document.getElementById('cartSidebar').classList.remove('open');
            this.reset();
        });

// Checkout functionality
        document.getElementById('checkoutBtn').addEventListener('click', () => {
            if (cart.length === 0) {
                alert('Your cart is empty! Add some delicious items to get started. ?');
                return;
            }
            
            document.getElementById('orderModal').classList.add('open');
            document.getElementById('cartSidebar').classList.remove('open');
        });

// Close modals when clicking outside
        document.addEventListener('click', function(e) {
            const orderModal = document.getElementById('orderModal');
            
            if (e.target === orderModal) {
                orderModal.classList.remove('open');
            }
        });

// Initialize
        updateCartUI();

// 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'
                    });
                }
            });
        });

// Add some interactive animations
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px) scale(1.02)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });

FastFood Corner Template Preview

Download Options