Yoga Classes Website 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>Serenity Yoga - Find Your Inner Peace</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=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
 
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">Serenity<span>Yoga</span></div>
                <button class="mobile-menu-btn">
                    <i class="fas fa-bars"></i>
                </button>
                <nav id="nav">
                    <button class="close-menu">
                        
                    </button>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#classes">Classes</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>Find Your Inner Peace Through Yoga</h1>
                <p>Join our transformative yoga classes designed for all levels. Discover balance, strength, and serenity in a supportive community.</p>
                <a href="#classes" class="btn btn-primary">Explore Classes</a>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>About Our Studio</h2>
                <p>Discover the story behind Serenity Yoga and our mission to bring peace and wellness to your life.</p>
            </div>
            <div class="about-content">
                <div class="about-text">
                    <h3>Welcome to Serenity Yoga</h3>
                    <p>Founded in 2010, Serenity Yoga has been a sanctuary for those seeking balance, strength, and inner peace. Our studio is designed to be a tranquil space where you can escape the stresses of daily life and connect with your true self.</p>
                    <p>We offer a variety of yoga styles suitable for all levels, from complete beginners to advanced practitioners. Our experienced instructors are dedicated to guiding you on your yoga journey with personalized attention and care.</p>
                    <p>At Serenity Yoga, we believe that yoga is not just a physical practice but a holistic approach to wellness that encompasses mind, body, and spirit.</p>
                    <a href="#contact" class="btn">Learn More</a>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Yoga Studio">
                </div>
            </div>
        </div>
    </section>

<section class="classes" id="classes">
        <div class="container">
            <div class="section-title">
                <h2>Our Classes</h2>
                <p>Explore our diverse range of yoga classes designed to meet your unique needs and goals.</p>
            </div>
            <div class="classes-grid">
                <div class="class-card">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1820&q=80" alt="Hatha Yoga">
                    </div>
                    <div class="class-content">
                        <h3>Hatha Yoga</h3>
                        <p>A gentle introduction to the most basic yoga postures. Perfect for beginners.</p>
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 60 min</span>
                            <span><i class="fas fa-user"></i> All levels</span>
                        </div>
                    </div>
                </div>
                <div class="class-card">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1593810450967-f9c42742e326?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Vinyasa Flow">
                    </div>
                    <div class="class-content">
                        <h3>Vinyasa Flow</h3>
                        <p>Dynamic practice linking breath with movement in a continuous flow.</p>
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 75 min</span>
                            <span><i class="fas fa-user"></i> Intermediate</span>
                        </div>
                    </div>
                </div>
                <div class="class-card">
                    <div class="class-image">
                        <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Yin Yoga">
                    </div>
                    <div class="class-content">
                        <h3>Yin Yoga</h3>
                        <p>A slow-paced style with poses held for longer periods to target deep connective tissues.</p>
                        <div class="class-meta">
                            <span><i class="far fa-clock"></i> 60 min</span>
                            <span><i class="fas fa-user"></i> All levels</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="benefits" id="benefits">
        <div class="container">
            <div class="section-title">
                <h2>Benefits of Yoga</h2>
                <p>Discover how regular yoga practice can transform your physical and mental well-being.</p>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-heartbeat"></i>
                    </div>
                    <h3>Improves Flexibility</h3>
                    <p>Yoga poses work by stretching your muscles, increasing your range of motion and reducing the risk of injury.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3>Reduces Stress</h3>
                    <p>The combination of movement, breathing, and meditation helps calm the nervous system and relieve stress.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <h3>Builds Strength</h3>
                    <p>Many yoga poses require you to bear your body weight in new ways, building functional strength.</p>
                </div>
                <div class="benefit-card">
                    <div class="benefit-icon">
                        <i class="fas fa-balance-scale"></i>
                    </div>
                    <h3>Improves Balance</h3>
                    <p>Regular yoga practice increases proprioception and improves balance, both on and off the mat.</p>
                </div>
            </div>
        </div>
    </section>

<section class="instructors" id="instructors">
        <div class="container">
            <div class="section-title">
                <h2>Meet Our Instructors</h2>
                <p>Our certified yoga instructors are passionate about guiding you on your wellness journey.</p>
            </div>
            <div class="instructors-grid">
                <div class="instructor-card">
                    <div class="instructor-image">
                        <img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="instructor-info">
                        <h3>Sarah Johnson</h3>
                        <p>Hatha & Yin Yoga Specialist</p>
                        <p>With over 10 years of experience, Sarah brings mindfulness and compassion to every class.</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                <div class="instructor-card">
                    <div class="instructor-image">
                        <img src="https://images.unsplash.com/photo-1584466977773-e625c37cdd50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Michael Chen">
                    </div>
                    <div class="instructor-info">
                        <h3>Michael Chen</h3>
                        <p>Vinyasa & Power Yoga Expert</p>
                        <p>Michael's dynamic classes focus on building strength while maintaining proper alignment.</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
                <div class="instructor-card">
                    <div class="instructor-image">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Elena Rodriguez">
                    </div>
                    <div class="instructor-info">
                        <h3>Elena Rodriguez</h3>
                        <p>Restorative & Meditation Guide</p>
                        <p>Elena specializes in helping students find deep relaxation and mental clarity through gentle practices.</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Our Students Say</h2>
                <p>Hear from our community of yoga practitioners about their experiences at Serenity Yoga.</p>
            </div>
            <div class="testimonials-slider">
                <div class="testimonial-card">
                    <div class="testimonial-text">
                        <p>Serenity Yoga has completely transformed my approach to wellness. The instructors are knowledgeable and supportive, and the community is incredibly welcoming. I've found both physical strength and mental peace through my practice here.</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Jessica Miller">
                        </div>
                        <div class="author-info">
                            <h4>Jessica Miller</h4>
                            <p>Student for 2 years</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>Membership Plans</h2>
                <p>Choose the plan that works best for your lifestyle and yoga journey.</p>
            </div>
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Basic</h3>
                        <div class="price">$49<span>/month</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>4 classes per month</li>
                        <li>Access to basic workshops</li>
                        <li>Yoga mat rental</li>
                        <li>Locker access</li>
                    </ul>
                    <div class="pricing-footer">
                        <a href="#" class="btn">Get Started</a>
                    </div>
                </div>
                <div class="pricing-card popular">
                    <div class="popular-badge">Most Popular</div>
                    <div class="pricing-header">
                        <h3>Standard</h3>
                        <div class="price">$79<span>/month</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>Unlimited classes</li>
                        <li>Access to all workshops</li>
                        <li>Yoga mat included</li>
                        <li>Locker access</li>
                        <li>2 guest passes per year</li>
                    </ul>
                    <div class="pricing-footer">
                        <a href="#" class="btn btn-primary">Get Started</a>
                    </div>
                </div>
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3>Premium</h3>
                        <div class="price">$129<span>/month</span></div>
                    </div>
                    <ul class="pricing-features">
                        <li>Unlimited classes</li>
                        <li>Access to all workshops</li>
                        <li>Premium yoga mat</li>
                        <li>Locker with personal storage</li>
                        <li>4 guest passes per year</li>
                        <li>One private session monthly</li>
                    </ul>
                    <div class="pricing-footer">
                        <a href="#" class="btn">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Have questions or ready to start your yoga journey? We'd love to hear from you.</p>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <p>We're here to answer any questions you may have about our classes, schedule, or membership options.</p>
                    <div class="contact-details">
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Our Studio</h4>
                                <p>123 Peaceful Lane, Serenity City, SC 12345</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Phone</h4>
                                <p>(123) 456-7890</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@serenityyoga.com</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <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">Your 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>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Serenity Yoga</h3>
                    <p>Find your inner peace through the transformative practice of yoga. Join our community and begin your journey to wellness today.</p>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#classes">Classes</a></li>
                        <li><a href="#instructors">Instructors</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Classes</h3>
                    <ul class="footer-links">
                        <li><a href="#">Hatha Yoga</a></li>
                        <li><a href="#">Vinyasa Flow</a></li>
                        <li><a href="#">Yin Yoga</a></li>
                        <li><a href="#">Restorative Yoga</a></li>
                        <li><a href="#">Meditation</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Connect With Us</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
                        <li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Serenity Yoga. All rights reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

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

:root {
            --primary: #4a7c59;
            --primary-light: #6b9d7c;
            --secondary: #f8b500;
            --accent: #d4af37;
            --text: #333333;
            --text-light: #777777;
            --white: #ffffff;
            --light-bg: #f9f7f2;
            --dark-bg: #2c3e50;
        }

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

h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            line-height: 1.3;
        }

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

section {
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

/* Header Styles */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: all 0.3s ease;
        }

header.scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }

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

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
        }

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

nav ul {
            display: flex;
            list-style: none;
        }

nav ul li {
            margin-left: 30px;
        }

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

nav ul li a:hover {
            color: var(--primary);
        }

nav ul li a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

nav ul li a:hover::after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text);
            cursor: pointer;
        }

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

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

.hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
        }

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--secondary);
            color: var(--text);
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

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

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

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

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

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

.section-title h2 {
            font-size: 2.5rem;
            color: var(--primary);
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
        }

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

.section-title p {
            max-width: 600px;
            margin: 0 auto;
            color: var(--text-light);
        }

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

.about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: auto;
            display: block;
        }

/* Classes Section */
        .classes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

.class-card {
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.class-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

.class-image {
            height: 200px;
            overflow: hidden;
        }

.class-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.class-card:hover .class-image img {
            transform: scale(1.1);
        }

.class-content {
            padding: 25px;
        }

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

.class-content p {
            color: var(--text-light);
            margin-bottom: 15px;
        }

.class-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-light);
            font-size: 0.9rem;
        }

/* Benefits Section */
        .benefits {
            background-color: var(--dark-bg);
            color: var(--white);
        }

.benefits .section-title h2 {
            color: var(--white);
        }

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

.benefit-card {
            text-align: center;
            padding: 30px 20px;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

.benefit-card:hover {
            transform: translateY(-10px);
            background-color: rgba(255, 255, 255, 0.1);
        }

.benefit-icon {
            font-size: 40px;
            color: var(--secondary);
            margin-bottom: 20px;
        }

.benefit-card h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
        }

/* Instructors Section */
        .instructors-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.instructor-card {
            text-align: center;
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

.instructor-image {
            height: 250px;
            overflow: hidden;
        }

.instructor-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.instructor-card:hover .instructor-image img {
            transform: scale(1.1);
        }

.instructor-info {
            padding: 25px 20px;
        }

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

.instructor-info p {
            color: var(--text-light);
            margin-bottom: 15px;
        }

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

.social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background-color: var(--light-bg);
            border-radius: 50%;
            color: var(--text);
            transition: all 0.3s ease;
        }

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

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

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

.testimonial-card {
            background-color: var(--white);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

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

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

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

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

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

.author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
        }

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

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

.author-info p {
            color: var(--text-light);
            font-size: 0.9rem;
        }

/* Pricing Section */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

.pricing-card {
            background-color: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease;
            position: relative;
        }

.pricing-card:hover {
            transform: translateY(-10px);
        }

.pricing-card.popular {
            border: 2px solid var(--secondary);
            transform: scale(1.05);
        }

.pricing-card.popular:hover {
            transform: scale(1.05) translateY(-10px);
        }

.popular-badge {
            position: absolute;
            top: 20px;
            right: -30px;
            background-color: var(--secondary);
            color: var(--text);
            padding: 5px 30px;
            transform: rotate(45deg);
            font-weight: 600;
            font-size: 0.8rem;
        }

.pricing-header {
            padding: 30px 20px;
            background-color: var(--primary);
            color: var(--white);
        }

.pricing-header h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

.price {
            font-size: 2.5rem;
            font-weight: 700;
        }

.price span {
            font-size: 1rem;
            font-weight: normal;
        }

.pricing-features {
            padding: 30px 20px;
            list-style: none;
        }

.pricing-features li {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

.pricing-features li:last-child {
            border-bottom: none;
        }

.pricing-footer {
            padding: 0 20px 30px;
        }

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

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

.contact-info {
            flex: 1;
        }

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

.contact-info p {
            margin-bottom: 30px;
            color: var(--text-light);
        }

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

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

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

.contact-form {
            flex: 1;
        }

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

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

.form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-family: 'Montserrat', sans-serif;
            transition: border-color 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
        }

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

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

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

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

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

.footer-links {
            list-style: none;
        }

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

.footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.footer-links a:hover {
            color: var(--secondary);
        }

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

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .contact-content {
                flex-direction: column;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
            
            .pricing-card.popular:hover {
                transform: translateY(-10px);
            }
        }

@media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            nav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background-color: var(--white);
                box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
                transition: right 0.3s ease;
                z-index: 1001;
                padding: 80px 30px 30px;
            }
            
            nav.active {
                right: 0;
            }
            
            nav ul {
                flex-direction: column;
            }
            
            nav ul li {
                margin: 0 0 20px 0;
            }
            
            .close-menu {
                position: absolute;
                top: 20px;
                right: 20px;
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            section {
                padding: 70px 0;
            }
        }

JavaScript

// Initialize GSAP and ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);

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

// Mobile menu toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const closeMenuBtn = document.querySelector('.close-menu');
        const nav = document.getElementById('nav');

mobileMenuBtn.addEventListener('click', function() {
            nav.classList.add('active');
        });

closeMenuBtn.addEventListener('click', function() {
            nav.classList.remove('active');
        });

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

// GSAP Animations
        // Hero section animation
        gsap.from('.hero h1', {
            duration: 1,
            y: 50,
            opacity: 0,
            ease: 'power3.out'
        });

gsap.from('.hero p', {
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.3,
            ease: 'power3.out'
        });

gsap.from('.hero .btn', {
            duration: 1,
            y: 30,
            opacity: 0,
            delay: 0.6,
            ease: 'power3.out'
        });

// About section animation
        gsap.from('.about-text', {
            scrollTrigger: {
                trigger: '.about',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: -50,
            opacity: 0,
            ease: 'power3.out'
        });

gsap.from('.about-image', {
            scrollTrigger: {
                trigger: '.about',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: 50,
            opacity: 0,
            ease: 'power3.out'
        });

// Classes section animation
        gsap.from('.class-card', {
            scrollTrigger: {
                trigger: '.classes',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 0.8,
            y: 50,
            opacity: 0,
            stagger: 0.2,
            ease: 'power3.out'
        });

// Benefits section animation
        gsap.from('.benefit-card', {
            scrollTrigger: {
                trigger: '.benefits',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 0.8,
            y: 50,
            opacity: 0,
            stagger: 0.2,
            ease: 'power3.out'
        });

// Instructors section animation
        gsap.from('.instructor-card', {
            scrollTrigger: {
                trigger: '.instructors',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 0.8,
            y: 50,
            opacity: 0,
            stagger: 0.2,
            ease: 'power3.out'
        });

// Testimonials section animation
        gsap.from('.testimonial-card', {
            scrollTrigger: {
                trigger: '.testimonials',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            y: 50,
            opacity: 0,
            ease: 'power3.out'
        });

// Pricing section animation
        gsap.from('.pricing-card', {
            scrollTrigger: {
                trigger: '.pricing',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 0.8,
            y: 50,
            opacity: 0,
            stagger: 0.2,
            ease: 'power3.out'
        });

// Contact section animation
        gsap.from('.contact-info', {
            scrollTrigger: {
                trigger: '.contact',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: -50,
            opacity: 0,
            ease: 'power3.out'
        });

gsap.from('.contact-form', {
            scrollTrigger: {
                trigger: '.contact',
                start: 'top 80%',
                end: 'bottom 20%',
                toggleActions: 'play none none reverse'
            },
            duration: 1,
            x: 50,
            opacity: 0,
            ease: 'power3.out'
        });

// Form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your message! We will get back to you soon.');
            this.reset();
        });

Yoga Classes Website Template Preview

Download Options