3 Сервисных блока для Bootstrap 3 / Блоки / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Блоки

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 1032

Количество символов:

Посмотрели: 6131 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 4 голосов

Тип лицензии: CC BY 4.0

Авторство: http://goo.gl/x5fgKB

Информация: Пользователям

Информация: Правообладателям

Теги: адаптивный, Snippet, блок, сниппет, Bootstrap, Responsive, html, Block

Поделился: BootstrapТема

Добавлено: 2016-05-27 в 21:05

Метка: 1581148360

⇄ ⇅

.serviceBox{
 background: #fff;
 text-align: center;
 padding: 20px 0 40px;
 position: relative;
}
.serviceBox:hover{
 background:#98d7ce;
}
.serviceBox .service-icon{
 width: 100px;
 height: 100px;
 line-height: 95px;
 border-radius: 50%;
 border: 3px solid #b3b3b3;
 font-size: 50px;
 color: #b3b3b3;
 margin: 0 auto;
 transition: all 0.5s ease-in-out;
}
.serviceBox:hover .service-icon{
 transform: rotateY(360deg);
 color: #fff;
 border-color: #fff;
 background: #4acab4;
}
.serviceBox .service-content h3 a{
 font-size: 22px;
 color: #333;
}
.serviceBox .service-content p{
 font-size: 14px;
 padding: 0 20px;
 margin: 15px 0 30px;
 color:#333;
}
.serviceBox:hover h3 a,
.serviceBox:hover p{
 color:#fff;
}
.serviceBox .btn{
 background: #4acab4;
 color: #fff;
 padding: 10px 35px;
 transition: all 0.6s ease-in-out;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
}
.serviceBox:hover .btn{
 background: #333;
 color: #fff;
}
@media screen and (max-width: 990px){
 .serviceBox{
 margin-bottom: 20px;
 padding: 20px 0;
 }
}
</style>

<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><a href="#">Web Development</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacus cursus, blandit dolor quis, blandit velit. Curabitur aliquet ante vel pulvinar finibus. Pellentesque.</p>
 </div>
 <div class="read">
 <a href="#" class="btn btn-default">Read more</a>
 </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><a href="#">Brand Building</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacus cursus, blandit dolor quis, blandit velit. Curabitur aliquet ante vel pulvinar finibus. Pellentesque.</p>
 </div>
 <div class="read">
 <a href="#" class="btn btn-default">Read more</a>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="serviceBox">
 <div class="service-icon">
 <i class="fa fa-user-md"></i>
 </div>
 <div class="service-content">
 <h3><a href="#">Responsive Design</a></h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lacus cursus, blandit dolor quis, blandit velit. Curabitur aliquet ante vel pulvinar finibus. Pellentesque.</p>
 </div>
 <div class="read">
 <a href="#" class="btn btn-default">Read more</a>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

3 Сервисных блока для Bootstrap 3

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0