Service Box — стиль 26

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

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

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<span>01</span>
<h3>web<br>design</h3>
</div>
<div class="service-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc tellus, auctor eu sollicitudin a, molestie sed neque. Morbi gravida ornare. </p>
<a class="read" href="#">more</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align: center;
}
.serviceBox .service-icon{
width: 229px;
height: 229px;
border-radius: 50%;
background: transparent;
border: 13px solid #c9d1d8;
margin: 0 auto 37px;
padding: 35px 0 0;
transition: all 0.25s ease 0s;
}
.serviceBox:hover .service-icon{
background:#293f4c;
}
.serviceBox .service-icon span{
border-bottom: 5px solid #317da9;
color: #317da9;
display: inline-block;
font: bold 48px/54px "Arial Black";
margin-bottom: 16px;
transition: all 0.25s ease 0s;
}
.serviceBox:hover .service-icon span{
color: #fff;
border-bottom: 5px solid #fff;
}
.serviceBox .service-icon h3{
color: #293f4c;
display: block;
font: bold 18px/24px "Arial";
margin-top: 0;
text-transform: capitalize;
transition: all 0.25s ease 0s;
}
.serviceBox:hover .service-icon h3{
color: #fff;
}
.serviceBox .service-content p {
color: #4d6574;
font: 12px/24px "Arial";
margin-bottom: 29px;
}
.serviceBox .read {
background: #293f4c;
color: #fff;
display: inline-block;
font: bold 16px/53px "Arial";
padding: 0 32px;
text-transform: capitalize;
transition: all 0.25s ease 0s;
}
.serviceBox:hover .read{
background: #327fab;
text-decoration: none;
}
@media screen and (max-width: 990px){
.serviceBox{
margin-bottom: 30px;
}
}

Теги: