Services Slider | QuickCoder | The frontend studio

HTML

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

</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Enterprise Solutions</h1>
            <p>Transform your business with our cutting-edge services and innovative approaches</p>
        </div>
        
        <div class="slider-container">
            <div class="slider">
                
                <div class="slide active">
                    <div class="content-section">
                        <div class="service-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="service-category">Business Intelligence</div>
                        <h2 class="service-title">Data Analytics & Insights</h2>
                        <p class="service-description">Transform raw data into actionable insights with our advanced analytics platform. Make informed decisions that drive growth and optimize operations across your organization.</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Real-time Dashboards</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Predictive Analytics</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Custom Reporting</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Data Visualization</span>
                            </div>
                        </div>
                        
                        <div class="stats">
                            <div class="stat">
                                <div class="stat-value">98%</div>
                                <div class="stat-label">Accuracy</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">3.5x</div>
                                <div class="stat-label">ROI Increase</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">24/7</div>
                                <div class="stat-label">Support</div>
                            </div>
                        </div>
                        
                        <div class="actions">
                            <button class="btn btn-primary">
                                <span>Get Started</span>
                                <i class="fas fa-arrow-right"></i>
                            </button>
                            <button class="btn btn-secondary">
                                <span>View Case Studies</span>
                                <i class="fas fa-book-open"></i>
                            </button>
                        </div>
                    </div>
                    <div class="visual-section">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8ZGF0YSUyMGFuYWx5dGljc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Data Analytics" class="visual-image">
                    </div>
                    <div class="slide-counter">01 / 03</div>
                  
                </div>
                
                
                <div class="slide">
                    <div class="content-section">
                        <div class="service-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div class="service-category">Cyber Security</div>
                        <h2 class="service-title">Enterprise Security Solutions</h2>
                        <p class="service-description">Protect your digital assets with our comprehensive security framework. From threat detection to compliance management, we ensure your business stays secure and resilient.</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Threat Monitoring</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Encryption Services</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Compliance Auditing</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Incident Response</span>
                            </div>
                        </div>
                        
                        <div class="stats">
                            <div class="stat">
                                <div class="stat-value">99.9%</div>
                                <div class="stat-label">Uptime</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">150+</div>
                                <div class="stat-label">Security Protocols</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">24/7</div>
                                <div class="stat-label">Monitoring</div>
                            </div>
                        </div>
                        
                        <div class="actions">
                            <button class="btn btn-primary">
                                <span>Secure Your Business</span>
                                <i class="fas fa-shield-alt"></i>
                            </button>
                            <button class="btn btn-secondary">
                                <span>Security Assessment</span>
                                <i class="fas fa-clipboard-check"></i>
                            </button>
                        </div>
                    </div>
                    <div class="visual-section">
                        <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2VjdXJpdHl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="Cyber Security" class="visual-image">
                    </div>
                    <div class="slide-counter">02 / 03</div>
                  
                </div>
                
                
                <div class="slide">
                    <div class="content-section">
                        <div class="service-icon">
                            <i class="fas fa-cloud"></i>
                        </div>
                        <div class="service-category">Cloud Infrastructure</div>
                        <h2 class="service-title">Scalable Cloud Solutions</h2>
                        <p class="service-description">Accelerate your digital transformation with our enterprise-grade cloud infrastructure. Scale seamlessly while maintaining performance, security, and cost efficiency.</p>
                        
                        <div class="features">
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Multi-Cloud Strategy</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Automated Scaling</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Disaster Recovery</span>
                            </div>
                            <div class="feature">
                                <i class="fas fa-check-circle"></i>
                                <span>Cost Optimization</span>
                            </div>
                        </div>
                        
                        <div class="stats">
                            <div class="stat">
                                <div class="stat-value">40%</div>
                                <div class="stat-label">Cost Reduction</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">2.8x</div>
                                <div class="stat-label">Performance</div>
                            </div>
                            <div class="stat">
                                <div class="stat-value">99.95%</div>
                                <div class="stat-label">Reliability</div>
                            </div>
                        </div>
                        
                        <div class="actions">
                            <button class="btn btn-primary">
                                <span>Migrate to Cloud</span>
                                <i class="fas fa-cloud-upload-alt"></i>
                            </button>
                            <button class="btn btn-secondary">
                                <span>Architecture Review</span>
                                <i class="fas fa-network-wired"></i>
                            </button>
                        </div>
                    </div>
                    <div class="visual-section">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2xvdWQlMjBjb21wdXRpbmd8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" alt="Cloud Computing" class="visual-image">
                    </div>
                    <div class="slide-counter">03 / 03</div>
                
                </div>
            </div>
            
            
            <div class="nav-btn prev">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div class="nav-btn next">
                <i class="fas fa-chevron-right"></i>
            </div>
            
            
            <div class="slider-controls">
                <div class="slider-dot active"></div>
                <div class="slider-dot"></div>
                <div class="slider-dot"></div>
            </div>
        </div>
    </div>

</body>
</html>

CSS

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

body {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
            color: #fff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

.container {
            max-width: 1400px;
            width: 100%;
            position: relative;
        }

.header {
            text-align: center;
            margin-bottom: 50px;
        }

.header h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.2rem;
            background: linear-gradient(to right, #4cc9f0, #4361ee, #7209b7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }

.header p {
            color: #d0d0d0;
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

.slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
            background: rgba(20, 22, 36, 0.95);
            backdrop-filter: blur(10px);
            height: 650px;
        }

.slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            height: 100%;
        }

.slide {
            min-width: 100%;
            position: relative;
            display: flex;
            padding: 0;
            overflow: hidden;
        }

.content-section {
            flex: 1;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 2;
        }

.service-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #4361ee, #7209b7);
            box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
        }

.service-icon i {
            font-size: 2.2rem;
            color: white;
        }

.service-category {
            font-size: 1rem;
            color: #4cc9f0;
            margin-bottom: 15px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

.service-title {
            font-size: 2.8rem;
            margin-bottom: 25px;
            font-family: 'Playfair Display', serif;
            line-height: 1.2;
            color: white;
        }

.service-description {
            font-size: 1.15rem;
            line-height: 1.7;
            margin-bottom: 35px;
            color: #d0d0d0;
            max-width: 550px;
        }

.features {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
            max-width: 550px;
        }

.feature {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.08);
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 0.95rem;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

.feature:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-3px);
        }

.feature i {
            color: #4cc9f0;
            font-size: 1rem;
        }

.stats {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
        }

.stat {
            text-align: center;
        }

.stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #4cc9f0;
            margin-bottom: 5px;
        }

.stat-label {
            font-size: 0.9rem;
            color: #a0a0a0;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.actions {
            display: flex;
            gap: 20px;
        }

.btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 35px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            border: none;
        }

.btn-primary {
            background: linear-gradient(135deg, #4361ee, #7209b7);
            color: white;
            box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
        }

.btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.btn::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: 0.5s;
        }

.btn:hover {
            transform: translateY(-3px);
        }

.btn:hover::before {
            left: 100%;
        }

.btn-primary:hover {
            box-shadow: 0 12px 25px rgba(67, 97, 238, 0.6);
        }

.btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
        }

.btn i {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

.btn:hover i {
            transform: translateX(5px);
        }

.visual-section {
            flex: 1;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(20, 22, 36, 0.9) 0%, rgba(30, 33, 54, 0.8) 100%);
        }

.visual-image {
            width: 85%;
            height: 85%;
            object-fit: cover;
            border-radius: 20px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
            transition: transform 1s ease;
        }

.slide.active .visual-image {
            transform: scale(1.03);
        }

.slider-controls {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            z-index: 10;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

.slider-dot::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #4361ee, #7209b7);
            border-radius: 50%;
            transform: scale(0);
            transition: transform 0.3s ease;
        }

.slider-dot.active::before {
            transform: scale(1);
        }

.slider-dot.active {
            transform: scale(1.3);
            box-shadow: 0 0 15px rgba(67, 97, 238, 0.7);
        }

.nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            width: 55px;
            height: 55px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

.nav-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
        }

.prev {
            left: 25px;
        }

.next {
            right: 25px;
        }

.nav-btn i {
            font-size: 1.5rem;
            color: white;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

.slide-counter {
            position: absolute;
            top: 40px;
            right: 40px;
            font-size: 1.1rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            z-index: 10;
            background: rgba(0, 0, 0, 0.3);
            padding: 8px 20px;
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }

.client-logos {
            position: absolute;
            bottom: 40px;
            left: 50px;
            display: flex;
            gap: 30px;
            align-items: center;
            z-index: 10;
        }

.client-logo {
            height: 35px;
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }

.client-logo:hover {
            opacity: 1;
        }

/* Responsive Design */
        @media (max-width: 1200px) {
            .slider-container {
                height: 600px;
            }
            
            .service-title {
                font-size: 2.4rem;
            }
            
            .stats {
                gap: 20px;
            }
            
            .stat-value {
                font-size: 2.2rem;
            }
        }

@media (max-width: 992px) {
            .slider-container {
                height: 550px;
            }
            
            .service-title {
                font-size: 2rem;
            }
            
            .service-description {
                font-size: 1.05rem;
            }
            
            .btn {
                padding: 14px 30px;
                font-size: 1rem;
            }
            
            .client-logos {
                left: 30px;
                gap: 20px;
            }
        }

@media (max-width: 768px) {
            .header h1 {
                font-size: 2.5rem;
            }
            
            .slide {
                flex-direction: column-reverse;
            }
            
            .slider-container {
                height: auto;
                min-height: 800px;
            }
            
            .visual-section {
                height: 300px;
                flex: none;
            }
            
            .visual-image {
                width: 90%;
                height: 90%;
            }
            
            .content-section {
                padding: 40px 30px;
            }
            
            .features {
                justify-content: center;
            }
            
            .stats {
                justify-content: center;
            }
            
            .actions {
                justify-content: center;
            }
            
            .slider-controls {
                bottom: 20px;
            }
            
            .slide-counter {
                top: 20px;
                right: 20px;
            }
            
            .client-logos {
                position: relative;
                bottom: auto;
                left: auto;
                justify-content: center;
                margin-top: 30px;
            }
            
            .nav-btn {
                width: 50px;
                height: 50px;
            }
            
            .nav-btn i {
                font-size: 1.3rem;
            }
        }

@media (max-width: 576px) {
            .header h1 {
                font-size: 2rem;
            }
            
            .header p {
                font-size: 1rem;
            }
            
            .service-title {
                font-size: 1.8rem;
            }
            
            .service-description {
                font-size: 1rem;
            }
            
            .btn {
                padding: 12px 25px;
                font-size: 0.95rem;
            }
            
            .feature {
                padding: 10px 16px;
                font-size: 0.9rem;
            }
            
            .stats {
                flex-wrap: wrap;
            }
            
            .actions {
                flex-direction: column;
                align-items: center;
            }
            
            .client-logos {
                flex-wrap: wrap;
            }
        }

JavaScript

Services Slider Preview

Download Options