Serenity Yoga Studio Hero Section
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>Serenity Yoga Studio - Find Your Inner Peace</title> </head> <body class="bg-gray-50"> <!-- Peaceful Navigation --> <nav class="fixed top-0 left-0 right-0 z-50 backdrop-blur-20 bg-white/20 border-b border-white/30"> <div class="container mx-auto px-6 py-4"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-3"> <div class="w-12 h-12 bg-gradient-to-br from-teal-300 to-pink-300 rounded-full flex items-center justify-center lotus-pose"> <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20"> <path d="M10 2C5.58 2 2 5.58 2 10s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/> <circle cx="10" cy="10" r="3"/> </svg> </div> <span class="text-2xl font-bold text-gray-700" style="font-family: 'Playfair Display', serif;">Serenity Yoga</span> </div> <div class="hidden md:flex items-center space-x-8"> <a href="#" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">Classes</a> <a href="#" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">Teachers</a> <a href="#" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">Retreats</a> <a href="#" class="text-gray-700 hover:text-teal-600 font-medium transition-colors">About</a> <button class="bg-gradient-to-r from-teal-300 to-pink-300 text-white px-6 py-2 rounded-full font-semibold hover:shadow-lg transition-all"> Join Us </button> </div> </div> </div> </nav> <!-- Hero Section --> <section class="yoga-hero min-h-screen flex items-center pt-20 relative"> <!-- Breathing Circle Animation --> <div class="breathing-animation absolute top-32 right-20 w-32 h-32 rounded-full bg-gradient-to-br from-teal-200/30 to-pink-200/30 hidden lg:block"></div> <div class="container mx-auto px-6 relative z-10"> <div class="grid lg:grid-cols-2 gap-16 items-center"> <!-- Left Content --> <div class="text-gray-700"> <div class="mindful-slide-left delay-150 mb-6"> <div class="inline-flex items-center px-5 py-3 rounded-full bg-gradient-to-r from-teal-200/40 to-pink-200/40 border border-teal-300/40 mb-6"> <span class="w-2 h-2 bg-teal-400 rounded-full mr-3 animate-pulse"></span> <span class="text-teal-700 font-semibold text-sm">Breathe • Balance • Believe</span> </div> </div> <h1 class="mindful-slide-left delay-300 yoga-title text-5xl md:text-7xl font-bold leading-tight mb-8"> Find Your <span class="namaste-script block text-6xl md:text-8xl mb-2">Inner Peace</span> <span class="block text-4xl md:text-5xl">Through Yoga</span> </h1> <p class="mindful-slide-left delay-450 text-xl text-gray-600 mb-10 leading-relaxed max-w-2xl"> Discover the transformative power of yoga in our serene studio. Whether you're a beginner or advanced practitioner, join our mindful community and embark on a journey of wellness, strength, and inner harmony. </p> <div class="mindful-slide-left delay-600 flex flex-col sm:flex-row gap-6 mb-16"> <button class="zen-button text-gray-700 px-10 py-5 rounded-full font-bold text-lg"> Start Your Journey </button> <button class="backdrop-blur-sm bg-white/30 border-2 border-white/40 text-gray-700 hover:bg-white/40 px-10 py-5 rounded-full font-bold text-lg transition-all"> View Schedule </button> </div> <!-- Wellness Stats --> <div class="mindful-slide-left delay-750 grid grid-cols-3 gap-8"> <div class="text-center"> <div class="wellness-stats text-4xl md:text-5xl font-bold mb-3">500+</div> <div class="text-gray-500 font-medium">Happy Students</div> </div> <div class="text-center"> <div class="wellness-stats text-4xl md:text-5xl font-bold mb-3">15+</div> <div class="text-gray-500 font-medium">Class Types</div> </div> <div class="text-center"> <div class="wellness-stats text-4xl md:text-5xl font-bold mb-3">8+</div> <div class="text-gray-500 font-medium">Expert Teachers</div> </div> </div> </div> <!-- Right Content - Class Booking --> <div class="mindful-slide-right delay-450"> <div class="serenity-card rounded-3xl p-8 sm:p-10"> <div class="text-center mb-8"> <div class="w-16 h-16 bg-gradient-to-br from-teal-300 to-pink-300 rounded-full flex items-center justify-center mx-auto mb-4 lotus-pose"> <span class="text-3xl">?</span> </div> <h3 class="text-3xl font-bold text-gray-800 mb-3" style="font-family: 'Playfair Display', serif;">Book Your Class</h3> <p class="text-gray-600">Begin your wellness journey today</p> </div> <form class="space-y-6"> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Class Type</label> <select class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> <option>Choose your practice</option> <option> Hatha Yoga</option> <option> Vinyasa Flow</option> <option> Yin Yoga</option> <option> Power Yoga</option> <option> Meditation</option> <option> Prenatal Yoga</option> </select> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Experience Level</label> <select class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> <option>Beginner</option> <option>Intermediate</option> <option>Advanced</option> <option>All Levels</option> </select> </div> </div> <div class="grid sm:grid-cols-2 gap-6"> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Preferred Date</label> <input type="date" class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Preferred Time</label> <select class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> <option>Morning (7:00 - 10:00)</option> <option>Midday (10:00 - 14:00)</option> <option>Evening (17:00 - 20:00)</option> <option>Night (20:00 - 22:00)</option> </select> </div> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Full Name</label> <input type="text" placeholder="Enter your name" class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> </div> <div> <label class="block text-sm font-bold text-gray-700 mb-3">Email Address</label> <input type="email" placeholder="your@email.com" class="mindful-input w-full px-5 py-4 rounded-xl outline-none"> </div> <button type="submit" class="w-full bg-gradient-to-r from-teal-400 to-pink-400 text-white py-5 rounded-xl font-bold text-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105"> Reserve My Spot </button> </form> <!-- Studio Features --> <div class="mt-10 pt-8 border-t border-gray-200"> <div class="grid grid-cols-3 gap-6 text-center"> <div> <div class="text-3xl font-bold text-teal-500 mb-2">FREE</div> <div class="text-xs text-gray-600 font-medium">First Class</div> </div> <div> <div class="text-3xl font-bold text-pink-500 mb-2">24/7</div> <div class="text-xs text-gray-600 font-medium">Online Access</div> </div> <div> <div class="text-3xl font-bold text-purple-500 mb-2">∞</div> <div class="text-xs text-gray-600 font-medium">Flexibility</div> </div> </div> </div> </div> </div> </div> </div> </section> <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:'97717dbba7477a12',t:'MTc1NjUyNzU3OS4wMDAwMDA='};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
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', sans-serif; } .yoga-hero { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 25%, #d299c2 50%, #fef9d7 75%, #89f7fe 100%); background-size: 400% 400%; animation: gentleFlow 25s ease infinite; position: relative; overflow: hidden; } @keyframes gentleFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .yoga-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 80%, rgba(168, 237, 234, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(254, 214, 227, 0.2) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(210, 153, 194, 0.15) 0%, transparent 50%); } .yoga-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="lotus" width="150" height="150" patternUnits="userSpaceOnUse"><circle cx="75" cy="75" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="25" cy="125" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="125" cy="25" r="1" fill="rgba(255,255,255,0.06)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23lotus)"/></svg>'); opacity: 0.4; } .floating-yoga { animation: gentleFloat 10s ease-in-out infinite; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .floating-yoga:nth-child(2) { animation-delay: -3s; } .floating-yoga:nth-child(3) { animation-delay: -6s; } .floating-yoga:nth-child(4) { animation-delay: -9s; } @keyframes gentleFloat { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-12px) rotate(1deg); } 50% { transform: translateY(-20px) rotate(0deg); } 75% { transform: translateY(-8px) rotate(-1deg); } } .floating-yoga:hover { transform: translateY(-15px) scale(1.05); box-shadow: 0 20px 40px rgba(168, 237, 234, 0.3); } .peaceful-animation { animation: peacefulRise 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateY(40px); } .mindful-slide-left { animation: mindfulSlideLeft 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(-40px); } .mindful-slide-right { animation: mindfulSlideRight 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 0; transform: translateX(40px); } .delay-150 { animation-delay: 0.15s; } .delay-300 { animation-delay: 0.3s; } .delay-450 { animation-delay: 0.45s; } .delay-600 { animation-delay: 0.6s; } .delay-750 { animation-delay: 0.75s; } .delay-900 { animation-delay: 0.9s; } @keyframes peacefulRise { to { opacity: 1; transform: translateY(0); } } @keyframes mindfulSlideLeft { to { opacity: 1; transform: translateX(0); } } @keyframes mindfulSlideRight { to { opacity: 1; transform: translateX(0); } } .zen-button { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); box-shadow: 0 8px 25px rgba(168, 237, 234, 0.4); transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .zen-button:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(168, 237, 234, 0.5); } .serenity-card { backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 20px 40px rgba(168, 237, 234, 0.15); } .mindful-input { background: rgba(255, 255, 255, 0.8); border: 2px solid rgba(168, 237, 234, 0.3); transition: all 0.3s ease; } .mindful-input:focus { border-color: #a8edea; box-shadow: 0 0 0 4px rgba(168, 237, 234, 0.1); background: rgba(255, 255, 255, 0.95); } .wellness-stats { animation: gentleGlow 2s ease-out forwards; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes gentleGlow { 0% { opacity: 0; transform: scale(0.8); } 50% { opacity: 0.8; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .yoga-title { font-family: 'Playfair Display', serif; background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .namaste-script { font-family: 'Dancing Script', cursive; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .chakra-badge { background: linear-gradient(135deg, rgba(168, 237, 234, 0.3) 0%, rgba(254, 214, 227, 0.3) 100%); border: 1px solid rgba(168, 237, 234, 0.4); backdrop-filter: blur(15px); } .breathing-animation { animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } } .lotus-pose { animation: lotusGlow 6s ease-in-out infinite; } @keyframes lotusGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(168, 237, 234, 0.3)); } 50% { filter: drop-shadow(0 0 20px rgba(254, 214, 227, 0.5)); } } .meditation-ripple { animation: ripple 3s ease-out infinite; } @keyframes ripple { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mindful animation observer 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.animationPlayState = 'running'; } }); }, observerOptions); // Observe animated elements document.querySelectorAll('[class*="animation"], .wellness-stats').forEach(el => { observer.observe(el); }); // Peaceful form submission document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const button = this.querySelector('button[type="submit"]'); const originalText = button.textContent; button.innerHTML = ` <div class="flex items-center justify-center"> <span class="animate-spin text-2xl mr-3">?</span> Finding your perfect class... </div> `; button.disabled = true; setTimeout(() => { button.innerHTML = ` <div class="flex items-center justify-center"> <span class="text-2xl mr-2">?</span> Namaste! Your spot is reserved </div> `; setTimeout(() => { button.textContent = originalText; button.disabled = false; }, 3500); }, 2000); }); // Gentle yoga card interactions document.querySelectorAll('.floating-yoga').forEach(card => { card.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-20px) scale(1.08)'; this.style.boxShadow = '0 25px 50px rgba(168, 237, 234, 0.4)'; }); card.addEventListener('mouseleave', function() { this.style.transform = ''; this.style.boxShadow = ''; }); }); // Peaceful parallax effect window.addEventListener('scroll', function() { const scrolled = window.pageYOffset; const parallax = scrolled * 0.2; document.querySelectorAll('.floating-yoga').forEach((card, index) => { const speed = 0.1 + (index * 0.03); card.style.transform = `translateY(${parallax * speed}px)`; }); }); // Meditation ripple effect setInterval(() => { const ripples = document.querySelectorAll('.breathing-animation'); ripples.forEach(ripple => { ripple.style.transform = 'scale(1.1)'; setTimeout(() => { ripple.style.transform = 'scale(1)'; }, 300); }); }, 4000); // Add mindful interactions document.querySelectorAll('nav a').forEach(link => { link.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; this.style.textShadow = '0 2px 10px rgba(168, 237, 234, 0.3)'; }); link.addEventListener('mouseleave', function() { this.style.transform = ''; this.style.textShadow = ''; }); }); });
Output Preview
Desktop
Mobile
Fullscreen
