PizzaHurt About Page 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>About PizzaHurt - The Best Pizza in Town</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
</head>
<body>
    
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">Pizza<span>Hurt</span></a>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#history">History</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#ingredients">Ingredients</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Welcome to PizzaHurt</h1>
                <p>Where every slice tells a story of passion, tradition, and the finest ingredients</p>
                <a href="#about" class="btn">Explore Our Story</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Our Story</h2>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>Crafting Pizza Perfection Since 1985</h3>
                    <p>PizzaHurt was born from a simple dream: to create the most delicious, authentic pizzas using time-honored techniques and the freshest ingredients. What started as a small family-owned pizzeria has grown into a beloved institution, serving generations of pizza lovers.</p>
                    <p>Our founder, Giovanni Rossi, brought his secret family recipes from Naples, Italy, and combined them with local flavors to create something truly special. Today, we continue his legacy with the same passion and dedication to quality.</p>
                    <p>Every pizza we make is a labor of love, from our hand-tossed dough to our signature sauce made from vine-ripened tomatoes and a blend of secret spices.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Pizza chef preparing dough">
                </div>
            </div>
        </div>
    </section>

<section class="history" id="history">
        <div class="container">
            <div class="section-title">
                <h2>Our Journey</h2>
            </div>
            <div class="history-content">
                <div class="history-image">
                    <img src="https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" alt="Vintage pizza shop">
                </div>
                <div class="history-text">
                    <h3>A Legacy of Pizza Excellence</h3>
                    <p>Our journey through the decades has been marked by innovation, quality, and an unwavering commitment to our customers.</p>
                    <div class="timeline">
                        <div class="timeline-item">
                            <h4>1985 - Humble Beginnings</h4>
                            <p>Giovanni Rossi opens the first PizzaHurt in a small storefront in Brooklyn, NY</p>
                        </div>
                        <div class="timeline-item">
                            <h4>1992 - Secret Sauce</h4>
                            <p>Our signature sauce recipe is perfected after years of experimentation</p>
                        </div>
                        <div class="timeline-item">
                            <h4>2001 - National Recognition</h4>
                            <p>Featured in "America's Best Pizzerias" magazine</p>
                        </div>
                        <div class="timeline-item">
                            <h4>2010 - Expansion</h4>
                            <p>First franchise location opens in Chicago</p>
                        </div>
                        <div class="timeline-item">
                            <h4>2020 - Modern Era</h4>
                            <p>Launch of our eco-friendly packaging and delivery system</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team" id="team">
        <div class="container">
            <div class="section-title">
                <h2>Meet Our Team</h2>
            </div>
            <div class="team-members">
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Head Chef">
                    <div class="member-info">
                        <h3>Marco Bianchi</h3>
                        <p>Head Chef</p>
                        <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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="Pizza Chef">
                    <div class="member-info">
                        <h3>Luigi Conti</h3>
                        <p>Pizza Chef</p>
                        <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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Restaurant Manager">
                    <div class="member-info">
                        <h3>Sophia Rossi</h3>
                        <p>Restaurant Manager</p>
                        <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>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1752&q=80" alt="Marketing Director">
                    <div class="member-info">
                        <h3>Elena Ferrari</h3>
                        <p>Marketing Director</p>
                        <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="ingredients" id="ingredients">
        <div class="container">
            <div class="section-title">
                <h2>Our Quality Ingredients</h2>
            </div>
            <div class="ingredients-grid">
                <div class="ingredient-card">
                    <i class="fas fa-wheat-alt"></i>
                    <h3>Organic Flour</h3>
                    <p>Locally sourced, stone-ground flour for the perfect crust texture</p>
                </div>
                <div class="ingredient-card">
                    <i class="fas fa-cheese"></i>
                    <h3>Premium Cheese</h3>
                    <p>Fresh mozzarella made from whole milk for that perfect melt</p>
                </div>
                <div class="ingredient-card">
                    <i class="fas fa-pepper-hot"></i>
                    <h3>Fresh Vegetables</h3>
                    <p>Daily deliveries of farm-fresh produce for maximum flavor</p>
                </div>
                <div class="ingredient-card">
                    <i class="fas fa-drumstick-bite"></i>
                    <h3>Quality Meats</h3>
                    <p>Hand-selected, antibiotic-free meats from trusted suppliers</p>
                </div>
                <div class="ingredient-card">
                    <i class="fas fa-leaf"></i>
                    <h3>Signature Sauce</h3>
                    <p>Our secret family recipe with vine-ripened tomatoes</p>
                </div>
                <div class="ingredient-card">
                    <i class="fas fa-seedling"></i>
                    <h3>Herbs & Spices</h3>
                    <p>Imported Italian herbs for authentic flavor profiles</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Our Customers Say</h2>
            </div>
            <div class="testimonials-container">
                <div class="testimonial-slide active">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80" alt="Customer">
                    <p>"The best pizza I've ever had! The crust is perfectly crispy yet chewy, and the flavor combinations are incredible. I drive 30 minutes just to get my PizzaHurt fix!"</p>
                    <h4>Sarah Johnson</h4>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Customer">
                    <p>"As someone from Italy, I can say PizzaHurt captures the authentic Neapolitan pizza experience. Their Margherita pizza takes me back to Naples with every bite."</p>
                    <h4>Michael Rossi</h4>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Customer">
                    <p>"We've been coming to PizzaHurt for family dinners for 15 years. The consistency is amazing - every pizza is as delicious as the first one we tried. A true neighborhood gem!"</p>
                    <h4>The Thompson Family</h4>
                    <div class="rating">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
                <div class="testimonial-nav">
                    <button class="active" onclick="showTestimonial(0)"></button>
                    <button onclick="showTestimonial(1)"></button>
                    <button onclick="showTestimonial(2)"></button>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Our Pizza Gallery</h2>
            </div>
            <div class="gallery-grid">
                <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=1740&q=80" alt="Margherita Pizza">
                    <div class="gallery-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=1738&q=80" alt="Pepperoni Pizza">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1722&q=80" alt="Vegetarian Pizza">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1571066811602-716837d681de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1844&q=80" alt="BBQ Chicken Pizza">
                    <div class="gallery-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=1740&q=80" alt="Truffle Pizza">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1542282811-943ef1a977c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80" alt="Specialty Pizza">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Get In Touch</h3>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="info-content">
                            <h4>Location</h4>
                            <p>123 Pizza Street, Brooklyn, NY 11201</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone-alt"></i>
                        <div class="info-content">
                            <h4>Phone</h4>
                            <p>(718) 555-1234</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div class="info-content">
                            <h4>Email</h4>
                            <p>info@pizzahurt.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-clock"></i>
                        <div class="info-content">
                            <h4>Hours</h4>
                            <p>Mon-Thu: 11am - 10pm<br>Fri-Sat: 11am - 11pm<br>Sun: 12pm - 9pm</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" placeholder="Enter your name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Your Email</label>
                            <input type="email" id="email" placeholder="Enter your email" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" id="subject" placeholder="Enter subject">
                        </div>
                        <div class="form-group">
                            <label for="message">Your Message</label>
                            <textarea id="message" placeholder="Enter your message" required></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>PizzaHurt</h3>
                    <p>Crafting authentic, delicious pizzas since 1985. Our passion for quality ingredients and traditional techniques shines 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</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#team">Our Team</a></li>
                        <li><a href="#ingredients">Ingredients</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Popular Menu</h3>
                    <ul class="footer-links">
                        <li><a href="#">Margherita Pizza</a></li>
                        <li><a href="#">Pepperoni Classic</a></li>
                        <li><a href="#">BBQ Chicken</a></li>
                        <li><a href="#">Veggie Delight</a></li>
                        <li><a href="#">Truffle Mushroom</a></li>
                        <li><a href="#">Hawaiian Special</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for special offers and updates.</p>
                    <form>
                        <div class="form-group">
                            <input type="email" placeholder="Your email address" required>
                        </div>
                        <button type="submit" class="btn">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 PizzaHurt. All Rights Reserved. | Designed with ❤️ by Pizza Lovers</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --secondary-color: #FFA500;
            --dark-color: #333;
            --light-color: #fff;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

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

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

a {
            text-decoration: none;
            color: var(--dark-color);
        }

ul {
            list-style: none;
        }

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

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

/* Header */
        header {
            background-color: var(--light-color);
            box-shadow: var(--shadow);
            position: fixed;
            width: 100%;
            z-index: 1000;
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--secondary-color);
        }

.logo span {
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 30px;
        }

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

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

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

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

.hamburger {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }

/* 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-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1681&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--light-color);
            padding-top: 80px;
            animation: fadeIn 1.5s ease-in-out;
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

.btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--dark-color);
            padding: 12px 30px;
            border-radius: 30px;
            font-weight: 600;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

.btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

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

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

.section-title h2 {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

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

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

.about-text {
            flex: 1;
        }

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

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

.about-image {
            flex: 1;
            position: relative;
            animation: float 3s ease-in-out infinite;
        }

.about-image img {
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

/* History Section */
        .history {
            padding: 100px 0;
            background-color: #f9f9f9;
        }

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

.history-image {
            flex: 1;
            animation: slideInLeft 1s ease-in-out;
        }

.history-image img {
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

.history-text {
            flex: 1;
            animation: slideInRight 1s ease-in-out;
        }

.history-text h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--secondary-color);
        }

.timeline {
            position: relative;
            margin-top: 30px;
            padding-left: 30px;
        }

.timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: var(--primary-color);
        }

.timeline-item {
            position: relative;
            margin-bottom: 30px;
            padding-left: 30px;
        }

.timeline-item::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 5px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: var(--secondary-color);
            border: 2px solid var(--primary-color);
        }

.timeline-item h4 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

.timeline-item p {
            font-size: 0.9rem;
            color: #666;
        }

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

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

