Service Box — стиль 82

Подробное описание и демонстрация работы блока о нас под номером №82 для библиотеки Bootstrap. Html и CSS код для реализации блока service box на сайте как на изображении.

Демо CSS блока о сервисе — стиль 82

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Создание сайтов

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

Адаптивный дизайн

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.

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>
<h3 class="title">Web Design</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.
</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon"><i class="fa fa-rocket"></i></div>
<h3 class="title">Web Development</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequuntur, deleniti eaque excepturi.
</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding: 35px 20px 25px;
border: 1px solid #f4f4f4;
text-align: center;
position: relative;
transition: all 0.3s ease 0s;
}
.serviceBox:hover{ border-color: #727cb6 ; }
.serviceBox:before{
content: "";
border-top: 20px solid #f7f7f7;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
top: 7px;
right: 7px;
transition: all 0.3s ease 0s;
}
.serviceBox:hover:before{ border-top-color: #727cb6 ; }
.serviceBox .service-icon{
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 30px;
color: #064774;
margin-bottom: 35px;
z-index: 1;
position: relative;
transition:all 0.3s ease 0s;
}
.serviceBox:hover .service-icon{ color: #fff; }
.serviceBox .service-icon:before{
content: "";
width: 100%;
height: 100%;
border-radius: 3px;
border: 1px solid #f4f4f4;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transform: rotate(45deg);
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon:before{
border-color: #727cb6 ;
background: #727cb6 ;
}
.serviceBox .title{
font-size: 20px;
font-weight: 700;
color: #064774;
text-transform: capitalize;
margin: 0 0 15px 0;
}
.serviceBox .description{
font-size: 15px;
color: #999;
line-height: 27px;
margin: 0;
}
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *