Prices of Green Hexagons / Прайсы / Сниппеты Bootstrap

Версия: v1.0

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

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

Для Bootstrap: 3

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

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

Вес файла: 29.4 Kb

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

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

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

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

Прикреплён файл №2: /stuff/0-0-0-1118-20

Скачали бесплатно: 35 раз

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

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

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

Авторство: bootstraptema.ru

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

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

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

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

Добавлено: 2016-06-10 в 23:26

Метка: 1581146355

⇄ ⇅

.pricing_title {
 text-align: center;
 font-size: 36px;
 color: #fff;
 line-height: 44px;
}
.pricing_subtitle {
 font-size: 24px;
 color: #6d950c;
 text-align: center;
}
.pricing_table {
 background: #fff;
 margin: 15px 0px;
 padding-bottom: 20px;
}
.pricingbg img {
 width: 100%;
}
.pricing_box {
 position: absolute;
 top: 0%;
 padding: 0 30px;
 color: #ffffff;
 margin-top: 50px;
}
.pricing_box span.price_title {
 font-size: 24px;
 font-weight: bold;
 width: 100%;
 float: left;
 margin-bottom: 5px;
}
.pricing_box span.sign {
 font-size: 28px;
 color: #597d01;
 font-weight: bold;
 float: left;
 padding: 10px 0px 0px 0px;
}
.pricing_box span.price {
 color: #597d01;
 font-weight: bold;
 float: left;
 padding: 10px 0px 0px 0px;
 font-size: 46px;
}
.pricing_box span.month {
 float: left;
 padding: 10px 0px 0px 10px;
}
.pricing_list ul {
 margin: 0px 15px;
 list-style: none;
 padding: 0px 20px;
}
.pricing_list ul li {
 background: url(https://bootstraptema.ru/snippets/price/2016/pgh/arrow.png) no-repeat;
 background-position: left top;
 margin: 0px;
 padding: 7px 30px;
 border-bottom: 1px solid #e0e0e0;
}
.signup {
 display: block;
 background: #91bf24;
 color: #597d01;
 width: 60%;
 margin: 20px auto;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 line-height: 40px;
 text-decoration: none !important
}
.pricing_list ul {
 padding: 0px 20px;
}
.pricing_box {
 margin-top: 90px;
}
.pricing_box span.price {
 font-size: 56px;
}
.pricing_box span.month {
 float: left;
 padding: 20px 0px 0px 10px;
}
@media (min-width: 340px) and (max-width:767px) {
 .pricing_table {
 width: 310px;
 margin: 15px auto;
 }
.pricing_box {
 margin-top: 80px;
 }
.pricing_box span.month {
 float: left;
 padding: 20px 0px 0px 10px;
 }
}
</style>

<div class="col-sm-4">
 <div class="pricing_table">
 <div class="pricingbg">
 <img src="https://bootstraptema.ru/snippets/price/2016/pgh/pricing_bg.jpg" alt="templatemo price img">
 </div>
 <div class="pricing_box">
 <span class="price_title">BASIC</span>
 <span class="sign">$</span><span class="price">100</span> <span class="month">/ month </span>
 </div>
 <div class="pricing_list">
 <ul>
 <li>Octa Core 2.4 GHz</li>
 <li>750 GB Storage</li>
 <li>64 GB Memory</li>
 <li>30,000 GB Bandwidth</li>
 <li>10 Email Addresses</li>
 <li>24/7 Level 1 Support</li>
 </ul>
 </div>
 <a href="#" class="signup">SIGN UP NOW</a>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="pricing_table">
 <div class="pricingbg">
 <img src="https://bootstraptema.ru/snippets/price/2016/pgh/pricing_bg.jpg" alt="templatemo price img">
 </div>
 <div class="pricing_box">
 <span class="price_title">PRO</span>
 <span class="sign">$</span><span class="price">200 </span> <span class="month">/ month </span>
 </div>
 <div class="pricing_list">
 <ul>
 <li>Octa Core 3.2 GHz</li>
 <li>1,500 GB Storage</li>
 <li>128 GB Memory</li>
 <li>50,000 GB Bandwidth</li>
 <li>20 Email Addresses</li>
 <li>24/7 Level 2 Support</li>
 </ul>
 </div>
 <a href="#" class="signup">SIGN UP NOW</a>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="pricing_table">
 <div class="pricingbg">
 <img src="https://bootstraptema.ru/snippets/price/2016/pgh/pricing_bg.jpg" alt="templatemo price img">
 </div>
 <div class="pricing_box">
 <span class="price_title">SUPER</span>
 <span class="sign">$</span><span class="price">300 </span> <span class="month">/ month </span>
 </div>
 <div class="pricing_list">
 <ul>
 <li>Octa Core 4.0 GHz</li>
 <li>2,500 GB Storage</li>
 <li>256 GB Memory</li>
 <li>80,000 GB Bandwidth</li>
 <li>30 Email Addresses</li>
 <li>24/7 Level 3 Support</li>
 </ul>
 </div>
 <a href="#" class="signup">SIGN UP NOW</a>
 </div>
 </div>

</div>
</div>

BootstrapTema

Prices of Green Hexagons

Скриншот

Подробнее

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

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

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