.team-member {
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            animation: fadeInUp 1s ease-in-out;
            animation-fill-mode: both;
        }

.team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.team-member:nth-child(1) { animation-delay: 0.1s; }
        .team-member:nth-child(2) { animation-delay: 0.3s; }
        .team-member:nth-child(3) { animation-delay: 0.5s; }
        .team-member:nth-child(4) { animation-delay: 0.7s; }

.team-member img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

.member-info {
            padding: 20px;
        }

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

.member-info p {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

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

.social-links a:hover {
            background-color: var(--secondary-color);
            color: var(--light-color);
        }

/* Ingredients Section */
        .ingredients {
            padding: 100px 0;
            background-color: #f9f9f9;
        }

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

.ingredient-card {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px 20px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeIn 1s ease-in-out;
            animation-fill-mode: both;
        }

.ingredient-card:nth-child(1) { animation-delay: 0.1s; }
        .ingredient-card:nth-child(2) { animation-delay: 0.3s; }
        .ingredient-card:nth-child(3) { animation-delay: 0.5s; }
        .ingredient-card:nth-child(4) { animation-delay: 0.7s; }
        .ingredient-card:nth-child(5) { animation-delay: 0.9s; }
        .ingredient-card:nth-child(6) { animation-delay: 1.1s; }

.ingredient-card:hover {
            transform: translateY(-10px);
            background-color: var(--primary-color);
        }

.ingredient-card i {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 15px;
        }

.ingredient-card h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

.ingredient-card p {
            font-size: 0.9rem;
            color: #666;
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background-color: var(--light-color);
        }

.testimonials-container {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

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

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

.testimonial-slide img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 20px;
            border: 5px solid var(--primary-color);
        }

.testimonial-slide p {
            font-size: 1.1rem;
            font-style: italic;
            margin-bottom: 20px;
            color: #555;
        }

.testimonial-slide h4 {
            font-size: 1.2rem;
            color: var(--secondary-color);
        }

.testimonial-slide .rating {
            color: var(--primary-color);
            margin-top: 10px;
            font-size: 1.2rem;
        }

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

.testimonial-nav button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: none;
            background-color: #ddd;
            cursor: pointer;
            transition: var(--transition);
        }

.testimonial-nav button.active {
            background-color: var(--secondary-color);
        }

/* Gallery Section */
        .gallery {
            padding: 100px 0;
            background-color: #f9f9f9;
        }

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

.gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: var(--shadow);
            height: 250px;
            animation: fadeIn 1s ease-in-out;
            animation-fill-mode: both;
        }

.gallery-item:nth-child(1) { animation-delay: 0.1s; }
        .gallery-item:nth-child(2) { animation-delay: 0.3s; }
        .gallery-item:nth-child(3) { animation-delay: 0.5s; }
        .gallery-item:nth-child(4) { animation-delay: 0.7s; }
        .gallery-item:nth-child(5) { animation-delay: 0.9s; }
        .gallery-item:nth-child(6) { animation-delay: 1.1s; }

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

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

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

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

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

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

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

.contact-info {
            flex: 1;
            animation: slideInLeft 1s ease-in-out;
        }

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

.info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }

.info-item i {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 15px;
            margin-top: 5px;
        }

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

.info-content p {
            color: #666;
        }

.contact-form {
            flex: 1;
            animation: slideInRight 1s ease-in-out;
        }

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

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

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

.form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }

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

/* Footer */
        footer {
            background-color: var(--dark-color);
            color: var(--light-color);
            padding: 50px 0 20px;
            text-align: center;
        }

.footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
        }

.footer-col {
            flex: 1;
            min-width: 250px;
        }

.footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

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

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

.footer-links a {
            color: #bbb;
            transition: var(--transition);
        }

.footer-links a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }

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

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

.footer-social a:hover {
            background-color: var(--primary-color);
            color: var(--dark-color);
        }

.copyright {
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
            font-size: 0.9rem;
        }

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

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

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

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

@keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0); }
        }

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

.about-image,
            .history-image,
            .contact-info {
                margin-bottom: 30px;
            }

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

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

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

.hamburger {
                display: block;
            }

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

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

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

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }

.btn {
                padding: 10px 20px;
            }

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

JavaScript

// Mobile Navigation
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            hamburger.classList.toggle('active');
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.classList.remove('active');
            });
        });

// Testimonial Slider
        let currentTestimonial = 0;
        const testimonials = document.querySelectorAll('.testimonial-slide');
        const dots = document.querySelectorAll('.testimonial-nav button');

function showTestimonial(index) {
            testimonials.forEach(testimonial => testimonial.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentTestimonial = index;
            testimonials[currentTestimonial].classList.add('active');
            dots[currentTestimonial].classList.add('active');
        }

// Auto-rotate testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 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'
                    });
                }
            });
        });

// Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.about-image, .history-image, .history-text, .team-member, .ingredient-card, .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.animationPlayState = 'running';
                }
            });
        }

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

PizzaHurt About Page Template Preview

Download Options