About Us Dance Academy 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>About Us - Rhythm Dance Academy</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> </head> <body class="bg-pink-50"> <!-- Navigation --> <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md shadow-lg transition-all duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex-shrink-0 flex items-center"> <div class="dance-move text-2xl mr-2">?</div> <h1 class="text-2xl font-bold gradient-text">Rhythm Dance Academy</h1> </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-8"> <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 text-sm font-medium transition-colors">Home</a> <a href="#" class="text-pink-600 px-3 py-2 text-sm font-medium">About</a> <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 text-sm font-medium transition-colors">Classes</a> <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 text-sm font-medium transition-colors">Instructors</a> <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 text-sm font-medium transition-colors">Events</a> <a href="#" class="text-gray-700 hover:text-pink-600 px-3 py-2 text-sm font-medium transition-colors">Contact</a> </div> </div> <button class="md:hidden"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> </div> </div> </nav> <!-- Hero Section --> <section class="hero-bg min-h-screen flex items-center justify-center text-white relative overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-r from-pink-900/60 to-purple-900/40"></div> <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> <div class="text-6xl mb-4 floating">?</div> <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">Our Dance Story</h1> <p class="text-xl md:text-2xl mb-8 fade-in" style="animation-delay: 0.3s;">Where passion meets movement, creativity flows, and every step tells a story</p> <button class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700 text-white px-8 py-4 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105 fade-in" style="animation-delay: 0.6s;"> Join Our Dance Family </button> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </section> <!-- Our Story Section --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div class="slide-in-left"> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Our Dance Legacy</h2> <p class="text-lg text-gray-600 mb-6 leading-relaxed"> Founded in 2008 by professional dancer and choreographer Isabella Rodriguez, Rhythm Dance Academy began with a vision to create a space where dancers of all ages and abilities could explore their passion for movement and artistic expression. </p> <p class="text-lg text-gray-600 mb-8 leading-relaxed"> From our humble beginnings in a small studio, we've grown into a premier dance institution offering world-class training in multiple dance styles. Our commitment to excellence, creativity, and individual growth has made us a cornerstone of the local arts community. </p> <div class="flex flex-wrap gap-4"> <div class="bg-pink-50 px-6 py-3 rounded-full"> <span class="text-pink-600 font-semibold">? Est. 2008</span> </div> <div class="bg-purple-50 px-6 py-3 rounded-full"> <span class="text-purple-600 font-semibold">? All Styles</span> </div> <div class="bg-blue-50 px-6 py-3 rounded-full"> <span class="text-blue-600 font-semibold">? Award Winning</span> </div> </div> </div> <div class="slide-in-right"> <img src="https://plus.unsplash.com/premium_photo-1685202712201-03de606a280a?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Dance studio" class="rounded-2xl shadow-2xl w-full h-96 object-cover hover-lift"> </div> </div> </div> </section> <!-- Statistics Section --> <section class="py-20 stage-lights text-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold mb-4">Our Dance Impact</h2> <p class="text-xl opacity-90">Numbers that showcase our passion for dance</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div class="text-center scale-in"> <div class="text-4xl mb-2 dance-bounce">?</div> <div class="counter mb-2" data-target="3000">0</div> <p class="text-lg font-medium">Dancers Trained</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="text-4xl mb-2 dance-bounce" style="animation-delay: 0.3s;">?</div> <div class="counter mb-2" data-target="15">0</div> <p class="text-lg font-medium">Dance Styles</p> </div> <div class="text-center scale-in" style="animation-delay: 0.4s;"> <div class="text-4xl mb-2 dance-bounce" style="animation-delay: 0.6s;">?</div> <div class="counter mb-2" data-target="50">0</div> <p class="text-lg font-medium">Competition Wins</p> </div> <div class="text-center scale-in" style="animation-delay: 0.6s;"> <div class="text-4xl mb-2 dance-bounce" style="animation-delay: 0.9s;">⭐</div> <div class="counter mb-2" data-target="16">0</div> <p class="text-lg font-medium">Years of Excellence</p> </div> </div> </div> </section> <!-- Dance Styles Overview --> <section class="py-20 bg-pink-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Dance Styles We Teach</h2> <p class="text-xl text-gray-600">Explore the diverse world of dance with us</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="dance-card p-6 text-center scale-in"> <div class="w-20 h-20 bg-gradient-to-r from-pink-500 to-rose-500 rounded-full flex items-center justify-center mx-auto mb-6 rhythm-pulse"> <span class="text-3xl">?</span> </div> <h3 class="text-xl font-bold text-gray-900 mb-4">Ballet</h3> <p class="text-gray-600 leading-relaxed mb-4"> Classical ballet technique focusing on grace, precision, and artistic expression through traditional and contemporary styles. </p> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Ballet" class="w-full h-32 object-cover rounded-lg"> </div> <div class="dance-card p-6 text-center scale-in" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6 rhythm-pulse"> <span class="text-3xl">?</span> </div> <h3 class="text-xl font-bold text-gray-900 mb-4">Hip-Hop</h3> <p class="text-gray-600 leading-relaxed mb-4"> Urban dance styles with high energy, creative expression, and contemporary street dance movements and culture. </p> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Hip-hop" class="w-full h-32 object-cover rounded-lg"> </div> <div class="dance-card p-6 text-center scale-in" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-6 rhythm-pulse"> <span class="text-3xl">?</span> </div> <h3 class="text-xl font-bold text-gray-900 mb-4">Contemporary</h3> <p class="text-gray-600 leading-relaxed mb-4"> Expressive modern dance combining elements of ballet, jazz, and lyrical movement for emotional storytelling. </p> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Contemporary" class="w-full h-32 object-cover rounded-lg"> </div> <div class="dance-card p-6 text-center scale-in" style="animation-delay: 0.6s;"> <div class="w-20 h-20 bg-gradient-to-r from-red-500 to-orange-500 rounded-full flex items-center justify-center mx-auto mb-6 rhythm-pulse"> <span class="text-3xl">?</span> </div> <h3 class="text-xl font-bold text-gray-900 mb-4">Latin Dance</h3> <p class="text-gray-600 leading-relaxed mb-4"> Passionate Latin rhythms including salsa, bachata, and merengue with vibrant cultural expression and partner work. </p> <img src="https://images.unsplash.com/photo-1504609813442-a8924e83f76e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Latin dance" class="w-full h-32 object-cover rounded-lg"> </div> </div> </div> </section> <!-- Philosophy Section --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Our Dance Philosophy</h2> <p class="text-xl text-gray-600">The principles that guide our teaching and artistry</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div class="bg-gradient-to-br from-pink-50 to-rose-50 p-8 rounded-2xl shadow-xl hover-lift slide-in-left"> <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-rose-500 rounded-full flex items-center justify-center mb-6 spin-dance"> <span class="text-2xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Creative Expression</h3> <p class="text-gray-600 leading-relaxed"> We believe dance is a powerful form of artistic expression that allows individuals to communicate emotions, tell stories, and connect with others through movement. Every dancer brings their unique voice to our studio. </p> </div> <div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-8 rounded-2xl shadow-xl hover-lift slide-in-right"> <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mb-6 spin-dance"> <span class="text-2xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Individual Growth</h3> <p class="text-gray-600 leading-relaxed"> Our approach focuses on nurturing each dancer's personal journey, building confidence, discipline, and artistic skills while celebrating their individual strengths and encouraging continuous improvement. </p> </div> </div> </div> </section> <!-- Instructors Section --> <section class="py-20 bg-pink-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Meet Our Dance Faculty</h2> <p class="text-xl text-gray-600">Professional dancers and choreographers inspiring the next generation</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="text-center scale-in"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=1471&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Isabella Rodriguez" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-600/20 to-purple-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Isabella Rodriguez</h3> <p class="text-pink-600 font-semibold mb-3">Founder & Artistic Director</p> <p class="text-gray-600 text-sm">Former principal dancer with 20+ years of professional experience in ballet, contemporary, and choreography across international stages.</p> </div> <div class="text-center scale-in" style="animation-delay: 0.2s;"> <div class="relative mb-6"> <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" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-600/20 to-purple-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Marcus Johnson</h3> <p class="text-purple-600 font-semibold mb-3">Hip-Hop & Urban Dance Director</p> <p class="text-gray-600 text-sm">Award-winning choreographer and battle champion specializing in street dance, breaking, and contemporary urban styles.</p> </div> <div class="text-center scale-in" style="animation-delay: 0.4s;"> <div class="relative mb-6"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Sofia Martinez" class="w-48 h-48 rounded-full mx-auto object-cover shadow-xl"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-600/20 to-purple-600/20"></div> </div> <h3 class="text-xl font-bold text-gray-900 mb-2">Sofia Martinez</h3> <p class="text-blue-600 font-semibold mb-3">Latin Dance Specialist</p> <p class="text-gray-600 text-sm">Professional Latin dance competitor and instructor with expertise in salsa, bachata, tango, and traditional folk dances.</p> </div> </div> </div> </section> <!-- Additional Dance Programs --> <section class="py-20 bg-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16 fade-in"> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Special Programs</h2> <p class="text-xl text-gray-600">Unique opportunities for dedicated dancers</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="dance-card p-8 text-center scale-in"> <div class="w-20 h-20 bg-gradient-to-r from-pink-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Competition Team</h3> <p class="text-gray-600 leading-relaxed mb-6"> Elite training program for advanced dancers competing at regional and national levels with intensive coaching and performance opportunities. </p> <img src="https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Competition team" class="w-full h-40 object-cover rounded-lg"> </div> <div class="dance-card p-8 text-center scale-in" style="animation-delay: 0.2s;"> <div class="w-20 h-20 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Pre-Professional</h3> <p class="text-gray-600 leading-relaxed mb-6"> Comprehensive program preparing serious dancers for professional careers with technique classes, audition prep, and industry connections. </p> <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Pre-professional" class="w-full h-40 object-cover rounded-lg"> </div> <div class="dance-card p-8 text-center scale-in" style="animation-delay: 0.4s;"> <div class="w-20 h-20 bg-gradient-to-r from-green-500 to-teal-500 rounded-full flex items-center justify-center mx-auto mb-6"> <span class="text-3xl">?</span> </div> <h3 class="text-2xl font-bold text-gray-900 mb-4">Little Movers</h3> <p class="text-gray-600 leading-relaxed mb-6"> Creative movement classes for toddlers and preschoolers focusing on coordination, rhythm, and imaginative expression through play. </p> <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Little movers" class="w-full h-40 object-cover rounded-lg"> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="fade-in"> <div class="flex items-center mb-4"> <span class="text-2xl mr-2">?</span> <h3 class="text-2xl font-bold gradient-text">Rhythm Dance Academy</h3> </div> <p class="text-gray-400 mb-4">Inspiring dancers of all ages through exceptional training, creative expression, and artistic excellence since 2008.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg> </a> </div> </div> <div class="fade-in" style="animation-delay: 0.2s;"> <h4 class="text-lg font-semibold mb-4">Dance Classes</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Ballet</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Hip-Hop</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contemporary</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Latin Dance</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Jazz</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.4s;"> <h4 class="text-lg font-semibold mb-4">Programs</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Competition Team</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pre-Professional</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Adult Classes</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Summer Intensives</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Private Lessons</a></li> </ul> </div> <div class="fade-in" style="animation-delay: 0.6s;"> <h4 class="text-lg font-semibold mb-4">Visit Our Studio</h4> <div class="space-y-2 text-gray-400"> <p>? 123 Rhythm Street</p> <p>Arts District, NY 10001</p> <p>? Phone: +1 (555) DANCE-NOW</p> <p>✉️ Email: info@rhythmdance.com</p> <p>? Mon-Fri: 3PM-9PM</p> <p>? Sat-Sun: 9AM-6PM</p> </div> </div> </div> <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> <p>© 2024 Rhythm Dance Academy. All rights reserved. | Privacy Policy | Terms of Service | Dance Guidelines</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:'97072a3073af8ef1',t:'MTc1NTQxMjY2Ny4wMDAwMDA='};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
* { font-family: 'Poppins', sans-serif; } .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s ease-out; } .slide-in-right.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 0; transform: scale(0.8); transition: all 0.8s ease-out; } .scale-in.visible { opacity: 1; transform: scale(1); } .hero-bg { background: linear-gradient(135deg, rgba(219, 39, 119, 0.8), rgba(147, 51, 234, 0.6)), url('https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; background-attachment: fixed; } .floating { animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-25px) rotate(10deg); } } .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-15px) rotate(2deg); box-shadow: 0 25px 50px rgba(0,0,0,0.15); } .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .gradient-text { background: linear-gradient(135deg, #db2777 0%, #9333ea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .counter { font-size: 3rem; font-weight: 700; color: #db2777; } .dance-card { background: linear-gradient(145deg, #ffffff, #fdf2f8); border-radius: 20px; box-shadow: 0 10px 30px rgba(219, 39, 119, 0.1); transition: all 0.3s ease; overflow: hidden; } .dance-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px rgba(219, 39, 119, 0.2); } .dance-move { animation: danceMove 3s ease-in-out infinite; } @keyframes danceMove { 0%, 100% { transform: translateX(0px) rotate(0deg); } 25% { transform: translateX(5px) rotate(5deg); } 50% { transform: translateX(-5px) rotate(-5deg); } 75% { transform: translateX(3px) rotate(3deg); } } .spin-dance { animation: spinDance 6s linear infinite; } @keyframes spinDance { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rhythm-pulse { animation: rhythmPulse 2s ease-in-out infinite; } @keyframes rhythmPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(219, 39, 119, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(147, 51, 234, 0.4); } } .dance-bounce { animation: danceBounce 1.5s ease-in-out infinite; } @keyframes danceBounce { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .stage-lights { background: linear-gradient(45deg, #db2777, #9333ea, #ec4899, #a855f7); background-size: 400% 400%; animation: stageLights 4s ease infinite; } @keyframes stageLights { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
JavaScript
// Intersection Observer for animations 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('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right, .scale-in').forEach(el => { observer.observe(el); }); // Counter animation 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) + (target >= 1000 ? 'K+' : '+'); }, 20); } // Start counter animations when visible const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = parseInt(counter.dataset.target); animateCounter(counter, target); counterObserver.unobserve(counter); } }); }, observerOptions); document.querySelectorAll('.counter').forEach(counter => { counterObserver.observe(counter); }); // Smooth scrolling for navigation 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' }); } }); }); // Navbar background change on scroll window.addEventListener('scroll', () => { const navbar = document.querySelector('nav'); if (window.scrollY > 100) { navbar.classList.add('bg-white/95'); navbar.classList.remove('bg-white/90'); } else { navbar.classList.add('bg-white/90'); navbar.classList.remove('bg-white/95'); } }); // Button click animations document.querySelectorAll('button').forEach(button => { button.addEventListener('click', function(e) { // Create ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = size + 'px'; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; ripple.classList.add('ripple'); this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add ripple effect styles const style = document.createElement('style'); style.textContent = ` button { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: scale(0); animation: ripple-animation 0.6s linear; pointer-events: none; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Dance card hover effects document.querySelectorAll('.dance-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-12px) scale(1.03) rotate(1deg)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1) rotate(0deg)'; }); }); // Dance move animation for dance emojis const danceElements = document.querySelectorAll('.dance-move'); danceElements.forEach((dancer, index) => { dancer.style.animationDelay = `${index * 0.3}s`; }); // Rhythm pulse for special elements const rhythmElements = document.querySelectorAll('.rhythm-pulse'); rhythmElements.forEach((element, index) => { element.style.animationDelay = `${index * 0.2}s`; }); // Dance bounce for bouncing elements const bounceElements = document.querySelectorAll('.dance-bounce'); bounceElements.forEach((element, index) => { element.style.animationDelay = `${index * 0.3}s`; }); // Stage lights effect const stageLightElements = document.querySelectorAll('.stage-lights'); stageLightElements.forEach(element => { element.addEventListener('mouseenter', function() { this.style.animationDuration = '2s'; }); element.addEventListener('mouseleave', function() { this.style.animationDuration = '4s'; }); }); // Add dance-themed scroll behavior let ticking = false; function updateScrollEffects() { const scrolled = window.pageYOffset; const parallaxElements = document.querySelectorAll('.parallax'); parallaxElements.forEach(element => { const speed = 0.3; element.style.transform = `translateY(${scrolled * speed}px)`; }); ticking = false; } window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(updateScrollEffects); ticking = true; } }); // Add dance rhythm to page interactions document.addEventListener('click', function(e) { if (e.target.tagName === 'BUTTON' || e.target.closest('button')) { // Add a subtle dance animation to the page document.body.style.animation = 'none'; setTimeout(() => { document.body.style.animation = 'subtle-dance 0.5s ease-out'; }, 10); } }); // Add subtle dance animation const danceStyle = document.createElement('style'); danceStyle.textContent = ` @keyframes subtle-dance { 0%, 100% { transform: translateX(0px); } 25% { transform: translateX(1px); } 75% { transform: translateX(-1px); } } `; document.head.appendChild(danceStyle);
Output Preview
Desktop
Mobile
Fullscreen