Service Box — стиль 104

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

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 orange">
<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{
--main-color1: #CE208C;
--main-color2: #fe6223;
--main-color3: #60aa31;
--main-color4: #0476ae;
}
.serviceBox{
color: #555;
font-family: 'Varela Round', sans-serif;
text-align: center;
padding: 0 10px;
}
.serviceBox .service-icon{
background-color: #fff;
line-height: 104px;
height: 130px;
width: 130px;
padding: 6px;
margin: 0 auto 50px;
border: 7px solid var(--main-color1);
border-radius: 50%;
display: block;
position: relative;
z-index: 1;
}
.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
content: '';
background-color: var(--main-color1);
height: 60px;
width: 7px;
opacity: 0;
transform: translateX(-50%) rotateY(180deg);
position: absolute;
left: 50%;
top: 100%;
z-index: -1;
transition: all 0.3s;
}
.serviceBox .service-icon:after{
top: 0;
background-color: #fff;
height: 30px;
width: 30px;
border: 7px solid var(--main-color1);
border-radius: 50%;
transform: translateX(-50%) rotateY(0);
}
.serviceBox:hover .service-icon:before{
opacity: 1;
transform: translateX(-50%) rotateY(0);
}
.serviceBox:hover .service-icon:after{
opacity: 1;
top: 138%;
}
.serviceBox .service-icon span{
background: linear-gradient(to bottom right, rgba(0,0,0,0.25),#fff,#fff);
font-size: 60px;
height: 100%;
width: 100%;
border: 1px solid #fff;
border-radius: 50%;
box-shadow: 2px 2px 0 2px rgba(0,0,0,0.25);
display: block;
}
.serviceBox .title{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0 0 0;
margin: 0 0 10px;
border-top: 7px solid rgba(0,0,0,0.1);
border-radius: 35%;
display: block;
transition:all .3s ease 0.1s;
}
.serviceBox:hover .title{
color: var(--main-color1);
border-top-color: var(--main-color1);
}
.serviceBox .description{
font-size: 14px;
line-height: 25px;
letter-spacing: 1px;
}
.serviceBox.orange .service-icon,
.serviceBox.orange .service-icon:after{border-color: var(--main-color2);}
.serviceBox.orange .service-icon:before{background-color: var(--main-color2);}
.serviceBox.orange:hover .title{
color: var(--main-color2);
border-color: var(--main-color2);
}
.serviceBox.green .service-icon,
.serviceBox.green .service-icon:after{border-color: var(--main-color3);}
.serviceBox.green .service-icon:before{background-color: var(--main-color3);}
.serviceBox.green:hover .title{
color: var(--main-color3);
border-color: var(--main-color3);
}
.serviceBox.blue .service-icon,
.serviceBox.blue .service-icon:after{border-color: var(--main-color4);}
.serviceBox.blue .service-icon:before{background-color: var(--main-color4);}
.serviceBox.blue:hover .title{
color: var(--main-color4);
border-color: var(--main-color4);
}
@media only screen and (max-width:990px){
.serviceBox{ margin: 0 0 30px; }
}

Теги: