Service Box — стиль 84

Подробное описание и демонстрация работы блока о нас под номером №84 для библиотеки 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-icon">
<span><i class="fa fa-globe"></i></span>
</div>
<div class="service-content">
<h3 class="title">Web Design</h3>
<p class="description">
Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox blue">
<div class="service-icon">
<span><i class="fa fa-rocket"></i></span>
</div>
<div class="service-content">
<h3 class="title">Web Development</h3>
<p class="description">
Lorem ipsum dolor sit amet, consecte adipisicing elit. A alias aspernatur autem blanditiis. Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align: center;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
}
.serviceBox .service-icon{
width: 150px;
height: 150px;
line-height: 115px;
border-radius: 50%;
background: linear-gradient(to bottom, transparent 60%,#d62263 40%);
padding: 20px;
margin: 0 auto 30px;
font-size: 70px;
color: #202020;
z-index: 1;
position: relative;
transition: all 0.5s ease 0s;
}
.serviceBox .service-icon:before{
content: "";
width: 150%;
height: 18px;
background: #d62263;
position: absolute;
top: 60%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
}
.serviceBox .service-icon:after{
content: "";
width: 30px;
height: 30px;
background: linear-gradient(135deg,transparent 49%, #d62263 50%);
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%) scale(1,1.3) rotate(45deg);
}
.serviceBox .service-icon span{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.3);
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon span{
color: #606060;
transform: rotateX(360deg);
}
.serviceBox .service-content{
border: 1px solid #d62263;
border-radius: 5px;
}
.serviceBox .title{
display: block;
padding: 10px 0;
margin: 0 0 10px 0;
background: #d62263;
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 5px 5px 0 0;
transition: all .3s ease 0.1s;
}
.serviceBox .description{
display: block;
padding: 0 10px;
margin-bottom: 15px;
font-size: 17px;
color: #999;
line-height: 27px;
text-align: justify;
transition: all 0.3s ease 0s;
}
.serviceBox.orange .service-icon{ background: linear-gradient(to bottom, transparent 60%,#ff662a 40%); }
.serviceBox.orange .service-icon:before,
.serviceBox.orange .title{ background: #ff662a; }
.serviceBox.orange .service-icon:after{ background: linear-gradient(135deg,transparent 49%, #ff662a 50%); }
.serviceBox.orange .service-content{ border-color: #ff662a; }
.serviceBox.darkblue .service-icon{ background: linear-gradient(to bottom, transparent 60%,#0776ae 40%); }
.serviceBox.darkblue .service-icon:before,
.serviceBox.darkblue .title{ background: #0776ae; }
.serviceBox.darkblue .service-icon:after{ background: linear-gradient(135deg,transparent 49%, #0776ae 50%); }
.serviceBox.darkblue .service-content{ border-color: #0776ae; }
.serviceBox.blue .service-icon{ background: linear-gradient(to bottom, transparent 60%,#1da5cf 40%); }
.serviceBox.blue .service-icon:before,
.serviceBox.blue .title{ background: #1da5cf; }
.serviceBox.blue .service-icon:after{ background: linear-gradient(135deg,transparent 49%, #1da5cf 50%); }
.serviceBox.blue .service-content{ border-color: #1da5cf; }

Теги: