Yoga Hero Slider Template HTML CSS Template Free Download

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yoga Hero Slider</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
  
</head>
<body>

<section class="slider-container">
        
        
        <div class="floating-element w-96 h-96 bg-emerald-400 top-20 -left-20" style="animation-delay: 0s;"></div>
        <div class="floating-element w-64 h-64 bg-teal-300 bottom-20 right-20" style="animation-delay: 4s;"></div>
        
        
        <div class="overlay"></div>
        
        
        <div class="progress-bar" id="progressBar"></div>
        
        
        <div class="slide active" data-index="0">
            <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=2070&auto=format&fit=crop" alt="Yoga Meditation">
            <div class="slide-content">
                <span class="text-emerald-300 text-sm font-semibold tracking-widest uppercase mb-4 block">Find Your Inner Peace</span>
                <h1 class="font-serif text-6xl md:text-7xl font-bold leading-tight mb-6">
                    Breathe.<br>
                    <span class="text-emerald-300 italic">Relax.</span><br>
                    Transform.
                </h1>
                <p class="text-gray-200 text-lg mb-8 max-w-md leading-relaxed">
                    Discover the ancient practice of yoga in a modern sanctuary. Join our community and start your journey to wellness today.
                </p>
                <div class="btn-group flex gap-4">
                    <button class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white rounded-full font-medium transition-all transform hover:scale-105 shadow-lg hover:shadow-emerald-500/30">
                        Start Free Trial
                    </button>
                    <button class="px-8 py-4 border-2 border-white/30 hover:border-white text-white rounded-full font-medium transition-all backdrop-blur-sm hover:bg-white/10">
                        <i class="fa-solid fa-play mr-2"></i> Watch Video
                    </button>
                </div>
            </div>
        </div>
        
        <div class="slide" data-index="1">
            <img src="https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?q=80&w=2069&auto=format&fit=crop" alt="Yoga Pose">
            <div class="slide-content">
                <span class="text-rose-300 text-sm font-semibold tracking-widest uppercase mb-4 block">Strength & Flexibility</span>
                <h1 class="font-serif text-6xl md:text-7xl font-bold leading-tight mb-6">
                    Power.<br>
                    <span class="text-rose-300 italic">Balance.</span><br>
                    Harmony.
                </h1>
                <p class="text-gray-200 text-lg mb-8 max-w-md leading-relaxed">
                    From Vinyasa to Hatha, find the perfect class for your level. Expert instructors guiding you every step of the way.
                </p>
                <div class="btn-group flex gap-4">
                    <button class="px-8 py-4 bg-rose-500 hover:bg-rose-400 text-white rounded-full font-medium transition-all transform hover:scale-105 shadow-lg hover:shadow-rose-500/30">
                        View Classes
                    </button>
                    <button class="px-8 py-4 border-2 border-white/30 hover:border-white text-white rounded-full font-medium transition-all backdrop-blur-sm hover:bg-white/10">
                        Meet Instructors
                    </button>
                </div>
            </div>
        </div>
        
        <div class="slide" data-index="2">
            <img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=1999&auto=format&fit=crop" alt="Meditation">
            <div class="slide-content">
                <span class="text-amber-300 text-sm font-semibold tracking-widest uppercase mb-4 block">Mindfulness & Meditation</span>
                <h1 class="font-serif text-6xl md:text-7xl font-bold leading-tight mb-6">
                    Stillness.<br>
                    <span class="text-amber-300 italic">Clarity.</span><br>
                    Presence.
                </h1>
                <p class="text-gray-200 text-lg mb-8 max-w-md leading-relaxed">
                    Join our guided meditation sessions and find peace in the chaos. Your mental wellness journey starts here.
                </p>
                <div class="btn-group flex gap-4">
                    <button class="px-8 py-4 bg-amber-500 hover:bg-amber-400 text-white rounded-full font-medium transition-all transform hover:scale-105 shadow-lg hover:shadow-amber-500/30">
                        Join Session
                    </button>
                    <button class="px-8 py-4 border-2 border-white/30 hover:border-white text-white rounded-full font-medium transition-all backdrop-blur-sm hover:bg-white/10">
                        Learn More
                    </button>
                </div>
            </div>
        </div>
        
        
        <button class="nav-btn prev" onclick="changeSlide(-1)">
            <i class="fa-solid fa-chevron-left"></i>
        </button>
        <button class="nav-btn next" onclick="changeSlide(1)">
            <i class="fa-solid fa-chevron-right"></i>
        </button>
        
        
        <div class="dots-container">
            <div class="dot active" onclick="goToSlide(0)"></div>
            <div class="dot" onclick="goToSlide(1)"></div>
            <div class="dot" onclick="goToSlide(2)"></div>
        </div>
        
    </section>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        .font-serif {
            font-family: 'Playfair Display', serif;
        }
        
        /* Slider Styles */
        .slider-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            z-index: 1;
        }
        
        .slide.active {
            opacity: 1;
            z-index: 2;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.1);
            transition: transform 6s ease;
        }
        
        .slide.active img {
            transform: scale(1);
        }
        
        /* Overlay Gradient */
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
            z-index: 3;
        }
        
        /* Content Animation */
        .slide-content {
            position: absolute;
            z-index: 4;
            top: 50%;
            left: 10%;
            transform: translateY(-50%);
            max-width: 600px;
            color: white;
        }
        
        .slide-content h1 {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .slide-content p {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.2s;
        }
        
        .slide-content .btn-group {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.4s;
        }
        
        .slide.active .slide-content h1,
        .slide.active .slide-content p,
        .slide.active .slide-content .btn-group {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Navigation Arrows */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-50%) scale(1.1);
        }
        
        .nav-btn.prev { left: 30px; }
        .nav-btn.next { right: 30px; }
        
        /* Dots Navigation */
        .dots-container {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            gap: 12px;
        }
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .dot.active {
            background: white;
            transform: scale(1.3);
        }
        
        .dot:hover {
            background: rgba(255,255,255,0.8);
        }
        
        /* Progress Bar */
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: rgba(255,255,255,0.8);
            z-index: 10;
            transition: width 0.1s linear;
        }
        
        /* Floating Elements */
        .floating-element {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.4;
            z-index: 2;
            animation: float 8s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(180deg); }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .slide-content {
                left: 5%;
                right: 5%;
                max-width: none;
                text-align: center;
            }
            
            .slide-content h1 {
                font-size: 2.5rem !important;
            }
            
            .nav-btn {
                display: none;
            }
            
            .btn-group {
                flex-direction: column;
                gap: 1rem;
            }
        }

JavaScript

Yoga Hero Slider Template Preview

Download Options