Service Box — стиль 107

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

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

заговолок

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

:root{
--color1: #e25f2f;
--color2: #b54479;
--color3: #3498db;
--color4: #079992;
}
.serviceBox{
font-family: 'Titillium Web', sans-serif;
text-align: center;
padding: 0 10px 15px;
position: relative;
z-index: 1;
}
.serviceBox:after{
content: "";
background: var(--color1);
width: 100%;
height: 40px;
border-radius: 20px;
position: absolute;
left: 0;
top: 110px;
z-index: -2;
}
.serviceBox .service-icon{
color: #fff;
background: var(--color1);
font-size: 65px;
line-height: 100px;
width: 120px;
height: 120px;
padding: 5px 0 0 5px;
margin: 0 auto 60px;
border: 3px solid #fff;
box-shadow: 0 0 0 3px var(--color1);
border-radius: 50% 50% 50% 15px;
transform: rotate(-45deg);
}
.serviceBox .service-icon i.fa{
transform: rotate(45deg);
transition: all 0.3s;
}
.serviceBox:hover .service-icon i.fa{
text-shadow: 0 0 5px #000;
transform:rotate(-315deg);
}
.serviceBox .title{
color: var(--color1);
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
margin: 0 0 10px;
}
.serviceBox .description{
color: #555;
font-size: 15px;
text-align: justify;
letter-spacing: 1px;
}
.serviceBox.purple:after{ background: var(--color2); }
.serviceBox.purple .service-icon{
background: var(--color2);
box-shadow: 0 0 0 3px var(--color2);
}
.serviceBox.purple .title{ color: var(--color2); }
.serviceBox.blue:after{ background: var(--color3); }
.serviceBox.blue .service-icon{
background: var(--color3);
box-shadow: 0 0 0 3px var(--color3);
}
.serviceBox.blue .title{ color: var(--color3); }
.serviceBox.green:after{ background: var(--color4); }
.serviceBox.green .service-icon{
background: var(--color4);
box-shadow: 0 0 0 3px var(--color4);
}
.serviceBox.green .title{ color: var(--color4); }
@media only screen and (max-width:990px){
.serviceBox{ margin: 0 0 30px; }
}



Теги:
0

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

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