Service Box — стиль 45

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

Демо CSS блока о сервисе — стиль 45

заговолок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ipsum, quod. Architecto delectus doloremque dolorum eveniet minus quod reiciendis sapiente.

Создание сайтов

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ipsum, quod. Architecto delectus doloremque dolorum eveniet minus quod reiciendis sapiente.

Адаптивный дизайн

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ipsum, quod. Architecto delectus doloremque dolorum eveniet minus quod reiciendis sapiente.

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-globe"></i>
</div>
<div class="service-content">
<h3 class="title">Web Design</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ipsum, quod. Architecto delectus doloremque dolorum eveniet minus quod reiciendis sapiente.</p>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-rocket"></i>
</div>
<div class="service-content">
<h3 class="title">Web Development</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, ipsum, quod. Architecto delectus doloremque dolorum eveniet minus quod reiciendis sapiente.</p>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox .service-icon{
width: 68px;
height: 68px;
line-height: 64px;
border: 2px solid transparent;
float: left;
font-size: 36px;
color: #cbcbd7;
text-align: center;
overflow: hidden;
position: relative;
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon{
border-color: #01727f;
color: #01727f;
}
.serviceBox .service-icon:after{
content: "";
border-bottom: 14px solid #01727f;
border-left: 14px solid transparent;
position: absolute;
bottom: -14px;
right: -14px;
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon:after{
bottom: 0;
right: 0;
}
.serviceBox .service-content{
margin-left: 100px;
line-height: 25px;
}
.serviceBox .title{
font-size: 18px;
font-weight: bold;
color: #222;
text-transform: uppercase;
margin-bottom: 30px;
}
.serviceBox .description{
font-size: 16px;
color: #535353;
}
@media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 30px; }
}
@media only screen and (max-width: 479px){
.serviceBox .service-content{
margin-left: 85px;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *