Iron Pump Gym Slider Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IRON PUMP GYM | Unleash Your Potential</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&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="gym-hero" id="hero">

<div class="energy-lines">
            <div class="energy-line"></div>
            <div class="energy-line"></div>
            <div class="energy-line"></div>
            <div class="energy-line"></div>
        </div>

<div class="slide active" data-slide="0">
            <div class="slide-image">
                <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2070&auto=format&fit=crop" alt="Gym Training">
            </div>
            <div class="slide-overlay"></div>
            <div class="scratch-texture"></div>

<div class="slide-content">
                <div class="gym-tag font-heading">
                    <i class="fa-solid fa-fire"></i>
                    No Pain No Gain
                </div>
                <h1 class="gym-title font-heading">
                    <span class="title-line"><span class="title-text">FORGE YOUR</span></span>
                    <span class="title-line"><span class="title-text"><span class="title-highlight">LEGACY</span></span></span>
                </h1>
                <p class="gym-desc">
                    State-of-the-art equipment, expert trainers, and an atmosphere that pushes you beyond your limits. This is where champions are made.
                </p>
                <div class="gym-actions">
                    <button class="btn-gym btn-primary-gym">
                        Start Training <i class="fa-solid fa-dumbbell"></i>
                    </button>
                    <button class="btn-gym btn-outline-gym">
                        View Schedule
                    </button>
                </div>
            </div>

<div class="side-stats">
                <div class="side-stat">
                    <div class="side-stat-number">50+</div>
                    <div class="side-stat-label">Equipment</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">24/7</div>
                    <div class="side-stat-label">Open</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">20+</div>
                    <div class="side-stat-label">Trainers</div>
                </div>
            </div>
        </div>

<div class="slide" data-slide="1">
            <div class="slide-image">
                <img src="https://images.unsplash.com/photo-1581009146145-b5ef050c149a?q=80&w=2070&auto=format&fit=crop" alt="Weight Lifting">
            </div>
            <div class="slide-overlay"></div>
            <div class="scratch-texture"></div>

<div class="slide-content">
                <div class="gym-tag font-heading">
                    <i class="fa-solid fa-bolt"></i>
                    Beast Mode Activated
                </div>
                <h1 class="gym-title font-heading">
                    <span class="title-line"><span class="title-text">UNLEASH</span></span>
                    <span class="title-line"><span class="title-text"><span class="title-highlight">BEAST MODE</span></span></span>
                </h1>
                <p class="gym-desc">
                    Heavy iron, intense workouts, and a brotherhood of warriors. Join the most hardcore fitness community in the city and transform your physique.
                </p>
                <div class="gym-actions">
                    <button class="btn-gym btn-primary-gym">
                        Join Now <i class="fa-solid fa-arrow-right"></i>
                    </button>
                    <button class="btn-gym btn-outline-gym">
                        See Results
                    </button>
                </div>
            </div>

<div class="side-stats">
                <div class="side-stat">
                    <div class="side-stat-number">10K+</div>
                    <div class="side-stat-label">Members</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">500+</div>
                    <div class="side-stat-label">Sq Ft</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">100%</div>
                    <div class="side-stat-label">Results</div>
                </div>
            </div>
        </div>

<div class="slide" data-slide="2">
            <div class="slide-image">
                <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=2070&auto=format&fit=crop" alt="Personal Training">
            </div>
            <div class="slide-overlay"></div>
            <div class="scratch-texture"></div>

<div class="slide-content">
                <div class="gym-tag font-heading">
                    <i class="fa-solid fa-heart-pulse"></i>
                    Transform Your Life
                </div>
                <h1 class="gym-title font-heading">
                    <span class="title-line"><span class="title-text">YOUR BODY</span></span>
                    <span class="title-line"><span class="title-text"><span class="title-highlight">YOUR TEMPLE</span></span></span>
                </h1>
                <p class="gym-desc">
                    Personal training programs tailored to your goals. Nutrition guidance, workout plans, and 24/7 support to sculpt the body you deserve.
                </p>
                <div class="gym-actions">
                    <button class="btn-gym btn-primary-gym">
                        Get Plan <i class="fa-solid fa-clipboard-list"></i>
                    </button>
                    <button class="btn-gym btn-outline-gym">
                        Meet Trainers
                    </button>
                </div>
            </div>

<div class="side-stats">
                <div class="side-stat">
                    <div class="side-stat-number">1:1</div>
                    <div class="side-stat-label">Training</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">50+</div>
                    <div class="side-stat-label">Classes</div>
                </div>
                <div class="side-stat">
                    <div class="side-stat-number">30</div>
                    <div class="side-stat-label">Day Challenge</div>
                </div>
            </div>
        </div>

<div class="gym-nav">
            <button class="nav-gym-btn" onclick="changeSlide(-1)">
                <i class="fa-solid fa-chevron-left"></i>
            </button>
            <button class="nav-gym-btn" onclick="changeSlide(1)">
                <i class="fa-solid fa-chevron-right"></i>
            </button>
        </div>

<div class="scroll-down" onclick="scrollNext()">
            <span class="scroll-text">Explore</span>
            <div class="scroll-arrow"></div>
        </div>

<div class="gym-controls">
            <div class="gym-counter font-heading">
                <span class="counter-box" id="currentSlide">01</span>
                <div class="counter-divider"></div>
                <span class="counter-total">03</span>
            </div>

<div class="gym-timeline">
                <div class="timeline-dot active" onclick="goToSlide(0)">
                    <span class="timeline-label">Power</span>
                </div>
                <div class="timeline-dot" onclick="goToSlide(1)">
                    <span class="timeline-label">Strength</span>
                </div>
                <div class="timeline-dot" onclick="goToSlide(2)">
                    <span class="timeline-label">Transform</span>
                </div>
            </div>
        </div>

</section>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --neon-red: #ff2d2d;
            --neon-orange: #ff6b35;
            --dark: #0a0a0a;
            --darker: #050505;
            --gray: #1a1a1a;
            --light: #ffffff;
        }

body {
            font-family: 'Roboto Condensed', sans-serif;
            background: var(--darker);
            overflow-x: hidden;
        }

.font-heading {
            font-family: 'Oswald', sans-serif;
        }

/* HERO CONTAINER */
        .gym-hero {
            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 100vh;
            overflow: hidden;
            background: var(--darker);
        }

/* ENERGY LINES BACKGROUND */
        .energy-lines {
            position: absolute;
            inset: 0;
            z-index: 1;
            overflow: hidden;
            opacity: 0.1;
        }

.energy-line {
            position: absolute;
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, var(--neon-red), transparent);
            animation: energy-pulse 3s infinite;
        }

.energy-line:nth-child(1) { left: 20%; animation-delay: 0s; }
        .energy-line:nth-child(2) { left: 40%; animation-delay: 0.5s; }
        .energy-line:nth-child(3) { left: 60%; animation-delay: 1s; }
        .energy-line:nth-child(4) { left: 80%; animation-delay: 1.5s; }

@keyframes energy-pulse {
            0%, 100% { opacity: 0; transform: scaleY(0); }
            50% { opacity: 1; transform: scaleY(1); }
        }

/* SLIDES */
        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }

.slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 3;
        }

/* IMAGE WITH ZOOM & SHAKE */
        .slide-image {
            position: absolute;
            inset: -10px;
            overflow: hidden;
        }

.slide-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.4) contrast(1.2) saturate(0.8);
            transform: scale(1.1);
            transition: transform 6s ease;
        }

.slide.active .slide-image img {
            transform: scale(1);
            animation: subtle-shake 8s infinite;
        }

@keyframes subtle-shake {
            0%, 100% { transform: scale(1) translate(0, 0); }
            25% { transform: scale(1.02) translate(-5px, 5px); }
            50% { transform: scale(1) translate(5px, -5px); }
            75% { transform: scale(1.02) translate(-5px, -5px); }
        }

/* OVERLAY GRADIENT */
        .slide-overlay {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(circle at 30% 50%, rgba(255, 45, 45, 0.15) 0%, transparent 50%),
                linear-gradient(90deg, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.7) 50%, rgba(5, 5, 5, 0.3) 100%);
            z-index: 3;
        }

/* SCRATCH TEXTURE */
        .scratch-texture {
            position: absolute;
            inset: 0;
            z-index: 4;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
            pointer-events: none;
        }

/* CONTENT */
        .slide-content {
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 8%;
            transform: translateY(-50%);
            max-width: 700px;
            color: white;
            padding: 0 2rem;
        }

/* TAG */
        .gym-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--neon-red);
            margin-bottom: 1.5rem;
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

.gym-tag::before {
            content: '';
            width: 40px;
            height: 3px;
            background: var(--neon-red);
            box-shadow: 0 0 10px var(--neon-red);
        }

.slide.active .gym-tag {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.3s;
        }

/* TITLE - GLITCH EFFECT */
        .gym-title {
            font-size: clamp(3rem, 7vw, 6rem);
            font-weight: 700;
            line-height: 0.95;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
            position: relative;
        }

.title-line {
            display: block;
            overflow: hidden;
        }

.title-text {
            display: block;
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

.slide.active .title-text {
            transform: translateY(0);
            opacity: 1;
        }

.title-line:nth-child(1) .title-text { transition-delay: 0.5s; }
        .title-line:nth-child(2) .title-text { transition-delay: 0.7s; }

.title-highlight {
            color: var(--neon-red);
            text-shadow: 0 0 20px rgba(255, 45, 45, 0.5);
            position: relative;
            display: inline-block;
        }

.title-highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: var(--neon-red);
            opacity: 0.3;
            z-index: -1;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s ease 1s;
        }

.slide.active .title-highlight::after {
            transform: scaleX(1);
        }

/* DESCRIPTION */
        .gym-desc {
            font-size: 1.1rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 2.5rem;
            max-width: 550px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }

.slide.active .gym-desc {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.9s;
        }

/* BUTTONS */
        .gym-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }

.slide.active .gym-actions {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.1s;
        }

.btn-gym {
            padding: 1rem 2.5rem;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            position: relative;
            overflow: hidden;
            clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
        }

.btn-primary-gym {
            background: var(--neon-red);
            color: white;
            box-shadow: 0 0 20px rgba(255, 45, 45, 0.4);
        }

.btn-primary-gym::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

.btn-primary-gym:hover::before {
            left: 100%;
        }

.btn-primary-gym:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(255, 45, 45, 0.6);
        }

.btn-outline-gym {
            background: transparent;
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

.btn-outline-gym:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--neon-red);
            color: var(--neon-red);
        }

/* SIDE STATS PANEL */
        .side-stats {
            position: absolute;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

.side-stat {
            text-align: right;
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.6s ease;
        }

.slide.active .side-stat:nth-child(1) { transition-delay: 1.3s; opacity: 1; transform: translateX(0); }
        .slide.active .side-stat:nth-child(2) { transition-delay: 1.5s; opacity: 1; transform: translateX(0); }
        .slide.active .side-stat:nth-child(3) { transition-delay: 1.7s; opacity: 1; transform: translateX(0); }

.side-stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--neon-red);
            text-shadow: 0 0 20px rgba(255, 45, 45, 0.5);
            line-height: 1;
        }

.side-stat-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: rgba(255, 255, 255, 0.6);
        }

/* NAVIGATION */
        .gym-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            z-index: 15;
            display: flex;
            justify-content: space-between;
            padding: 0 2rem;
            pointer-events: none;
        }

.nav-gym-btn {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: white;
            cursor: pointer;
            pointer-events: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
        }

.nav-gym-btn:hover {
            background: var(--neon-red);
            border-color: var(--neon-red);
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(255, 45, 45, 0.5);
        }

/* BOTTOM CONTROLS */
        .gym-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 20;
            padding: 2rem 4rem;
            background: linear-gradient(to top, rgba(5, 5, 5, 0.9), transparent);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

/* COUNTER */
        .gym-counter {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: white;
        }

.counter-box {
            font-size: 3rem;
            font-weight: 700;
            color: var(--neon-red);
            min-width: 60px;
            text-align: center;
        }

.counter-divider {
            width: 2px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
        }

.counter-total {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.5);
        }

/* TIMELINE */
        .gym-timeline {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

.timeline-dot {
            position: relative;
            width: 60px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.timeline-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

.timeline-dot.active {
            background: var(--neon-red);
            box-shadow: 0 0 10px var(--neon-red);
        }

.timeline-dot.active::before {
            background: var(--neon-red);
            transform: translate(-50%, -50%) scale(1.5);
            box-shadow: 0 0 20px var(--neon-red);
        }

.timeline-label {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255, 255, 255, 0.5);
            white-space: nowrap;
            opacity: 0;
            transition: all 0.3s ease;
        }

.timeline-dot:hover .timeline-label,
        .timeline-dot.active .timeline-label {
            opacity: 1;
            color: white;
        }

/* SCROLL DOWN */
        .scroll-down {
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            animation: bounce 2s infinite;
        }

.scroll-text {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.3em;
            color: rgba(255, 255, 255, 0.6);
        }

.scroll-arrow {
            width: 30px;
            height: 50px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }

.scroll-arrow::before {
            content: '';
            width: 6px;
            height: 6px;
            background: var(--neon-red);
            border-radius: 50%;
            animation: scroll-ball 2s infinite;
        }

@keyframes scroll-ball {
            0% { transform: translateY(0); opacity: 1; }
            100% { transform: translateY(20px); opacity: 0; }
        }

@keyframes bounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-10px); }
        }

/* RESPONSIVE */
        @media (max-width: 1024px) {
            .side-stats {
                display: none;
            }
            
            .slide-content {
                left: 5%;
                max-width: 600px;
            }
        }

@media (max-width: 768px) {
            .slide-content {
                left: 0;
                width: 100%;
                text-align: center;
                padding: 0 1.5rem;
            }

.gym-title {
                font-size: 2.5rem;
            }

.gym-actions {
                justify-content: center;
            }

.gym-controls {
                padding: 1.5rem;
                flex-direction: column;
                gap: 1.5rem;
            }

.gym-timeline {
                order: -1;
                width: 100%;
                justify-content: center;
            }

.timeline-dot {
                flex: 1;
                max-width: 80px;
            }

.gym-nav {
                display: none;
            }

.scroll-down {
                display: none;
            }
        }

@media (max-width: 480px) {
            .gym-title {
                font-size: 2rem;
            }

.btn-gym {
                padding: 0.875rem 1.5rem;
                font-size: 0.8rem;
            }
        }

JavaScript

let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const timelineDots = document.querySelectorAll('.timeline-dot');
        const currentSlideEl = document.getElementById('currentSlide');
        const totalSlides = slides.length;
        let slideInterval;
        const slideDuration = 6000;

function init() {
            startSlider();
            setupEvents();
        }

function setupEvents() {
            // Keyboard
            document.addEventListener('keydown', (e) => {
                if (e.key === 'ArrowLeft') changeSlide(-1);
                if (e.key === 'ArrowRight') changeSlide(1);
            });

// Touch
            let touchStartX = 0;
            const hero = document.getElementById('hero');
            
            hero.addEventListener('touchstart', (e) => {
                touchStartX = e.touches[0].clientX;
            }, {passive: true});
            
            hero.addEventListener('touchend', (e) => {
                const diff = touchStartX - e.changedTouches[0].clientX;
                if (Math.abs(diff) > 50) {
                    changeSlide(diff > 0 ? 1 : -1);
                }
            }, {passive: true});

// Pause on hover
            hero.addEventListener('mouseenter', () => clearInterval(slideInterval));
            hero.addEventListener('mouseleave', startSlider);
        }

function changeSlide(direction) {
            slides[currentSlide].classList.remove('active');
            timelineDots[currentSlide].classList.remove('active');
            
            currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
            
            updateSlide();
            resetSlider();
        }

function goToSlide(index) {
            if (index === currentSlide) return;
            
            slides[currentSlide].classList.remove('active');
            timelineDots[currentSlide].classList.remove('active');
            
            currentSlide = index;
            updateSlide();
            resetSlider();
        }

function updateSlide() {
            slides[currentSlide].classList.add('active');
            timelineDots[currentSlide].classList.add('active');
            currentSlideEl.textContent = String(currentSlide + 1).padStart(2, '0');
        }

function startSlider() {
            clearInterval(slideInterval);
            slideInterval = setInterval(() => changeSlide(1), slideDuration);
        }

function resetSlider() {
            clearInterval(slideInterval);
            startSlider();
        }

function scrollNext() {
            const hero = document.getElementById('hero');
            const next = hero.nextElementSibling;
            if (next) next.scrollIntoView({ behavior: 'smooth' });
        }

// Initialize
        window.addEventListener('load', init);

Iron Pump Gym Slider Template Preview

Download Options