Service Box — стиль 30

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

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

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

Это текст специально написан для демонстрации работы эффекта. Duis ut quam arcu. Proin nunc.

Брендирование

Это текст специально написан для демонстрации работы эффекта. Duis ut quam arcu. Proin nunc.

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

Это текст специально написан для демонстрации работы эффекта. Duis ut quam arcu. Proin nunc.

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

<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc.</p>
</div>
</div>

<div class="col-sm-4">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-rocket"></i>
</div>
<h3>Brand Building</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam arcu. Proin nunc.</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding: 20px 0;
text-align: center;
border-bottom: 3px solid transparent;
position: relative;
transition: all 0.5s ease-in-out;
}
.serviceBox:hover{
border-bottom-color: #e64b6e;
}
.serviceBox:after{
content: "";
position: absolute;
bottom: 0px;
border: 9px solid transparent;
border-top-color: transparent;
transform: rotate(180deg);
transition: all 0.4s ease-in-out;
}
.serviceBox:hover:after{
border-top-color: #e64b6e;
}
.serviceBox .service-icon{
width: 120px;
height: 120px;
line-height: 120px;
border-radius: 50%;
margin: 0 auto;
background: #e3e0e0;
color: #7e828a;
font-size: 50px;
margin-bottom: 40px;
transition: all 0.5s ease-in-out;
}
.serviceBox:hover .service-icon{
background: #e64b6e;
color: #fff;
}
.serviceBox h3{
font-size: 18px;
line-height: 20px;
font-family: sans-serif;
margin: 20px 0;
color: #7e828a;
}
.serviceBox p{
font-size: 14px;
color: #7e828a;
}
@media screen and (max-width: 767px){
.serviceBox{ margin-bottom: 10px; }
}



Теги:
0

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

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