Here’s how to recreate the Service Cards layout you showed in the image using HTML and CSS, with responsive design and hover effects similar to your reference:
Key Features:
Clean responsive card layout
Top image
Centered circular icon over image
Title, description, “Read More” button
Bottom-right number with opacity
Create index.html file and copy code and paste code our layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Services Card Design Section By Mycodingtutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Top Services Title Section -->
<section class="top-section">
<h2>Our Top Services</h2>
</section>
<!-- Service Cards -->
<div class="card-wrapper">
<!-- Card 1 -->
<div class="service-card">
<div class="card-image">
<img src="image/image.jpg" alt="Service Image">
<div class="icon-wrapper"><i class="fas fa-hand-holding-usd"></i></div>
</div>
<div class="card-content">
<h3>Easy System & Trusted, Save your Money</h3>
<p>Sit amet consectetur adipiscing elites varius montes, massa blandit orci.</p>
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
<div class="card-number">1</div>
</div>
</div>
<!-- Card 2 -->
<div class="service-card">
<div class="card-image">
<img src="image/image1.jpg" alt="Service Image">
<div class="icon-wrapper"><i class="fas fa-headset"></i></div>
</div>
<div class="card-content">
<h3>Dedicated Customer Support Team Member</h3>
<p>Sit amet consectetur adipiscing elites varius montes, massa blandit orci.</p>
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
<div class="card-number">2</div>
</div>
</div>
<!-- Card 3 -->
<div class="service-card">
<div class="card-image">
<img src="image/image11.jpg" alt="Service Image">
<div class="icon-wrapper"><i class="fas fa-briefcase"></i></div>
</div>
<div class="card-content">
<h3>Corporate Professional Insurance Liability</h3>
<p>Sit amet consectetur adipiscing elites varius montes, massa blandit orci.</p>
<a href="#" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
<div class="card-number">3</div>
</div>
</div>
</div>
</body>
</html>
Create style.css file and copy code and paste code our layout.
body {
font-family: 'Segoe UI', sans-serif;
background: #f6f8fd;
padding: 20px 20px;
}
/* Top Title Section */
.top-section {
text-align: center;
max-width: 800px;
margin: 0 auto 30px;
}
.top-section h2 {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 15px;
}
.top-section p {
font-size: 16px;
color: #555;
line-height: 1.6;
}
/* Card Grid */
.card-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1100px;
margin: auto;
}
.service-card {
background: white;
border-radius: 16px;
box-shadow: 0 10px 25px rgb(0 0 0 / 11%);
overflow: hidden;
position: relative;
transition: transform 0.3s;
}
.service-card:hover {
transform: translateY(-6px);
}
.card-image {
position: relative;
}
.card-image img {
width: 100%;
object-fit: cover;
display: block;
border-radius: 20px;
border-bottom: 10px solid #efefef;
}
.service-card:hover .card-image img {
border-bottom: 10px solid #1a73e8;
}
.service-card:hover .card-image .icon-wrapper{
background-color: #1a73e8;
color: #fff;
}
.service-card .card-image .card-content:hover .card-number{
color: #1a73e8;
}
.service-card .card-content:hover .card-number {
color: #1a73e8;
}
.icon-wrapper {
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 50%;
padding: 15px 19px 15px 19px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
font-size: 24px;
color: #1a73e8;
}
.card-content {
padding: 35px 20px 20px;
text-align: left;
position: relative;
}
.card-content h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #1a1a1a;
}
.card-content p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.read-more {
font-size: 14px;
color: #1a73e8;
font-weight: 500;
text-decoration: none;
}
.read-more i {
margin-left: 6px;
}
.card-number {
position: absolute;
bottom: 15px;
right: 20px;
font-size: 48px;
font-weight: bold;
color: #e0e7ff;
z-index: 0;
user-select: none;
}
@media (max-width: 768px) {
.card-content {
padding: 50px 15px 20px;
}
.top-section h2 {
font-size: 24px;
}
.top-section p {
font-size: 15px;
}
}What You Can Customize:
- Update icons from Font Awesome.
- Modify the
top-sectiontext to match your content. - Add animation or gradient hover if needed.
