Service Box — стиль 106

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

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

Заголовок

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 разметка для реализации блока о компании

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css /> -->
<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 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 red">
<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 adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
color: #fff;
font-family: 'Source Sans Pro', sans-serif;
text-align: center;
padding: 0 15px 50px;
margin-top: 15px;
border: 1px solid transparent;
position:relative;
z-index: 1;
}
.serviceBox:before{
content: "";
background: linear-gradient(to bottom,#08949e,#00D9E8);
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
z-index: -1;
-webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0% 80%, 0 0);
clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0% 80%, 0 0);
}
.serviceBox .service-icon{
background: #2a969e;
font-size: 60px;
line-height: 110px;
width: 100px;
height: 110px;
margin: -20px auto 20px;
border-radius:0 0 50px 50px;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
position: relative;
transition: all 0.3s;
}
.serviceBox:hover .service-icon{
text-shadow: 0 0 5px #000;
font-size: 65px;
}
.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
content: "";
background: linear-gradient(-45deg, #28595f 49%, transparent 50%);
height: 20px;
width: 20px;
position: absolute;
top:0;
left: -20px;
}
.serviceBox .service-icon:after{
transform: rotateY(180deg);
left: auto;
right: -20px;
}
.serviceBox .title{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 10px;
}
.serviceBox .description{ font-size: 15px; }
.serviceBox.red:before{ background: linear-gradient(to bottom,#E53947,#f85c6c); }
.serviceBox.red .service-icon{ background: #e0535f; }
.serviceBox.red .service-icon:before,
.serviceBox.red .service-icon:after{ background: linear-gradient(-45deg, #752027 49%, transparent 50%); }
.serviceBox.blue:before{ background:linear-gradient(to bottom,#174B6D,#644B82); }
.serviceBox.blue .service-icon{ background: #156092; }
.serviceBox.blue .service-icon:before,
.serviceBox.blue .service-icon:after{ background: linear-gradient(-45deg, #15374d 49%, transparent 50%); }
.serviceBox.green:before{ background:linear-gradient(to bottom,#12AB8F,#68BA58); }
.serviceBox.green .service-icon{ background: #0a977d; }
.serviceBox.green .service-icon:before,
.serviceBox.green .service-icon:after{ background: linear-gradient(-45deg, #2b665b 49%, transparent 50%); }
@media only screen and (max-width:990px){
.serviceBox{ margin: 15px 0 40px; }
}



Теги:
0

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

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