Service Box — стиль 87

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

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

заговолок

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.

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>
<div class="service-content">
<h3 class="title">Web Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox green">
<div class="service-icon">
<i class="fa fa-rocket"></i>
</div>
<div class="service-content">
<h3 class="title">Web Development</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.
</p>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align: center;
position: relative;
}
.serviceBox .service-icon{
display: inline-block;
width: 170px;
height: 170px;
line-height: 70px;
border-radius: 50%;
border: 3px solid #e53947;
padding: 50px;
margin-bottom: 50px;
font-size: 50px;
color: #fff;
z-index: 1;
position: relative;
transition: all 0.5s ease 0s;
}
.serviceBox:hover .service-icon{ transform: rotateY(360deg); }
.serviceBox .service-icon:before{
content: "";
background: #e53947;
border-radius: 50%;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
z-index: -1;
transition: all 0.5s ease 0.5s;
}
.serviceBox:hover .service-icon:before{ transform: rotateX(360deg); }
.serviceBox .service-content{
padding: 40px 15px 20px;
border: 3px solid #e53947;
border-left: 2px solid transparent;
color: #706e6e;
line-height: 27px;
position: relative;
}
.serviceBox .service-content:before{
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background: #e53947;
margin: 0 auto;
position: absolute;
top: 10px;
left: 0;
right: 0;
}
.serviceBox .service-content:after{
content: "";
width: 3px;
height: 70px;
background: #e53947;
margin: 0 auto;
position: absolute;
top: -54px;
left: 0;
right: 0;
}
.serviceBox .title{
font-size: 20px;
font-weight:600;
color: #fff;
background: #e53947;
border-radius: 10px;
padding: 7px 5px;
margin: 0 0 10px 0;
}
.serviceBox.green .service-icon{ border-color: #93aa01; }
.serviceBox.green .service-icon:before,
.serviceBox.green .service-content:before,
.serviceBox.green .service-content:after,
.serviceBox.green .title{ background: #93aa01; }
.serviceBox.green .service-content{
border-color: #93aa01;
border-left-color: transparent;
}
.serviceBox.blue .service-icon{ border-color: #02a2ad; }
.serviceBox.blue .service-icon:before,
.serviceBox.blue .service-content:before,
.serviceBox.blue .service-content:after,
.serviceBox.blue .title{ background: #02a2ad; }
.serviceBox.blue .service-content{
border-color: #02a2ad;
border-left-color: transparent;
}
.serviceBox.orange .service-icon{ border-color: #eb700c; }
.serviceBox.orange .service-icon:before,
.serviceBox.orange .service-content:before,
.serviceBox.orange .service-content:after,
.serviceBox.orange .title{ background: #eb700c; }
.serviceBox.orange .service-content{
border-color: #eb700c;
border-left-color: transparent;
}
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

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

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