Service Box — стиль 5

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

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

<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="serviceBox">
<div class="service-icon">
<a href=""><i class="fa fa-mobile"></i></a>
</div>
<div class="service-content">
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tellus leo, nec ullamcorper tellus vestibulum.</p>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding:30px 0;
text-align: center;
background: #E75D5D;
color: #ffffff;
}
.serviceBox.yellow{
background: #F1A733;
}
.serviceBox.green{
background: #5EB28F;
}
.serviceBox .service-icon {
background: none repeat scroll 0 0 #fff;
border-radius: 100px;
height: 70px;
line-height: 73px;
width: 70px;
margin: 0 auto;
}
.serviceBox .service-icon a {
font-size: 30px;
}
.serviceBox h3 {
font: 600 17px/18px "arial";
}
.serviceBox p {
font: lighter 14px/21px;
padding: 0 20px;
font-family: 'Open Sans', sans-serif;
}
.serviceBox .drag-icon {
background: none repeat scroll 0 0 #dc3d3d;
padding: 13px;
}
.serviceBox .drag-icon a{
color: #fff;
font-size: 20px;
}
@media screen and (max-width: 767px){
.serviceBox{
margin-bottom: 30px;
}
}

Теги: