Service Box — стиль 27

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

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3> Web Development </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum porta blandit. Fusce auctor risus turpis, et sodales sapien interdum at. Aenean sodales sed nibh ac tincidunt. Maecenas. </p>
</div>
<div class="read">
<a href="#">More</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox {
background: #fff;
text-align: center;
padding: 0 0 25px;
box-shadow: 0 2px 5px 0 #888282;
border-top: 10px solid #ff8b3d;
margin-top: 55px;
}
.serviceBox .service-icon {
width: 130px;
height: 130px;
line-height: 144px;
border-radius: 50%;
background: #fff;
border: 5px solid #5e5e5e;
margin: -65px auto 0;
}
.serviceBox .service-icon i{
color: #c2c2c2;
font-size: 55px;
}
.serviceBox .service-content{
padding: 0 25px;
}
.serviceBox .service-content h3{
color: #1e2731;
font: bold 24px/40px 'arial';
text-transform: uppercase;
margin: 30px 0 10px;
}
.serviceBox .service-content p{
font: lighter 13px/20px "verdana";
color: #A2A2A2;
margin: 0 0 20px;
}
.serviceBox .read{
padding: 30px 0;
}
.serviceBox .read a{
border: 4px solid #ff8b3d;
padding: 9px 25px;
font: 600 14px/18px "arial";
color: #ff8b3d;
text-transform: uppercase;
}
.serviceBox .read a:hover{
background: #ff8b3d;
color: #000;
text-decoration: none;
}
@media screen and (max-width: 990px){
.serviceBox{  margin-top: 80px; }
}

Теги: