Cara membuat service section di halaman utama blog

By Aru 2/16/2021

Share Tweet Share Email

Cara membuat service section di halaman utama blog

 
Kode CSS nya :

/* Service Section */
#intro-services-wrap{position:relative;float:left;width:100%;background-color:#f7f9fb;padding:80px 0;margin:50px auto;overflow:hidden}
#intro-services-wrap .container{position:relative;margin:0 auto}
#intro-services{display:block;margin:0 -20px}
.service-content{background:#fff;display:block;text-align:center;float:left;width:calc(100% / 3.2);box-sizing:border-box;padding:30px 20px;margin:0 15px;border-radius:7px;box-shadow:0 20px 25px -10px rgba(113,162,223,.2);transition:initial}
.service-content:nth-child(1){margin:0 15px 0 0}
.service-content:nth-child(3){margin:0 0 0 15px}
.service-content:hover{box-shadow:0 0 0 3px rgba(113,162,223,.2)}
.service-content:nth-child(1):hover{box-shadow:0 0 0 3px rgba(231,76,60,.5)}
.service-content:nth-child(2):hover{box-shadow:0 0 0 3px rgba(9,132,227,.5)}
.service-content:nth-child(3):hover{box-shadow:0 0 0 3px rgba(243,156,18,.5)}
.service-icon{display:inline-block;width:70px;height:70px;text-align:center;border-radius:100%;overflow:hidden}
.service-icon i{display:block;font-size:30px;color:#222;line-height:70px;font-weight:500;font-style:normal;margin:0}
.service-icon i.fa.fa-magic{color:#e74c3c}
.service-icon i.fa.fa-code{color:#0984e3}
.service-icon i.fa.fa-paper-plane-o{color:#f39c12}
.service-title{font-size:16px;color:#222;font-weight:700;margin:25px 0 15px}
.service-snippet{font-size:14px;line-height:24px;margin:0}

Kode HTML nya :

<div id='intro-services-wrap'>
<div class='head-text section'>
<h3 class='title'>
            Services
         </h3>
<p>Lorem Ipsum has been the industry's standard dummy text</p>
</div>
<div class='clear'></div>
<div class='container row'>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-magic'></i></span>
<h3 class='service-title'>Branding And Identity</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-code'></i></span>
<h3 class='service-title'>Web Development</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
<div class='service-content animatable bounceIn'>
<span class='service-icon'><i class='fa fa-paper-plane-o'></i></span>
<h3 class='service-title'>Social Media Marketing</h3>
<p class='service-snippet'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</p>
</div>
</div>
</div>
<div class='clear'></div>