Chai Sutta Bar 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>Chai Sutta Bar - Authentic Indian Tea Experience</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;800;900&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 id="header">
        <div class="container">
            <nav class="navbar">
                <a href="#" class="logo">Chai <span>Sutta</span> Bar</a>
                <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="#gallery">Gallery</a></li>
                    <li><a href="#team">Team</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="hamburger">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Experience The <span>Authentic</span> Taste of India</h1>
                <p>Chai Sutta Bar brings you the finest tea experience with a modern twist. Our carefully curated menu offers traditional flavors with contemporary presentation.</p>
                <a href="#menu" class="btn">Explore Menu</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Our Story</h2>
                <p>Discover the journey of Chai Sutta Bar from a small idea to a nationwide phenomenon</p>
            </div>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1619581073186-5b4ae1b0caad?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2hhaXxlbnwwfHwwfHx8MA%3D%3D" alt="Chai Sutta Bar Interior">
                </div>
                <div class="about-text">
                    <h3>Brewing Happiness Since 2016</h3>
                    <p>Founded in 2016, Chai Sutta Bar started with a simple mission: to revolutionize the way India enjoys its tea. What began as a small outlet in Indore has now grown into a beloved brand with outlets across the country.</p>
                    <p>We take pride in serving the finest quality tea leaves sourced directly from the gardens of Assam and Darjeeling. Our unique brewing process ensures that every cup maintains the authentic flavor while meeting modern hygiene standards.</p>
                    <p>At Chai Sutta Bar, we believe tea is more than just a beverage - it's an emotion, a culture, and a way of life. Our spaces are designed to foster conversations, creativity, and connections over steaming cups of our signature brews.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="menu" id="menu">
        <div class="container">
            <div class="section-title">
                <h2>Our Menu</h2>
                <p>Explore our diverse range of tea blends and accompaniments</p>
            </div>
            <div class="menu-items">
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1564890369478-c89ca6d9cde9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Masala Chai">
                    </div>
                    <div class="menu-text">
                        <h3>Classic Masala Chai</h3>
                        <p>A robust blend of Assam tea with traditional Indian spices like cardamom, cinnamon, and ginger.</p>
                        <span class="price">₹50</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1618889482923-38250401a84e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Kulhad Chai">
                    </div>
                    <div class="menu-text">
                        <h3>Kulhad Chai</h3>
                        <p>Traditional tea served in earthen cups that enhance the flavor with an earthy aroma.</p>
                        <span class="price">₹60</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1597318181409-cf64d0b5d8a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Irani Chai">
                    </div>
                    <div class="menu-text">
                        <h3>Irani Chai</h3>
                        <p>A Hyderabad specialty - strong, sweet tea with a distinct creamy texture.</p>
                        <span class="price">₹70</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1561336526-2914f13ceb36?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGNoYWl8ZW58MHx8MHx8fDA%3D" alt="Green Tea">
                    </div>
                    <div class="menu-text">
                        <h3>Organic Green Tea</h3>
                        <p>Light and refreshing with antioxidant properties, available in various flavors.</p>
                        <span class="price">₹80</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cold Coffee">
                    </div>
                    <div class="menu-text">
                        <h3>Cold Coffee</h3>
                        <p>For non-tea drinkers, we offer rich and creamy cold coffee options.</p>
                        <span class="price">₹90</span>
                    </div>
                </div>
                <div class="menu-item">
                    <div class="menu-img">
                        <img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1527&q=80" alt="Snacks">
                    </div>
                    <div class="menu-text">
                        <h3>Snack Combos</h3>
                        <p>Pair your drink with our delicious range of sandwiches, cookies, and Indian snacks.</p>
                        <span class="price">₹100+</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="specials" id="specials">
        <div class="container">
            <div class="section-title">
                <h2>Our Specials</h2>
                <p>Discover what makes Chai Sutta Bar a unique experience</p>
            </div>
            <div class="special-items">
                <div class="special-item">
                    <div class="special-icon">
                        <i class="fas fa-mug-hot"></i>
                    </div>
                    <h3>Premium Quality</h3>
                    <p>We use only the finest tea leaves and ingredients sourced directly from trusted growers.</p>
                </div>
                <div class="special-item">
                    <div class="special-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>Eco-Friendly</h3>
                    <p>Our kulhads and packaging are biodegradable, contributing to a greener planet.</p>
                </div>
                <div class="special-item">
                    <div class="special-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>Healthy Options</h3>
                    <p>Choose from our range of sugar-free, organic, and herbal tea varieties.</p>
                </div>
                <div class="special-item">
                    <div class="special-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>Quick Service</h3>
                    <p>Experience our efficient service without compromising on quality or taste.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>Customer Reviews</h2>
                <p>Hear what our customers have to say about their Chai Sutta Bar experience</p>
            </div>
            <div class="testimonial-container">
                <div class="testimonial active">
                    <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Customer 1">
                    <div class="stars">
                        <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>
                    <p>"The masala chai at Chai Sutta Bar reminds me of my grandmother's recipe. Perfect balance of spices and sweetness. Their kulhad presentation adds such an authentic touch!"</p>
                    <h4>Priya Sharma</h4>
                </div>
                <div class="testimonial">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Customer 2">
                    <div class="stars">
                        <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>
                    <p>"As a working professional, I visit Chai Sutta Bar daily. Their quick service and consistent quality make it my go-to place. The Irani chai is my favorite!"</p>
                    <h4>Rahul Mehta</h4>
                </div>
                <div class="testimonial">
                    <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" alt="Customer 3">
                    <div class="stars">
                        <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>
                    <p>"I love how Chai Sutta Bar has modernized the traditional tea experience. Their outlets have such a cool vibe, and the ginger lemon honey tea is perfect for sore throats!"</p>
                    <h4>Neha Patel</h4>
                </div>
                <div class="testimonial-nav">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Gallery</h2>
                <p>A glimpse into the Chai Sutta Bar experience</p>
            </div>
            <div class="gallery-container">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Chai Preparation">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1561336526-2914f13ceb36?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGNoYWl8ZW58MHx8MHx8fDA%3D" alt="Cafe Interior">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1561336526-2914f13ceb36?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGNoYWl8ZW58MHx8MHx8fDA%3D" alt="Tea Leaves">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chai Cups">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1517438476312-10d79c077509?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Outdoor Seating">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Tea Ingredients">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team" id="team">
        <div class="container">
            <div class="section-title">
                <h2>Our Team</h2>
                <p>Meet the passionate people behind Chai Sutta Bar</p>
            </div>
            <div class="team-members">
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" alt="Founder">
                    <h3>Anubhav Dubey</h3>
                    <p>Founder & CEO</p>
                    <p>The visionary behind Chai Sutta Bar who turned a simple idea into a nationwide movement.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" alt="Head Chef">
                    <h3>Rajesh Kapoor</h3>
                    <p>Head Tea Master</p>
                    <p>With 15 years of experience, he curates our unique tea blends and maintains quality standards.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1588&q=80" alt="Marketing Head">
                    <h3>Priya Singh</h3>
                    <p>Marketing Head</p>
                    <p>She crafts our brand story and ensures Chai Sutta Bar remains a cultural phenomenon.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Contact Us</h2>
                <p>Get in touch with Chai Sutta Bar for inquiries, feedback, or franchise opportunities</p>
            </div>
            <div class="contact-container">
                <div class="contact-info">
                    <h3>Let's Talk Tea</h3>
                    <p>Have questions about our menu, outlets, or franchise model? Our team is happy to help you with any inquiries.</p>
                    <div class="contact-details">
                        <div>
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Tea Street, Indore, Madhya Pradesh 452001</span>
                        </div>
                        <div>
                            <i class="fas fa-phone-alt"></i>
                            <span>+91 9876543210</span>
                        </div>
                        <div>
                            <i class="fas fa-envelope"></i>
                            <span>info@chaisuttabar.com</span>
                        </div>
                        <div>
                            <i class="fas fa-clock"></i>
                            <span>Open Daily: 7:00 AM - 11:00 PM</span>
                        </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" required>
                        </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>

<section class="newsletter">
        <div class="container">
            <h2>Join Our Tea Community</h2>
            <p>Subscribe to our newsletter for exclusive offers, new flavor launches, and tea culture insights.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>Chai Sutta Bar</h3>
                    <p>Revolutionizing the way India enjoys its tea, one cup at a time.</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="#gallery">Gallery</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Menu</h3>
                    <ul class="footer-links">
                        <li><a href="#">Hot Teas</a></li>
                        <li><a href="#">Cold Teas</a></li>
                        <li><a href="#">Specialty Drinks</a></li>
                        <li><a href="#">Snacks</a></li>
                        <li><a href="#">Combos</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Contact Info</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Tea Street, Indore, MP</p>
                    <p><i class="fas fa-phone-alt"></i> +91 9876543210</p>
                    <p><i class="fas fa-envelope"></i> info@chaisuttabar.com</p>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Chai Sutta Bar. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

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

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

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

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

.btn:hover {
            background: var(--secondary-color);
            transform: translateY(-3px);
        }

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

.section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--dark-color);
            text-transform: uppercase;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

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

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

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

header.scrolled {
            background: var(--light-color);
            padding: 10px 0;
        }

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

.logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--dark-color);
        }

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

.nav-links {
            display: flex;
        }

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

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

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

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

.hamburger {
            display: none;
            cursor: pointer;
        }

.hamburger div {
            width: 25px;
            height: 3px;
            background: var(--dark-color);
            margin: 5px;
            transition: var(--transition);
        }

/* 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-1561336526-2914f13ceb36?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGNoYWl8ZW58MHx8MHx8fDA%3D') no-repeat center center/cover;
            display: flex;
            align-items: center;
            text-align: center;
            color: var(--light-color);
        }

.hero-content {
            max-width: 800px;
            margin: 0 auto;
            animation: fadeIn 1.5s ease;
        }

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

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

.hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

/* About Section */
        .about {
            padding: 100px 0;
            background: #f9f9f9;
        }

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

.about-img {
            flex: 1;
            min-width: 300px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            animation: slideInLeft 1s ease;
        }

.about-text {
            flex: 1;
            min-width: 300px;
            animation: slideInRight 1s ease;
        }

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

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

/* Menu Section */
        .menu {
            padding: 100px 0;
        }

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

.menu-item {
            background: var(--light-color);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeInUp 1s ease;
        }

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

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

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

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

.menu-text {
            padding: 20px;
        }

.menu-text h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

.menu-text p {
            color: #666;
            margin-bottom: 15px;
        }

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

/* Specials Section */
        .specials {
            padding: 100px 0;
            background: #f9f9f9;
        }

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

.special-item {
            text-align: center;
            padding: 30px 20px;
            background: var(--light-color);
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeIn 1s ease;
        }

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

.special-icon {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

.special-item h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

.special-item p {
            color: #666;
        }

/* Testimonials Section */
        .testimonials {
            padding: 100px 0;
        }

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

.testimonial {
            background: var(--light-color);
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            text-align: center;
            display: none;
            animation: fadeIn 1s ease;
        }

.testimonial.active {
            display: block;
        }

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

.testimonial p {
            font-style: italic;
            margin-bottom: 20px;
            color: #666;
        }

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

.testimonial .stars {
            color: var(--primary-color);
            margin: 10px 0;
        }

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

.testimonial-nav span {
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition);
        }

.testimonial-nav span.active {
            background: var(--primary-color);
        }

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

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

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

.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: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }

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

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

/* Team Section */
        .team {
            padding: 100px 0;
        }

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

.team-member {
            text-align: center;
            background: var(--light-color);
            padding: 30px 20px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeInUp 1s ease;
        }

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

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

.team-member h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

.team-member p {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
        }

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

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

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

/* Contact Section */
        .contact {
            padding: 100px 0;
            background: #f9f9f9;
        }

.contact-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

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

.contact-info h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

.contact-info p {
            margin-bottom: 30px;
            color: #666;
        }

.contact-details {
            margin-bottom: 30px;
        }

.contact-details div {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

.contact-details i {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            color: var(--light-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }

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

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

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

.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);
        }

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

/* Newsletter Section */
        .newsletter {
            padding: 80px 0;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover;
            color: var(--light-color);
            text-align: center;
        }

.newsletter h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.newsletter p {
            max-width: 600px;
            margin: 0 auto 30px;
        }

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

.newsletter-form input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 50px 0 0 50px;
            font-family: 'Poppins', sans-serif;
        }

.newsletter-form input:focus {
            outline: none;
        }

.newsletter-form button {
            padding: 0 30px;
            background: var(--primary-color);
            color: var(--dark-color);
            border: none;
            border-radius: 0 50px 50px 0;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

.newsletter-form button:hover {
            background: var(--secondary-color);
        }

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

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

.footer-col h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

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

.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;
            gap: 15px;
        }

.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(--primary-color);
            color: var(--dark-color);
        }

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

/* Back to Top */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: var(--dark-color);
            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(--secondary-color);
        }

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

/* Responsive */
        @media (max-width: 992px) {
            .section-title h2 {
                font-size: 2rem;
            }
            
            .hero h1 {
                font-size: 2.8rem;
            }
        }

@media (max-width: 768px) {
            .hamburger {
                display: block;
            }

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

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

.nav-links li {
                margin: 15px 0;
            }

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

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

.about-img, .about-text {
                min-width: 100%;
            }

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

.newsletter-form input {
                border-radius: 50px;
                margin-bottom: 10px;
            }

.newsletter-form button {
                border-radius: 50px;
                padding: 15px;
            }
        }

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

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

.btn {
                padding: 10px 25px;
            }
        }

JavaScript

// Mobile Menu Toggle
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');
        const links = document.querySelectorAll('.nav-links li');

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

// Close mobile menu when clicking a link
        links.forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.classList.remove('toggle');
                links.forEach(item => {
                    item.style.animation = '';
                });
            });
        });

// Sticky Header
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 0);
        });

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

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                showTestimonial(index);
            });
        });

// Auto slide testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);

// Smooth Scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                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');

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, .gallery-item, .team-member, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        }

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

Chai Sutta Bar Template Preview

Download Options