Прозрачные анимированные прайсы / Прайсы / Сниппеты Bootstrap

Версия: v1.0.1

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

Категория: Прайсы

Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: Посмотреть

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

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

Теги: WOW, Snippet, Bootstrap, Responsive, html, ANIMATE, прайсы, Price, Pricing

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

Добавлено: 2017-02-26 в 14:21

Метка: 1567148749

⇄ ⇅

#price .pricing__item {
 position: relative;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 -webkit-align-items: stretch;
 align-items: stretch;
 text-align: center;
 -webkit-flex: 0 1 330px;
 flex: 0 1 330px;
}

#price .pricing__feature-list {
 text-align: left;
}

#price .pricing__action {
 color: inherit;
 border: none;
 background: none;
}

#price .pricing__action:focus {
 outline: none;
}

#price .pricing__item {
 font-size: 20px;
 margin-top: 72px;
 padding: 2em;
 cursor: default;
 color: #fff;
 border: 1px solid #666;
 -webkit-transition: background-color 0.6s, color 0.3s;
 transition: background-color 0.6s, color 0.3s;
}

#price .pricing__item:nth-child(2) {
 border-right: none;
 border-left: none;
}

#price .pricing__item:hover {
 color: #444;
 background: #ffffff;
 border-color: transparent;
}

#price .pricing__title {
 font-size: 2em;
 width: 100%;
 margin: 0;
 padding: 0;
}

#price .pricing__price {
 font-size: 1.45em;
 font-weight: bold;
 line-height: 120px;
 width: 120px;
 height: 120px;
 margin: 1.15em auto 0.3em;
 border-radius: 50%;
 background: #ffffff;
 -webkit-transition: color 0.3s, background 0.3s;
 transition: color 0.3s, background 0.3s;
}

#price .pricing__item:first-child .pricing__price {
 background: #26253a;
}

#price .pricing__item:nth-child(2) .pricing__price {
 background: #26253a;
}

#price .pricing__item:hover .pricing__price {
 color: #fff;
 background: #222;
}

#price .pricing__feature-list {
 margin: 0;
 padding: 1em 1em 2em 1em;
 font-weight: bold;
 list-style: none;
 letter-spacing: 0.6px;
 line-height: 32px;
 text-align: center;
}

#price .pricing__action {
 font-weight: bold;
 margin-top: auto;
 padding: 18px 48px;
 opacity: 0;
 color: #fff;
 font-size: 20px;
 background: #26253a;
 text-transform: uppercase;
 letter-spacing: 3px;
 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
 transition: transform 0.3s, opacity 0.3s;
 -webkit-transform: translate3d(0, -15px, 0);
 transform: translate3d(0, -15px, 0);
}

#price .pricing__item:hover .pricing__action {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

#price .pricing__action:hover,
#price .pricing__action:focus {
 background: #222;
}

@media screen and (max-width: 60em) {
 #price .pricing__item {
 max-width: none;
 width: 100%;
 flex: none;
 }
 #price .pricing__item:nth-child(2) {
 border: 1px solid #fff;
 }
}
@media (max-width: 760px) {
 #price .pricing__action {
 font-size: 13px;
 }
}
</style>

<div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="1s">
 <div class="pricing__item">
 <h3 class="pricing__title">Healthy</h3>
 <div class="pricing__price"><span class="pricing__currency">$</span>350</div>
 <ul class="pricing__feature-list">
 <li class="pricing__feature">One General Trainer</li>
 <li class="pricing__feature">Gym Services</li>
 <li class="pricing__feature">5 Yoga Courses</li>
 <li class="pricing__feature">10 Thai Massages</li>
 <li class="pricing__feature">15 Aerobics</li>
 </ul>
 <button class="pricing__action">Sign Up Now</button>
 </div>
 </div>

<div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="1.3s">
 <div class="pricing__item">
 <h3 class="pricing__title">Best Fit</h3>
 <div class="pricing__price"><span class="pricing__currency">$</span>550</div> 
 <ul class="pricing__feature-list">
 <li class="pricing__feature">Two General Trainers</li>
 <li class="pricing__feature">Gym Services</li>
 <li class="pricing__feature">10 Yoga Courses</li>
 <li class="pricing__feature">20 Thai Massages</li>
 <li class="pricing__feature">25 Aerobics</li>
 </ul>
 <button class="pricing__action">Sign Up Now</button>
 </div>
 </div>

<div class="wow fadeInUp col-md-4 col-sm-6" data-wow-delay="1.6s">
 <div class="pricing__item">
 <h3 class="pricing__title">Rigid Body</h3>
 <div class="pricing__price"><span class="pricing__currency">$</span>750</div> 
 <ul class="pricing__feature-list">
 <li class="pricing__feature">Personal Trainers</li>
 <li class="pricing__feature">Gym Services</li>
 <li class="pricing__feature">15 Yoga Courses</li>
 <li class="pricing__feature">20 Thai Massages</li>
 <li class="pricing__feature">35 Aerobics</li>
 </ul>
 <button class="pricing__action">Sign Up Now</button>
 </div>
 </div>

</div>
</div>

BootstrapTema

Прозрачные анимированные прайсы

Скриншот

Подробнее

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

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

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