Service Box — стиль 70

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

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

заговолок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<h3 class="title">Web Design</h3>
<i class="fa fa-globe"></i>
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<h3 class="title">Web Development</h3>
<i class="fa fa-briefcase"></i>
</div>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cumque, cupiditate debitis dolorem et fugit hic iusto maxime numquam officia.
</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding: 20px 25px;
border-radius: 5px;
text-align: right;
overflow: hidden;
z-index: 1;
position: relative;
}
.serviceBox:before{
content: "";
width: 100%;
height: 100%;
border-radius: 5px;
background: #094d92;
position: absolute;
top: 0;
left: -100%;
z-index: -1;
transition: all 0.5s ease 0s;
}
.serviceBox:hover:before{ left: 0; }
.serviceBox:after{
content: "";
width: 7px;
height: 0;
border-radius: 5px;
background: #bef72e;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease 0s;
}
.serviceBox:hover:after{ height: 100%; }
.serviceBox .service-icon{
color: #094d92;
margin-bottom: 10px;
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon i{ font-size: 30px; }
.serviceBox .title{
display: inline-block;
font-size: 22px;
font-weight: 700;
text-transform: capitalize;
margin-right: 10px;
}
.serviceBox .description{
font-size: 15px;
color: #777;
line-height: 25px;
transition: all 0.5s ease 0s;
}
.serviceBox:hover .service-icon,
.serviceBox:hover .description{ color: #fff; }
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

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

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