Premium Car Wash Center | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Auto Wash Center</title>
 
</head>

<body>
    <section class="hero-section">
        <div class="hero-container">
            <div class="hero-grid">
                <div class="hero-content">
                    <div class="hero-badge">
                        Professional Auto Care Since 2010
                    </div>

<h1 class="hero-title">
                        Premium Car Wash<br>
                        <span class="highlight">& Detailing</span>
                    </h1>

<p class="hero-subtitle">
                        Experience the ultimate car care with our state-of-the-art washing systems, eco-friendly
                        products, and professional detailing services. We make your vehicle shine like new while
                        protecting the environment.
                    </p>

<div class="hero-actions">
                        <a href="#" class="btn-primary"
                            onclick="alert(' Book your car wash appointment!'); return false;">
                            Book Now
                            <span></span>
                        </a>
                        <a href="#" class="btn-secondary"
                            onclick="alert(' View our membership plans!'); return false;">
                            <span></span>
                            Membership
                        </a>
                    </div>
                </div>

<div class="hero-visual">
                    <div class="main-showcase">
                        <div class="showcase-content">
                            <div class="showcase-badge">
                                Premium Auto Wash
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="services-section">
                <h2 class="services-title">Our Wash Packages</h2>

<div class="services-grid">
                    <div class="service-card">
                        <div class="service-title">Basic Wash</div>
                        <div class="service-desc">Exterior wash, rinse, and dry with premium soap and spot-free rinse
                        </div>
                        <div class="service-price">$12</div>
                    </div>

<div class="service-card">
                        <div class="service-title">Deluxe Package</div>
                        <div class="service-desc">Complete wash, wax, tire shine, and interior vacuum cleaning</div>
                        <div class="service-price">$25</div>
                    </div>

<div class="service-card">
                        <div class="service-title">Premium Detail</div>
                        <div class="service-desc">Full detailing, paint protection, leather conditioning, and ceramic
                            coating</div>
                        <div class="service-price">$45</div>
                    </div>
                </div>
            </div>

<div class="stats-section">
                <div class="stat-item">
                    <span class="stat-number">50K+</span>
                    <div class="stat-label">Cars Washed</div>
                </div>
                <div class="stat-item">
                    <span class="stat-number">15min</span>
                    <div class="stat-label">Average Time</div>
                </div>
                <div class="stat-item">
                    <span class="stat-number">98%</span>
                    <div class="stat-label">Customer Satisfaction</div>
                </div>
                <div class="stat-item">
                    <span class="stat-number">24/7</span>
                    <div class="stat-label">Self-Service Available</div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS

body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            overflow-x: hidden;
        }

.hero-section {
            min-height: 100vh;
            background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 50%, #e1f5fe 100%);
            position: relative;
            display: flex;
            align-items: center;
            padding: 2rem;
        }

.hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 40%, rgba(33, 150, 243, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(0, 188, 212, 0.06) 0%, transparent 50%);
            animation: gentleGlow 15s ease-in-out infinite;
        }

.hero-container {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            z-index: 2;
            position: relative;
        }

.hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: center;
            margin-bottom: 4rem;
        }

.hero-content {
            animation: slideInLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.hero-badge {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.12) 0%, rgba(0, 188, 212, 0.08) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(33, 150, 243, 0.25);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            color: #1976d2;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 2.5rem;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

.hero-badge::before {
            content: '?';
            margin-right: 0.8rem;
            font-size: 1.1rem;
        }

.hero-title {
            font-size: 4rem;
            font-weight: 700;
            color: #0d47a1;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            animation: fadeInUp 1.2s ease-out 0.5s both;
            letter-spacing: -0.02em;
        }

.hero-title .highlight {
            background: linear-gradient(135deg, #2196f3 0%, #00bcd4 50%, #03a9f4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-subtitle {
            font-size: 1.3rem;
            color: #1565c0;
            line-height: 1.6;
            margin-bottom: 3rem;
            animation: fadeInUp 1.2s ease-out 0.7s both;
            max-width: 90%;
        }

.hero-actions {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 3rem;
            animation: fadeInUp 1.2s ease-out 0.9s both;
        }

.btn-primary {
            background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
            color: white;
            padding: 1.3rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            box-shadow: 0 10px 30px rgba(33, 150, 243, 0.3);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(33, 150, 243, 0.4);
        }

.btn-secondary {
            background: transparent;
            color: #1976d2;
            padding: 1.3rem 2.5rem;
            border: 2px solid rgba(33, 150, 243, 0.3);
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            backdrop-filter: blur(10px);
        }

.btn-secondary:hover {
            background: rgba(33, 150, 243, 0.1);
            border-color: rgba(33, 150, 243, 0.5);
            transform: translateY(-2px);
        }

.hero-visual {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: slideInRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

.main-showcase {
            width: 450px;
            height: 350px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 242, 253, 0.8) 100%);
            backdrop-filter: blur(30px);
            border: 2px solid rgba(33, 150, 243, 0.25);
            border-radius: 25px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(33, 150, 243, 0.15);
            animation: gentleFloat 8s ease-in-out infinite;
        }

.showcase-content {
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 350"><defs><linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:%2387ceeb;stop-opacity:0.6" /><stop offset="100%" style="stop-color:%23e3f2fd;stop-opacity:1" /></linearGradient><linearGradient id="carGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%232196f3;stop-opacity:1" /><stop offset="100%" style="stop-color:%231976d2;stop-opacity:1" /></linearGradient><radialGradient id="bubbleGrad" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23ffffff;stop-opacity:0.8" /><stop offset="100%" style="stop-color:%2300bcd4;stop-opacity:0.3" /></radialGradient></defs><rect width="450" height="350" fill="url(%23skyGrad)"/><rect x="0" y="280" width="450" height="70" fill="%23424242"/><rect x="50" y="200" width="350" height="80" fill="url(%23carGrad)" rx="15"/><rect x="60" y="210" width="330" height="15" fill="%231565c0" rx="7"/><rect x="70" y="230" width="310" height="40" fill="%2364b5f6" rx="5"/><circle cx="120" cy="280" r="25" fill="%23424242"/><circle cx="120" cy="280" r="18" fill="%23757575"/><circle cx="120" cy="280" r="10" fill="%23bdbdbd"/><circle cx="330" cy="280" r="25" fill="%23424242"/><circle cx="330" cy="280" r="18" fill="%23757575"/><circle cx="330" cy="280" r="10" fill="%23bdbdbd"/><rect x="150" y="240" width="150" height="20" fill="%23e3f2fd" rx="10"/><circle cx="100" cy="150" r="8" fill="url(%23bubbleGrad)"/><circle cx="150" cy="120" r="6" fill="url(%23bubbleGrad)"/><circle cx="200" cy="140" r="10" fill="url(%23bubbleGrad)"/><circle cx="250" cy="110" r="7" fill="url(%23bubbleGrad)"/><circle cx="300" cy="130" r="9" fill="url(%23bubbleGrad)"/><circle cx="350" cy="160" r="5" fill="url(%23bubbleGrad)"/><circle cx="120" cy="180" r="4" fill="url(%23bubbleGrad)"/><circle cx="280" cy="170" r="6" fill="url(%23bubbleGrad)"/><path d="M20 320 Q50 300 80 320 Q110 340 140 320 Q170 300 200 320 Q230 340 260 320 Q290 300 320 320 Q350 340 380 320 Q410 300 430 320" stroke="%2300bcd4" stroke-width="3" fill="none" opacity="0.7"/><rect x="10" y="180" width="30" height="60" fill="%23ff9800" rx="5"/><rect x="15" y="185" width="20" height="50" fill="%23ffc107" rx="3"/><text x="25" y="215" text-anchor="middle" fill="%23e65100" font-size="8" font-weight="bold">SOAP</text><rect x="410" y="190" width="25" height="50" fill="%2300bcd4" rx="5"/><rect x="415" y="195" width="15" height="40" fill="%2326c6da" rx="2"/></svg>') center/cover;
            border-radius: 23px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 1.5rem;
        }

.showcase-badge {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            padding: 0.8rem 1.5rem;
            border-radius: 20px;
            color: #1976d2;
            font-weight: 700;
            font-size: 0.9rem;
            box-shadow: 0 8px 25px rgba(33, 150, 243, 0.2);
            animation: slideUpBadge 1s ease-out 1.5s both;
        }

.services-section {
            animation: fadeInUp 1.2s ease-out 1.1s both;
        }

.services-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #0d47a1;
            margin-bottom: 3rem;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }

.service-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(227, 242, 253, 0.7) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(33, 150, 243, 0.2);
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            transition: all 0.4s ease;
            cursor: pointer;
        }

.service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(33, 150, 243, 0.15);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(33, 150, 243, 0.05) 100%);
        }

.service-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
        }

.service-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #1976d2;
            margin-bottom: 1rem;
        }

.service-desc {
            font-size: 1rem;
            color: #1565c0;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

.service-price {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #2196f3 0%, #00bcd4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.stats-section {
            background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(0, 188, 212, 0.05) 100%);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 3rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            text-align: center;
            animation: fadeInUp 1.2s ease-out 1.3s both;
        }

.stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.stat-number {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, #2196f3 0%, #00bcd4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: block;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

.stat-label {
            font-size: 1.1rem;
            color: #1565c0;
            font-weight: 600;
        }

@keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(80px);
            }

to {
                opacity: 1;
                transform: translateX(0);
            }
        }

@keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes slideUpBadge {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes gentleFloat {

0%,
            100% {
                transform: translateY(0px);
            }

50% {
                transform: translateY(-10px);
            }
        }

@keyframes gentleGlow {

0%,
            100% {
                opacity: 1;
            }

50% {
                opacity: 0.9;
            }
        }

@media (max-width: 1024px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }

.hero-title {
                font-size: 3.5rem;
            }

.main-showcase {
                width: 400px;
                height: 300px;
            }

.services-grid {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            }

.hero-subtitle {
                max-width: 100%;
            }
        }

@media (max-width: 768px) {
            .hero-section {
                padding: 1rem;
            }

.hero-title {
                font-size: 2.8rem;
            }

.hero-subtitle {
                font-size: 1.1rem;
            }

.services-title {
                font-size: 2rem;
            }

.main-showcase {
                width: 350px;
                height: 280px;
            }

.hero-actions {
                flex-direction: column;
                gap: 1rem;
            }

.btn-primary,
            .btn-secondary {
                width: 100%;
                justify-content: center;
            }

.stats-section {
                padding: 2rem;
                gap: 2rem;
            }
        }

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

.services-grid {
                grid-template-columns: 1fr;
            }

.main-showcase {
                width: 280px;
                height: 220px;
            }

.stats-section {
                grid-template-columns: repeat(2, 1fr);
            }

.stat-number {
                font-size: 2.2rem;
            }
        }

JavaScript

Premium Car Wash Center Preview

Download Options