Delicious Pizza Hurt 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>Pizza Hurt - A Slice of Heaven</title>

</head>
<body>

<header class="header">
        <div class="container" style="display:flex; justify-content:space-between; align-items:center; width:100%;">
            <a href="#hero" class="logo"><i class="fa-solid fa-pizza-slice"></i> Pizza Hurt</a>
            <ul class="nav-links">
                <li><a href="#about">About</a></li>
                <li><a href="#specials">Specials</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#testimonials">Reviews</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </div>
    </header>

<main>
        <section id="hero">
            <div class="hero-content">
                <h1 data-aos="fade-down">Don't Get Burned By Other Pizzas. <br>Get <span>Pizza Hurt.</span></h1>
                <p data-aos="fade-up" data-aos-delay="200">The most delicious slice you'll ever have. So good, it hurts.</p>
                <a href="#specials" class="btn" data-aos="fade-up" data-aos-delay="400">View Our Specials</a>
            </div>
        </section>

<section id="about">
            <div class="container">
                <div class="about-image" data-aos="fade-right">
                    <img src="https://images.pexels.com/photos/708587/pexels-photo-708587.jpeg" alt="Freshly made margherita pizza">
                </div>
                <div class="about-content" data-aos="fade-left" data-aos-delay="200">
                    <h2 class="section-title" style="text-align: left;">Our Story</h2>
                    <p>Since 1998, Pizza Hurt has been on a simple mission: to create the most mind-blowingly delicious pizza known to mankind. We believe in fresh ingredients, bold flavors, and a crust that's the perfect balance of crispy and chewy. Every pizza is a masterpiece, crafted with passion and a little bit of attitude.</p>
                    <p>We're not just a pizza place; we're a part of the community. We're where families celebrate, friends gather, and pizza lovers unite.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </section>

<section id="specials">
            <div class="container">
                <h2 class="section-title">This Week's Specials</h2>
                <p class="section-subtitle">Hand-crafted creations that are guaranteed to make your taste buds sing. Don't miss out!</p>
                <div class="specials-grid">
                    <div class="special-card" data-aos="fade-up">
                        <div class="special-card-image">
                            <img src="https://images.unsplash.com/photo-1593560704563-f176a2eb61db?q=80&w=1964&auto=format&fit=crop" alt="The Pepperoni King Pizza">
                        </div>
                        <div class="special-card-content">
                            <h3>The Pepperoni King</h3>
                            <p>Loaded with a double layer of premium pepperoni, mozzarella, and our signature zesty tomato sauce.</p>
                            <span class="price">$18.99</span>
                        </div>
                    </div>
                    <div class="special-card" data-aos="fade-up" data-aos-delay="200">
                        <div class="special-card-image">
                             <img src="https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?q=80&w=2070&auto=format&fit=crop" alt="Veggie Supreme Pizza">
                        </div>
                        <div class="special-card-content">
                            <h3>Veggie Supreme</h3>
                            <p>A garden on a crust! Bell peppers, red onions, olives, mushrooms, and fresh tomatoes.</p>
                            <span class="price">$17.99</span>
                        </div>
                    </div>
                    <div class="special-card" data-aos="fade-up" data-aos-delay="400">
                        <div class="special-card-image">
                            <img src="https://images.pexels.com/photos/708587/pexels-photo-708587.jpeg" alt="BBQ Chicken Blast Pizza">
                        </div>
                        <div class="special-card-content">
                            <h3>BBQ Chicken Blast</h3>
                            <p>Tangy BBQ sauce, grilled chicken, red onions, and cilantro. A flavor explosion!</p>
                            <span class="price">$19.99</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="deals">
            <div class="container">
                <div class="deal-banner" data-aos="zoom-in">
                    <div class="deal-content">
                        <h2>Family Feast Deal <br>Only <span>$29.99</span></h2>
                        <p>Get two large 1-topping pizzas, a 2-liter soda, and an order of our famous garlic knots. Perfect for a night in!</p>
                        <a href="#" class="btn btn-secondary">Claim Deal Now</a>
                    </div>
                    <div class="deal-image"></div>
                </div>
            </div>
        </section>
        
        <section id="menu">
            <div class="container">
                <h2 class="section-title">Explore Our Menu</h2>
                <p class="section-subtitle">From classic pizzas to delicious sides and desserts, we've got something for every craving.</p>
                <div class="menu-grid">
                    <div class="menu-item" data-aos="fade-up" data-aos-delay="0">
                        <i class="fa-solid fa-pizza-slice"></i>
                        <h3>Pizzas</h3>
                    </div>
                    <div class="menu-item" data-aos="fade-up" data-aos-delay="100">
                        <i class="fa-solid fa-drumstick-bite"></i>
                        <h3>Sides</h3>
                    </div>
                    <div class="menu-item" data-aos="fade-up" data-aos-delay="200">
                        <i class="fa-solid fa-martini-glass-citrus"></i>
                        <h3>Drinks</h3>
                    </div>
                    <div class="menu-item" data-aos="fade-up" data-aos-delay="300">
                        <i class="fa-solid fa-ice-cream"></i>
                        <h3>Desserts</h3>
                    </div>
                </div>
            </div>
        </section>

