Why choose us section using html css javascript

Key Features:

1. Responsive Design: Adapts to different screen sizes (desktop, tablet, mobile)

2. Modern Card Layout: Clean, elevated cards with hover effects

3. Numbered Steps: Like your template, each section has a prominent number

4. Subtle Animations: Cards fade in on scroll and lift on hover

5. Color Scheme: Uses a primary blue color that you can easily customize

6. Clean Typography: Readable fonts with proper hierarchy

Customization Options:

1. Change colors by modifying the CSS variables at the top

2. Adjust the number of cards by adding/removing card elements

3. Modify content to match your specific value proposition

4. Adjust animation timing in the JavaScript section

The design maintains the structured, numbered approach of your template while presenting it as a "Why Choose Us" section that highlights your company's strengths.

<section class="why-choose-us"> <div class="section-header"> <h1>Why Choose Us</h1> <p>We follow a proven methodology to deliver exceptional results for our clients</p> </div> <div class="steps-container"> <div class="step-card"> <div class="step-number">01</div> <h3>Customer Empathy</h3> <p>We deeply understand your needs by observing, engaging, and empathizing with your experiences. Our focus is on your challenges and desires to uncover meaningful insights.</p> </div> <div class="step-card"> <div class="step-number">02</div> <h3>Clear Definition</h3> <p>We clearly articulate the problem by synthesizing gathered insights. Our problem statements guide us toward user-centered solutions that actually work.</p> </div> <div class="step-card"> <div class="step-number">03</div> <h3>Creative Ideation</h3> <p>We brainstorm a wide range of creative ideas without limitations. Our team explores unconventional solutions to address your challenges effectively.</p> </div> <div class="step-card"> <div class="step-number">04</div> <h3>Rapid Testing</h3> <p>We create simple prototypes to represent ideas and gather your feedback. Our iterative process ensures the final solution meets your needs perfectly.</p> </div> </div> </section>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.

:root {
            --primary-color: #4a6bff;
            --secondary-color: #f8f9fa;
            --text-color: #333;
            --light-text: #666;
            --white: #fff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--secondary-color);
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .why-choose-us {
            max-width: 1200px;
            margin: 50px auto;
            padding: 0 20px;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .section-header h1 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .section-header p {
            font-size: 1.1rem;
            color: var(--light-text);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .steps-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 30px;
        }
        
        .step-card {
            flex: 1 1 300px;
            background: var(--white);
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .step-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .step-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }
        
        .step-number:after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 40px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .step-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text-color);
        }
        
        .step-card p {
            color: var(--light-text);
            margin-bottom: 20px;
        }
        
        .step-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 0;
            background-color: var(--primary-color);
            transition: height 0.3s ease;
        }
        
        .step-card:hover:before {
            height: 100%;
        }
        
        @media (max-width: 768px) {
            .steps-container {
                flex-direction: column;
            }
            
            .section-header h1 {
                font-size: 2rem;
            }
        }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.

// Animation for step cards
        document.addEventListener('DOMContentLoaded', function() {
            const stepCards = document.querySelectorAll('.step-card');
            
            // Add animation on scroll
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });
            
            // Set initial state and observe
            stepCards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = `opacity 0.5s ease ${index * 0.1}s, transform 0.5s ease ${index * 0.1}s`;
                observer.observe(card);
            });
            
            // Add hover effect with JS fallback for touch devices
            stepCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.classList.add('hover');
                });
                
                card.addEventListener('mouseleave', function() {
                    this.classList.remove('hover');
                });
            });
        });