Подробное описание и демонстрация работы блока о нас под номером №24 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.
Демо CSS блока о сервисе — стиль 24
WEB DESIGN
Это текст специально написан для демонстрации работы эффекта. Ut vehicula turpis at nisl fringilla, sed malesuada metus volutpat. In condimentum mi id fringilla maximus.
Web Development
Это текст специально написан для демонстрации работы эффекта. Ut vehicula turpis at nisl fringilla, sed malesuada metus volutpat. In condimentum mi id fringilla maximus.
Responsive Desgin
Это текст специально написан для демонстрации работы эффекта. Ut vehicula turpis at nisl fringilla, sed malesuada metus volutpat. In condimentum mi id fringilla maximus.
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="serviceBox"> <div class="service-icon"> 01 </div> <div class="service-content"> <h3 class="title"> <span>WEB</span> DESIGN</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula turpis at nisl fringilla, sed malesuada metus volutpat. In condimentum mi id fringilla maximus. </p> </div> <div class="read"> <a href="#">Read more</a> </div> </div> </div> </div> </div>css разметка для реализации блока о компании
.serviceBox{
background:#fcf4f4;
padding: 35px 0 1px;
text-align: center;
}
.serviceBox:hover{
background: #fff;
box-shadow:0 0px 10px #C9C9C9;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
}
.serviceBox .service-icon{
width: 100px;
height: 100px;
border-radius: 50%;
background: #31353d;
color: #fff;
font: lighter 50px/100px "Times New Roman",Arial;
margin: 0 auto;
}
.serviceBox:hover .service-icon{
background: #8dbf41;
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
}
.serviceBox .title{
color: #31353d;
font: lighter 40px/40px "Times New Roman",Arial;
}
.serviceBox .title span {
color: #8dbf41;
font: lighter 40px/40px "Times New Roman",Arial;
display: block;
}
.serviceBox .description{
color: #31353d;
padding: 0 16px;
font: lighter 14px/23px "Times New Roman",Arial;
margin:25px 0 60px;
}
.serviceBox .read a {
background: #8dbf41;
display: inline-block;
padding: 12px 20px;
color: #fff;
font: 500 14px/18px "Arial";
float: left;
}
.serviceBox .read a:hover{
background: #31353d;
color: #fff;
text-decoration: none;
}
@media screen and (max-width: 990px){
.serviceBox{
margin-bottom: 60px;
}
}