<section id="process">
            <div class="container">
                <h2 class="section-title">How We Do It</h2>
                <p class="section-subtitle">Perfection takes process. Here's our four-step secret to the perfect slice.</p>
                <div class="process-steps">
                    <div class="step" data-aos="fade-right" data-aos-delay="100">
                        <div class="step-icon">1</div>
                        <h3>Fresh Dough</h3>
                        <p>Made daily, fermented for 48 hours for maximum flavor.</p>
                    </div>
                    <div class="step" data-aos="fade-right" data-aos-delay="300">
                        <div class="step-icon">2</div>
                        <h3>Secret Sauce</h3>
                        <p>Our family recipe, a tangy blend of vine-ripened tomatoes.</p>
                    </div>
                    <div class="step" data-aos="fade-left" data-aos-delay="500">
                        <div class="step-icon">3</div>
                        <h3>Premium Toppings</h3>
                        <p>Only the freshest, highest-quality ingredients make the cut.</p>
                    </div>
                    <div class="step" data-aos="fade-left" data-aos-delay="700">
                        <div class="step-icon">4</div>
                        <h3>Fired to Perfection</h3>
                        <p>Baked in our stone ovens at 800°F for a crispy crust.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials">
            <div class="container">
                <h2 class="section-title">What Our Customers Say</h2>
                <p class="section-subtitle">Don't just take our word for it. Here's what the people think.</p>
                <div class="testimonial-grid">
                    <div class="testimonial-card" data-aos="flip-left">
                        <p>"I've eaten a lot of pizza in my life, but nothing compares to Pizza Hurt. The crust is just... perfect. My family is obsessed!"</p>
                        <div class="customer-info">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1888&auto=format&fit=crop" alt="Customer Sarah J.">
                            <div>
                                <h4>Sarah J.</h4>
                                <span>Pizza Enthusiast</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card" data-aos="flip-left" data-aos-delay="200">
                        <p>"The BBQ Chicken Blast is a game changer. I literally dream about it. Fast delivery and the pizza always arrives hot and fresh."</p>
                        <div class="customer-info">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop" alt="Customer Mike R.">
                            <div>
                                <h4>Mike R.</h4>
                                <span>Food Blogger</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card" data-aos="flip-left" data-aos-delay="400">
                        <p>"My go-to spot for Friday night pizza. The Family Feast Deal is an incredible value and the quality is always top-notch. Highly recommend!"</p>
                        <div class="customer-info">
                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1887&auto=format&fit=crop" alt="Customer Jessica L.">
                            <div>
                                <h4>Jessica L.</h4>
                                <span>Loyal Customer</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section id="gallery">
            <div class="container">
                <h2 class="section-title">#PizzaHurt Moments</h2>
                <p class="section-subtitle">A feast for your eyes. See our creations and happy customers.</p>
                <div class="gallery-grid">
                    <div class="gallery-item" data-aos="zoom-in"><img src="https://images.unsplash.com/photo-1590947132387-155cc02f3212?q=80&w=2070&auto=format&fit=crop" alt="Pizza making process"><div class="overlay">Making magic</div></div>
                    <div class="gallery-item" data-aos="zoom-in" data-aos-delay="100"><img src="https://images.unsplash.com/photo-1542834369-f10ebf06d3e0?q=80&w=1887&auto=format&fit=crop" alt="Close up on a cheesy pizza slice"><div class="overlay">That cheese pull</div></div>
                    <div class="gallery-item" data-aos="zoom-in" data-aos-delay="200"><img src="https://images.pexels.com/photos/708587/pexels-photo-708587.jpeg" alt="Friends sharing pizza"><div class="overlay">Good times</div></div>
                    <div class="gallery-item" data-aos="zoom-in" data-aos-delay="300"><img src="https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?q=80&w=1974&auto=format&fit=crop" alt="Pizza on a dark background"><div class="overlay">Art on a plate</div></div>
                    <div class="gallery-item" data-aos="zoom-in" data-aos-delay="400"><img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?q=80&w=2069&auto=format&fit=crop" alt="Single pizza slice"><div class="overlay">Your slice</div></div>
                </div>
            </div>
        </section>

<section id="find-store">
            <div class="container find-store-content" data-aos="fade-up">
                <h2 class="section-title">Find a Pizza Hurt Near You</h2>
                <p class="section-subtitle">Craving a slice right now? Enter your location to find the closest store and get directions.</p>
                <div class="location-search">
                    <input type="text" placeholder="Enter your city or zip code...">
                    <a href="#" class="btn"><i class="fa-solid fa-location-crosshairs"></i> Find</a>
                </div>
            </div>
        </section>

<section id="app-download">
            <div class="container app-download-content">
                <div class="app-text" data-aos="fade-right">
                    <h2>Get Pizza On The Go</h2>
                    <p>Download the Pizza Hurt app for faster ordering, exclusive in-app deals, and a rewards program that earns you free pizza!</p>
                    <div class="app-buttons">
                        <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/2560px-Download_on_the_App_Store_Badge.svg.png" alt="Download on the App Store"></a>
                        <a href="#"><img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play"></a>
                    </div>
                </div>
                <div class="app-image" data-aos="fade-left" data-aos-delay="200">
                    <img src="https://images.pexels.com/photos/9461218/pexels-photo-9461218.jpeg" alt="Pizza Hurt mobile app ">
                </div>
            </div>
        </section>

</main>
    
    <footer id="contact" class="footer">
        <div class="container footer-container">
            <div class="footer-col" data-aos="fade-up">
                <h4>Pizza Hurt</h4>
                <p>123 Pizza Lane,<br>Flavor Town, USA 12345</p>
                <p><strong>Phone:</strong> (555) 123-4567<br><strong>Email:</strong> contact@pizzahurt.com</p>
            </div>
            <div class="footer-col" data-aos="fade-up" data-aos-delay="100">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#hero">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#specials">Specials</a></li>
                    <li><a href="#menu">Full Menu</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </div>
            <div class="footer-col" data-aos="fade-up" data-aos-delay="200">
                <h4>Our Policies</h4>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Allergen Info</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
            <div class="footer-col" data-aos="fade-up" data-aos-delay="300">
                <h4>Follow Us</h4>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Pizza Hurt, Inc. All Rights Reserved. This is a fictional website for demonstration purposes.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* CSS Reset and Global Styles */
        :root {
            --primary-color: #FFC107; /* Bright Yellow */
            --secondary-color: #E63946; /* Accent Red */
            --dark-color: #1a1a1a;
            --light-dark-color: #2c2c2c;
            --text-color: #f4f4f4;
            --font-family: 'Poppins', sans-serif;
            --header-height: 80px;
        }

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

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-family);
            background-color: var(--dark-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden; /* Prevents horizontal scroll on AOS animations */
        }

/* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

section {
            padding: 6rem 0;
        }

.section-title {
            font-size: 2.8rem;
            text-align: center;
            margin-bottom: 1rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.section-subtitle {
            text-align: center;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 4rem auto;
            color: #ccc;
        }

.btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: var(--primary-color);
            color: var(--dark-color);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.btn:hover {
            background-color: #ffca2c;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
        }

.btn-secondary {
            background-color: var(--secondary-color);
            color: var(--text-color);
        }

.btn-secondary:hover {
             background-color: #e84a59;
             box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
        }

img {
            max-width: 100%;
            height: auto;
            display: block;
        }

/* Header / Navbar */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--header-height);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            z-index: 1000;
            transition: background-color 0.4s ease, box-shadow 0.4s ease;
        }
        
        .header.scrolled {
            background-color: rgba(26, 26, 26, 0.85);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

.logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
            text-decoration: none;
        }
        .logo i {
            margin-right: 0.5rem;
        }

.nav-links {
            list-style: none;
            display: flex;
        }

.nav-links li {
            margin-left: 2rem;
        }

.nav-links a {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: color 0.3s ease;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover, .nav-links a.active {
            color: var(--primary-color);
        }

.nav-links a:hover::after, .nav-links a.active::after {
            width: 100%;
        }

.burger {
            display: none;
            cursor: pointer;
        }
        .burger div {
            width: 25px;
            height: 3px;
            background-color: var(--text-color);
            margin: 5px;
            transition: all 0.3s ease;
        }

/* 1. Hero Section */
        #hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: var(--header-height);
            /* Image by Ivan Torres on Unsplash: https://unsplash.com/photos/a-slice-of-pizza-sitting-on-top-of-a-white-plate-MQUZ3_sF_gA */
            background: linear-gradient(rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7)), url('https://images.unsplash.com/photo-1594007654729-407eedc4be65?q=80&w=1928&auto=format&fit=crop') no-repeat center center/cover;
        }

.hero-content {
            max-width: 800px;
        }
        
        .hero-content h1 {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        
        .hero-content h1 span {
            color: var(--primary-color);
        }
        
        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: #ddd;
        }

/* 2. About Us Section */
        #about .container {
            display: flex;
            align-items: center;
            gap: 4rem;
        }

.about-image {
            flex: 1;
            border-radius: 15px;
            overflow: hidden;
        }
        
        /* Image by Ahtziri Lagarde on Unsplash: https://unsplash.com/photos/a-close-up-of-a-pizza-with-basil-on-it-glRqy2s2TEI */
        .about-image img {
            border-radius: 15px;
            transition: transform 0.4s ease;
        }

.about-image:hover img {
            transform: scale(1.05);
        }

.about-content {
            flex: 1;
        }
        
        .about-content h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        
        .about-content p {
            margin-bottom: 1.5rem;
            color: #ccc;
        }

/* 3. Specialty Pizzas Section */
        .specials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .special-card {
            background-color: var(--light-dark-color);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .special-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 25px rgba(0,0,0,0.4);
        }

.special-card-image {
            height: 220px;
            overflow: hidden;
        }
        
        .special-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        
        .special-card:hover .special-card-image img {
            transform: scale(1.1);
        }
        
        .special-card-content {
            padding: 1.5rem;
        }
        
        .special-card-content h3 {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        
        .special-card-content p {
            font-size: 0.9rem;
            margin-bottom: 1rem;
            color: #bbb;
        }

.price {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-color);
        }

/* 4. Deals Section */
        #deals {
            background-color: var(--light-dark-color);
        }
        .deal-banner {
            display: flex;
            align-items: center;
            background-color: var(--dark-color);
            border-radius: 20px;
            overflow: hidden;
        }

.deal-content {
            padding: 4rem;
            flex: 1;
        }
        
        .deal-content h2 {
            font-size: 2.5rem;
            line-height: 1.3;
        }
        
        .deal-content h2 span {
            color: var(--secondary-color);
            font-weight: 800;
        }
        
        .deal-content p {
            margin: 1rem 0 2rem 0;
            color: #ccc;
        }
        
        .deal-image {
            flex: 1;
            min-height: 400px;
            /* Image by Alan Hardman on Unsplash: https://unsplash.com/photos/a-pizza-with-pepperoni-and-basil-on-it-SU1LFtVlK4Q */
            background: url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=1981&auto=format&fit=crop') no-repeat center center/cover;
        }

/* 5. Menu Highlights Section */
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            text-align: center;
        }
        
        .menu-item {
            background: var(--light-dark-color);
            padding: 2.5rem 1.5rem;
            border-radius: 15px;
            transition: all 0.3s ease;
        }
        
        .menu-item:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-5px);
        }

.menu-item:hover i, .menu-item:hover h3 {
             color: var(--dark-color);
        }

.menu-item i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            transition: color 0.3s ease;
        }
        
        .menu-item h3 {
            font-size: 1.4rem;
            transition: color 0.3s ease;
        }

/* 6. Our Process Section */
        .process-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-top: 4rem;
        }

.process-steps::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--light-dark-color);
            transform: translateY(-50%);
            z-index: -1;
        }

.step {
            text-align: center;
            flex: 1;
            position: relative;
        }

.step-icon {
            width: 80px;
            height: 80px;
            background: var(--dark-color);
            border: 3px solid var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem auto;
            font-size: 2.5rem;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

.step h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

/* 7. Testimonials Section */
        #testimonials {
             background-color: var(--light-dark-color);
        }
        
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

.testimonial-card {
            background: var(--dark-color);
            padding: 2rem;
            border-radius: 15px;
            border-left: 5px solid var(--primary-color);
        }
        
        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1.5rem;
            color: #ddd;
        }
        
        .customer-info {
            display: flex;
            align-items: center;
        }
        
        .customer-info img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 1rem;
            object-fit: cover;
        }
        
        .customer-info h4 {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .customer-info span {
            font-size: 0.9rem;
            color: #aaa;
        }

/* 8. Gallery Section */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 250px);
            gap: 1rem;
        }

.gallery-item {
            overflow: hidden;
            border-radius: 10px;
            position: relative;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 2; }
        .gallery-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 3; }
        .gallery-item:nth-child(5) { grid-column: 1 / 2; grid-row: 2 / 3; }

.overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 1rem;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .gallery-item:hover .overlay {
            opacity: 1;
        }

/* 9. Find Store Section */
        .find-store-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }

.location-search {
            margin-top: 2rem;
            display: flex;
            gap: 1rem;
            background: var(--light-dark-color);
            border-radius: 50px;
            padding: 0.5rem;
        }

.location-search input {
            flex-grow: 1;
            border: none;
            background: transparent;
            color: var(--text-color);
            font-size: 1rem;
            padding: 0 1.5rem;
            outline: none;
        }

/* 10. App Download Section */
        #app-download {
            background-color: var(--light-dark-color);
        }
        .app-download-content {
            display: flex;
            align-items: center;
            gap: 4rem;
        }
        
        .app-text {
            flex: 1;
        }

.app-text h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

.app-text p {
            margin-bottom: 2rem;
        }
        
        .app-buttons a {
            margin-right: 1rem;
        }
        
        .app-buttons img {
            height: 50px;
            transition: transform 0.3s ease;
        }

.app-buttons a:hover img {
            transform: scale(1.05);
        }

.app-image {
            flex: 1;
            text-align: center;
        }

.app-image img {
            max-width: 300px;
            display: inline-block;
        }

/* Footer */
        .footer {
            background-color: #111;
            padding: 4rem 0 2rem 0;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
        }
        
        .footer-col h4 {
            font-size: 1.2rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .footer-col h4::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            background-color: var(--primary-color);
            height: 2px;
            width: 50px;
        }

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

.footer-col ul li:not(:last-child) {
            margin-bottom: 0.8rem;
        }
        
        .footer-col ul li a {
            color: #bbb;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-col ul li a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }
        
        .social-links a {
            display: inline-block;
            height: 40px;
            width: 40px;
            background-color: rgba(255,255,255,0.1);
            margin-right: 0.5rem;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            color: #fff;
            transition: all 0.4s ease;
        }

.social-links a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }

.footer-bottom {
            margin-top: 4rem;
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #333;
            color: #888;
        }

/* Responsive Design */
        @media(max-width: 992px) {
            .container {
                padding: 0 1.5rem;
            }
            .section-title {
                font-size: 2.4rem;
            }
            .hero-content h1 {
                font-size: 3rem;
            }
            #about .container {
                flex-direction: column;
            }
            .deal-banner {
                flex-direction: column;
            }
            .deal-content {
                padding: 2.5rem;
                text-align: center;
            }
            .deal-image {
                width: 100%;
                min-height: 300px;
            }
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: auto;
            }
            .gallery-item:nth-child(n) {
                grid-column: auto;
                grid-row: auto;
                height: 250px;
            }
            .app-download-content {
                flex-direction: column;
            }
            .app-text { text-align: center; }
            .app-buttons {
                display: flex;
                justify-content: center;
            }
        }

@media(max-width: 768px) {
            :root { --header-height: 70px; }
            .section-title { font-size: 2rem; }
            section { padding: 4rem 0; }
            
            .nav-links {
                position: fixed;
                right: 0;
                top: 0;
                height: 100vh;
                width: 60%;
                background-color: var(--dark-color);
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                transform: translateX(100%);
                transition: transform 0.5s ease-in-out;
                box-shadow: -5px 0 15px rgba(0,0,0,0.3);
            }
            
            .nav-links.nav-active {
                transform: translateX(0%);
            }
            
            .nav-links li {
                margin: 0;
                opacity: 0;
            }
            
            .burger {
                display: block;
                z-index: 1001; /* Above nav links */
            }

.toggle .line1 {
                transform: rotate(-45deg) translate(-5px, 6px);
            }
            .toggle .line2 {
                opacity: 0;
            }
            .toggle .line3 {
                transform: rotate(45deg) translate(-5px, -6px);
            }
            
            @keyframes navLinkFade {
                from {
                    opacity: 0;
                    transform: translateX(50px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            .hero-content h1 { font-size: 2.5rem; }
            .hero-content p { font-size: 1rem; }
            .menu-grid { grid-template-columns: repeat(2, 1fr); }
            .process-steps { flex-direction: column; gap: 2rem; }
            .process-steps::before {
                top: 0;
                left: 50%;
                width: 2px;
                height: 100%;
                transform: translateX(-50%);
            }
            .location-search {
                flex-direction: column;
                border-radius: 15px;
                padding: 1rem;
            }
            .location-search input { text-align: center; margin-bottom: 1rem; }
            .footer-container { grid-template-columns: 1fr; text-align: center; }
            .footer-col h4::after { left: 50%; transform: translateX(-50%); }
            .social-links { text-align: center; }
        }

@media(max-width: 480px) {
            .menu-grid { grid-template-columns: 1fr; }
        }

JavaScript

// Initialize AOS
        AOS.init({
            duration: 1000, // values from 0 to 3000, with step 50ms
            once: true, // whether animation should happen only once - while scrolling down
        });
        
        // Mobile Navigation Toggle
        const burger = document.querySelector('.burger');
        const nav = document.querySelector('.nav-links');
        const navLinks = document.querySelectorAll('.nav-links li');

burger.addEventListener('click', () => {
            // Toggle Nav
            nav.classList.toggle('nav-active');

// Animate Links
            navLinks.forEach((link, index) => {
                if (link.style.animation) {
                    link.style.animation = '';
                } else {
                    link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
                }
            });
            
            // Burger Animation
            burger.classList.toggle('toggle');
        });

// Close nav when a link is clicked
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                if(nav.classList.contains('nav-active')){
                    nav.classList.remove('nav-active');
                    burger.classList.remove('toggle');
                    navLinks.forEach(link => link.style.animation = '');
                }
            });
        });

// Header scroll effect
        const header = document.querySelector('.header');
        window.addEventListener('scroll', () => {
            if(window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

Delicious Pizza Hurt Template Preview

Download Options