Service Box — стиль 50

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

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

2

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae consectetur ea eaque facilis hic, impedit ipsa laudantium modi nostrum, quaerat quod reiciendis sed sunt!

3

Брендирование

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae consectetur ea eaque facilis hic, impedit ipsa laudantium modi nostrum, quaerat quod reiciendis sed sunt!

4

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae consectetur ea eaque facilis hic, impedit ipsa laudantium modi nostrum, quaerat quod reiciendis sed sunt!

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

<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>
<span class="number">1</span>
</div>
<h3 class="title">Web Design</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae consectetur ea eaque facilis hic, impedit ipsa laudantium modi nostrum, quaerat quod reiciendis sed sunt!
</p>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="serviceBox">
<div class="service-icon">
<i class="fa fa-rocket"></i>
<span class="number">2</span>
</div>
<h3 class="title">Web Development</h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium beatae consectetur ea eaque facilis hic, impedit ipsa laudantium modi nostrum, quaerat quod reiciendis sed sunt!
</p>
</div>
</div>
</div>
</div>

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

.serviceBox{
text-align: center;
position: relative;
}
.serviceBox .service-icon{
width: 90px;
height: 90px;
line-height: 90px;
border-radius: 50%;
background: #f5a623;
font-size: 36px;
color: #fff;
margin: 0 auto 30px;
position: relative;
transition: all 500ms ease 0s;
}
.serviceBox:hover .service-icon{
transform: scale(0.8, 0.8);
}
.serviceBox .service-icon:after{
content: "";
width: 111px;
height: 111px;
border-radius: 50%;
border: 4px solid #f5a623;
position: absolute;
top: -10px;
left: -10px;
opacity: 0;
transform: scale(0.8, 0.8);
transition: all 500ms ease 0s;
}
.serviceBox:hover .service-icon:after{
opacity: 1;
transform: scale(1, 1);
}
.serviceBox .number{
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background: #fff;
font-size: 14px;
color: #123a06;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.serviceBox .title{
font-size: 20px;
color: #123a06;
margin: 0 0 10px 0;
}
.serviceBox .description{
font-size: 14px;
color: #828282;
line-height: 25px;
margin: 0;
}
@media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

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

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