Blue 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 Hut - Taste the Difference</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <i class="fas fa-pizza-slice"></i>
                Pizza Hut
            </a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#specials">Specials</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="mobile-menu-btn">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Taste the Difference</h1>
            <p>Experience the authentic taste of Italy with our handcrafted pizzas made from the finest ingredients and baked to perfection in our traditional wood-fired ovens.</p>
            <div class="hero-btns">
                <a href="#menu" class="btn">View Menu</a>
                <a href="#contact" class="btn btn-primary">Order Now</a>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Us</h2>
                <p>Discover our passion for pizza and the story behind our success</p>
            </div>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pizza Chef">
                </div>
                <div class="about-text">
                    <h3>Our Story</h3>
                    <p>Founded in 1958, Pizza Hut has been serving delicious pizzas with the same passion and dedication for over 60 years. What started as a small pizzeria in Wichita, Kansas, has grown into the world's largest pizza chain with locations in over 100 countries.</p>
                    <p>Our secret lies in the perfect combination of high-quality ingredients, traditional recipes, and innovative techniques. Each pizza is handcrafted with love and baked to perfection in our signature ovens.</p>
                    <p>At Pizza Hut, we believe that great food brings people together. That's why we're committed to creating memorable dining experiences for our customers, one pizza at a time.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="section menu" id="menu">
        <div class="container">
            <div class="section-title">
                <h2>Our Menu</h2>
                <p>Explore our delicious selection of handcrafted pizzas and Italian specialties</p>
            </div>
            <div class="menu-items">
                
                <div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1381&q=80" alt="Margherita Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>Margherita</h3>
                            <span>$12.99</span>
                        </div>
                        <p>Classic pizza with tomato sauce, fresh mozzarella, basil, and a drizzle of olive oil.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1544982503-9f984c14501a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Pepperoni Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>Pepperoni</h3>
                            <span>$14.99</span>
                        </div>
                        <p>Traditional pizza topped with tomato sauce, mozzarella, and generous amounts of pepperoni.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1595854341625-f33ee10dbf94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Vegetarian Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>Vegetarian</h3>
                            <span>$13.99</span>
                        </div>
                        <p>Healthy option with tomato sauce, mozzarella, bell peppers, mushrooms, onions, and olives.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1378&q=80" alt="Hawaiian Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>Hawaiian</h3>
                            <span>$15.99</span>
                        </div>
                        <p>Controversial but delicious combination of tomato sauce, mozzarella, ham, and pineapple.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1620374645498-af6bd681a0bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="BBQ Chicken Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>BBQ Chicken</h3>
                            <span>$16.99</span>
                        </div>
                        <p>Tangy BBQ sauce base with mozzarella, grilled chicken, red onions, and cilantro.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="menu-item">
                    <div class="menu-item-img">
                        <img src="https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1378&q=80" alt="Meat Lovers Pizza">
                    </div>
                    <div class="menu-item-content">
                        <div class="menu-item-title">
                            <h3>Meat Lovers</h3>
                            <span>$17.99</span>
                        </div>
                        <p>For carnivores: tomato sauce, mozzarella, pepperoni, sausage, bacon, and ham.</p>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section specials" id="specials">
        <div class="container">
            <div class="section-title">
                <h2>Weekly Specials</h2>
                <p>Don't miss out on our limited-time offers and seasonal creations</p>
            </div>
            <div class="specials-content">
                
                <div class="special-item">
                    <div class="special-item-img">
                        <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Truffle Pizza">
                    </div>
                    <div class="special-item-content">
                        <h3>Truffle Delight</h3>
                        <p>Indulge in our luxurious truffle-infused pizza with wild mushrooms and aged cheese.</p>
                        <span class="price">$19.99</span>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="special-item">
                    <div class="special-item-img">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1381&q=80" alt="Seafood Pizza">
                    </div>
                    <div class="special-item-content">
                        <h3>Seafood Sensation</h3>
                        <p>Fresh shrimp, calamari, and mussels on a garlic white sauce base with mozzarella.</p>
                        <span class="price">$21.99</span>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>

<div class="special-item">
                    <div class="special-item-img">
                        <img src="https://images.unsplash.com/photo-1544982503-9f984c14501a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Dessert Pizza">
                    </div>
                    <div class="special-item-content">
                        <h3>Chocolate Dream</h3>
                        <p>Sweet pizza with Nutella, fresh strawberries, banana slices, and powdered sugar.</p>
                        <span class="price">$12.99</span>
                        <a href="#" class="btn">Order Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Our Customers Say</h2>
                <p>Hear from our satisfied customers about their Pizza Hut experience</p>
            </div>
            <div class="testimonial-slider">
                
                <div class="testimonial-slide active">
                    <div class="testimonial-text">
                        The best pizza I've ever had! The crust is perfectly crispy, the toppings are fresh, and the flavors are amazing. I order from Pizza Hut at least once a week and I'm never disappointed.
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-author-img">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sarah Johnson">
                        </div>
                        <div class="testimonial-author-info">
                            <h4>Sarah Johnson</h4>
                            <p>Regular Customer</p>
                        </div>
                    </div>
                </div>

<div class="testimonial-slide">
                    <div class="testimonial-text">
                        I've been to Italy and tasted authentic pizza there, and I can honestly say Pizza Hut comes very close to that experience. Their Margherita pizza is my absolute favorite - simple but perfect!
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-author-img">
                            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1376&q=80" alt="Michael Chen">
                        </div>
                        <div class="testimonial-author-info">
                            <h4>Michael Chen</h4>
                            <p>Food Blogger</p>
                        </div>
                    </div>
                </div>

<div class="testimonial-slide">
                    <div class="testimonial-text">
                        The delivery is always on time, the pizza arrives hot, and the customer service is excellent. Whenever we have friends over, we order from Pizza Hut because we know it will impress everyone.
                    </div>
                    <div class="testimonial-author">
                        <div class="testimonial-author-img">
                            <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1398&q=80" alt="Emily Rodriguez">
                        </div>
                        <div class="testimonial-author-info">
                            <h4>Emily Rodriguez</h4>
                            <p>Local Resident</p>
                        </div>
                    </div>
                </div>

<section class="section team" id="team">
        <div class="container">
            <div class="section-title">
                <h2>Our Master Chefs</h2>
                <p>Meet the talented team behind our delicious pizzas</p>
            </div>
            <div class="team-members">
                
                <div class="team-member">
                    <div class="team-member-img">
                        <img src="https://images.unsplash.com/photo-1583394293214-28ded15ee548?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80" alt="Chef Marco">
                        <div class="team-member-social">
                            <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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="team-member-info">
                        <h3>Marco Bianchi</h3>
                        <p>Head Chef</p>
                    </div>
                </div>

<div class="team-member">
                    <div class="team-member-img">
                        <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chef Sophia">
                        <div class="team-member-social">
                            <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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="team-member-info">
                        <h3>Sophia Rossi</h3>
                        <p>Sous Chef</p>
                    </div>
                </div>

<div class="team-member">
                    <div class="team-member-img">
                        <img src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Chef Antonio">
                        <div class="team-member-social">
                            <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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="team-member-info">
                        <h3>Antonio Moretti</h3>
                        <p>Pizza Chef</p>
                    </div>
                </div>

<div class="team-member">
                    <div class="team-member-img">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Chef Isabella">
                        <div class="team-member-social">
                            <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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="team-member-info">
                        <h3>Isabella Conti</h3>
                        <p>Pastry Chef</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section gallery" id="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Our Gallery</h2>
                <p>A visual journey through our pizza-making process and delicious creations</p>
            </div>
            <div class="gallery-items">
                
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pizza Preparation">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>

<div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1381&q=80" alt="Pizza Oven">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>

<div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1544982503-9f984c14501a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Fresh Ingredients">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>

<div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1595854341625-f33ee10dbf94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pizza Slice">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>

<div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1378&q=80" alt="Pizza Box">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>

<div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1620374645498-af6bd681a0bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dining Area">
                    <div class="gallery-item-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
                <p>Get in touch with us for reservations, catering, or any questions</p>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <div class="contact-info-item">
                        <div class="contact-info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-info-text">
                            <h4>Location</h4>
                            <p>123 Pizza Street, Foodville, NY 10001</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <div class="contact-info-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-info-text">
                            <h4>Phone</h4>
                            <p>+1 (555) 123-4567</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <div class="contact-info-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-info-text">
                            <h4>Email</h4>
                            <p>info@pizzahut.com</p>
                        </div>
                    </div>
                    <div class="contact-info-item">
                        <div class="contact-info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-info-text">
                            <h4>Opening Hours</h4>
                            <p>Monday - Friday: 10:00 AM - 10:00 PM</p>
                            <p>Saturday - Sunday: 11:00 AM - 11:00 PM</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Your Email</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<section class="newsletter">
        <div class="container">
            <div class="section-title">
                <h2>Join Our Newsletter</h2>
                <p>Subscribe to get updates on special offers, new menu items, and events</p>
            </div>
            <form class="newsletter-form">
                <input type="email" placeholder="Your Email Address" class="newsletter-input" required>
                <button type="submit" class="btn">Subscribe</button>
            </form>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>Pizza Hut</h3>
                    <p>Bringing the authentic taste of Italy to your table since 1958. Our passion for pizza is reflected in every bite.</p>
                    <div class="footer-social">
                        <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-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#menu">Menu</a></li>
                        <li><a href="#specials">Specials</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Our Menu</h3>
                    <ul class="footer-links">
                        <li><a href="#">Classic Pizzas</a></li>
                        <li><a href="#">Specialty Pizzas</a></li>
                        <li><a href="#">Vegetarian Options</a></li>
                        <li><a href="#">Desserts</a></li>
                        <li><a href="#">Beverages</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <p>123 Pizza Street, Foodville, NY 10001</p>
                    <p>+1 (555) 123-4567</p>
                    <p>info@pizzahut.com</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Pizza Hut. All Rights Reserved. Designed with <i class="fas fa-heart" style="color: #ff0000;"></i> by Pizza Lovers</p>
            </div>
        </div>
    </footer>

<div class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </div>

</body>
</html>

CSS

:root {
            --primary-color: #006491;
            --secondary-color: #003b5c;
            --accent-color: #ffc72c;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --text-color: #333;
            --text-light: #fff;
            --transition: all 0.3s ease;
            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --border-radius: 8px;
        }

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

body {
            font-family: 'Poppins', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

a {
            text-decoration: none;
            color: inherit;
        }

ul {
            list-style: none;
        }

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

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--accent-color);
            color: var(--dark-color);
            border: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 14px;
        }

.btn:hover {
            background: #ffb700;
            transform: translateY(-3px);
            box-shadow: var(--box-shadow);
        }

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

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

.section {
            padding: 80px 0;
        }

.section-title {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.section-title p {
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
            color: #666;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent-color);
            border-radius: 2px;
        }

/* Header */
        header {
            background: var(--primary-color);
            color: var(--text-light);
            padding: 20px 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }

header.scrolled {
            padding: 15px 0;
            background: rgba(0, 100, 145, 0.95);
            backdrop-filter: blur(10px);
        }

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

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-light);
            display: flex;
            align-items: center;
        }

.logo i {
            color: var(--accent-color);
            margin-right: 10px;
            font-size: 2rem;
        }

.nav-links {
            display: flex;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

.nav-links a:hover {
            color: var(--accent-color);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: var(--transition);
        }

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

.mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            color: var(--text-light);
            display: flex;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(transparent, var(--light-color));
            z-index: 1;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            animation: fadeInUp 1s ease;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-btns {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

/* About Section */
        .about {
            background: var(--light-color);
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }

.about-img {
            flex: 1;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            animation: fadeInLeft 1s ease;
        }

.about-text {
            flex: 1;
            animation: fadeInRight 1s ease;
        }

.about-text h3 {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.about-text p {
            margin-bottom: 20px;
        }

/* Menu Section */
        .menu {
            background: url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            background-attachment: fixed;
            position: relative;
            color: var(--text-light);
        }

.menu::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 100, 145, 0.9);
        }

.menu .container {
            position: relative;
            z-index: 1;
        }

.menu .section-title h2,
        .menu .section-title p {
            color: var(--text-light);
        }

.menu-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.menu-item {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            animation: fadeInUp 0.5s ease;
        }

.menu-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

.menu-item-img {
            height: 200px;
            overflow: hidden;
        }

.menu-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.menu-item:hover .menu-item-img img {
            transform: scale(1.1);
        }

.menu-item-content {
            padding: 20px;
        }

.menu-item-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

.menu-item-title h3 {
            font-size: 1.3rem;
            color: var(--accent-color);
        }

.menu-item-title span {
            font-weight: 700;
            color: var(--text-light);
        }

.menu-item p {
            margin-bottom: 15px;
            color: #eee;
        }

/* Specials Section */
        .specials {
            background: var(--light-color);
        }

.specials-content {
            display: flex;
            gap: 30px;
            margin-top: 50px;
        }

.special-item {
            flex: 1;
            background: #fff;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            animation: fadeInUp 0.5s ease;
        }

.special-item:hover {
            transform: translateY(-10px);
        }

.special-item-img {
            height: 250px;
            overflow: hidden;
        }

.special-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.special-item:hover .special-item-img img {
            transform: scale(1.1);
        }

.special-item-content {
            padding: 20px;
            text-align: center;
        }

.special-item-content h3 {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

.special-item-content p {
            margin-bottom: 15px;
            color: #666;
        }

/* Testimonials Section */
        .testimonials {
            background: var(--primary-color);
            color: var(--text-light);
        }

.testimonials .section-title h2,
        .testimonials .section-title p {
            color: var(--text-light);
        }

.testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

.testimonial-slide {
            text-align: center;
            padding: 30px;
            display: none;
            animation: fadeIn 1s ease;
        }

.testimonial-slide.active {
            display: block;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 30px;
            position: relative;
        }

.testimonial-text::before,
        .testimonial-text::after {
            content: '"';
            font-size: 3rem;
            color: var(--accent-color);
            opacity: 0.3;
            position: absolute;
        }

.testimonial-text::before {
            top: -20px;
            left: -20px;
        }

.testimonial-text::after {
            bottom: -40px;
            right: -20px;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

.testimonial-author-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--accent-color);
        }

.testimonial-author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.testimonial-author-info h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

.testimonial-author-info p {
            color: #ccc;
            font-size: 0.9rem;
        }

.testimonial-nav {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

.testimonial-nav-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

.testimonial-nav-btn.active {
            background: var(--accent-color);
            transform: scale(1.2);
        }

/* Team Section */
        .team {
            background: var(--light-color);
        }

.team-members {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

.team-member {
            background: #fff;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            transition: var(--transition);
            text-align: center;
            animation: fadeInUp 0.5s ease;
        }

.team-member:hover {
            transform: translateY(-10px);
        }

.team-member-img {
            height: 300px;
            overflow: hidden;
            position: relative;
        }

.team-member-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.team-member:hover .team-member-img img {
            transform: scale(1.1);
        }

.team-member-social {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 10px;
            opacity: 0;
            transition: var(--transition);
        }

.team-member:hover .team-member-social {
            opacity: 1;
        }

.team-member-social a {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            color: var(--text-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.team-member-social a:hover {
            background: var(--accent-color);
            transform: translateY(-5px);
        }

.team-member-info {
            padding: 20px;
        }

.team-member-info h3 {
            font-size: 1.3rem;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

.team-member-info p {
            color: #666;
            font-size: 0.9rem;
        }

/* Gallery Section */
        .gallery {
            background: #fff;
        }

.gallery-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

.gallery-item {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--box-shadow);
            position: relative;
            height: 250px;
            animation: fadeIn 0.5s ease;
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-item-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 100, 145, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

.gallery-item:hover .gallery-item-overlay {
            opacity: 1;
        }

.gallery-item-overlay i {
            color: var(--text-light);
            font-size: 2rem;
        }

/* Contact Section */
        .contact {
            background: var(--light-color);
        }

.contact-content {
            display: flex;
            gap: 50px;
            margin-top: 50px;
        }

.contact-info {
            flex: 1;
            animation: fadeInLeft 1s ease;
        }

.contact-info h3 {
            font-size: 1.8rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.contact-info-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 25px;
        }

.contact-info-icon {
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: var(--text-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

.contact-info-text h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

.contact-info-text p {
            color: #666;
        }

.contact-form {
            flex: 1;
            background: #fff;
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            animation: fadeInRight 1s ease;
        }

.form-group {
            margin-bottom: 20px;
        }

.form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-family: 'Poppins', sans-serif;
            transition: var(--transition);
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 100, 145, 0.1);
        }

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

/* Newsletter Section */
        .newsletter {
            background: var(--primary-color);
            color: var(--text-light);
            text-align: center;
            padding: 60px 0;
        }

.newsletter .section-title h2,
        .newsletter .section-title p {
            color: var(--text-light);
        }

.newsletter-form {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
        }

.newsletter-input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            border-radius: var(--border-radius);
            font-family: 'Poppins', sans-serif;
        }

.newsletter-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
        }

/* Footer */
        footer {
            background: var(--secondary-color);
            color: var(--text-light);
            padding: 60px 0 20px;
        }

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

.footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

.footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--accent-color);
        }

.footer-col p {
            margin-bottom: 15px;
            color: #ccc;
        }

.footer-links li {
            margin-bottom: 10px;
        }

.footer-links a {
            color: #ccc;
            transition: var(--transition);
            display: inline-block;
        }

.footer-links a:hover {
            color: var(--accent-color);
            transform: translateX(5px);
        }

.footer-social {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

.footer-social a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

.footer-social a:hover {
            background: var(--accent-color);
            color: var(--dark-color);
            transform: translateY(-5px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            font-size: 0.9rem;
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: var(--text-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            z-index: 999;
        }

.back-to-top.active {
            opacity: 1;
            visibility: visible;
        }

.back-to-top:hover {
            background: var(--accent-color);
            transform: translateY(-5px);
        }

/* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-content,
            .contact-content {
                flex-direction: column;
            }

.about-img,
            .about-text,
            .contact-info,
            .contact-form {
                width: 100%;
            }

.specials-content {
                flex-direction: column;
            }

.special-item {
                margin-bottom: 30px;
            }
        }

@media (max-width: 768px) {
            .section {
                padding: 60px 0;
            }

.section-title h2 {
                font-size: 2rem;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.hero-btns {
                flex-direction: column;
                gap: 15px;
            }

.btn {
                width: 100%;
                max-width: 250px;
                margin: 0 auto;
            }

.nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: var(--primary-color);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 30px;
                transition: var(--transition);
            }

.nav-links.active {
                left: 0;
            }

.nav-links li {
                margin-left: 0;
            }

.mobile-menu-btn {
                display: block;
            }

.newsletter-form {
                flex-direction: column;
            }
        }

@media (max-width: 576px) {
            .section {
                padding: 50px 0;
            }

.section-title h2 {
                font-size: 1.8rem;
            }

.hero h1 {
                font-size: 2rem;
            }

.hero p {
                font-size: 1rem;
            }

.menu-items,
            .team-members,
            .gallery-items {
                grid-template-columns: 1fr;
            }
        }

JavaScript

// Mobile Menu Toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Sticky Header on Scroll
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

// Testimonial Slider
        const testimonialSlides = document.querySelectorAll('.testimonial-slide');
        const testimonialNavBtns = document.querySelectorAll('.testimonial-nav-btn');
        let currentSlide = 0;

function showSlide(index) {
            testimonialSlides.forEach(slide => slide.classList.remove('active'));
            testimonialNavBtns.forEach(btn => btn.classList.remove('active'));
            
            testimonialSlides[index].classList.add('active');
            testimonialNavBtns[index].classList.add('active');
            currentSlide = index;
        }

testimonialNavBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => showSlide(index));
        });

// Auto slide change
        setInterval(() => {
            currentSlide = (currentSlide + 1) % testimonialSlides.length;
            showSlide(currentSlide);
        }, 5000);

// Smooth Scrolling for Anchor Links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Back to Top Button
        const backToTopBtn = document.querySelector('.back-to-top');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.add('active');
            } else {
                backToTopBtn.classList.remove('active');
            }
        });

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Animation on Scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.about-img, .about-text, .menu-item, .special-item, .team-member, .gallery-item, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.animation = element.classList.contains('about-img') ? 'fadeInLeft 1s ease forwards' :
                                            element.classList.contains('about-text') ? 'fadeInRight 1s ease forwards' :
                                            element.classList.contains('contact-info') ? 'fadeInLeft 1s ease forwards' :
                                            element.classList.contains('contact-form') ? 'fadeInRight 1s ease forwards' :
                                            'fadeInUp 1s ease forwards';
                }
            });
        }

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

Blue Pizza Hurt Template Preview

Download Options