Why Choose Auto Care 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>Premium Auto Care - Why Choose Us</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>
<body>
    <section class="why-choose-us">
        <div class="bg-circle circle-1"></div>
        <div class="bg-circle circle-2"></div>
        
        <div class="section-header">
            <h2>Why Choose Our Auto Care</h2>
            <p>We combine cutting-edge technology with decades of expertise to deliver unparalleled automotive services</p>
        </div>
        
        <div class="features-container">
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-microchip"></i>
                </div>
                <h3>Advanced Diagnostics</h3>
                <p>Our state-of-the-art diagnostic equipment can pinpoint issues with precision, saving you time and money on unnecessary repairs.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
            
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-user-shield"></i>
                </div>
                <h3>Certified Technicians</h3>
                <p>All our mechanics are factory-trained and certified, ensuring your vehicle receives expert care from professionals.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
            
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>Quick Turnaround</h3>
                <p>We value your time. 90% of common repairs are completed same-day with our efficient workflow system.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
            
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>Lifetime Warranty</h3>
                <p>We stand behind our work with one of the industry's best warranty programs - most repairs are covered for life.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
            
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <h3>Genuine Parts</h3>
                <p>We use only OEM or premium aftermarket parts to ensure optimal performance and longevity for your vehicle.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
            
            
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-car"></i>
                </div>
                <h3>Free Pickup/Delivery</h3>
                <p>Can't make it to our shop? We'll pick up and deliver your vehicle free of charge within 20 miles.</p>
                <a href="#" class="learn-more">Learn More</a>
            </div>
        </div>
    </section>
    
  
</body>
</html>

CSS

:root {
            --primary-blue: #0066ff;
            --dark-blue: #003399;
            --light-blue: #e6f0ff;
            --white: #ffffff;
            --shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--white);
            color: #333;
        }
        
        .why-choose-us {
            padding: 80px 5%;
            background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%);
            position: relative;
            overflow: hidden;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }
        
        .section-header h2 {
            font-size: 2.5rem;
            color: var(--dark-blue);
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .section-header p {
            font-size: 1.1rem;
            color: #555;
            max-width: 700px;
            margin: 0 auto;
        }
        
        .features-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            position: relative;
            z-index: 2;
        }
        
        .feature-card {
            background: var(--white);
            border-radius: 15px;
            padding: 40px 30px;
            width: 100%;
            max-width: 350px;
            box-shadow: var(--shadow);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 102, 255, 0.3);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg, var(--primary-blue), var(--dark-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 25px;
            color: var(--white);
            font-size: 30px;
            transition: all 0.5s ease;
        }
        
        .feature-card:hover .feature-icon {
            transform: rotate(360deg);
            background: linear-gradient(45deg, var(--dark-blue), var(--primary-blue));
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--dark-blue);
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .learn-more {
            display: inline-block;
            padding: 8px 20px;
            background: transparent;
            border: 2px solid var(--primary-blue);
            color: var(--primary-blue);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .learn-more:hover {
            background: var(--primary-blue);
            color: var(--white);
        }
        
        /* Animated background elements */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(0, 102, 255, 0.05);
            z-index: 0;
        }
        
        .circle-1 {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -100px;
            animation: float 8s ease-in-out infinite;
        }
        
        .circle-2 {
            width: 200px;
            height: 200px;
            bottom: -50px;
            right: -50px;
            animation: float 10s ease-in-out infinite reverse;
        }
        
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .section-header h2 {
                font-size: 2rem;
            }
            
            .feature-card {
                max-width: 100%;
            }
        }

JavaScript

// Additional animation effects
        document.addEventListener('DOMContentLoaded', function() {
            const featureCards = document.querySelectorAll('.feature-card');
            
            featureCards.forEach((card, index) => {
                // Staggered animation on load
                card.style.animation = `fadeInUp 0.5s ease-out ${index * 0.1}s forwards`;
                card.style.opacity = '0';
                
                // Hover effect enhancement
                card.addEventListener('mouseenter', function() {
                    this.querySelector('.feature-icon').style.transform = 'scale(1.1) rotate(360deg)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.querySelector('.feature-icon').style.transform = 'scale(1)';
                });
            });
            
            // Add CSS for fadeInUp animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            `;
            document.head.appendChild(style);
        });

Why Choose Auto Care Template Preview

Download Options