Service Box — стиль 31

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

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

<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">Designer</h3>
<h5 class="sub-title">Lorem ipsum dolor</h5>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.
</p>
<a href="#" class="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">Manager</h3>
<h5 class="sub-title">Lorem ipsum dolor</h5>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae tortor et lacus congue tincidunt sed vel lectus. Cras elementum urna non ornare laoreet. Cras auctor vitae ligula eget pharetra. Cras ultrices tortor vitae tellus commodo euismod. Duis sollicitudin urna.
</p>
<a href="#" class="read">more</a>
</div>
</div>
</div>
</div>

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

.serviceBox{
background: #26b9d3;
padding: 30px 25px;
transition: all 0.6s ease 0s;
}
.serviceBox:hover{
background: #2b2a28;
}
.serviceBox .service-icon{
width: 130px;
height: 130px;
line-height: 130px;
border-radius: 50%;
background: #fff;
display: inline-block;
font-size: 74px;
font-weight: bold;
color: #26b9d3;
text-align: center;
}
.serviceBox .title{
font-size: 50px;
color: #fff;
line-height: 50px;
margin: 30px 0;
}
.serviceBox .sub-title{
font-size: 20px;
letter-spacing: 1px;
color: #fff;
margin-bottom: 12px;
}
.serviceBox .description{
font-size: 14px;
color: #fff;
line-height: 26px;
margin: 20px 0 30px 0px;
}
.serviceBox .read{
display: inline-block;
width: 124px;
height: 50px;
position: relative;
overflow: hidden;
font-size: 20px;
color: #2795a8;
background: #fff;
line-height: 50px;
text-align: center;
text-transform: uppercase;
z-index: 1;
transition: all 0.3s ease 0s;
}
.serviceBox .read:hover{
color: #fff;
}
.serviceBox .read:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 100%;
left: 0;
background: #26b9d3;
color: #fff;
z-index: -1;
transition: all 0.3s ease 0s;
}
.serviceBox .read:hover:before {
top: 0;
}
@media screen and (max-width: 990px){
.serviceBox{ margin-bottom: 30px; }
.serviceBox .description{ margin: 20px 0; }
}

Теги: