→ Alaric Sloane
→ Service Cards with Hover Effects

Service Cards with Hover Effects

service showcase component featuring neuromorphic design cards with smooth hover effects, gradient accents, and responsive layout.

This bootstrap css example is contributed by Alaric Sloane, on 02-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example are Services,Why choose us

Tags: Feature showcase

Author Alaric Sloane

2.6k

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-12 text-center mb-5">
            <span class="custom-badge text-white mb-3 d-inline-block">Our Services</span>
            <h2 class="display-5 fw-bold mb-3">What We Offer</h2>
            <p class="text-muted">Discover our range of professional services tailored to your needs</p>
        </div>
    </div>
    <div class="row g-4">
        <div class="col-md-4">
            <div class="service-card h-100 p-4">
                <div class="icon-wrapper mb-4">
                    <svg width="32" height="32" fill="white" viewBox="0 0 16 16" class="bi bi-laptop">
                        <path
                            d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z" />
                    </svg>
                </div>
                <h4 class="service-title text-center mb-3">Web Development</h4>
                <p class="service-text text-center mb-0">Create stunning, responsive websites tailored to your brand's
                    unique vision and goals.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="service-card h-100 p-4">
                <div class="icon-wrapper mb-4">
                    <svg width="32" height="32" fill="white" viewBox="0 0 16 16" class="bi bi-phone">
                        <path
                            d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                        <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                    </svg>
                </div>
                <h4 class="service-title text-center mb-3">Mobile Apps</h4>
                <p class="service-text text-center mb-0">Build powerful mobile applications that engage users and drive
                    results.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="service-card h-100 p-4">
                <div class="icon-wrapper mb-4">
                    <svg width="32" height="32" fill="white" viewBox="0 0 16 16" class="bi bi-graph-up">
                        <path
                            d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z" />
                    </svg>
                </div>
                <h4 class="service-title text-center mb-3">Analytics</h4>
                <p class="service-text text-center mb-0">Transform your data into actionable insights with our advanced
                    analytics solutions.</p>
            </div>
        </div>
    </div>
</div>

More Examples

HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.3k

v.4.6
Modern Service Cards Component With Icons

Author:
Alaric Sloane

10 months ago

1.8k

v.5.3
Feature Cards
showcases three key features with a clean, minimal design.

Author:
Alaric Sloane

10 months ago

1.9k

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

1 year ago

1.2k

v.4.6
Features section
Showcase features with icons

Author:
Prajwal Hallale

1 year ago

1k

v.4.6
Features Section
with icons

Author:
Anonymous

1 year ago

1.8k

v.5.3
Features section

Author:
Juan Martinez

1 year ago

1.2k

v.5.3
Interactive Service Cards | Bootstrap 5.3
Modern Bootstrap 5.3 component with elegant card rotations and hover animations. Perfect for featuring services, products, or team members

Author:
Anonymous

8 months ago

5.6k

v.5.3
Blurry Loading
Blurry Loading

Author:
Rami AlAjo

6 months ago

1.6k

v.4.6
Feature showcase cards

Author:
Mateo Rojas

8 months ago

936

v.5.3
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

9 months ago

5k

v.4.6
Continue with google button

Author:
Noah Kim

1 year ago

5.5k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent