Master Spoken English Class 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>Elite English - Master Spoken English</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
   
</head>
<body>
    
    <header id="header">
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap"></i>
                    <h1>Elite English</h1>
                </div>
                <ul class="nav-links">
                    <li><a href="#home" class="active">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#courses">Courses</a></li>
                    <li><a href="#instructors">Instructors</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#" class="btn">Free Trial</a></li>
                </ul>
                <div class="mobile-menu">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-slider">
                <div class="slide active" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');">
                    <div class="slide-content">
                        <h1>Master English Speaking with Confidence</h1>
                        <p>Join our immersive English speaking courses and unlock your potential to communicate effectively in any situation.</p>
                        <a href="#" class="btn">Start Learning Today</a>
                    </div>
                </div>
                <div class="slide" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');">
                    <div class="slide-content">
                        <h1>Learn from Native English Speakers</h1>
                        <p>Our certified instructors will guide you through personalized lessons to improve your fluency and accent.</p>
                        <a href="#" class="btn">Meet Our Instructors</a>
                    </div>
                </div>
                <div class="slide" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');">
                    <div class="slide-content">
                        <h1>Flexible Learning for Busy Schedules</h1>
                        <p>Access our courses anytime, anywhere with our online platform designed for modern learners.</p>
                        <a href="#" class="btn">View Course Options</a>
                    </div>
                </div>
                <div class="slider-nav">
                    <div class="slider-dot active"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                </div>
                <div class="slider-arrows">
                    <div class="slider-arrow prev">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="slider-arrow next">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section about" id="about">
        <div class="container">
            <div class="section-title">
                <h2>Why Choose Elite English?</h2>
                <p>We provide comprehensive English speaking courses designed to help you achieve fluency and confidence in real-world situations.</p>
            </div>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="English Class">
                </div>
                <div class="about-text">
                    <h2>Transform Your English Speaking Skills</h2>
                    <p>At Elite English, we believe that effective communication is the key to personal and professional success. Our innovative teaching methods and personalized approach ensure that every student achieves their language goals.</p>
                    <p>With over 10 years of experience in language education, we've helped thousands of students from diverse backgrounds improve their English speaking abilities.</p>
                    <div class="features">
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Certified Instructors</h4>
                                <p>Learn from experienced native English speakers.</p>
                            </div>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Flexible Schedule</h4>
                                <p>Choose class times that work for your lifestyle.</p>
                            </div>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Personalized Learning</h4>
                                <p>Customized lessons based on your skill level and goals.</p>
                            </div>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <h4>Practical Focus</h4>
                                <p>Emphasis on real-world conversation skills.</p>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="btn">Learn More About Us</a>
                </div>
            </div>
        </div>
    </section>

<section class="section courses" id="courses">
        <div class="container">
            <div class="section-title">
                <h2>Our English Courses</h2>
                <p>Choose from our comprehensive range of English speaking courses designed for all proficiency levels.</p>
            </div>
            <div class="course-filters">
                <button class="filter-btn active" data-filter="all">All Courses</button>
                <button class="filter-btn" data-filter="beginner">Beginner</button>
                <button class="filter-btn" data-filter="intermediate">Intermediate</button>
                <button class="filter-btn" data-filter="advanced">Advanced</button>
                <button class="filter-btn" data-filter="business">Business English</button>
            </div>
            <div class="course-grid">
                <div class="course-card" data-category="beginner">
                    <div class="course-image">
                        <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1122&q=80" alt="Basic English Course">
                    </div>
                    <div class="course-content">
                        <span class="course-category">Beginner</span>
                        <h3 class="course-title">Basic English Conversation</h3>
                        <p>Build a strong foundation in English with essential vocabulary and grammar.</p>
                        <div class="course-info">
                            <span><i class="far fa-clock"></i> 8 Weeks</span>
                            <span><i class="far fa-user"></i> 12 Students</span>
                        </div>
                        <div class="course-price">$199</div>
                        <a href="#" class="btn btn-outline">Enroll Now</a>
                    </div>
                </div>
                <div class="course-card" data-category="intermediate">
                    <div class="course-image">
                        <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Intermediate English Course">
                    </div>
                    <div class="course-content">
                        <span class="course-category">Intermediate</span>
                        <h3 class="course-title">Fluency Development</h3>
                        <p>Improve your speaking fluency and expand your vocabulary for daily conversations.</p>
                        <div class="course-info">
                            <span><i class="far fa-clock"></i> 10 Weeks</span>
                            <span><i class="far fa-user"></i> 10 Students</span>
                        </div>
                        <div class="course-price">$249</div>
                        <a href="#" class="btn btn-outline">Enroll Now</a>
                    </div>
                </div>
                <div class="course-card" data-category="advanced">
                    <div class="course-image">
                        <img src="https://images.unsplash.com/photo-1565689228866-1d7dbdfc9b9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Advanced English Course">
                    </div>
                    <div class="course-content">
                        <span class="course-category">Advanced</span>
                        <h3 class="course-title">Mastering Complex Communication</h3>
                        <p>Refine your language skills for professional and academic contexts.</p>
                        <div class="course-info">
                            <span><i class="far fa-clock"></i> 12 Weeks</span>
                            <span><i class="far fa-user"></i> 8 Students</span>
                        </div>
                        <div class="course-price">$299</div>
                        <a href="#" class="btn btn-outline">Enroll Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section instructors" id="instructors">
        <div class="container">
            <div class="section-title">
                <h2>Meet Our Expert Instructors</h2>
                <p>Learn from our team of certified English language specialists with years of teaching experience.</p>
            </div>
            <div class="instructor-slider">
                <div class="instructor-track">
                    <div class="instructor-card">
                        <div class="instructor-image">
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sarah Johnson">
                        </div>
                        <h3 class="instructor-name">Sarah Johnson</h3>
                        <p class="instructor-role">Senior English Instructor</p>
                        <p>With over 8 years of experience teaching English as a second language, Sarah specializes in accent reduction and business communication.</p>
                        <div class="instructor-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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="instructor-card">
                        <div class="instructor-image">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Michael Chen">
                        </div>
                        <h3 class="instructor-name">Michael Chen</h3>
                        <p class="instructor-role">Conversation Specialist</p>
                        <p>Michael focuses on helping students develop natural conversation flow and cultural understanding for real-world English usage.</p>
                        <div class="instructor-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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="instructor-card">
                        <div class="instructor-image">
                            <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1167&q=80" alt="Emily Rodriguez">
                        </div>
                        <h3 class="instructor-name">Emily Rodriguez</h3>
                        <p class="instructor-role">Grammar & Writing Expert</p>
                        <p>Emily has a passion for helping students master English grammar and writing skills while building vocabulary for academic success.</p>
                        <div class="instructor-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-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="instructor-card">
                        <div class="instructor-image">
                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="David Thompson">
                        </div>
                        <h3 class="instructor-name">David Thompson</h3>
                        <p class="instructor-role">Business English Coach</p>
                        <p>David specializes in corporate English training, helping professionals communicate effectively in international business environments.</p>
                        <div class="instructor-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-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <div class="slider-control prev-instructor">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="slider-control next-instructor">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section testimonials" id="testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Our Students Say</h2>
                <p>Hear from our students about their experiences learning English with us.</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial-track">
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>Elite English transformed my confidence in speaking English. The personalized attention and practical exercises made all the difference in my professional life.</p>
                        </div>
                        <div class="testimonial-author">
                            <div class="author-image">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Maria Silva">
                            </div>
                            <div class="author-info">
                                <h4>Maria Silva</h4>
                                <p>Marketing Manager</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>I tried several English courses before finding Elite English. The instructors here are exceptional, and the small class sizes ensure everyone gets attention.</p>
                        </div>
                        <div class="testimonial-author">
                            <div class="author-image">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Ahmed Khan">
                            </div>
                            <div class="author-info">
                                <h4>Ahmed Khan</h4>
                                <p>Software Engineer</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-text">
                            <p>The business English course helped me immensely in my international negotiations. I can now communicate with clients confidently and effectively.</p>
                        </div>
                        <div class="testimonial-author">
                            <div class="author-image">
                                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Li Wei">
                            </div>
                            <div class="author-info">
                                <h4>Li Wei</h4>
                                <p>Business Consultant</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <div class="slider-control prev-testimonial">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="slider-control next-testimonial">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="video-section">
        <div class="container">
            <div class="video-content">
                <h2>Experience Our Teaching Method</h2>
                <p>Watch this short video to see how our interactive classes work and what makes our approach so effective.</p>
                <div class="video-container">
                    <div class="video-placeholder">
                        <i class="fas fa-play"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section pricing" id="pricing">
        <div class="container">
            <div class="section-title">
                <h2>Choose Your Learning Plan</h2>
                <p>Flexible pricing options designed to fit your budget and learning goals.</p>
            </div>
            <div class="pricing-grid">
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3 class="pricing-name">Basic</h3>
                        <div class="pricing-price">$99</div>
                        <p class="pricing-duration">per month</p>
                    </div>
                    <ul class="pricing-features">
                        <li>4 Group Classes per Month</li>
                        <li>Access to Learning Materials</li>
                        <li>Weekly Practice Exercises</li>
                        <li>Email Support</li>
                        <li>Progress Tracking</li>
                    </ul>
                    <a href="#" class="btn btn-outline">Get Started</a>
                </div>
                <div class="pricing-card popular">
                    <div class="popular-badge">Most Popular</div>
                    <div class="pricing-header">
                        <h3 class="pricing-name">Standard</h3>
                        <div class="pricing-price">$199</div>
                        <p class="pricing-duration">per month</p>
                    </div>
                    <ul class="pricing-features">
                        <li>8 Group Classes per Month</li>
                        <li>2 Private Sessions</li>
                        <li>Full Access to Learning Materials</li>
                        <li>Priority Email & Chat Support</li>
                        <li>Personalized Study Plan</li>
                        <li>Monthly Progress Assessment</li>
                    </ul>
                    <a href="#" class="btn">Get Started</a>
                </div>
                <div class="pricing-card">
                    <div class="pricing-header">
                        <h3 class="pricing-name">Premium</h3>
                        <div class="pricing-price">$349</div>
                        <p class="pricing-duration">per month</p>
                    </div>
                    <ul class="pricing-features">
                        <li>Unlimited Group Classes</li>
                        <li>8 Private Sessions</li>
                        <li>Full Access + Premium Content</li>
                        <li>24/7 Priority Support</li>
                        <li>Customized Curriculum</li>
                        <li>Weekly Progress Reports</li>
                        <li>Certificate of Completion</li>
                    </ul>
                    <a href="#" class="btn btn-outline">Get Started</a>
                </div>
            </div>
        </div>
    </section>

