Service Box — стиль 58

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

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

<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="serviceBox">
<i class="fa fa-globe service-icon"></i>
<div class="service-content">
<h5 class="title">Web Design</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
<a href="#" class="read-more">+</a>
</div>
</div>
</div>

<div class="col-sm-4">
<div class="serviceBox">
<i class="fa fa-rocket service-icon"></i>
<div class="service-content">
<h5 class="title">Web Development</h5>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
<a href="#" class="read-more">+</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding-left: 30px;
position: relative;
}
.serviceBox:before{
content: "";
width: 60px;
height: 60px;
background: #de7f49;
position: absolute;
top: 20px;
left: 5px;
z-index: 1;
}
.serviceBox .service-icon{
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #de7f49;
font-size: 30px;
color: #fff;
position: absolute;
top: 15px;
left: 0;
z-index: 1;
}
.serviceBox .service-content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: #d5d5d5 #d5d5d5 #3f4147;
position: relative;
transition: all 0.4s ease-in-out 0s;
}
.serviceBox:hover .service-content{
background: #3f4147;
border-color: #3f4147;
}
.serviceBox .title{
font-size: 18px;
font-weight: 600;
color: #333;
padding-left: 30px;
margin-bottom: 35px;
text-transform: capitalize;
transition: all 0.4s ease-in-out 0s;
}
.serviceBox:hover .title{
color: #fff;
}
.serviceBox .description{
font-size: 14px;
color: #858585;
margin: 0;
}
.serviceBox .read-more{
display: inline-block;
width: 32px;
height: 30px;
line-height: 30px;
background: #3f4147;
font-size: 20px;
font-weight: 900;
color: #fff;
position: absolute;
bottom: 0;
right: -1px;
text-align: center;
transition: all 0.4s ease-in-out 0s;
}
.serviceBox .read-more:hover{
background: #2a2b2c;
}
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 50px; }
}

Теги: