Car Washing Home Section 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>AquaLux - Premium Car Detailing</title>
    
  
</head>
<body class="font-poppins overflow-x-hidden">
    
    <section class="hero-bg min-h-screen relative">
        
        <nav class="relative z-50 px-6 lg:px-12 py-6">
            <div class="max-w-7xl mx-auto">
                <div class="glass-effect rounded-2xl px-8 py-4">
                    <div class="flex justify-between items-center">
                        <div class="slide-left">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                                    </svg>
                                </div>
                                <h1 class="text-2xl font-bold text-white">AquaLux</h1>
                            </div>
                        </div>
                        
                        <div class="slide-right hidden md:flex items-center space-x-8">
                            <a href="#" class="text-white/80 hover:text-white transition-colors font-medium">Services</a>
                            <a href="#" class="text-white/80 hover:text-white transition-colors font-medium">About</a>
                            <a href="#" class="text-white/80 hover:text-white transition-colors font-medium">Contact</a>
                            <button class="btn-primary px-6 py-2 rounded-full text-white font-medium">
                                Book Now
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        
        
        <div class="relative z-10 px-6 lg:px-12 pt-20 pb-32">
            <div class="max-w-7xl mx-auto">
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    
                    <div class="space-y-8">
                        <div class="space-y-6">
                            <div class="slide-up delay-100">
                                <span class="inline-block px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-sm text-white/90 border border-white/20">
                                    ✨ Premium Car Detailing Experience
                                </span>
                            </div>
                            
                            <h1 class="slide-up delay-200 text-5xl lg:text-7xl font-bold leading-tight">
                                <span class="text-white">Transform Your</span>
                                <br>
                                <span class="text-gradient font-playfair">Vehicle</span>
                            </h1>
                            
                            <p class="slide-up delay-300 text-xl text-white/70 leading-relaxed max-w-lg">
                                Experience luxury car care with our state-of-the-art facilities, eco-friendly products, and expert detailing services.
                            </p>
                        </div>
                        
                        
                        <div class="slide-up delay-400 space-y-4">
                            <div class="flex items-center space-x-4">
                                <div class="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full"></div>
                                <span class="text-white/80">Professional ceramic coating</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <div class="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full"></div>
                                <span class="text-white/80">Eco-friendly cleaning solutions</span>
                            </div>
                            <div class="flex items-center space-x-4">
                                <div class="w-2 h-2 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full"></div>
                                <span class="text-white/80">Express 20-minute service</span>
                            </div>
                        </div>
                        
                        
                        <div class="slide-up delay-500 flex flex-col sm:flex-row gap-4 pt-4">
                            <button class="btn-primary px-8 py-4 rounded-2xl text-white font-semibold text-lg">
                                Book Appointment
                            </button>
                            <button class="btn-secondary px-8 py-4 rounded-2xl text-white font-semibold text-lg">
                                View Services
                            </button>
                        </div>
                    </div>
                    
                    
                    <div class="slide-right delay-300 relative">
                        <div class="relative floating-animation">
                            
                            <svg viewBox="0 0 600 400" class="w-full h-auto car-illustration">
                                <defs>
                                    <linearGradient id="carBody" x1="0%" y1="0%" x2="100%" y2="100%">
                                        <stop offset="0%" style="stop-color:#667eea"/>
                                        <stop offset="100%" style="stop-color:#764ba2"/>
                                    </linearGradient>
                                    <linearGradient id="carWindow" x1="0%" y1="0%" x2="100%" y2="100%">
                                        <stop offset="0%" style="stop-color:#4facfe"/>
                                        <stop offset="100%" style="stop-color:#00f2fe"/>
                                    </linearGradient>
                                    <filter id="glow">
                                        <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                                        <feMerge> 
                                            <feMergeNode in="coloredBlur"/>
                                            <feMergeNode in="SourceGraphic"/>
                                        </feMerge>
                                    </filter>
                                </defs>
                                
                                
                                <ellipse cx="300" cy="380" rx="180" ry="12" fill="rgba(0,0,0,0.2)"/>
                                
                                
                                <path d="M80 280 L120 200 L480 200 L520 280 L520 340 L80 340 Z" 
                                      fill="url(#carBody)" 
                                      stroke="rgba(255,255,255,0.3)" 
                                      stroke-width="2"/>
                                
                                
                                <path d="M160 200 L200 140 L400 140 L440 200 Z" 
                                      fill="url(#carBody)" 
                                      stroke="rgba(255,255,255,0.3)" 
                                      stroke-width="2"/>
                                
                                
                                <path d="M170 195 L210 150 L390 150 L430 195 Z" 
                                      fill="url(#carWindow)" 
                                      opacity="0.8"/>
                                
                                
                                <circle cx="160" cy="340" r="30" fill="#2d3748" stroke="#667eea" stroke-width="3"/>
                                <circle cx="440" cy="340" r="30" fill="#2d3748" stroke="#667eea" stroke-width="3"/>
                                <circle cx="160" cy="340" r="18" fill="#4a5568"/>
                                <circle cx="440" cy="340" r="18" fill="#4a5568"/>
                                
                                
                                <circle cx="500" cy="240" r="12" fill="#ffd700" filter="url(#glow)"/>
                                <circle cx="500" cy="280" r="10" fill="#ff6b6b"/>
                                
                                
                                <rect x="350" y="260" width="12" height="6" rx="3" fill="rgba(255,255,255,0.8)"/>
                                
                                
                                <rect x="120" y="200" width="360" height="80" fill="url(#carWindow)" opacity="0.1" rx="10"/>
                            </svg>
                            
                            
                            <div class="absolute top-16 left-20 water-effect">
                                <div class="w-3 h-4 bg-blue-400 rounded-full opacity-80"></div>
                            </div>
                            <div class="absolute top-24 left-32 water-effect delay-100">
                                <div class="w-2 h-3 bg-cyan-400 rounded-full opacity-70"></div>
                            </div>
                            <div class="absolute top-20 right-28 water-effect delay-200">
                                <div class="w-2 h-3 bg-blue-300 rounded-full opacity-60"></div>
                            </div>
                            
                            
                            <div class="absolute inset-0 overflow-hidden rounded-3xl">
                                <div class="shine-line absolute inset-0 w-full h-1 top-1/3"></div>
                            </div>
                        </div>
                        
                        
                        <div class="absolute -top-10 -right-10 w-20 h-20 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full opacity-20 floating-animation delay-100"></div>
                        <div class="absolute -bottom-5 -left-5 w-16 h-16 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full opacity-20 floating-animation delay-200"></div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="absolute bottom-0 left-0 right-0 px-6 lg:px-12 pb-8">
            <div class="max-w-7xl mx-auto">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    <div class="stats-card rounded-2xl p-6 text-center fade-in delay-400">
                        <div class="text-3xl font-bold text-white mb-2">25K+</div>
                        <div class="text-white/60 text-sm">Happy Customers</div>
                    </div>
                    <div class="stats-card rounded-2xl p-6 text-center fade-in delay-500">
                        <div class="text-3xl font-bold text-white mb-2">24/7</div>
                        <div class="text-white/60 text-sm">Service Available</div>
                    </div>
                    <div class="stats-card rounded-2xl p-6 text-center fade-in delay-600">
                        <div class="text-3xl font-bold text-white mb-2">20min</div>
                        <div class="text-white/60 text-sm">Express Wash</div>
                    </div>
                    <div class="stats-card rounded-2xl p-6 text-center fade-in delay-700">
                        <div class="text-3xl font-bold text-white mb-2">100%</div>
                        <div class="text-white/60 text-sm">Satisfaction</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:'96a999a206344823',t:'MTc1NDQzMTU3MC4wMDAwMDA='};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=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .hero-bg {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
            position: relative;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(255, 118, 117, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
        }
        
        .floating-animation {
            animation: float 6s ease-in-out infinite;
        }
        
        .slide-up {
            animation: slideUp 1s ease-out forwards;
            opacity: 0;
            transform: translateY(50px);
        }
        
        .slide-left {
            animation: slideLeft 1s ease-out forwards;
            opacity: 0;
            transform: translateX(-50px);
        }
        
        .slide-right {
            animation: slideRight 1s ease-out forwards;
            opacity: 0;
            transform: translateX(50px);
        }
        
        .fade-in {
            animation: fadeIn 1s ease-out forwards;
            opacity: 0;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-10px) rotate(1deg); }
            66% { transform: translateY(5px) rotate(-1deg); }
        }
        
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
        
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
        .delay-500 { animation-delay: 0.5s; }
        .delay-600 { animation-delay: 0.6s; }
        .delay-700 { animation-delay: 0.7s; }
        
        .car-illustration {
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
        }
        
        .water-effect {
            animation: waterFlow 3s ease-in-out infinite;
        }
        
        @keyframes waterFlow {
            0%, 100% { opacity: 0.6; transform: translateY(0) scale(1); }
            50% { opacity: 1; transform: translateY(-5px) scale(1.05); }
        }
        
        .shine-line {
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: shine 2s infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        .stats-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .stats-card:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-5px);
        }

JavaScript

Car Washing Home Section Template Preview

Download Options