Colored Price Bootstrap / Прайсы / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

Теги: Snippet, прайсы, Price, сниппет, Bootstrap, Pricing

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

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

Метка: 1496304618

⇄ ⇅

.pric-clr1 {
 background:#1A63A0;
}
.pric-clr3 h4 {
 background: #CC660E;
}
.pric-clr3 {
 background: #E07D28;
}
.price-block {
 box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.15);
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
 -moz-transition: 0.5s all;
 -o-transition: 0.5s all;
}
.price-block:hover {
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1);
 z-index: 1;
}
a.popup-with-zoom-anim {
 outline: none;
 text-decoration:none !important;
}
@media (max-width:1024px){
.price-gd-top h4 {
 font-size: 1.4em;
}
.price-gd-top h3 {
 font-size: 2.8em;
}
.price-list ul li {
 font-size: 0.8em;
}
.price-selet a {
 font-size: 1em;
}
}
@media (max-width:991px){
.price-grid {
 margin-bottom: 2em;
 float: left;
 width: 50%;
}
}
@media (max-width:480px){
.price-grid {
 padding: 0px 19px 0px 0px;
}
.price-grid {
 margin-bottom: 1.5em;
 float: none;
 width: 100%;
}
}
@media (max-width:320px){
.prices-head h2 {
 font-size: 1.7em;
 margin: 0em 0em 0.5em 0.4em;
}
} 
</style>

<div class="col-md-4 price-grid">
 <div class="price-block">
 <div class="price-gd-top pric-clr1">
 <h4>Basic</h4>
 <h3><span class="usa-dollar">$</span> 5<span class="per-month">/mon</span></h3>
 <h5>Free for 15days</h5>
 </div>
 <div class="price-gd-bottom">
 <div class="price-list">
 <ul>
 <li>1Gb Disk</li>
 <li>10Gb Bandwidth Monthly</li>
 <li>2 Email Account</li>
 <li>Unlimited Sub Domains</li>
 </ul>
 </div>
 </div>
 <div class="price-selet pric-clr1"> 
 <a class="popup-with-zoom-anim" href="#">Select Plan</a>
 </div>
 </div>
 </div>
 <div class="col-md-4 price-grid">
 <div class="price-block">
 <div class="price-gd-top pric-clr2">
 <h4>Professional</h4>
 <h3><span class="usa-dollar">$</span> 10<span class="per-month">/mon</span></h3>
 <h5>Free for 2 months</h5>
 </div>
 <div class="price-gd-bottom">
 <div class="price-list">
 <ul>
 <li>3Gb Disk</li>
 <li>25Gb Bandwidth Monthly</li>
 <li>5 Email Account</li>
 <li>Unlimited Sub Domains</li>
 </ul>
 </div>
 </div>
 <div class="price-selet pric-clr2">
 <a class="popup-with-zoom-anim" href="#">Select Plan</a>
 </div>
 </div>
 </div>
 <div class="col-md-4 price-grid">
 <div class="price-block">
 <div class="price-gd-top pric-clr3">
 <h4>Premium</h4>
 <h3><span class="usa-dollar">$</span> 12<span class="per-month">/mon</span></h3>
 <h5>Free for 9 months</h5>
 </div>
 <div class="price-gd-bottom">
 <div class="price-list">
 <ul>
 <li>5Gb Disk</li>
 <li>50Gb Bandwidth Monthly</li>
 <li>10 Email Account</li>
 <li>Unlimited Sub Domains</li>
 </ul>
 </div>
 </div>
 <div class="price-selet pric-clr3">
 <a class="popup-with-zoom-anim" href="#">Select Plan</a>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Colored Price Bootstrap

Скриншот

Подробнее

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

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

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