Service Box — стиль 89

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

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

Заголовок

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.

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

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<h3 class="title">Web Design</h3>
<div class="service-icon">
<span><i class="fa fa-globe"></i></span>
</div>
<p class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox blue">
<h3 class="title">Web Development</h3>
<div class="service-icon">
<span><i class="fa fa-rocket"></i></span>
</div>
<p class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
padding-bottom: 20px;
text-align: center;
position: relative;
}
.serviceBox:before{
content: "";
width: 100%;
height: 2px;
background: #1d1a3f;
position: absolute;
bottom: 0;
left: 0;
transform: scale(0);
transition: all 0.5s ease 0s;
}
.serviceBox:hover:before{ transform: scale(1); }
.serviceBox .title{
font-size: 22px;
font-weight: 700;
color: #1d1a3f;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.serviceBox .service-icon{
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #1d1a3f;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
margin: 50px 0;
position: relative;
}
.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
content: "";
width: 3px;
height: 40px;
background: #1d1a3f;
margin: 0 auto;
position: absolute;
top: -40px;
left: 0;
right: 0;
}
.serviceBox .service-icon:after{
top: auto;
bottom: -40px;
}
.serviceBox .service-icon span{
display: block;
font-size: 50px;
color: #fff;
line-height: 130px;
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
z-index: 999 ;
}
.serviceBox .service-icon span:before{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
background: #fa5f69;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.5s ease 0s;
}
.serviceBox:hover .service-icon span:before{ transform: rotateY(180deg); }
.serviceBox .description{
font-size: 15px;
color: #505050;
line-height: 27px;
margin: 0;
}
.serviceBox.blue .service-icon span:before{ background: #0babc7; }
.serviceBox.yellow .service-icon span:before{ background: #f5b43b; }
.serviceBox.green .service-icon span:before{ background: #2e9749; }
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

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

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