Service Box — стиль 52

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

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

Заголовок

Это текст специально написан для демонстрации работы эффекта. Nunc at sapien at erat hendrerit.

подробнее

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

Это текст специально написан для демонстрации работы эффекта. Nunc at sapien at erat hendrerit.

подробнее

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

Это текст специально написан для демонстрации работы эффекта. Nunc at sapien at erat hendrerit.

подробнее
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 adipiscing elit. Nunc at sapien at erat hendrerit.</p>
<a href="#" class="read-more">read more</a>
</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 adipiscing elit. Nunc at sapien at erat hendrerit.</p>
<a href="#" class="read-more">read more</a>
</div>
</div>
</div>
</div>

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

.serviceBox{
border: 1px solid #ddd;
text-align: center;
border-radius: 15px;
padding: 25px;
position: relative;
transition: all 0.4s ease-in-out 0s;
}
.serviceBox:hover{
transform: scale(1.05, 1.05);
}
.serviceBox .service-icon{
width: 80px;
height: 80px;
line-height: 70px;
border-radius: 50%;
border: 5px solid #d3ae36;
font-size: 42px;
color: #d3ae36;
margin: 0 auto 30px;
position: relative;
transition: all 0.2s ease-out 0s;
}
.serviceBox:hover .service-icon{
border-color: #a88500;
}
.serviceBox .service-icon i{
transform: rotate(0);
transition: all 0.2s ease-out 0s;
}
.serviceBox:hover .service-icon i{
transform: rotate(360deg);
color: #a88500;
}
.serviceBox .title{
font-size: 20px;
font-weight: bold;
color: #4a4a4a;
line-height: 40px;
margin: 0 0 35px 0;
position: relative;
}
.serviceBox .title:after{
content: "";
display: block;
width: 50px;
height: 4px;
background: #f1f1f1;
margin: 0 auto;
position: absolute;
bottom: -15px;
left: 0;
right: 0;
transition: all 0.2s ease-out 0s;
}
.serviceBox:hover .title:after{
width: 100%;
}
.serviceBox .description{
font-size: 12px;
color: #7a7a7a;
line-height: 24px;
margin-bottom: 20px;
}
.serviceBox .read-more{
display: inline-block;
padding: 8px 22px;
background: #d3ae36;
font-size: 14px;
font-weight: 500;
color: #fff;
text-transform: capitalize;
border-radius: 40px;
transform: scale(1);
transition: all 0.2s ease-out 0s;
}
.serviceBox .read-more:hover{
transform: scale(1.1, 1.1);
}
.serviceBox:hover .read-more{
background: #a88500;
}
@media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 40px; }
}



Теги:
0

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

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