You can use these service cards to make your website beautiful. Below is the service style code on how to use them.
In this article, I have provided a step-by-step guide on how to accomplish this for your own website service card.
HTML COde:
<!-- BOX DESIGN -->
<section class="box_design text-center">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="box1">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content_box">
<h2>this is box style</h2>
<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box1">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content_box">
<h2>this is box style</h2>
<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box1">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content_box">
<h2>this is box style</h2>
<p>Dear Hiring manager, I am very excited about your project “Put the Job Title Here” that you posted recent. I have much knowledge about this work. Already I have </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BOX DESIGN -->
CSS Code
.box1{
background-color:#000;
box-sizing:border-box;
overflow:hidden;
border-radius:10px;
position:relative;
}
.icon{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#f00;
transition:1s;
z-index:1;
}
.box1:hover .icon{
top:20px;
left: calc(50% - 40px);
width:80px;
height:80px;
border-radius:50%;
}
.icon i{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
font-size:80px;
transition:1s;
color:#fff;
}
.box1:hover .icon i{
font-size:40px;
}
.box1 .content_box{
margin-top:100px;
height:calc(100% - 100px);
box-sizing:border-box;
text-align:center;
padding:20px;
}
.content_box h2{
color:#fff;
font-size:20px;
font-weight:bold;
font-family:arial;
text-transform:uppercase;
}
.content_box p{
color:#fff;
font-size:16px;
font-weight:500;
font-family:arial;
}