Service Box — стиль 79

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

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

<div class="demo">
<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, consecte adipisicing elit. A alias aspernatur autem blanditiis.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="serviceBox yellow">
<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, consecte adipisicing elit. A alias aspernatur autem blanditiis.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>

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

.demo{ background: #6d6e72; }
.serviceBox{
padding: 130px 20px 10px;
background: #fff;
text-align: center;
border-radius: 25px;
overflow: hidden;
position: relative;
}
.serviceBox .service-icon{
display: inline-block;
width: 200px;
height: 200px;
line-height: 300px;
border-radius: 50%;
box-shadow: 0 0 5px #000 inset;
background: linear-gradient(to top,#8633cb,#884fb7 50%,#6d6e72 50%);
font-size: 50px;
color: #fff;
position: absolute;
top: -90px;
left: 50%;
transform: scale(1) translateX(-50%);
transition: all 0.8s ease 0s;
}
.serviceBox:hover .service-icon{ font-size: 65px; }
.serviceBox .title{
font-size: 18px;
font-weight: 700;
color: #333;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.serviceBox:hover .title{ color: #8939cb; }
.serviceBox .description{
font-size: 15px;
color: #808080;
line-height: 27px;
letter-spacing: 1px;
margin-bottom: 10px;
}
.serviceBox .read-more{
display: inline-block;
padding: 5px 15px;
font-size: 14px;
font-style: italic;
color: #fff;
background: linear-gradient(to top,#8633cb,#884fb7);
border-radius: 10px 10px 0 0;
transform: translateY(50px);
transition: all 0.3s ease 0s;
}
.serviceBox .read-more:hover{
color: #fff;
box-shadow: 0 0 5px #000;
}
.serviceBox:hover .read-more{ transform: translateY(0); }
.serviceBox.yellow .service-icon{ background: linear-gradient(to top,#f1b02b,#fddb18 50%,#6d6e72 50%); }
.serviceBox.yellow:hover .title{ color: #f1b02b; }
.serviceBox.yellow .read-more{ background: linear-gradient(to top,#f1b02b,#fddb18); }
.serviceBox.green .service-icon{ background: linear-gradient(to top,#50c338,#9dea28 50%,#6d6e72 50%); }
.serviceBox.green:hover .title{ color: #50c338; }
.serviceBox.green .read-more{ background: linear-gradient(to top,#50c338,#9dea28); }
.serviceBox.pink .service-icon{ background: linear-gradient(to top,#fe4090,#ff58a6 50%,#6d6e72 50%); }
.serviceBox.pink:hover .title{ color: #fe4090; }
.serviceBox.pink .read-more{ background: linear-gradient(to top,#fe4090,#ff58a6); }
@media only screen and (max-width:1200px){
.serviceBox .service-icon{
width: 160px;
height: 160px;
line-height: 240px;
top: -80px;
}
}
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
.serviceBox .service-icon{
width: 200px;
height: 200px;
line-height: 300px;
top: -90px;
}
}

Теги: