Service Box — стиль 20

Подробное описание и демонстрация работы блока о нас под номером №20 для библиотеки 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">
<a href="#">
<i class="fa fa-globe"></i>
</a>
</div>
<div class="service-content">
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales eros sed interdum pretium. Pellentesque sed sem cursus ipsum convallis.</p>
</div>
<div class="read">
<a href="#">MORE</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding: 30px 0;
text-align: center;
}
.serviceBox .service-icon {
background: #fff;
border: 5px solid #ff7f66;
border-radius: 15px;
width: 120px;
height: 120px;
line-height: 130px;
margin: 0 auto;
}
.serviceBox .service-icon i {
color: #3e454c;
font-size: 50px;
}
.serviceBox h3{
font: 300 25px/35px sans-serif;
margin-top: 20px;
text-transform: uppercase;
}
.serviceBox p{
color: #a9a8a8;
font: 14px/24px sans-serif;
margin: 15px 0 30px;
padding: 0 20px;
}
.serviceBox .read a{
border: 1px solid #ff7f66;
background: #ff7f66;
border-radius: 5px;
color: #fff;
font: lighter 13px/18px;
padding: 14px 23px;
display: inline-block;
transition: all 0.3s ease 0s;
}
.serviceBox .read a:hover{
background: #fff;
border: 1px solid #ccc;
color: #FF7F66;
text-decoration: none;
}
@media screen and (max-width: 767px){
.serviceBox{
padding: 20px 0;
}
.serviceBox p{
margin: 20px 0;
}
}

Теги: