Service Box — стиль 6

Подробное описание и демонстрация работы блока о нас под номером №6 для библиотеки 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 purple">
<i class="fa fa-shopping-cart"></i>
</div>
<div class="service-content">
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris est, faucibus at. </p>
</div>
<a href="#" class="btn btn-default purple">Read more</a>
</div>
</div>
</div>
</div>

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

.serviceBox {
background:hsl(0, 0%, 100%);
border: 2px solid hsl(0, 0%, 100%);
border-radius: 4px;
margin-top: 40px;
padding: 0 30px 40px;
text-align: center;
}
.serviceBox .service-icon{
position: relative;
}
.serviceBox .service-icon::after {
border-radius: 50%;
box-sizing: content-box;
content: "";
height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
}
.serviceBox .service-icon.purple i {
background:#7248F5;
}
.serviceBox .service-icon.light-blue i {
background:#1DCFD1;
}
.serviceBox .service-icon.orange i {
background:#F05135;
}
.serviceBox .service-icon.green i {
background:#92D11D;
}
.serviceBox .service-icon i {
border: 2px solid hsl(192, 24%, 96%);
border-radius: 50%;
color: hsl(0, 0%, 100%);
display: block;
font-size: 28px;
height: 80px ;
line-height: 80px;
margin: -40px auto 0;
position: relative;
top: 0;
width: 80px;
}
.serviceBox a{
border: none;
}
.serviceBox a:hover{
background: none;
color: #000000;
}
.serviceBox a.purple{
color:#7248F5;
}
.serviceBox a.light-blue{
color:#1DCFD1;
}
.serviceBox a.orange{
color:#F05135;
}
.serviceBox a.green{
color:#92D11D;
}
.serviceBox .service-content h3{
font-size:16px;
margin-top:35px;
color:#000000;
}
.serviceBox .service-content p{
line-height:25px;
}
@media only screen and (max-width: 990px){
.serviceBox{
margin-bottom: 20px;
}
}

Теги: