Service Box — стиль 67

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

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

заговолок

Это текст специально написан для демонстрации работы эффекта. Integer in pulvinar lacus. Aenean efficitur vehicula orci, vel hendrerit orci viverra hendrerit. Curabitur luctus pharetra bibendum. In semper.

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

Это текст специально написан для демонстрации работы эффекта. Integer in pulvinar lacus. Aenean efficitur vehicula orci, vel hendrerit orci viverra hendrerit. Curabitur luctus pharetra bibendum. In semper.

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

Это текст специально написан для демонстрации работы эффекта. Integer in pulvinar lacus. Aenean efficitur vehicula orci, vel hendrerit orci viverra hendrerit. Curabitur luctus pharetra bibendum. In semper.

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<h3 class="title">Web Design</h3>
<div class="service-content">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in pulvinar lacus. Aenean efficitur vehicula orci, vel hendrerit orci viverra hendrerit. Curabitur luctus pharetra bibendum. In semper.
</p>
<div class="service-icon fa fa-globe"></div>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<h3 class="title">Web Development</h3>
<div class="service-content">
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in pulvinar lacus. Aenean efficitur vehicula orci, vel hendrerit orci viverra hendrerit. Curabitur luctus pharetra bibendum. In semper.
</p>
<div class="service-icon fa fa-briefcase"></div>
</div>
</div>
</div>
</div>
</div>

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

.serviceBox{ margin-top: 10px; }
.serviceBox .title{
font-size: 20px;
color: #5054a2;
text-transform: uppercase;
text-align: center;
margin: 0 0 20px 0;
}
.serviceBox .service-content{
padding: 25px 20px 25px 50px;
border-top: 2px solid #eee;
border-right: 2px solid #eee;
position: relative;
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-content{
border-top-color: #4aba8d;
border-right-color: #4aba8d;
}
.serviceBox .service-content:before{
content: "";
width: 0;
height: 2px;
background: #eee;
position: absolute;
bottom: 0;
right: 0;
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-content:before{
width: 50%;
background: #4aba8d;
}
.serviceBox .description{
font-size: 14px;
color: #8b8a8a;
line-height: 25px;
margin: 0;
}
.serviceBox .service-icon{
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
background: #fff;
text-align: center;
font-size: 25px;
color: #a6a6a6;
border: 1px solid #eee;
position: absolute;
top: -25px;
left: 0;
transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon{
border-color: #4aba8d;
color: #4aba8d;
}
@media only screen and (max-width:990px){
.serviceBox{ margin-bottom: 30px; }
}



Теги:
0

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

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