Service Box — стиль 48

Подробное описание и демонстрация работы блока о нас под номером №48 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.

html разметка для реализации блока о компании

<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<span class="service-icon">1</span>
<h3 class="title">Web Design</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.</p>
<a href="#" class="read-more">read more</a>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<span class="service-icon">2</span>
<h3 class="title">Brand Building</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec accumsan risus. Etiam vel viverra nunc, vel.</p>
<a href="#" class="read-more">read more</a>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации блока о компании

.demo{ background: #eef7f9; }
.serviceBox{
border-bottom: 4px solid #d0dde4;
border-right: 4px solid #d0dde4;
background: #fff;
padding: 30px 40px 27px;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover{
border-color: #27c9c6;
}
.serviceBox .service-icon{
display: block;
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 50%;
background: #27c9c6;
text-align: center;
float: left;
font-size: 20px;
color: #fff;
margin: 0 20px 0 0;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox .title{
display: inline-block;
font-size: 20px;
color: #041829;
border-bottom: 3px solid #d9e7ed;
padding-bottom: 6px;
margin: 0 0 20px 0;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover .title{
border-color: #27c9c6;
}
.serviceBox .description{
font-size: 18px;
color: #929a9c;
margin: 0 0 11px 0;
}
.serviceBox .read-more{
display: inline-block;
font-size: 16px;
font-weight: 500;
color: #27c9c6;
text-transform: capitalize;
}
.serviceBox .read-more:hover{
letter-spacing: 0.3px;
color: #27c9c6;
}
.serviceBox .read-more:after{
content: "f0da";
font-family: "Font Awesome 5 Free"; font-weight: 900;
font-size: 16px;
color: #27c9c6;
margin-left: 7px;
transition: all 0.2s ease 0s;
}
@media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 30px; }
}

Теги: