Описание цен / Прайсы / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2017-06-15 в 08:57

Метка: 1497506266

⇄ ⇅

/* pricing style */
.btpricing ul.pricing {
 list-style: none;
 padding: 0;
 margin: 70px 0 30px;
 border: 5px solid #464646;
 padding: 15px;
 text-align: center;
 /* background: #EEE; */
}
.btpricing ul.pricing li {
 display: block;
 padding: 10px;
}
.btpricing ul.pricing li.plan-header {
 background: #bc386f;
 margin: -15px -15px 10px;
 padding: 15px 15px 30px;
 border: 0;
}
.btpricing ul.pricing li.plan-header .price-duration {
 position: relative;
 margin-top: 15px;
 top: -10px;
 display: inline-block;
 width: 100%;
 height: 116px;
 color: #fff;
 border-bottom: 1px dashed #696363;
}
.btpricing ul.pricing li.plan-header .price-duration > span {
 display: block;
 line-height: 1;
}
.btpricing ul.pricing li.plan-header .price-duration > span.price {
 font-size: 24px;
 font-weight: 700;
 margin-top: 35px;
 /* background: #ffffff; */
 height: 150px;
 width: 150px;
 border-radius: 50%;
 display: block;
 clear: right;
 margin: 0 auto;
 line-height: 150px;
 font-size: 32px;
}
.btpricing ul.pricing li.plan-header .price-duration > span.duration {
 margin-top: 5px;
}
.btpricing ul.pricing li.plan-header .plan-name {
 margin-top: 10px;
 font-size: 24px;
 color: #ffd7e8;
 font-weight: bold;
 line-height: 1;
 text-transform: uppercase;
}
.btpricing ul.pricing.featured {
 /* background: #ffffff; */
 border-color: #bc386f;
}
.btpricing ul.pricing.featured li.plan-header {
 /* background: #D7D7D7; */
}
.btpricing ul.pricing.featured li.plan-header .plan-name {
 color: #ffffff;
}
li.plan-purchase a {
 background: #bc386f;
 color: #FFFFFF;
 padding: 10px 20px;
}
li.plan-purchase a:hover,
li.plan-purchase a:focus {
 background: #444444;
 color: #bc386f;
}
</style>

<div class="col-sm-6 col-md-3">
 <ul class="pricing">
 <li class="plan-header">
 <div class="price-duration">
 <span class="price">
 $100
 </span>
 <span class="duration">
 per month
 </span>
 </div>

<div class="plan-name">
 Basic
 </div>
 </li>
 <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
 <li class="plan-purchase"><a class="btn" href="#">Order Now!</a></li>
 </ul>
 </div>

<div class="col-sm-6 col-md-3">
 <ul class="pricing featured">
 <li class="plan-header">
 <div class="price-duration">
 <span class="price">
 $200
 </span>
 <span class="duration">
 per month
 </span>
 </div>

<div class="plan-name">
 Standard
 </div>
 </li>
 <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
 <li class="plan-purchase"><a class="btn" href="#">Order Now!</a></li>
 </ul>
 </div>

<div class="col-sm-6 col-md-3">
 <ul class="pricing">
 <li class="plan-header">
 <div class="price-duration">
 <span class="price">
 $300
 </span>
 <span class="duration">
 per month
 </span>
 </div>

<div class="plan-name">
 Gold
 </div>
 </li>
 <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
 <li class="plan-purchase"><a class="btn" href="#">Order Now!</a></li>
 </ul>
 </div>

<div class="col-sm-6 col-md-3">
 <ul class="pricing">
 <li class="plan-header">
 <div class="price-duration">
 <span class="price">
 $400
 </span>
 <span class="duration">
 per month
 </span>
 </div>

<div class="plan-name">
 Platinum
 </div>
 </li>
 <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li>
 <li class="plan-purchase"><a class="btn" href="#">Order Now!</a></li>
 </ul>
 </div>

</section>
</div>
</div>

BootstrapTema

Описание цен

Скриншот

Подробнее

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

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

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