<section class="section contact" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Have questions? We're here to help you start your English learning journey.</p>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Our Location</h4>
                            <p>123 Education Street, Learning City, LC 12345</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Phone Number</h4>
                            <p>+1 (555) 123-4567</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Email Address</h4>
                            <p>info@eliteenglish.com</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-text">
                            <h4>Working Hours</h4>
                            <p>Monday - Friday: 9:00 AM - 8:00 PM</p>
                            <p>Saturday: 10:00 AM - 4:00 PM</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your Name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Your Email" required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Subject">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="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-column">
                    <h3>Elite English</h3>
                    <p>Master English speaking with confidence through our comprehensive courses and expert instructors.</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-linkedin-in"></i></a>
                    </div>
                </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 Us</a></li>
                        <li><a href="#courses">Courses</a></li>
                        <li><a href="#instructors">Instructors</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Courses</h3>
                    <ul class="footer-links">
                        <li><a href="#">Basic English</a></li>
                        <li><a href="#">Intermediate English</a></li>
                        <li><a href="#">Advanced English</a></li>
                        <li><a href="#">Business English</a></li>
                        <li><a href="#">Conversation Practice</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for the latest updates and English learning tips.</p>
                    <form class="newsletter-form">
                        <input type="email" class="newsletter-input" placeholder="Your Email" required>
                        <button type="submit" class="newsletter-btn"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Elite English. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

/* CSS Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary: #4a6cf7;
            --primary-dark: #3a57d4;
            --secondary: #6c757d;
            --accent: #ff6b6b;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #28a745;
            --warning: #ffc107;
            --gradient: linear-gradient(135deg, #4a6cf7, #6a11cb);
            --gradient-light: linear-gradient(135deg, #6a11cb, #4a6cf7);
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
            --transition: all 0.3s ease;
            --border-radius: 8px;
        }

html {
            scroll-behavior: smooth;
        }

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

h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 1rem;
        }

p {
            margin-bottom: 1rem;
        }

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

ul {
            list-style: none;
        }

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

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

.section {
            padding: 80px 0;
        }

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

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

.section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 3px;
            background: var(--gradient);
            border-radius: 2px;
        }

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--gradient);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            box-shadow: var(--shadow);
        }

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

.btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

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

.btn-accent {
            background: var(--accent);
        }

.text-center {
            text-align: center;
        }

.mb-30 {
            margin-bottom: 30px;
        }

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

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

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

.logo {
            display: flex;
            align-items: center;
        }

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

.logo h1 {
            font-size: 1.8rem;
            margin-bottom: 0;
            background: var(--gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

.nav-links {
            display: flex;
        }

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

.nav-links a {
            font-weight: 500;
            position: relative;
        }

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

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

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

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

.mobile-menu {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            padding: 150px 0 100px;
            background: var(--gradient-light);
            color: white;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            background-position: center;
        }

.hero-slider {
            position: relative;
            height: 500px;
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-lg);
        }

.slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease;
            display: flex;
            align-items: center;
            padding: 0 50px;
            background-size: cover;
            background-position: center;
        }

.slide.active {
            opacity: 1;
        }

.slide-content {
            max-width: 600px;
            animation: fadeInUp 1s ease;
        }

.slide h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

.slide p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

.slider-nav {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition);
        }

.slider-dot.active {
            background: white;
            transform: scale(1.2);
        }

.slider-arrows {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            transform: translateY(-50%);
        }

.slider-arrow {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            backdrop-filter: blur(5px);
        }

.slider-arrow:hover {
            background: rgba(255, 255, 255, 0.3);
        }

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

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

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

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

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

.about-text p {
            margin-bottom: 20px;
            color: var(--secondary);
        }

.features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 30px;
        }

.feature {
            display: flex;
            align-items: flex-start;
        }

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

/* Courses Section */
        .courses {
            background: white;
        }

.course-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }

.filter-btn {
            padding: 8px 20px;
            background: var(--light);
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
        }

.filter-btn.active, .filter-btn:hover {
            background: var(--primary);
            color: white;
        }

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

.course-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            animation: fadeInUp 0.5s ease;
        }

.course-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

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

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

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

.course-content {
            padding: 20px;
        }

.course-category {
            display: inline-block;
            padding: 5px 15px;
            background: var(--light);
            color: var(--primary);
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-bottom: 10px;
        }

.course-title {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

.course-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 0.9rem;
            color: var(--secondary);
        }

.course-info span {
            display: flex;
            align-items: center;
        }

.course-info i {
            margin-right: 5px;
        }

.course-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
        }

/* Instructors Section */
        .instructors {
            background: var(--light);
        }

.instructor-slider {
            position: relative;
            overflow: hidden;
        }

.instructor-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.instructor-card {
            min-width: 300px;
            margin: 0 15px;
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            text-align: center;
            padding: 30px 20px;
            transition: var(--transition);
        }

.instructor-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

.instructor-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 20px;
            border: 5px solid var(--light);
        }

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

.instructor-name {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

.instructor-role {
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 500;
        }

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

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

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

.slider-controls {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 15px;
        }

.slider-control {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

.slider-control:hover {
            background: var(--primary);
            color: white;
        }

/* Testimonials Section */
        .testimonials {
            background: white;
        }

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

.testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

.testimonial-card {
            min-width: 100%;
            padding: 30px;
            background: var(--light);
            border-radius: var(--border-radius);
            text-align: center;
            box-shadow: var(--shadow);
        }

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

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

.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 {
            margin-bottom: 5px;
        }

.author-info p {
            color: var(--secondary);
            margin-bottom: 0;
        }

/* Video Section */
        .video-section {
            background: var(--gradient);
            color: white;
            text-align: center;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

.video-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
        }

.video-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

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

.video-content p {
            margin-bottom: 30px;
            opacity: 0.9;
        }

.video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

.video-placeholder {
            position: relative;
            width: 100%;
            height: 400px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

.video-placeholder i {
            font-size: 4rem;
            color: white;
            transition: var(--transition);
        }

.video-placeholder:hover i {
            transform: scale(1.1);
            color: var(--accent);
        }

/* Pricing Section */
        .pricing {
            background: var(--light);
        }

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

.pricing-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

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

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

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

.pricing-header {
            margin-bottom: 30px;
        }

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

.pricing-price {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 5px;
        }

.pricing-duration {
            color: var(--secondary);
        }

.pricing-features {
            margin-bottom: 30px;
        }

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

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

/* Contact Section */
        .contact {
            background: white;
        }

.contact-content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 50px;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

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

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

.contact-text h4 {
            margin-bottom: 5px;
        }

.contact-form {
            background: var(--light);
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

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

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

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

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

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

.footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 50px;
        }

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

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

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

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

.footer-links a:hover {
            color: white;
            padding-left: 5px;
        }

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

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

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

.footer-newsletter p {
            color: #aaa;
            margin-bottom: 20px;
        }

.newsletter-form {
            display: flex;
        }

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

.newsletter-btn {
            padding: 0 20px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
            cursor: pointer;
            transition: var(--transition);
        }

.newsletter-btn:hover {
            background: var(--primary-dark);
        }

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

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

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

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

/* Responsive Styles */
        @media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .contact-content {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 768px) {
            .navbar {
                padding: 15px 0;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: white;
                flex-direction: column;
                align-items: center;
                padding-top: 50px;
                transition: var(--transition);
                box-shadow: var(--shadow);
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                margin: 15px 0;
            }
            
            .mobile-menu {
                display: block;
            }
            
            .hero {
                padding: 120px 0 80px;
            }
            
            .slide h1 {
                font-size: 2.5rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .features {
                grid-template-columns: 1fr;
            }
            
            .pricing-card.popular {
                transform: scale(1);
            }
            
            .pricing-card.popular:hover {
                transform: translateY(-10px);
            }
        }

@media (max-width: 576px) {
            .section {
                padding: 60px 0;
            }
            
            .slide {
                padding: 0 20px;
            }
            
            .slide h1 {
                font-size: 2rem;
            }
            
            .course-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-input {
                border-radius: var(--border-radius);
                margin-bottom: 10px;
            }
            
            .newsletter-btn {
                border-radius: var(--border-radius);
                padding: 12px;
            }
        }

JavaScript

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

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

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

// Hero Slider
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.slider-dot');
        const prevArrow = document.querySelector('.slider-arrow.prev');
        const nextArrow = document.querySelector('.slider-arrow.next');
        let currentSlide = 0;

function showSlide(n) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (n + slides.length) % slides.length;
            
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

function nextSlide() {
            showSlide(currentSlide + 1);
        }

function prevSlide() {
            showSlide(currentSlide - 1);
        }

nextArrow.addEventListener('click', nextSlide);
        prevArrow.addEventListener('click', prevSlide);

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

// Auto slide change every 5 seconds
        setInterval(nextSlide, 5000);

// Instructor Slider
        const instructorTrack = document.querySelector('.instructor-track');
        const instructorCards = document.querySelectorAll('.instructor-card');
        const prevInstructor = document.querySelector('.prev-instructor');
        const nextInstructor = document.querySelector('.next-instructor');
        let instructorIndex = 0;
        const cardWidth = instructorCards[0].offsetWidth + 30; // width + margin

function updateInstructorSlider() {
            instructorTrack.style.transform = `translateX(-${instructorIndex * cardWidth}px)`;
        }

nextInstructor.addEventListener('click', () => {
            if (instructorIndex < instructorCards.length - 3) {
                instructorIndex++;
                updateInstructorSlider();
            }
        });

prevInstructor.addEventListener('click', () => {
            if (instructorIndex > 0) {
                instructorIndex--;
                updateInstructorSlider();
            }
        });

// Testimonial Slider
        const testimonialTrack = document.querySelector('.testimonial-track');
        const testimonialCards = document.querySelectorAll('.testimonial-card');
        const prevTestimonial = document.querySelector('.prev-testimonial');
        const nextTestimonial = document.querySelector('.next-testimonial');
        let testimonialIndex = 0;

function updateTestimonialSlider() {
            testimonialTrack.style.transform = `translateX(-${testimonialIndex * 100}%)`;
        }

nextTestimonial.addEventListener('click', () => {
            if (testimonialIndex < testimonialCards.length - 1) {
                testimonialIndex++;
                updateTestimonialSlider();
            }
        });

prevTestimonial.addEventListener('click', () => {
            if (testimonialIndex > 0) {
                testimonialIndex--;
                updateTestimonialSlider();
            }
        });

// Course Filtering
        const filterButtons = document.querySelectorAll('.filter-btn');
        const courseCards = document.querySelectorAll('.course-card');

filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('active'));
                // Add active class to clicked button
                button.classList.add('active');
                
                const filter = button.getAttribute('data-filter');
                
                courseCards.forEach(card => {
                    if (filter === 'all' || card.getAttribute('data-category') === filter) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 100);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

// Video Play Functionality
        const videoPlaceholder = document.querySelector('.video-placeholder');
        
        videoPlaceholder.addEventListener('click', () => {
            videoPlaceholder.innerHTML = '<iframe width="100%" height="100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
        });

// Smooth Scrolling for Navigation 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'
                    });
                    
                    // Close mobile menu if open
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                    }
                }
            });
        });

// Animation on Scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.about-image, .about-text, .course-card, .instructor-card, .pricing-card, .contact-info, .contact-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };

// Set initial state for animated elements
        document.querySelectorAll('.about-image, .about-text, .course-card, .instructor-card, .pricing-card, .contact-info, .contact-form').forEach(element => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(30px)';
            element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        });

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

Master Spoken English Class Template Preview

Download Options