How To Create Stylist Services Card With HTML And CSS3

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;
}

This button referral link: