Professional Dance Classes Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Elite Dance Academy - Professional Dance Classes</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Loading Screen --> <!-- <div class="loading" id="loading"> <div class="spinner"></div> </div> --> <!-- Header --> <header class="header" id="header"> <div class="nav-container"> <div class="logo"> <div class="logo-icon"> <i class="fas fa-music"></i> </div> Dance Academy </div> <nav> <ul class="nav-menu"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#classes">Classes</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="mobile-menu"> <span></span> <span></span> <span></span> </div> </nav> </div> </header> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-particles" id="particles"></div> <div class="hero-content"> <div class="hero-text"> <h1>Dance Your Way to <span class="highlight">Excellence</span></h1> <p>Join the most prestigious dance academy where passion meets perfection. Learn from world-class instructors and discover your true potential in our state-of-the-art facilities.</p> <div class="hero-buttons"> <a href="#classes" class="btn-primary"> <i class="fas fa-play"></i> Explore Classes </a> <a href="#about" class="btn-secondary"> <i class="fas fa-info-circle"></i> Learn More </a> </div> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Professional dancers performing" onerror="this.src=''; this.alt='Dance performance image failed to load'; this.style.display='none';"> </div> </div> <div class="hero-stats"> <div class="stat-card animate-on-scroll"> <span class="stat-number">500+</span> <span class="stat-label">Students</span> </div> <div class="stat-card animate-on-scroll"> <span class="stat-number">25+</span> <span class="stat-label">Instructors</span> </div> <div class="stat-card animate-on-scroll"> <span class="stat-number">15+</span> <span class="stat-label">Dance Styles</span> </div> <div class="stat-card animate-on-scroll"> <span class="stat-number">10+</span> <span class="stat-label">Years Experience</span> </div> </div> </section> <!-- About Section --> <section class="section about" id="about"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">About Us</div> <h2 class="section-title">Where Dreams Take Flight</h2> <p class="section-description">For over a decade, Elite Dance Academy has been nurturing talent and creating professional dancers who shine on stages worldwide.</p> </div> <div class="about-content"> <div class="about-text animate-on-scroll"> <h3>Our Story</h3> <p>Founded in 2013 by internationally acclaimed dancer Maria Rodriguez, Elite Dance Academy has grown from a small studio to the region's premier dance institution. Our commitment to excellence and personalized instruction has helped thousands of students achieve their dreams.</p> <p>We believe that dance is not just movement, but a powerful form of expression that builds confidence, discipline, and artistic vision. Our comprehensive programs cater to all levels, from beginners taking their first steps to professionals preparing for international competitions.</p> <div class="about-features"> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-trophy"></i> </div> <div class="feature-text"> <h4>Award-Winning</h4> <p>Multiple national and international dance competition victories</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-users"></i> </div> <div class="feature-text"> <h4>Expert Faculty</h4> <p>World-class instructors with professional performance backgrounds</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-star"></i> </div> <div class="feature-text"> <h4>Personalized Training</h4> <p>Individual attention and customized learning programs</p> </div> </div> <div class="feature-item"> <div class="feature-icon"> <i class="fas fa-building"></i> </div> <div class="feature-text"> <h4>Modern Facilities</h4> <p>State-of-the-art studios with professional equipment</p> </div> </div> </div> </div> <div class="about-image animate-on-scroll"> <img src="https://plus.unsplash.com/premium_photo-1681492514899-089902cd417a?q=80&w=382&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dance studio interior" onerror="this.src=''; this.alt='Dance studio image failed to load'; this.style.display='none';"> <div class="about-badge"> <span class="badge-number">10+</span> <span class="badge-text">Years Excellence</span> </div> </div> </div> </div> </section> <!-- Classes Section --> <section class="section classes" id="classes"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Our Classes</div> <h2 class="section-title">Discover Your Dance Style</h2> <p class="section-description">From classical ballet to contemporary hip-hop, we offer comprehensive training in all major dance styles for every skill level.</p> </div> <div class="classes-filter animate-on-scroll"> <button class="filter-btn active" data-filter="all">All Classes</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="professional">Professional</button> </div> <div class="classes-grid"> <div class="class-card animate-on-scroll" data-level="beginner"> <div class="class-image"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Ballet class" onerror="this.src=''; this.alt='Ballet class image failed to load'; this.style.display='none';"> <div class="class-level">Beginner</div> <div class="class-price">$120/month</div> </div> <div class="class-content"> <h3 class="class-title">Classical Ballet</h3> <p class="class-description">Master the fundamentals of ballet with proper technique, posture, and grace. Perfect for building a strong foundation in dance.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>60 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>12 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>3x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> <div class="class-card animate-on-scroll" data-level="intermediate"> <div class="class-image"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Hip hop class" onerror="this.src=''; this.alt='Hip hop class image failed to load'; this.style.display='none';"> <div class="class-level">Intermediate</div> <div class="class-price">$140/month</div> </div> <div class="class-content"> <h3 class="class-title">Hip Hop Fusion</h3> <p class="class-description">High-energy hip hop classes combining street dance styles with contemporary choreography and urban music.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>75 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>15 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>2x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> <div class="class-card animate-on-scroll" data-level="advanced"> <div class="class-image"> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Contemporary dance" onerror="this.src=''; this.alt='Contemporary dance image failed to load'; this.style.display='none';"> <div class="class-level">Advanced</div> <div class="class-price">$160/month</div> </div> <div class="class-content"> <h3 class="class-title">Contemporary Dance</h3> <p class="class-description">Expressive contemporary dance focusing on emotional storytelling through fluid movements and innovative choreography.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>90 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>10 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>3x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> <div class="class-card animate-on-scroll" data-level="beginner"> <div class="class-image"> <img src="https://images.unsplash.com/photo-1504609813442-a8924e83f76e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Jazz dance" onerror="this.src=''; this.alt='Jazz dance image failed to load'; this.style.display='none';"> <div class="class-level">Beginner</div> <div class="class-price">$130/month</div> </div> <div class="class-content"> <h3 class="class-title">Jazz Dance</h3> <p class="class-description">Energetic jazz dance classes featuring sharp movements, leaps, and turns set to upbeat music from Broadway to pop.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>60 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>14 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>2x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> <div class="class-card animate-on-scroll" data-level="intermediate"> <div class="class-image"> <img src="https://plus.unsplash.com/premium_photo-1681492514899-089902cd417a?q=80&w=382&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Latin dance" onerror="this.src=''; this.alt='Latin dance image failed to load'; this.style.display='none';"> <div class="class-level">Intermediate</div> <div class="class-price">$150/month</div> </div> <div class="class-content"> <h3 class="class-title">Latin Ballroom</h3> <p class="class-description">Passionate Latin dances including Salsa, Bachata, Cha-cha, and Rumba with authentic technique and styling.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>75 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>16 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>2x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> <div class="class-card animate-on-scroll" data-level="professional"> <div class="class-image"> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Professional training" onerror="this.src=''; this.alt='Professional training image failed to load'; this.style.display='none';"> <div class="class-level">Professional</div> <div class="class-price">$200/month</div> </div> <div class="class-content"> <h3 class="class-title">Professional Training</h3> <p class="class-description">Intensive professional development program for serious dancers preparing for auditions and competitions.</p> <div class="class-meta"> <div class="meta-item"> <i class="fas fa-clock"></i> <span>120 min</span> </div> <div class="meta-item"> <i class="fas fa-users"></i> <span>8 students</span> </div> <div class="meta-item"> <i class="fas fa-calendar"></i> <span>5x/week</span> </div> </div> <button class="class-btn">Enroll Now</button> </div> </div> </div> </div> </section> <!-- Instructors Section --> <section class="section instructors" id="instructors"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Our Team</div> <h2 class="section-title">World-Class Instructors</h2> <p class="section-description">Learn from internationally recognized dancers and choreographers who bring years of professional experience to every class.</p> </div> <div class="instructors-grid"> <div class="instructor-card animate-on-scroll"> <div class="instructor-image"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Marcus Johnson" onerror="this.src=''; this.alt='Instructor image failed to load'; this.style.display='none';"> </div> <h3 class="instructor-name">Marcus Johnson</h3> <p class="instructor-specialty">Hip Hop & Street Dance</p> <p class="instructor-bio">International hip hop champion and choreographer for major music artists. Brings authentic street dance culture and cutting-edge choreography to every class.</p> <div class="instructor-social"> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-tiktok"></i></a> <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> </div> </div> <div class="instructor-card animate-on-scroll"> <div class="instructor-image"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Sophie Chen" onerror="this.src=''; this.alt='Instructor image failed to load'; this.style.display='none';"> </div> <h3 class="instructor-name">Sophie Chen</h3> <p class="instructor-specialty">Contemporary & Modern</p> <p class="instructor-bio">Graduate of Juilliard School with extensive contemporary dance background. Known for her innovative choreography and emotional storytelling through movement.</p> <div class="instructor-social"> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a> <a href="#" class="social-link"><i class="fab fa-vimeo"></i></a> </div> </div> <div class="instructor-card animate-on-scroll"> <div class="instructor-image"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Carlos Martinez" onerror="this.src=''; this.alt='Instructor image failed to load'; this.style.display='none';"> </div> <h3 class="instructor-name">Carlos Martinez</h3> <p class="instructor-specialty">Latin & Ballroom</p> <p class="instructor-bio">World Latin Dance Champion with over 25 years of competitive experience. Brings authentic Latin passion and technique to ballroom and social dance classes.</p> <div class="instructor-social"> <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> <a href="#" class="social-link"><i class="fab fa-facebook"></i></a> <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div> </section> <!-- Schedule Section --> <section class="section schedule" id="schedule"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Class Schedule</div> <h2 class="section-title">Weekly Timetable</h2> <p class="section-description">Find the perfect class time that fits your schedule. We offer flexible timing throughout the week.</p> </div> <div class="schedule-tabs animate-on-scroll"> <button class="tab-btn active" data-day="monday">Monday</button> <button class="tab-btn" data-day="tuesday">Tuesday</button> <button class="tab-btn" data-day="wednesday">Wednesday</button> <button class="tab-btn" data-day="thursday">Thursday</button> <button class="tab-btn" data-day="friday">Friday</button> <button class="tab-btn" data-day="saturday">Saturday</button> </div> <div class="schedule-table animate-on-scroll"> <table> <thead> <tr> <th>Time</th> <th>Class</th> <th>Instructor</th> <th>Level</th> <th>Studio</th> </tr> </thead> <tbody id="scheduleBody"> <tr> <td class="time-slot">9:00 AM</td> <td class="class-name">Classical Ballet</td> <td class="instructor-name-table">Maria Rodriguez</td> <td>Beginner</td> <td>Studio A</td> </tr> <tr> <td class="time-slot">10:30 AM</td> <td class="class-name">Hip Hop Fusion</td> <td class="instructor-name-table">Marcus Johnson</td> <td>Intermediate</td> <td>Studio B</td> </tr> <tr> <td class="time-slot">2:00 PM</td> <td class="class-name">Contemporary Dance</td> <td class="instructor-name-table">Sophie Chen</td> <td>Advanced</td> <td>Studio A</td> </tr> <tr> <td class="time-slot">4:00 PM</td> <td class="class-name">Jazz Dance</td> <td class="instructor-name-table">Maria Rodriguez</td> <td>Beginner</td> <td>Studio C</td> </tr> <tr> <td class="time-slot">6:00 PM</td> <td class="class-name">Latin Ballroom</td> <td class="instructor-name-table">Carlos Martinez</td> <td>Intermediate</td> <td>Studio B</td> </tr> <tr> <td class="time-slot">8:00 PM</td> <td class="class-name">Professional Training</td> <td class="instructor-name-table">Maria Rodriguez</td> <td>Professional</td> <td>Studio A</td> </tr> </tbody> </table> </div> </div> </section> <!-- Facilities Section --> <section class="section facilities" id="facilities"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Our Facilities</div> <h2 class="section-title">State-of-the-Art Studios</h2> <p class="section-description">Train in professional-grade facilities designed to enhance your learning experience and performance quality.</p> </div> <div class="facilities-grid"> <div class="facility-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Main dance studio" onerror="this.src=''; this.alt='Dance studio image failed to load'; this.style.display='none';"> <div class="facility-overlay"> <h3 class="facility-title">Main Performance Studio</h3> <p class="facility-description">Our flagship 2000 sq ft studio with professional sprung floors, full-wall mirrors, and state-of-the-art sound system.</p> </div> </div> <div class="facility-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Ballet studio" onerror="this.src=''; this.alt='Ballet studio image failed to load'; this.style.display='none';"> <div class="facility-overlay"> <h3 class="facility-title">Classical Ballet Studio</h3> <p class="facility-description">Dedicated ballet studio with professional barres, mirrors, and specialized flooring for pointe work and classical training.</p> </div> </div> <div class="facility-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Hip hop studio" onerror="this.src=''; this.alt='Hip hop studio image failed to load'; this.style.display='none';"> <div class="facility-overlay"> <h3 class="facility-title">Urban Dance Studio</h3> <p class="facility-description">High-energy studio designed for hip hop and street dance with premium sound system and urban-inspired design.</p> </div> </div> <div class="facility-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1504609813442-a8924e83f76e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Changing rooms" onerror="this.src=''; this.alt='Changing rooms image failed to load'; this.style.display='none';"> <div class="facility-overlay"> <h3 class="facility-title">Premium Amenities</h3> <p class="facility-description">Spacious changing rooms, lockers, water stations, and comfortable waiting area for parents and students.</p> </div> </div> </div> </div> </section> <!-- Events Section --> <section class="section events" id="events"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Upcoming Events</div> <h2 class="section-title">Performances & Competitions</h2> <p class="section-description">Join us for exciting performances, workshops, and competitions that showcase our students' incredible talent.</p> </div> <div class="events-grid"> <div class="event-card animate-on-scroll"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Annual recital" onerror="this.src=''; this.alt='Event image failed to load'; this.style.display='none';"> <div class="event-date-badge"> <span class="event-day">15</span> <span class="event-month">DEC</span> </div> </div> <div class="event-content"> <h3 class="event-title">Annual Winter Recital</h3> <p class="event-description">Our biggest performance of the year featuring all dance styles and skill levels. A celebration of our students' hard work and dedication throughout the year.</p> <div class="event-meta"> <div class="event-time"> <i class="fas fa-clock"></i> <span>7:00 PM</span> </div> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> <span>City Theater</span> </div> </div> </div> </div> <div class="event-card animate-on-scroll"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Master class" onerror="this.src=''; this.alt='Event image failed to load'; this.style.display='none';"> <div class="event-date-badge"> <span class="event-day">8</span> <span class="event-month">JAN</span> </div> </div> <div class="event-content"> <h3 class="event-title">Master Class with Guest Artist</h3> <p class="event-description">Special workshop with internationally acclaimed dancer and choreographer Isabella Martinez. Limited spots available for intermediate and advanced students.</p> <div class="event-meta"> <div class="event-time"> <i class="fas fa-clock"></i> <span>2:00 PM</span> </div> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> <span>Main Studio</span> </div> </div> </div> </div> <div class="event-card animate-on-scroll"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Competition" onerror="this.src=''; this.alt='Event image failed to load'; this.style.display='none';"> <div class="event-date-badge"> <span class="event-day">22</span> <span class="event-month">JAN</span> </div> </div> <div class="event-content"> <h3 class="event-title">Regional Dance Competition</h3> <p class="event-description">Our competitive teams will showcase their skills at the Regional Dance Championships. Come support our talented dancers as they compete for top honors.</p> <div class="event-meta"> <div class="event-time"> <i class="fas fa-clock"></i> <span>All Day</span> </div> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> <span>Convention Center</span> </div> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="section testimonials" id="testimonials"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Testimonials</div> <h2 class="section-title">What Our Students Say</h2> <p class="section-description">Hear from our amazing students and parents about their transformative dance journey with us.</p> </div> <div class="testimonials-slider animate-on-scroll"> <div class="testimonials-track" id="testimonialsTrack"> <div class="testimonial-card"> <div class="testimonial-quote">"</div> <p class="testimonial-text">Elite Dance Academy has completely transformed my daughter's confidence and artistic expression. The instructors are incredibly skilled and nurturing, creating an environment where every student can thrive. The professional training she receives here is unmatched.</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1494790108755-2616c9c0e8e0?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Parent testimonial" onerror="this.src=''; this.alt='Testimonial image failed to load'; this.style.display='none';"> </div> <div class="author-info"> <h4>Jennifer Martinez</h4> <p>Parent of Advanced Ballet Student</p> </div> </div> </div> <div class="testimonial-card"> <div class="testimonial-quote">"</div> <p class="testimonial-text">As a professional dancer, I can say that the training at Elite Dance Academy is world-class. The technique I learned here prepared me for my career in musical theater. The instructors don't just teach steps; they develop artists.</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Professional dancer testimonial" onerror="this.src=''; this.alt='Testimonial image failed to load'; this.style.display='none';"> </div> <div class="author-info"> <h4>Alex Thompson</h4> <p>Professional Musical Theater Performer</p> </div> </div> </div> <div class="testimonial-card"> <div class="testimonial-quote">"</div> <p class="testimonial-text">I started as a complete beginner in my 30s and was nervous about joining. The supportive community and patient instruction made me feel welcome from day one. Now I can't imagine my life without dance!</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80" alt="Adult student testimonial" onerror="this.src=''; this.alt='Testimonial image failed to load'; this.style.display='none';"> </div> <div class="author-info"> <h4>Sarah Kim</h4> <p>Adult Contemporary Student</p> </div> </div> </div> </div> <div class="slider-controls"> <button class="slider-btn" id="prevBtn"> <i class="fas fa-chevron-left"></i> </button> <button class="slider-btn" id="nextBtn"> <i class="fas fa-chevron-right"></i> </button> </div> <div class="slider-dots" id="sliderDots"> <span class="dot active" data-slide="0"></span> <span class="dot" data-slide="1"></span> <span class="dot" data-slide="2"></span> </div> </div> </div> </section> <!-- Gallery Section --> <section class="section gallery" id="gallery"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Gallery</div> <h2 class="section-title">Moments of Excellence</h2> <p class="section-description">Explore our vibrant dance community through photos of performances, classes, and special events.</p> </div> <div class="gallery-filter animate-on-scroll"> <button class="filter-btn active" data-filter="all">All Photos</button> <button class="filter-btn" data-filter="performances">Performances</button> <button class="filter-btn" data-filter="classes">Classes</button> <button class="filter-btn" data-filter="events">Events</button> </div> <div class="gallery-grid"> <div class="gallery-item animate-on-scroll" data-category="performances"> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Performance photo" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animate-on-scroll" data-category="classes"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Ballet class" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animate-on-scroll" data-category="performances"> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Contemporary performance" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animate-on-scroll" data-category="classes"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Hip hop class" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animate-on-scroll" data-category="events"> <img src="https://images.unsplash.com/photo-1504609813442-a8924e83f76e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Special event" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item animate-on-scroll" data-category="performances"> <img src="https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Latin dance performance" onerror="this.src=''; this.alt='Gallery image failed to load'; this.style.display='none';"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="section contact" id="contact"> <div class="container"> <div class="section-header animate-on-scroll"> <div class="section-subtitle">Contact Us</div> <h2 class="section-title">Start Your Dance Journey</h2> <p class="section-description">Ready to begin your transformation? Get in touch with us to schedule your trial class and discover your potential.</p> </div> <div class="contact-content"> <div class="contact-info animate-on-scroll"> <h3>Get In Touch</h3> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-map-marker-alt"></i> </div> <div class="contact-details"> <h4>Visit Our Studio</h4> <p>456 Dance Avenue<br>Arts District, City 12345<br>United States</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-phone"></i> </div> <div class="contact-details"> <h4>Call Us</h4> <p>Main: (555) 123-DANCE<br>WhatsApp: (555) 123-4567</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-envelope"></i> </div> <div class="contact-details"> <h4>Email Us</h4> <p>info@elitedanceacademy.com<br>admissions@elitedanceacademy.com</p> </div> </div> <div class="contact-item"> <div class="contact-icon"> <i class="fas fa-clock"></i> </div> <div class="contact-details"> <h4>Studio Hours</h4> <p>Monday - Friday: 9AM - 10PM<br>Saturday - Sunday: 10AM - 8PM</p> </div> </div> </div> <div class="contact-form animate-on-scroll"> <form id="contactForm"> <div class="form-row"> <div class="form-group"> <label for="firstName">First Name</label> <input type="text" id="firstName" name="firstName" required> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input type="text" id="lastName" name="lastName" required> </div> </div> <div class="form-row"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="age">Age Group</label> <select id="age" name="age" required> <option value="">Select Age Group</option> <option value="child">Child (5-12)</option> <option value="teen">Teen (13-17)</option> <option value="adult">Adult (18+)</option> </select> </div> <div class="form-group"> <label for="experience">Dance Experience</label> <select id="experience" name="experience" required> <option value="">Select Experience Level</option> <option value="beginner">Complete Beginner</option> <option value="some">Some Experience</option> <option value="intermediate">Intermediate</option> <option value="advanced">Advanced</option> </select> </div> </div> <div class="form-group"> <label for="interests">Dance Styles of Interest</label> <input type="text" id="interests" name="interests" placeholder="e.g., Ballet, Hip Hop, Contemporary"> </div> <div class="form-group"> <label for="message">Additional Message</label> <textarea id="message" name="message" rows="4" placeholder="Tell us about your dance goals, questions, or special requirements..."></textarea> </div> <button type="submit" class="submit-btn"> <i class="fas fa-paper-plane"></i> Send Message & Book Trial </button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>Elite Dance Academy</h3> <p>Transforming lives through the art of dance. Join our community of passionate dancers and discover your true potential in our world-class facilities.</p> <div class="footer-social"> <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-youtube"></i></a> <a href="#"><i class="fab fa-tiktok"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="footer-section"> <h3>Quick Links</h3> <p><a href="#about">About Us</a></p> <p><a href="#classes">Dance Classes</a></p> <p><a href="#instructors">Our Instructors</a></p> <p><a href="#schedule">Class Schedule</a></p> <p><a href="#events">Events</a></p> </div> <div class="footer-section"> <h3>Dance Styles</h3> <p><a href="#classes">Classical Ballet</a></p> <p><a href="#classes">Hip Hop Fusion</a></p> <p><a href="#classes">Contemporary Dance</a></p> <p><a href="#classes">Jazz Dance</a></p> <p><a href="#classes">Latin Ballroom</a></p> </div> <div class="footer-section"> <h3>Contact Info</h3> <p>? 456 Dance Avenue, Arts District</p> <p>? (555) 123-DANCE</p> <p>✉️ info@elitedanceacademy.com</p> <p>? Mon-Fri: 9AM-10PM</p> <p>? Sat-Sun: 10AM-8PM</p> </div> </div> <div class="footer-bottom"> <p>© 2024 Elite Dance Academy. All rights reserved. | Privacy Policy | Terms of Service | Student Handbook</p> </div> </div> </footer> <!-- Scroll to Top Button --> <div class="scroll-top" id="scrollTop"> <i class="fas fa-arrow-up"></i> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96e22c5f06cf3d2b',t:'MTc1NTAyNDc4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-color: #FFD700; --secondary-color: #FFA500; --accent-color: #FF6B35; --dark-color: #1a1a1a; --light-color: #ffffff; --gray-color: #f8f9fa; --text-dark: #333333; --text-light: #666666; --gradient-primary: linear-gradient(135deg, #FFD700, #FFA500); --gradient-secondary: linear-gradient(135deg, #FF6B35, #FFD700); --shadow-light: 0 5px 15px rgba(0,0,0,0.08); --shadow-medium: 0 10px 30px rgba(0,0,0,0.12); --shadow-heavy: 0 20px 60px rgba(0,0,0,0.15); --border-radius: 15px; --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: var(--text-dark); overflow-x: hidden; } /* Advanced Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: var(--transition); } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Advanced Header */ .header { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 215, 0, 0.1); z-index: 1000; transition: var(--transition); padding: 1rem 0; } .header.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-medium); padding: 0.5rem 0; } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; } .logo { display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logo-icon { width: 50px; height: 50px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; animation: pulse 2s infinite; } .nav-menu { display: flex; list-style: none; gap: 2.5rem; align-items: center; } .nav-menu a { color: var(--text-dark); text-decoration: none; font-weight: 500; position: relative; transition: var(--transition); padding: 0.5rem 0; } .nav-menu a::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--gradient-primary); transition: var(--transition); transform: translateX(-50%); } .nav-menu a:hover::before { width: 100%; } .nav-menu a:hover { color: var(--primary-color); transform: translateY(-2px); } .cta-nav { background: var(--gradient-primary); color: white; padding: 0.8rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; transition: var(--transition); box-shadow: var(--shadow-light); } .cta-nav:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } .mobile-menu { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; } .mobile-menu span { width: 25px; height: 3px; background: var(--text-dark); margin: 3px 0; transition: var(--transition); border-radius: 2px; } /* Hero Section */ .hero { min-height: 100vh; background: var(--gradient-primary); position: relative; display: flex; align-items: center; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover; opacity: 0.15; z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .particle { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; } .hero-content { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 3; } .hero-text { color: white; } .hero-text h1 { font-size: 4rem; font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; animation: fadeInLeft 1s ease; } .hero-text .highlight { background: linear-gradient(45deg, #fff, #FFD700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-text p { font-size: 1.3rem; margin-bottom: 2.5rem; opacity: 0.9; animation: fadeInLeft 1s ease 0.3s both; } .hero-buttons { display: flex; gap: 1.5rem; animation: fadeInLeft 1s ease 0.6s both; } .btn-primary { background: white; color: var(--primary-color); padding: 1.2rem 2.5rem; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: var(--shadow-medium); } .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-heavy); } .btn-secondary { background: transparent; color: white; padding: 1.2rem 2.5rem; border: 2px solid white; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-secondary:hover { background: white; color: var(--primary-color); transform: translateY(-3px); } .hero-image { position: relative; animation: fadeInRight 1s ease 0.5s both; } .hero-image img { width: 100%; border-radius: 30px; box-shadow: var(--shadow-heavy); transition: var(--transition); } .hero-image:hover img { transform: scale(1.05) rotate(2deg); } .hero-stats { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; gap: 2rem; z-index: 4; } .stat-card { background: white; padding: 2rem; border-radius: var(--border-radius); text-align: center; box-shadow: var(--shadow-medium); min-width: 150px; transition: var(--transition); } .stat-card:hover { transform: translateY(-10px); } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); display: block; } .stat-label { color: var(--text-light); font-weight: 500; font-size: 0.9rem; } /* Section Styles */ .section { padding: 8rem 0; position: relative; } .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 5rem; max-width: 800px; margin-left: auto; margin-right: auto; } .section-subtitle { color: var(--primary-color); font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; } .section-title { font-size: 3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 1.5rem; line-height: 1.2; } .section-description { font-size: 1.2rem; color: var(--text-light); line-height: 1.8; } /* About Section */ .about { background: var(--gray-color); position: relative; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .about-text h3 { font-size: 2.5rem; color: var(--text-dark); margin-bottom: 2rem; font-weight: 700; } .about-text p { color: var(--text-light); margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.8; } .about-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .feature-item { display: flex; align-items: center; gap: 1rem; } .feature-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; flex-shrink: 0; } .feature-text h4 { font-weight: 600; margin-bottom: 0.5rem; color: var(--text-dark); } .feature-text p { color: var(--text-light); font-size: 0.9rem; margin: 0; } .about-image { position: relative; } .about-image img { width: 100%; border-radius: 30px; box-shadow: var(--shadow-medium); } .about-badge { position: absolute; top: 2rem; right: 2rem; background: var(--gradient-primary); color: white; padding: 1.5rem; border-radius: 20px; text-align: center; box-shadow: var(--shadow-medium); } .badge-number { font-size: 2rem; font-weight: 800; display: block; } .badge-text { font-size: 0.9rem; font-weight: 500; } /* Classes Section */ .classes { background: white; } .classes-filter { display: flex; justify-content: center; gap: 1rem; margin-bottom: 4rem; flex-wrap: wrap; } .filter-btn { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 0.8rem 2rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: var(--transition); } .filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: white; transform: translateY(-2px); } .classes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 3rem; } .class-card { background: white; border-radius: 25px; overflow: hidden; box-shadow: var(--shadow-light); transition: var(--transition); position: relative; } .class-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-heavy); } .class-image { position: relative; height: 250px; overflow: hidden; } .class-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .class-card:hover .class-image img { transform: scale(1.1); } .class-level { position: absolute; top: 1rem; left: 1rem; background: var(--gradient-primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .class-price { position: absolute; top: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.8); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 700; } .class-content { padding: 2.5rem; } .class-title { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; } .class-description { color: var(--text-light); margin-bottom: 2rem; line-height: 1.6; } .class-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; } .meta-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-light); font-size: 0.9rem; } .meta-item i { color: var(--primary-color); } .class-btn { width: 100%; background: var(--gradient-primary); color: white; border: none; padding: 1rem; border-radius: 15px; font-weight: 600; cursor: pointer; transition: var(--transition); } .class-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Instructors Section */ .instructors { background: var(--gray-color); } .instructors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .instructor-card { background: white; border-radius: 25px; padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-light); transition: var(--transition); position: relative; overflow: hidden; } .instructor-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent); transition: var(--transition); } .instructor-card:hover::before { left: 100%; } .instructor-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .instructor-image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 2rem; overflow: hidden; border: 5px solid var(--primary-color); position: relative; } .instructor-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .instructor-card:hover .instructor-image img { transform: scale(1.1); } .instructor-name { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; } .instructor-specialty { color: var(--primary-color); font-weight: 600; margin-bottom: 1rem; font-size: 1.1rem; } .instructor-bio { color: var(--text-light); line-height: 1.6; margin-bottom: 2rem; } .instructor-social { display: flex; justify-content: center; gap: 1rem; } .social-link { width: 45px; height: 45px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; text-decoration: none; transition: var(--transition); } .social-link:hover { transform: translateY(-3px) scale(1.1); } /* Schedule Section */ .schedule { background: white; } .schedule-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 4rem; flex-wrap: wrap; } .tab-btn { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 1rem 2rem; border-radius: 50px; font-weight: 600; cursor: pointer; transition: var(--transition); } .tab-btn.active, .tab-btn:hover { background: var(--primary-color); color: white; } .schedule-table { background: white; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-medium); } .schedule-table table { width: 100%; border-collapse: collapse; } .schedule-table th { background: var(--gradient-primary); color: white; padding: 1.5rem; font-weight: 600; text-align: left; } .schedule-table td { padding: 1.5rem; border-bottom: 1px solid #eee; transition: var(--transition); } .schedule-table tr:hover td { background: var(--gray-color); } .time-slot { font-weight: 600; color: var(--primary-color); } .class-name { font-weight: 600; color: var(--text-dark); } .instructor-name-table { color: var(--text-light); font-size: 0.9rem; } /* Facilities Section */ .facilities { background: var(--gray-color); } .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; } .facility-card { position: relative; border-radius: 25px; overflow: hidden; height: 350px; box-shadow: var(--shadow-medium); transition: var(--transition); } .facility-card:hover { transform: scale(1.05); } .facility-card img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .facility-card:hover img { transform: scale(1.1); } .facility-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); color: white; padding: 3rem 2rem 2rem; } .facility-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .facility-description { opacity: 0.9; line-height: 1.6; } /* Testimonials Section */ .testimonials { background: white; position: relative; } .testimonials-slider { position: relative; overflow: hidden; } .testimonials-track { display: flex; transition: transform 0.5s ease; } .testimonial-card { min-width: 100%; background: var(--gray-color); border-radius: 25px; padding: 4rem; text-align: center; position: relative; } .testimonial-quote { font-size: 4rem; color: var(--primary-color); position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); opacity: 0.3; } .testimonial-text { font-size: 1.3rem; color: var(--text-light); font-style: italic; line-height: 1.8; margin: 3rem 0; position: relative; z-index: 2; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 2rem; } .author-image { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--primary-color); } .author-image img { width: 100%; height: 100%; object-fit: cover; } .author-info h4 { color: var(--text-dark); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; } .author-info p { color: var(--text-light); } .slider-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; } .slider-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--gradient-primary); color: white; border: none; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .slider-btn:hover { transform: scale(1.1); } .slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; cursor: pointer; transition: var(--transition); } .dot.active { background: var(--primary-color); transform: scale(1.2); } /* Events Section */ .events { background: var(--gray-color); } .events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; } .event-card { background: white; border-radius: 25px; overflow: hidden; box-shadow: var(--shadow-light); transition: var(--transition); } .event-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-heavy); } .event-image { height: 200px; overflow: hidden; position: relative; } .event-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .event-card:hover .event-image img { transform: scale(1.1); } .event-date-badge { position: absolute; top: 1rem; left: 1rem; background: var(--gradient-primary); color: white; padding: 1rem; border-radius: 15px; text-align: center; font-weight: 700; } .event-day { font-size: 1.5rem; display: block; } .event-month { font-size: 0.8rem; opacity: 0.9; } .event-content { padding: 2.5rem; } .event-title { font-size: 1.4rem; font-weight: 700; color: var(--text-dark); margin-bottom: 1rem; } .event-description { color: var(--text-light); line-height: 1.6; margin-bottom: 2rem; } .event-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid #eee; } .event-time, .event-location { display: flex; align-items: center; gap: 0.5rem; color: var(--text-light); font-size: 0.9rem; } .event-time i, .event-location i { color: var(--primary-color); } /* Gallery Section */ .gallery { background: white; } .gallery-filter { display: flex; justify-content: center; gap: 1rem; margin-bottom: 4rem; flex-wrap: wrap; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .gallery-item { border-radius: 20px; overflow: hidden; position: relative; height: 300px; transition: var(--transition); cursor: pointer; } .gallery-item:hover { transform: scale(1.05); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 215, 0, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { font-size: 3rem; color: white; } /* Contact Section */ .contact { background: var(--gray-color); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; } .contact-info h3 { font-size: 2.5rem; color: var(--text-dark); margin-bottom: 2rem; font-weight: 700; } .contact-item { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 3rem; } .contact-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; flex-shrink: 0; } .contact-details h4 { color: var(--text-dark); font-weight: 600; font-size: 1.2rem; margin-bottom: 0.5rem; } .contact-details p { color: var(--text-light); line-height: 1.6; } .contact-form { background: white; padding: 3rem; border-radius: 25px; box-shadow: var(--shadow-medium); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; color: var(--text-dark); font-weight: 600; margin-bottom: 0.8rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 1.2rem; border: 2px solid #eee; border-radius: 15px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: var(--transition); background: white; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1); } .submit-btn { width: 100%; background: var(--gradient-primary); color: white; padding: 1.5rem; border: none; border-radius: 15px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .submit-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } /* Footer */ .footer { background: var(--dark-color); color: white; padding: 5rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4rem; margin-bottom: 3rem; } .footer-section h3 { color: var(--primary-color); margin-bottom: 2rem; font-size: 1.5rem; font-weight: 700; } .footer-section p, .footer-section a { color: #ccc; text-decoration: none; line-height: 1.8; transition: var(--transition); } .footer-section a:hover { color: var(--primary-color); } .footer-social { display: flex; gap: 1rem; margin-top: 2rem; } .footer-social a { width: 50px; height: 50px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: var(--transition); } .footer-social a:hover { transform: translateY(-3px) scale(1.1); } .footer-bottom { border-top: 1px solid #444; padding-top: 2rem; text-align: center; color: #ccc; } /* Scroll to Top */ .scroll-top { position: fixed; bottom: 2rem; right: 2rem; width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; opacity: 0; transition: var(--transition); z-index: 1000; box-shadow: var(--shadow-medium); } .scroll-top.visible { opacity: 1; } .scroll-top:hover { transform: translateY(-5px) scale(1.1); } /* Responsive Design */ @media (max-width: 1024px) { .hero-content, .about-content, .contact-content { grid-template-columns: 1fr; gap: 3rem; } .hero-text { text-align: center; } .hero-text h1 { font-size: 3rem; } .section-title { font-size: 2.5rem; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu { display: flex; } .hero-text h1 { font-size: 2.5rem; } .hero-buttons { flex-direction: column; align-items: center; } .section { padding: 5rem 0; } .section-title { font-size: 2rem; } .about-features { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .hero-stats { position: static; transform: none; justify-content: center; margin-top: 3rem; } } @media (max-width: 480px) { .container { padding: 0 1rem; } .hero-text h1 { font-size: 2rem; } .section { padding: 3rem 0; } .classes-grid, .instructors-grid, .facilities-grid, .events-grid, .gallery-grid { grid-template-columns: 1fr; } } /* Loading Animation */ .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.5s ease; } .loading.hidden { opacity: 0; pointer-events: none; } .spinner { width: 60px; height: 60px; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
JavaScript
// Loading screen window.addEventListener('load', () => { const loading = document.getElementById('loading'); setTimeout(() => { loading.classList.add('hidden'); }, 1000); }); // Create floating particles function createParticles() { const particlesContainer = document.getElementById('particles'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.className = 'particle'; particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; particle.style.width = Math.random() * 10 + 5 + 'px'; particle.style.height = particle.style.width; particle.style.animationDelay = Math.random() * 6 + 's'; particle.style.animationDuration = (Math.random() * 4 + 4) + 's'; particlesContainer.appendChild(particle); } } // Header scroll effect window.addEventListener('scroll', () => { const header = document.getElementById('header'); const scrollTop = document.getElementById('scrollTop'); if (window.scrollY > 100) { header.classList.add('scrolled'); scrollTop.classList.add('visible'); } else { header.classList.remove('scrolled'); scrollTop.classList.remove('visible'); } }); // Smooth scrolling document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Scroll to top document.getElementById('scrollTop').addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Animate on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); } }); }, observerOptions); document.querySelectorAll('.animate-on-scroll').forEach(el => { observer.observe(el); }); // Class filter functionality const filterBtns = document.querySelectorAll('.classes-filter .filter-btn'); const classCards = document.querySelectorAll('.class-card'); filterBtns.forEach(btn => { btn.addEventListener('click', () => { // Remove active class from all buttons filterBtns.forEach(b => b.classList.remove('active')); // Add active class to clicked button btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); classCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-level') === 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); } }); }); }); // Gallery filter functionality const galleryFilterBtns = document.querySelectorAll('.gallery-filter .filter-btn'); const galleryItems = document.querySelectorAll('.gallery-item'); galleryFilterBtns.forEach(btn => { btn.addEventListener('click', () => { galleryFilterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); galleryItems.forEach(item => { if (filter === 'all' || item.getAttribute('data-category') === filter) { item.style.display = 'block'; setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 100); } else { item.style.opacity = '0'; item.style.transform = 'scale(0.8)'; setTimeout(() => { item.style.display = 'none'; }, 300); } }); }); }); // Testimonials slider let currentSlide = 0; const slides = document.querySelectorAll('.testimonial-card'); const totalSlides = slides.length; const track = document.getElementById('testimonialsTrack'); const dots = document.querySelectorAll('.dot'); function updateSlider() { track.style.transform = `translateX(-${currentSlide * 100}%)`; dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentSlide); }); } document.getElementById('nextBtn').addEventListener('click', () => { currentSlide = (currentSlide + 1) % totalSlides; updateSlider(); }); document.getElementById('prevBtn').addEventListener('click', () => { currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; updateSlider(); }); dots.forEach((dot, index) => { dot.addEventListener('click', () => { currentSlide = index; updateSlider(); }); }); // Auto-play testimonials setInterval(() => { currentSlide = (currentSlide + 1) % totalSlides; updateSlider(); }, 5000); // Schedule tabs const tabBtns = document.querySelectorAll('.tab-btn'); tabBtns.forEach(btn => { btn.addEventListener('click', () => { tabBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); // Here you would typically load different schedule data // For demo purposes, we'll just show the same schedule }); }); // Contact form handling document.getElementById('contactForm').addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); const firstName = formData.get('firstName'); const lastName = formData.get('lastName'); const email = formData.get('email'); const interests = formData.get('interests'); if (!firstName || !lastName || !email) { alert('Please fill in all required fields.'); return; } const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.innerHTML; submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you, ${firstName}! Your message has been received. We'll contact you soon to schedule your trial class for ${interests || 'your preferred dance styles'}.`); this.reset(); submitBtn.innerHTML = originalText; submitBtn.disabled = false; }, 2000); }); // Class enrollment buttons document.querySelectorAll('.class-btn').forEach(btn => { btn.addEventListener('click', function() { const classCard = this.closest('.class-card'); const className = classCard.querySelector('.class-title').textContent; const classLevel = classCard.querySelector('.class-level').textContent; alert(`Great choice! You're interested in ${className} (${classLevel} level). Please fill out the contact form below to complete your enrollment.`); // Scroll to contact form document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); }); }); // Gallery image modal document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('click', function() { const img = this.querySelector('img'); if (img && img.src) { const modal = document.createElement('div'); modal.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; z-index: 10000; cursor: pointer; animation: fadeIn 0.3s ease; `; const modalImg = document.createElement('img'); modalImg.src = img.src; modalImg.style.cssText = ` max-width: 90%; max-height: 90%; border-radius: 15px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); `; modal.appendChild(modalImg); document.body.appendChild(modal); modal.addEventListener('click', () => { modal.style.animation = 'fadeOut 0.3s ease'; setTimeout(() => { document.body.removeChild(modal); }, 300); }); } }); }); // Mobile menu toggle document.querySelector('.mobile-menu').addEventListener('click', function() { const navMenu = document.querySelector('.nav-menu'); const spans = this.querySelectorAll('span'); navMenu.classList.toggle('active'); spans.forEach((span, index) => { span.style.transform = navMenu.classList.contains('active') ? `rotate(${index === 1 ? 0 : index === 0 ? 45 : -45}deg) translate(${index === 1 ? '100px' : '0'}, ${index === 0 ? '6px' : index === 2 ? '-6px' : '0'})` : 'none'; span.style.opacity = navMenu.classList.contains('active') && index === 1 ? '0' : '1'; }); }); // Initialize particles createParticles(); // Add CSS for mobile menu const style = document.createElement('style'); style.textContent = ` @media (max-width: 768px) { .nav-menu { position: fixed; top: 100%; left: 0; width: 100%; background: white; flex-direction: column; padding: 2rem; box-shadow: var(--shadow-heavy); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: var(--transition); } .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; } .cta-nav { margin-top: 1rem; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } `; document.head.appendChild(style); // Counter animation for stats function animateCounter(element, target) { let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } element.textContent = Math.floor(current) + '+'; }, 20); } // Trigger counter animation when stats come into view const statsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const statNumbers = entry.target.querySelectorAll('.stat-number'); statNumbers.forEach(stat => { const target = parseInt(stat.textContent.replace('+', '')); animateCounter(stat, target); }); statsObserver.unobserve(entry.target); } }); }); const heroStats = document.querySelector('.hero-stats'); if (heroStats) { statsObserver.observe(heroStats); }
Output Preview
Desktop
Mobile
Fullscreen