Service Box — стиль 23

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

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

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon1">
<strong></strong>
<span></span>
<em class="icons">
<i class="fa fa-laptop"></i>
</em>
</div>
<div class="service-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices sapien vel quam luctus pulvinar. Etiam at.</p>
<a class="read" href="#">more</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align: center;
}
.serviceBox .service-icon1,
.serviceBox .service-icon2,
.serviceBox .service-icon3,
.serviceBox .service-icon4{
width: 229px;
height: 229px;
line-height: 229px;
display: block;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.serviceBox .service-icon1 strong,
.serviceBox .service-icon2 strong,
.serviceBox .service-icon3 strong,
.serviceBox .service-icon4 strong{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 13px;
border-style: solid;
border-color: hsl(201, 94%, 74%) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsl(201, 94%, 74%);
border-radius: 400px;
transform: rotate(-45deg);
transition: all 0.5s ease 0s;
z-index: 1;
}
.serviceBox .service-icon1:hover strong,
.serviceBox .service-icon2:hover strong,
.serviceBox .service-icon3:hover strong,
.serviceBox .service-icon4:hover strong{
transform: rotate(315deg);
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon1 span,
.serviceBox .service-icon2 span,
.serviceBox .service-icon3 span,
.serviceBox .service-icon4 span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-width: 13px;
border-style: solid;
border-color: hsl(0, 2%, 90%);
border-radius: 400px;
z-index: 0;
}
.serviceBox .icons,
.serviceBox .icons,
.serviceBox .icons,
.serviceBox .icons{
display: inline-block;
}
.serviceBox .icons i,
.serviceBox .icons i,
.serviceBox .icons i,
.serviceBox .icons i{
font-size: 70px;
margin-top: 75px;
transform: rotateY(0deg);
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon1:hover .icons i,
.serviceBox .service-icon2:hover .icons i,
.serviceBox .service-icon3:hover .icons i,
.serviceBox .service-icon4:hover .icons i{
transform: rotateY(360deg);
transition: all 0.5s ease 0s;
}
.serviceBox .service-content p{
font-size: 13px;
font-family: "Arial",sans-serif;
color: hsl(0, 1%, 65%);
line-height: 24px;
margin:30px 0;
padding: 0 20px;
}
.serviceBox .read{
background: hsl(0, 0%, 36%);
color: hsl(0, 0%, 100%);
font-size: 18px;
font-family: "Arial",sans-serif;
line-height: 24px;
text-transform: capitalize;
padding: 14px 32px 15px;
display: inline-block;
transition: all 0.2s ease 0s;
}
.serviceBox .read:hover{
background:#ec0303;
text-decoration: none;
}
.serviceBox .service-icon2 span,
.serviceBox .service-icon3 span,
.serviceBox .service-icon4 span{
border-color: hsl(0, 2%, 90%);
}
.serviceBox .service-icon2 strong{
border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsl(0, 97%, 47%) hsl(0, 97%, 47%);
}
.serviceBox .service-icon3 strong{
border-color: hsl(201, 94%, 74%) hsl(201, 94%, 74%) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0);
}
.serviceBox .service-icon4 strong{
border-color: hsla(0, 0%, 0%, 0) hsl(0, 97%, 47%) hsl(0, 97%, 47%) hsla(0, 0%, 0%, 0);
}
@media screen and (max-width: 990px){
.serviceBox{
margin-bottom: 35px;
}
}

Теги: