Service Box — стиль 25

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

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-head">
<h3>01</h3>
<h4>WEB <br>DESIGN</h4>
</div>
<div class="service-content">
<span>Lorem ipsum</span>
<p>Lorem ipsum dolor sit amet, consec tetur adipisc elit. Proin ultricies ves tibulum velit, bibendum et condi.</p>
</div>
<div class="read">
<a href="#" class="btn btn-default">read more</a>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{
background: #fff;
text-align: center;
border-top: 10px solid #e74c3c;
position:relative;
}
.serviceBox:before{
content:"";
position:absolute;
border:20px solid transparent;
border-bottom-color:#e74c3c;
top:-50px;
left:44%;
}
.serviceBox .service-head {
padding: 10px 0;
}
.serviceBox .service-head > h3{
color: #3e454c;
font: bold 70px/60px "arial";
margin-bottom: 20px;
text-transform: uppercase;
}
.serviceBox .service-head > h4{
color: #e74c3c;
font-size: 30px;
font-weight: normal;
line-height: 30px;
margin-bottom: 20px;
padding: 0 10px;
text-transform: uppercase;
}
.serviceBox .service-content > span{
color: #3e454c;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
margin:0 0 8px;
display: block;
}
.serviceBox .service-content > p{
color: #bfbfbf;
font-size: 14px;
line-height: 25px;
padding: 0 60px;
}
.serviceBox .read {
padding: 20px 0 45px;
}
.serviceBox .read a {
background: #e74c3c;
border: medium none;
border-radius: 0;
color: #fff;
padding: 14px 17px;
font: 600 14px/18px "arial";
text-transform: uppercase;
transition: all 0.5s ease 0s;
}
.serviceBox .read a:hover{
background: #3e454c;
transition: all 0.5s ease 0s;
}
@media screen and (max-width: 990px){
.serviceBox{
margin-bottom: 30px;
}
.serviceBox .service-head > h4{
font-size: 26px;
}
}
@media screen and (max-width: 767px){
.serviceBox:before{
left:47%;
}
}
@media screen and (max-width: 480px){
.serviceBox:before{
left:44%;
}
}

Теги: