Service Box — стиль 38

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

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

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!

подробнее

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!

подробнее

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!

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

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<h3 class="title">Web Design</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!
</p>
<a href="#" class="read">Read More</a>
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<h3 class="title">Web Development</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eaque natus obcaecati quaerat quas ratione!
</p>
<a href="#" class="read">Read More</a>
<div class="service-icon">
<i class="fa fa-rocket"></i>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding: 20px 0;
position: relative;
overflow: hidden;
z-index: 1;
}
.serviceBox .title{
font-size: 18px;
font-weight: 800;
color: #626262;
margin-bottom: 15px;
transition: all 0.5s ease 0s;
}
.serviceBox:hover .title{
color: #6c1d8c;
}
.serviceBox .description{
font-size: 14px;
color: #575a5e;
margin-bottom: 20px;
z-index: 1;
}
.serviceBox .read{
display: inline-block;
padding: 10px 15px;
background: #fadbea;
font-size: 14px;
color: #74628c;
border-radius: 0 20px;
transition: all 0.5s ease 0s;
}
.serviceBox:hover .read{
background: #6c1d8c;
color: #fdfffc;
}
.serviceBox .service-icon i{
font-size: 70px;
color: #fadbea;
position: absolute;
bottom: 10px;
right: 10px;
z-index: -1;
transform: rotate(45deg) scale(1);
transition: all 0.5s ease 0s;
}
.serviceBox:hover .service-icon i{
transform: rotate(0deg) scale(0.8);
}



Теги:
0

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

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