Подробное описание и демонстрация работы блока о нас под номером №8 для библиотеки 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. Pellentesque volutpat pretium. </p> </div> <a href="#" class="btn btn-default">Read more</a> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{
border-right: 1px solid #d3d3d3;
padding: 25px;
text-align: center;
transition: all 0.3s ease 0s;
margin: 0 -15px;
}
.serviceBox.last{
border-right:none;
}
.serviceBox .service-icon i{
font-size: 60px;
}
.serviceBox .service-content h3{
color: black;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
.serviceBox .service-content p{
font-size: 12px;
}
.serviceBox a.btn{
background: hsl(0, 0%, 60%) none repeat scroll 0 0;
border: 2px solid hsl(0, 0%, 60%);
color: hsl(0, 0%, 100%);
display: inline-block;
padding: 7px 10px;
text-transform: uppercase;
border-radius: 0;
font-size: 12px;
font-weight: normal;
}
.serviceBox:hover{
background:#4aa3df;
}
.serviceBox:hover .service-icon i{
color:#fff;
}
.serviceBox:hover .service-content h3{
color:#fff;
}
.serviceBox:hover .service-content p{
color:#fff;
}
.serviceBox:hover a{
background:#fff;
color:#000;
border: 2px solid #fff;
}
.serviceBox a:hover{
background:#4aa3df;
border: 2px solid #fff;
color: hsl(0, 0%, 100%);
}
@media only screen and (max-width: 990px){
.serviceBox{
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px){
.serviceBox{
margin: 0;
border-right: 0px none;
}
}