Подробное описание и демонстрация работы блока о нас под номером №29 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 29
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="serviceBox yellow"> <div class="service-icon"> <a href="#"><i class="fa fa-globe"></i></a> </div> <div class="service-content"> <h3> Web Development </h3> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi risus, condimentum et orci quis, gravida maximus mauris. Praesent varius dolor eget ligula gravida mollis. Praesent ac. </p> </div> <div class="read"> <a href="#"><i class="fa fa-times"></i></a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{
padding: 10px 0 30px;
text-align: center;
background: #f2f2f2;
}
.serviceBox .service-icon{
padding: 25px 30px;
}
.serviceBox .service-icon a{
color: #fff;
font-size: 50px;
}
.serviceBox .service-content{
padding: 0 50px;
color: #6c6060;
}
.serviceBox .service-content h3{
font-size: 22px;
text-transform: uppercase;
}
.serviceBox .service-content hr{
background: #b4b4b4;
height: 1px;
}
.serviceBox .service-content p{
font-size: 14px;
text-align: justify;
}
.serviceBox .read{
overflow: hidden;
}
.serviceBox .read a{
display: block;
width: 40px;
height: 40px;
line-height: 42px;
font-size: 19px;
color: #fff;
background: #b7b7b7;
float: right;
}
.serviceBox.yellow .service-icon,
.serviceBox.yellow:hover .read a{
background: #f1bb40;
}
.serviceBox.yellow:hover h3{
color:#f1bb40;
}
.serviceBox.green .service-icon,
.serviceBox.green:hover .read a{
background: #01a89e;
}
.serviceBox.green:hover h3{
color:#01a89e;
}
.serviceBox.pink .service-icon,
.serviceBox.pink:hover .read a{
background: #d66c9a;
}
.serviceBox.pink:hover h3{
color:#d66c9a;
}
@media screen and (max-width: 990px){
.serviceBox{ margin-bottom: 30px; }
}
@media screen and (max-width: 479px){
.serviceBox .service-content{
padding: 0 30px;
}
}