Premium 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>DanceFlow Studio - Premium Dance Classes</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Header --> <header> <nav> <a href="#" class="logo">DanceFlow</a> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#classes">Classes</a></li> <li><a href="#schedule">Schedule</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="mobile-menu"> <span></span> <span></span> <span></span> </div> </nav> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="hero-content"> <h1>Dance Your Dreams</h1> <p>Discover the joy of movement with our professional dance classes</p> <a href="#classes" class="cta-button">Start Dancing Today</a> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <h2 class="section-title animate-on-scroll">About DanceFlow Studio</h2> <div class="about-content"> <div class="about-text animate-on-scroll"> <h3 style="color: #e91e63; font-size: 1.5rem; margin-bottom: 1rem;">Your Journey to Dance Excellence</h3> <p>At DanceFlow Studio, we believe that dance is more than just movement – it's a form of expression, a way to connect with others, and a path to personal growth. Our state-of-the-art facility and world-class instructors provide the perfect environment for dancers of all levels.</p> <p>Whether you're a complete beginner or an experienced dancer looking to refine your skills, we offer a welcoming community where you can explore various dance styles, build confidence, and make lifelong friendships.</p> <p>Join us and discover the transformative power of dance!</p> </div> <div class="about-image animate-on-scroll"> <img src="https://images.unsplash.com/photo-1649591833478-15cd1060e137?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dance Studio"> </div> </div> </div> </section> <!-- Classes Section --> <section id="classes" class="classes"> <div class="container"> <h2 class="section-title animate-on-scroll">Our Dance Classes</h2> <div class="classes-grid"> <div class="class-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Ballet Class"> <div class="class-card-content"> <h3>Classical Ballet</h3> <p>Master the fundamentals of ballet with our structured classes focusing on technique, grace, and artistry.</p> <div class="class-price">$80/month</div> </div> </div> <div class="class-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1524594152303-9fd13543fe6e?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Hip Hop Class"> <div class="class-card-content"> <h3>Hip Hop</h3> <p>Express yourself through urban dance styles with high-energy choreography and street dance techniques.</p> <div class="class-price">$75/month</div> </div> </div> <div class="class-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1537365587684-f490102e1225?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Contemporary Dance"> <div class="class-card-content"> <h3>Contemporary</h3> <p>Explore fluid movements and emotional expression through contemporary dance techniques and improvisation.</p> <div class="class-price">$85/month</div> </div> </div> <div class="class-card animate-on-scroll"> <img src="https://plus.unsplash.com/premium_photo-1694558053087-61c4ead81c99?q=80&w=864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Latin Dance"> <div class="class-card-content"> <h3>Latin Dance</h3> <p>Feel the rhythm with passionate Latin dances including Salsa, Bachata, and Merengue.</p> <div class="class-price">$70/month</div> </div> </div> <div class="class-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1545224144-b38cd309ef69?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2026&q=80" alt="Jazz Dance"> <div class="class-card-content"> <h3>Jazz Dance</h3> <p>Learn dynamic jazz techniques with sharp movements, leaps, and theatrical expression.</p> <div class="class-price">$75/month</div> </div> </div> <div class="class-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1550026593-cb89847b168d?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Ballroom Dance"> <div class="class-card-content"> <h3>Ballroom</h3> <p>Master elegant ballroom dances including Waltz, Tango, and Foxtrot with a partner.</p> <div class="class-price">$90/month</div> </div> </div> </div> </div> </section> <!-- Instructors Section --> <section id="instructors" class="instructors"> <div class="container"> <h2 class="section-title animate-on-scroll">Meet Our Instructors</h2> <div class="instructors-grid"> <div class="instructor-card animate-on-scroll"> <div class="instructor-image"> <img src="https://images.unsplash.com/photo-1664575602554-2087b04935a5?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Sarah Johnson"> </div> <h3>Sarah Johnson</h3> <p>Ballet & Contemporary Specialist</p> <p>15+ years of professional experience</p> <div class="social-links"> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Marcus Rodriguez"> </div> <h3>Marcus Rodriguez</h3> <p>Hip Hop & Street Dance Expert</p> <p>Former backup dancer for major artists</p> <div class="social-links"> <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> </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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Elena Martinez"> </div> <h3>Elena Martinez</h3> <p>Latin Dance Instructor</p> <p>World Championship competitor</p> <div class="social-links"> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-linkedin"></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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="David Chen"> </div> <h3>David Chen</h3> <p>Jazz & Musical Theatre</p> <p>Broadway performer and choreographer</p> <div class="social-links"> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div> </section> <!-- Schedule Section --> <section id="schedule" class="schedule"> <div class="container"> <h2 class="section-title animate-on-scroll">Class Schedule</h2> <div class="schedule-table animate-on-scroll"> <table> <thead> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </tr> </thead> <tbody> <tr> <td><strong>9:00 AM</strong></td> <td>Ballet Basics</td> <td>Contemporary</td> <td>Ballet Basics</td> <td>Jazz Dance</td> <td>Hip Hop</td> <td>Open Practice</td> </tr> <tr> <td><strong>11:00 AM</strong></td> <td>Hip Hop</td> <td>Latin Dance</td> <td>Contemporary</td> <td>Ballroom</td> <td>Ballet Advanced</td> <td>Kids Dance</td> </tr> <tr> <td><strong>2:00 PM</strong></td> <td>Jazz Dance</td> <td>Hip Hop</td> <td>Latin Dance</td> <td>Contemporary</td> <td>Jazz Dance</td> <td>Teen Classes</td> </tr> <tr> <td><strong>4:00 PM</strong></td> <td>Kids Ballet</td> <td>Teen Hip Hop</td> <td>Kids Jazz</td> <td>Teen Ballet</td> <td>Kids Hip Hop</td> <td>Family Dance</td> </tr> <tr> <td><strong>6:00 PM</strong></td> <td>Ballroom</td> <td>Ballet Advanced</td> <td>Hip Hop Advanced</td> <td>Latin Dance</td> <td>Contemporary</td> <td>Social Dance</td> </tr> <tr> <td><strong>8:00 PM</strong></td> <td>Adult Beginner</td> <td>Salsa Night</td> <td>Adult Beginner</td> <td>Bachata Class</td> <td>Open Floor</td> <td>Dance Party</td> </tr> </tbody> </table> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing"> <div class="container"> <h2 class="section-title animate-on-scroll">Membership Plans</h2> <div class="pricing-grid"> <div class="pricing-card animate-on-scroll"> <h3>Basic</h3> <div class="price">$59<span>/month</span></div> <ul class="features"> <li><i class="fas fa-check"></i> 4 classes per month</li> <li><i class="fas fa-check"></i> Access to beginner classes</li> <li><i class="fas fa-check"></i> Locker room access</li> <li><i class="fas fa-check"></i> Online booking</li> </ul> <a href="#contact" class="cta-button">Choose Plan</a> </div> <div class="pricing-card featured animate-on-scroll"> <h3>Premium</h3> <div class="price">$99<span>/month</span></div> <ul class="features"> <li><i class="fas fa-check"></i> Unlimited classes</li> <li><i class="fas fa-check"></i> All skill levels</li> <li><i class="fas fa-check"></i> Private lesson discount</li> <li><i class="fas fa-check"></i> Guest passes (2/month)</li> <li><i class="fas fa-check"></i> Priority booking</li> </ul> <a href="#contact" class="cta-button">Most Popular</a> </div> <div class="pricing-card animate-on-scroll"> <h3>VIP</h3> <div class="price">$149<span>/month</span></div> <ul class="features"> <li><i class="fas fa-check"></i> Everything in Premium</li> <li><i class="fas fa-check"></i> 2 private lessons/month</li> <li><i class="fas fa-check"></i> Unlimited guest passes</li> <li><i class="fas fa-check"></i> Competition team access</li> <li><i class="fas fa-check"></i> Exclusive workshops</li> </ul> <a href="#contact" class="cta-button">Go VIP</a> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <h2 class="section-title animate-on-scroll">Studio Gallery</h2> <div class="gallery-grid"> <div class="gallery-item animate-on-scroll"> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Dance Studio"> </div> <div class="gallery-item animate-on-scroll"> <img src="https://images.unsplash.com/photo-1524594152303-9fd13543fe6e?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dance Performance"> </div> <div class="gallery-item animate-on-scroll"> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Ballet Class"> </div> <div class="gallery-item animate-on-scroll"> <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hip Hop Dance"> </div> <div class="gallery-item animate-on-scroll"> <img src="https://images.unsplash.com/photo-1504609813442-a8924e83f76e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Contemporary Dance"> </div> <div class="gallery-item animate-on-scroll"> <img src="https://plus.unsplash.com/premium_photo-1694558053087-61c4ead81c99?q=80&w=864&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Latin Dance"> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2 class="section-title animate-on-scroll">What Our Students Say</h2> <div class="testimonials-grid"> <div class="testimonial-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Student"> <div class="stars">★★★★★</div> <p class="testimonial-text">"DanceFlow Studio has transformed my life! The instructors are amazing and the community is so welcoming. I've gained confidence and made great friends."</p> <p class="testimonial-author">- Emma Thompson</p> </div> <div class="testimonial-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Student"> <div class="stars">★★★★★</div> <p class="testimonial-text">"As a complete beginner, I was nervous to start. But the supportive environment and patient instructors made me feel comfortable from day one."</p> <p class="testimonial-author">- Michael Chen</p> </div> <div class="testimonial-card animate-on-scroll"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Student"> <div class="stars">★★★★★</div> <p class="testimonial-text">"The variety of classes is incredible! I can explore different dance styles and the quality of instruction is top-notch. Highly recommend!"</p> <p class="testimonial-author">- Sofia Rodriguez</p> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2 class="section-title animate-on-scroll">Get In Touch</h2> <div class="contact-content"> <div class="contact-info animate-on-scroll"> <h3>Visit Our Studio</h3> <div class="contact-item"> <i class="fas fa-map-marker-alt"></i> <div> <p>123 Dance Street</p> <p>New York, NY 10001</p> </div> </div> <div class="contact-item"> <i class="fas fa-phone"></i> <p>(555) 123-DANCE</p> </div> <div class="contact-item"> <i class="fas fa-envelope"></i> <p>info@danceflowstudio.com</p> </div> <div class="contact-item"> <i class="fas fa-clock"></i> <div> <p>Mon-Fri: 8:00 AM - 10:00 PM</p> <p>Sat-Sun: 9:00 AM - 8:00 PM</p> </div> </div> </div> <div class="contact-form animate-on-scroll"> <h3 style="color: #e91e63; margin-bottom: 2rem;">Send us a Message</h3> <form> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required> </div> <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 class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" placeholder="Tell us about your dance goals or ask any questions..." required></textarea> </div> <button type="submit" class="submit-btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>DanceFlow Studio</h3> <p>Your premier destination for dance education and artistic expression. Join our community and discover the joy of movement.</p> </div> <div class="footer-section"> <h3>Quick Links</h3> <a href="#about">About Us</a> <a href="#classes">Classes</a> <a href="#instructors">Instructors</a> <a href="#pricing">Pricing</a> </div> <div class="footer-section"> <h3>Contact Info</h3> <p>123 Dance Street, NY 10001</p> <p>(555) 123-DANCE</p> <p>info@danceflowstudio.com</p> </div> <div class="footer-section"> <h3>Follow Us</h3> <div style="display: flex; gap: 1rem; justify-content: center;"> <a href="#" style="color: white; font-size: 1.5rem;"><i class="fab fa-facebook"></i></a> <a href="#" style="color: white; font-size: 1.5rem;"><i class="fab fa-instagram"></i></a> <a href="#" style="color: white; font-size: 1.5rem;"><i class="fab fa-youtube"></i></a> <a href="#" style="color: white; font-size: 1.5rem;"><i class="fab fa-tiktok"></i></a> </div> </div> </div> <div class="footer-bottom"> <p>© 2024 DanceFlow Studio. All rights reserved. | Designed with ❤️ for dancers</p> </div> </div> </footer> <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:'96a9ac20d0223acb',t:'MTc1NDQzMjMyOC4wMDAwMDA='};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
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; line-height: 1.6; color: #333; overflow-x: hidden; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } /* Header */ header { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 1rem 0; transition: all 0.3s ease; } nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .logo { font-size: 2rem; font-weight: 800; color: #e91e63; text-decoration: none; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: #e91e63; } .mobile-menu { display: none; flex-direction: column; cursor: pointer; } .mobile-menu span { width: 25px; height: 3px; background: #e91e63; margin: 3px 0; transition: 0.3s; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(135deg, #e91e6250, #f0629169, #f8bbda76); display: flex; align-items: center; justify-content: center; text-align: center; color: white; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://images.unsplash.com/photo-1537365587684-f490102e1225?q=80&w=871&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover; opacity: 0.8; z-index: -1; } .hero-content { max-width: 800px; padding: 0 2rem; animation: fadeInUp 1s ease; } .hero h1 { font-size: 4rem; font-weight: 800; margin-bottom: 1rem; animation: fadeInUp 1s ease 0.2s both; } .hero p { font-size: 1.5rem; margin-bottom: 2rem; animation: fadeInUp 1s ease 0.4s both; } .cta-button { display: inline-block; background: white; color: #e91e63; padding: 1rem 2rem; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; animation: fadeInUp 1s ease 0.6s both; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } /* About Section */ .about { padding: 5rem 0; background: #fce4ec; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .section-title { text-align: center; font-size: 3rem; font-weight: 700; color: #e91e63; margin-bottom: 3rem; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-text { font-size: 1.1rem; line-height: 1.8; } .about-image { border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(233, 30, 99, 0.2); } .about-image img { width: 100%; height: 400px; object-fit: cover; transition: transform 0.3s ease; } .about-image:hover img { transform: scale(1.05); } /* Classes Section */ .classes { padding: 5rem 0; background: white; } .classes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .class-card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; } .class-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(233, 30, 99, 0.2); } .class-card img { width: 100%; height: 250px; object-fit: cover; } .class-card-content { padding: 2rem; } .class-card h3 { font-size: 1.5rem; font-weight: 600; color: #e91e63; margin-bottom: 1rem; } .class-card p { color: #666; margin-bottom: 1.5rem; } .class-price { font-size: 1.2rem; font-weight: 700; color: #e91e63; } /* Instructors Section */ .instructors { padding: 5rem 0; background: #fce4ec; } .instructors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .instructor-card { text-align: center; background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; } .instructor-card:hover { transform: translateY(-5px); } .instructor-image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; border: 5px solid #e91e63; } .instructor-image img { width: 100%; height: 100%; object-fit: cover; } .instructor-card h3 { font-size: 1.3rem; font-weight: 600; color: #e91e63; margin-bottom: 0.5rem; } .instructor-card p { color: #666; margin-bottom: 1rem; } .social-links { display: flex; justify-content: center; gap: 1rem; } .social-links a { color: #e91e63; font-size: 1.2rem; transition: color 0.3s ease; } .social-links a:hover { color: #ad1457; } /* Schedule Section */ .schedule { padding: 5rem 0; background: white; } .schedule-table { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-top: 3rem; } .schedule-table table { width: 100%; border-collapse: collapse; } .schedule-table th { background: #e91e63; color: white; padding: 1rem; font-weight: 600; } .schedule-table td { padding: 1rem; border-bottom: 1px solid #f0f0f0; text-align: center; } .schedule-table tr:hover { background: #fce4ec; } /* Pricing Section */ .pricing { padding: 5rem 0; background: #fce4ec; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .pricing-card { background: white; padding: 3rem 2rem; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; position: relative; } .pricing-card:hover { transform: translateY(-10px); } .pricing-card.featured { border: 3px solid #e91e63; transform: scale(1.05); } .pricing-card h3 { font-size: 1.5rem; font-weight: 600; color: #e91e63; margin-bottom: 1rem; } .price { font-size: 3rem; font-weight: 800; color: #e91e63; margin-bottom: 2rem; } .price span { font-size: 1rem; color: #666; } .features { list-style: none; margin-bottom: 2rem; } .features li { padding: 0.5rem 0; color: #666; } .features li i { color: #e91e63; margin-right: 0.5rem; } /* Gallery Section */ .gallery { padding: 5rem 0; background: white; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 3rem; } .gallery-item { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s ease; } .gallery-item:hover { transform: scale(1.05); } .gallery-item img { width: 100%; height: 250px; object-fit: cover; } /* Testimonials Section */ .testimonials { padding: 5rem 0; background: #fce4ec; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .testimonial-card { background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; } .testimonial-card img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 1rem; object-fit: cover; } .stars { color: #ffc107; font-size: 1.2rem; margin-bottom: 1rem; } .testimonial-text { font-style: italic; color: #666; margin-bottom: 1rem; } .testimonial-author { font-weight: 600; color: #e91e63; } /* Contact Section */ .contact { padding: 5rem 0; background: white; } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; } .contact-info { background: #fce4ec; padding: 3rem; border-radius: 20px; } .contact-info h3 { font-size: 1.5rem; font-weight: 600; color: #e91e63; margin-bottom: 2rem; } .contact-item { display: flex; align-items: center; margin-bottom: 1.5rem; } .contact-item i { color: #e91e63; font-size: 1.2rem; margin-right: 1rem; width: 20px; } .contact-form { background: #fce4ec; padding: 3rem; border-radius: 20px; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #e91e63; } .form-group input, .form-group textarea { width: 100%; padding: 1rem; border: none; border-radius: 10px; font-family: 'Poppins', sans-serif; background: white; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .form-group textarea { height: 120px; resize: vertical; } .submit-btn { background: #e91e63; color: white; padding: 1rem 2rem; border: none; border-radius: 50px; font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .submit-btn:hover { background: #ad1457; transform: translateY(-2px); } /* Footer */ footer { background: #e91e63; color: white; padding: 3rem 0 1rem; text-align: center; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; } .footer-section p, .footer-section a { color: rgba(255,255,255,0.8); text-decoration: none; margin-bottom: 0.5rem; display: block; } .footer-section a:hover { color: white; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; color: rgba(255,255,255,0.6); } /* Responsive Design */ @media (max-width: 768px) { .nav-links { display: none; } .mobile-menu { display: flex; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.2rem; } .section-title { font-size: 2rem; } .about-content, .contact-content { grid-template-columns: 1fr; gap: 2rem; } .schedule-table { overflow-x: auto; } .pricing-card.featured { transform: none; } nav { padding: 0 1rem; } .container { padding: 0 1rem; } } @media (max-width: 480px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-title { font-size: 1.8rem; } .classes-grid, .instructors-grid, .pricing-grid, .testimonials-grid { grid-template-columns: 1fr; } }
JavaScript
// Smooth scrolling for navigation links 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' }); } }); }); // Animate elements 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); }); // Header background change on scroll window.addEventListener('scroll', () => { const header = document.querySelector('header'); if (window.scrollY > 100) { header.style.background = 'rgba(255, 255, 255, 0.98)'; header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)'; } else { header.style.background = 'rgba(255, 255, 255, 0.95)'; header.style.boxShadow = 'none'; } }); // Mobile menu toggle const mobileMenu = document.querySelector('.mobile-menu'); const navLinks = document.querySelector('.nav-links'); mobileMenu.addEventListener('click', () => { navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; navLinks.style.position = 'absolute'; navLinks.style.top = '100%'; navLinks.style.left = '0'; navLinks.style.right = '0'; navLinks.style.background = 'white'; navLinks.style.flexDirection = 'column'; navLinks.style.padding = '2rem'; navLinks.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)'; }); // Form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const name = formData.get('name'); const email = formData.get('email'); const phone = formData.get('phone'); const message = formData.get('message'); // Simple validation if (!name || !email || !message) { alert('Please fill in all required fields.'); return; } // Simulate form submission const submitBtn = this.querySelector('.submit-btn'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Sending...'; submitBtn.disabled = true; setTimeout(() => { alert(`Thank you, ${name}! Your message has been sent. We'll get back to you soon at ${email}.`); this.reset(); submitBtn.textContent = originalText; submitBtn.disabled = false; }, 2000); }); // Add hover effects to cards document.querySelectorAll('.class-card, .instructor-card, .pricing-card, .testimonial-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-10px) scale(1.02)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); // Add floating animation to hero CTA button const ctaButton = document.querySelector('.cta-button'); setInterval(() => { ctaButton.style.animation = 'bounce 2s ease-in-out'; setTimeout(() => { ctaButton.style.animation = ''; }, 2000); }, 5000); // Gallery image hover effects document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('mouseenter', function() { this.style.transform = 'scale(1.05) rotate(2deg)'; this.style.zIndex = '10'; }); item.addEventListener('mouseleave', function() { this.style.transform = 'scale(1) rotate(0deg)'; this.style.zIndex = '1'; }); }); // Add pulse animation to pricing featured card const featuredCard = document.querySelector('.pricing-card.featured'); setInterval(() => { featuredCard.style.animation = 'pulse 1.5s ease-in-out'; setTimeout(() => { featuredCard.style.animation = ''; }, 1500); }, 4000); // Parallax effect for hero section window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const hero = document.querySelector('.hero'); const heroContent = document.querySelector('.hero-content'); if (hero && heroContent) { heroContent.style.transform = `translateY(${scrolled * 0.5}px)`; } }); // Add stagger animation to elements document.querySelectorAll('.classes-grid .class-card').forEach((card, index) => { card.style.animationDelay = `${index * 0.1}s`; }); document.querySelectorAll('.instructors-grid .instructor-card').forEach((card, index) => { card.style.animationDelay = `${index * 0.1}s`; }); // Loading animation window.addEventListener('load', () => { document.body.style.opacity = '0'; document.body.style.transition = 'opacity 0.5s ease'; setTimeout(() => { document.body.style.opacity = '1'; }, 100); });
Output Preview
Desktop
Mobile
Fullscreen