If you need to showcase your own service like a professionaly so this tutorial only for you because I share all the source code with you.
If you want to showcase your services in a professional way, this tutorial is for you. I’m sharing the complete source code so you can use it directly.
Use code in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Card</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<main class="container">
<div class="wrapper">
<h1>01</h1>
<div class="back"></div>
<div class="inner">
<div class="icondiv">
<i class="fa-solid fa-code"></i>
</div>
<div class="contentdiv">
<h1>Web Developer</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="title"></div>
</div>
<div class="wrapper">
<h1>02</h1>
<div class="back"></div>
<div class="inner">
<div class="icondiv">
<i class="fa-solid fa-database"></i>
</div>
<div class="contentdiv">
<h1>SEO Executive</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="title"></div>
</div>
<div class="wrapper">
<h1>03</h1>
<div class="back"></div>
<div class="inner">
<div class="icondiv">
<i class="fa-solid fa-desktop"></i>
</div>
<div class="contentdiv">
<h1>Computer Analysis</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="title"></div>
</div>
<div class="wrapper">
<h1>04</h1>
<div class="back"></div>
<div class="inner">
<div class="icondiv">
<i class="fa-solid fa-marker"></i>
</div>
<div class="contentdiv">
<h1>Content Writer</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="title"></div>
</div>
</main>
</body>
</html>
Use code in CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
.container{
width: 100%;
height: 100vh;
background-color: #ffce9f;
display: flex;
padding: 20px;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.wrapper{
width: 350px;
height: 100px;
background-color: rgb(219, 219, 219);
border-radius: 10px;
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.wrapper > h1{
color: white;
z-index: 5;
position: absolute;
top: 15px;
font-size: 50px;
left: 25px;
}
.wrapper .inner{
width: 100%;
height: 100%;
background-color: #f0fffe;
border-radius: 10px;
display: flex;
z-index: 1;
}
.inner .icondiv{
width: 50%;
height: 100%;
/* background-color: #006cdf; */
display: flex;
justify-content: end;
align-items: center;padding-right: 10px;
}
.inner .icondiv i{
font-size: 35px;
color: #5520ff;
}
.inner .contentdiv{
width: 50%;
height: 100%;
/* background-color: red; */
padding-left: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
.inner .contentdiv h1{
font-size: 15px;
color: #5520ff;
}
.inner .contentdiv p{
font-size: 8px;
}
.title{
width: 150px;
height: 150px;
background-color: #5520ff;
border-radius: 30px;
position: absolute;
transform: rotate(-140deg)translateY(-45px)translateX(30px);
left: 0;
z-index: 1;
transition: 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}
.wrapper .back{
width: 150px;
height: 150px;
background-color: #5520ff;
position: absolute;
right: -80px;
top: -80px;
transform: rotate(80deg);
border-radius: 0px;
transition: 0.3s ease;
}
.wrapper:hover .title{
transform: translateX(-45px);
}
.wrapper:nth-child(2) .back{
background-color: rgb(33, 165, 0);
}
.wrapper:nth-child(2) .title{
background-color: rgb(33, 165, 0);
}
.wrapper:nth-child(2) i{
color: rgb(33, 165, 0);
}
.wrapper:nth-child(2) .contentdiv h1{
color: rgb(33, 165, 0);
}
.wrapper:nth-child(3) .back{
background-color: rgb(236, 50, 3);
}
.wrapper:nth-child(3) .title{
background-color: rgb(236, 50, 3);
}
.wrapper:nth-child(3) i{
color: rgb(236, 50, 3);
}
.wrapper:nth-child(3) .contentdiv h1{
color: rgb(236, 50, 3);
}
.wrapper:nth-child(4) .back{
background-color: rgb(0, 118, 214);
}
.wrapper:nth-child(4) .title{
background-color: rgb(0, 118, 214);
}
.wrapper:nth-child(4) i{
color: rgb(0, 118, 214);
}
.wrapper:nth-child(4) .contentdiv h1{
color: rgb(0, 118, 214);
}