Dance Class Modern Footer 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>Dance Classes - Modern Footer</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body class="bg-gray-50"> <!-- Main content spacer --> <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-blue-50"> <div class="text-center"> <h1 class="text-5xl md:text-7xl font-bold text-gradient mb-4"> DANCE STUDIO </h1> <p class="text-xl text-gray-600 font-light">Move. Feel. Express.</p> </div> </div> <!-- Modern Footer --> <footer class="relative bg-white overflow-hidden"> <!-- Decorative background elements --> <div class="absolute inset-0 opacity-5"> <div class="absolute top-20 left-10 w-64 h-64 bg-purple-400 rounded-full floating-animation"></div> <div class="absolute bottom-20 right-10 w-48 h-48 bg-blue-400 rounded-full floating-animation" style="animation-delay: -3s;"></div> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-pink-400 rounded-full floating-animation" style="animation-delay: -1.5s;"></div> </div> <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> <!-- Main Footer Content --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16"> <!-- Brand Section --> <div class="col-span-1 lg:col-span-1 fade-in-up"> <div class="mb-8"> <h3 class="text-3xl md:text-4xl font-bold text-gradient mb-4"> DanceFlow </h3> <div class="w-16 h-1 wave-animation rounded-full mb-6"></div> </div> <p class="text-gray-600 text-lg leading-relaxed mb-8 font-light"> Discover your rhythm and express your soul through the art of dance. Join our community of passionate dancers. </p> <!-- Dance Style Icons --> <div class="grid grid-cols-3 gap-4"> <div class="dance-card rounded-2xl p-4 text-center hover-lift"> <div class="text-3xl mb-2">?</div> <p class="text-sm font-medium text-gray-700">Latin</p> </div> <div class="dance-card rounded-2xl p-4 text-center hover-lift"> <div class="text-3xl mb-2">?</div> <p class="text-sm font-medium text-gray-700">Hip Hop</p> </div> <div class="dance-card rounded-2xl p-4 text-center hover-lift"> <div class="text-3xl mb-2">?</div> <p class="text-sm font-medium text-gray-700">Ballet</p> </div> </div> </div> <!-- Classes Section --> <div class="col-span-1 fade-in-up" style="animation-delay: 0.2s;"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Dance Classes </h4> <ul class="space-y-4"> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-purple-400 rounded-full mr-3 group-hover:bg-purple-600 transition-colors"></span> Contemporary Dance </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-purple-400 rounded-full mr-3 group-hover:bg-purple-600 transition-colors"></span> Hip Hop Fundamentals </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-purple-400 rounded-full mr-3 group-hover:bg-purple-600 transition-colors"></span> Classical Ballet </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-purple-400 rounded-full mr-3 group-hover:bg-purple-600 transition-colors"></span> Latin Rhythms </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-purple-400 rounded-full mr-3 group-hover:bg-purple-600 transition-colors"></span> Jazz & Musical Theatre </a></li> </ul> </div> <!-- Quick Links --> <div class="col-span-1 fade-in-up" style="animation-delay: 0.4s;"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Quick Links </h4> <ul class="space-y-4"> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-blue-400 rounded-full mr-3 group-hover:bg-blue-600 transition-colors"></span> Class Schedule </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-blue-400 rounded-full mr-3 group-hover:bg-blue-600 transition-colors"></span> Our Instructors </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-blue-400 rounded-full mr-3 group-hover:bg-blue-600 transition-colors"></span> Membership Plans </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-blue-400 rounded-full mr-3 group-hover:bg-blue-600 transition-colors"></span> Events & Workshops </a></li> <li><a href="#" class="text-gray-600 hover:text-purple-600 transition-colors duration-300 text-lg font-light flex items-center group"> <span class="w-2 h-2 bg-blue-400 rounded-full mr-3 group-hover:bg-blue-600 transition-colors"></span> Contact Us </a></li> </ul> </div> <!-- Contact & Newsletter --> <div class="col-span-1 fade-in-up" style="animation-delay: 0.6s;"> <h4 class="text-2xl font-semibold text-gray-800 mb-8"> Get In Touch </h4> <!-- Contact Info --> <div class="space-y-6 mb-8"> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-blue-400 rounded-xl flex items-center justify-center text-white text-xl"> ? </div> <div> <p class="font-medium text-gray-800">Studio Location</p> <p class="text-gray-600 font-light">123 Dance Avenue<br>Creative District, NY 10001</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-400 rounded-xl flex items-center justify-center text-white text-xl"> ? </div> <div> <p class="font-medium text-gray-800">Call Us</p> <p class="text-gray-600 font-light">+1 (555) 123-DANCE</p> </div> </div> <div class="flex items-start space-x-4"> <div class="w-12 h-12 bg-gradient-to-br from-pink-400 to-purple-400 rounded-xl flex items-center justify-center text-white text-xl"> ✉️ </div> <div> <p class="font-medium text-gray-800">Email</p> <p class="text-gray-600 font-light">hello@danceflow.com</p> </div> </div> </div> <!-- Newsletter Signup --> <div class="glass-effect rounded-2xl p-6"> <h5 class="text-lg font-semibold text-gray-800 mb-4">Stay Updated</h5> <p class="text-gray-600 text-sm mb-4 font-light">Get the latest news about classes and events</p> <div class="space-y-3"> <input type="email" placeholder="Enter your email address" class="input-modern w-full px-4 py-3 rounded-xl text-gray-700 font-light" > <button class="modern-button w-full px-6 py-3 text-white rounded-xl font-medium"> Subscribe Now </button> </div> </div> </div> </div> <!-- Social Media & CTA Section --> <div class="border-t border-gray-200 pt-12 mb-12"> <div class="flex flex-col lg:flex-row justify-between items-center space-y-8 lg:space-y-0"> <!-- Social Media --> <div class="flex flex-col items-center lg:items-start"> <h5 class="text-lg font-semibold text-gray-800 mb-6">Follow Our Journey</h5> <div class="flex space-x-4"> <a href="#" class="social-modern w-14 h-14 rounded-2xl flex items-center justify-center text-2xl hover-lift"> ? </a> <a href="#" class="social-modern w-14 h-14 rounded-2xl flex items-center justify-center text-2xl hover-lift"> ? </a> <a href="#" class="social-modern w-14 h-14 rounded-2xl flex items-center justify-center text-2xl hover-lift"> ? </a> <a href="#" class="social-modern w-14 h-14 rounded-2xl flex items-center justify-center text-2xl hover-lift"> ? </a> <a href="#" class="social-modern w-14 h-14 rounded-2xl flex items-center justify-center text-2xl hover-lift"> ? </a> </div> </div> <!-- Call to Action Buttons --> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <button class="modern-button px-8 py-4 text-white rounded-xl font-medium text-lg"> Book Free Trial Class </button> <button class="bg-white border-2 border-purple-200 px-8 py-4 text-purple-600 rounded-xl font-medium text-lg hover:bg-purple-50 transition-colors"> View Class Schedule </button> </div> </div> </div> <!-- Bottom Copyright --> <div class="border-t border-gray-200 pt-8"> <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> <p class="text-gray-500 text-center md:text-left font-light"> © 2024 DanceFlow Studio. All rights reserved. Made with ❤️ for dancers. </p> <div class="flex space-x-8 text-sm"> <a href="#" class="text-gray-500 hover:text-purple-600 transition-colors font-light">Privacy Policy</a> <a href="#" class="text-gray-500 hover:text-purple-600 transition-colors font-light">Terms of Service</a> <a href="#" class="text-gray-500 hover:text-purple-600 transition-colors font-light">Cookie Policy</a> </div> </div> </div> </div> <!-- Bottom gradient accent --> <div class="wave-animation h-2"></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:'96ae07b545818996',t:'MTc1NDQ3ODAyMi4wMDAwMDA='};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; } .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } .hover-lift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } .dance-card { background: linear-gradient(145deg, #ffffff, #f0f0f0); box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff; transition: all 0.3s ease; } .dance-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 25px 25px 80px #d0d0d0, -25px -25px 80px #ffffff; } .modern-button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: all 0.3s ease; position: relative; overflow: hidden; } .modern-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .modern-button:hover::before { left: 100%; } .modern-button:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4); } .social-modern { background: linear-gradient(145deg, #ffffff, #f0f0f0); box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff; transition: all 0.3s ease; } .social-modern:hover { box-shadow: 4px 4px 8px #d1d1d1, -4px -4px 8px #ffffff; transform: scale(0.95); } .floating-animation { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .fade-in-up { animation: fadeInUp 0.8s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .text-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .input-modern { background: rgba(255, 255, 255, 0.9); border: 2px solid transparent; transition: all 0.3s ease; } .input-modern:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); outline: none; } .wave-animation { background: linear-gradient(-45deg, #667eea, #764ba2, #667eea, #764ba2); background-size: 400% 400%; animation: wave 8s ease-in-out infinite; } @keyframes wave { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
JavaScript
// Enhanced interactive effects document.addEventListener('DOMContentLoaded', function() { // Newsletter subscription const subscribeBtn = document.querySelector('.modern-button'); const emailInput = document.querySelector('input[type="email"]'); subscribeBtn.addEventListener('click', function() { const email = emailInput.value.trim(); if (email && email.includes('@')) { // Success animation this.innerHTML = '✓ Subscribed!'; this.style.background = 'linear-gradient(135deg, #10b981, #059669)'; emailInput.value = ''; setTimeout(() => { this.innerHTML = 'Subscribe Now'; this.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; }, 3000); } else { // Error animation this.style.animation = 'shake 0.5s'; setTimeout(() => { this.style.animation = ''; }, 500); } }); // Smooth scroll reveal animation const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe all fade-in elements document.querySelectorAll('.fade-in-up').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'all 0.8s ease-out'; observer.observe(el); }); // Enhanced hover effects for dance cards document.querySelectorAll('.dance-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-8px) scale(1.05) rotate(2deg)'; }); card.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1) rotate(0deg)'; }); }); }); // Add shake animation for error states const style = document.createElement('style'); style.textContent = ` @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } `; document.head.appendChild(style);
Output Preview
Desktop
Mobile
Fullscreen