Service Box — стиль 7

Подробное описание и демонстрация работы блока о нас под номером №7 для библиотеки 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">
<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 eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec.
</p>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align:center;
}
.serviceBox .service-icon::before{
right: 79px;
top: 33px;
}
.serviceBox .service-icon::after {
left:79px;
top:33px;
}
.serviceBox .service-icon::before, .serviceBox .service-icon::after {
background: hsl(0, 0%, 100%) none repeat scroll 0 0;
border-bottom: 1px solid hsl(212, 16%, 61%);
border-top: 1px solid hsl(212, 16%, 61%);
content: " ";
height: 14px;
position: absolute;
transition: all 0.4s ease 0s;
width: 45px;
}
.serviceBox .service-icon {
background: hsl(0, 0%, 100%) none repeat scroll 0 0;
border: 1px solid hsl(212, 16%, 61%);
border-radius: 82px;
display: inline-block;
height: 82px;
line-height: 92px;
margin-bottom: 28px;
position: relative;
transition: all 0.4s ease 0s;
width: 82px;
text-align: center;
}
.serviceBox .service-icon i{
color: hsl(212, 16%, 61%);
font-size:22px;
transition: all 0.4s ease 0s;
}
.serviceBox .service-content h3 {
color:#dc005a;
font-size: 20px;
line-height: 1;
margin-bottom: 27px;
margin-top: 0;
}
.serviceBox .service-content p {
color: hsl(212, 16%, 61%);
font-size: 12.5px;
line-height: 25px;
margin: 0;
padding: 0 15px;
}
.serviceBox:hover .service-icon::before, .serviceBox:hover .service-icon::after, .serviceBox:hover .service-icon{
border-color: #dc005a;
}
.serviceBox:hover .service-icon i{
color: #dc005a;
transition: all 0.4s ease 0s;
}
@media only screen and (max-width: 990px){
.serviceBox{
margin-bottom: 20px;
}
}

Теги: