Responsive Hover Blocks / Блоки / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress

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

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

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

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

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

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

Рейтинг: 4.1 / 5 - 9 голосов

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

Авторство: https://goo.gl/UoqAr7

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

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

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

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

Добавлено: 2017-01-06 в 11:41

Метка: 1483692101

⇄ ⇅

.serviceBox .title{
 font-size: 22px;
 font-weight: 700;
 margin-bottom: 10px;
}
.serviceBox .description{
 font-size: 14px;
}
.serviceBox .read{
 display: block;
 width: 100%;
 background: #fff;
 font-size: 15px;
 font-weight: 600;
 color: #eba133;
 padding: 10px;
 border-left: 1px solid #eba133;
 border-right: 1px solid #eba133;
}
.serviceBox:hover .read{
 border-color: #684f8e;
 color: #684f8e;
}
@media only screen and (max-width: 990px){
 .serviceBox{ margin-bottom: 30px; }
}
@media only screen and (max-width: 767px){
 .serviceBox:before,
 .serviceBox:after{
 top: 80px;
 }
}
@media only screen and (max-width: 480px){
 .serviceBox:before,
 .serviceBox:after{
 top: 140px;
 }
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="serviceBox">
 <div class="service-icon">
 <i class="fa fa-globe"></i>
 </div>
 <div class="service-content">
 <h3 class="title">Brand</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit.
 </p>
 </div>
 <a href="#" class="read">Read More</a>
 </div>
 </div>

<div class="col-md-3 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 Design</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit.
 </p>
 </div>
 <a href="#" class="read">Read More</a>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="serviceBox">
 <div class="service-icon">
 <i class="fa fa-briefcase"></i>
 </div>
 <div class="service-content">
 <h3 class="title">Store</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit.
 </p>
 </div>
 <a href="#" class="read">Read More</a>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="serviceBox">
 <div class="service-icon">
 <i class="fa fa-mobile"></i>
 </div>
 <div class="service-content">
 <h3 class="title">Thoughts</h3>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non risus a sem hendrerit.
 </p>
 </div>
 <a href="#" class="read">Read More</a>
 </div>
 </div>

</div>
</div>

BootstrapTema

Responsive Hover Blocks

Скриншот

Подробнее

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

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

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