Таблица пёстрых прайсов / Прайсы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

Авторство: http://goo.gl/SJV7Q7

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

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

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

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

Добавлено: 2016-05-30 в 17:06

Метка: 1581148078

⇄ ⇅

.pricingTable{
 text-align: center;
}
.pricingTable .pricingTable-header{
 color:#feffff;
 background: #727cb6;
}
.pricingTable .heading{
 display: block;
 padding-top: 25px;
}
.pricingTable .heading:after{
 content: "";
 border-top: 1px solid rgba(255, 255, 255 ,0.4);
 display: inline-block;
 width: 85%;
}
.pricingTable .heading > h3{
 margin: 0;
 text-transform: capitalize;
 font-size: 20px;
}
.pricingTable .heading > span{
 text-transform: capitalize;
 font-size: 13px;
 margin-top: 5px;
 display: block;
}
.pricingTable .price-value{
 padding-bottom: 25px;
 display: block;
 font-size: 34px;
}
.pricingTable-header > .price-value > .month{
 font-size: 14px;
 display: inline-block;
 text-transform: uppercase;
}
.pricingTable .price-value > span{
 display: block;
 font-size: 14px;
 line-height: 20px;
}
.pricingTable .pricingContent{
 text-transform: capitalize;
 background: #151515;
 color:#fefeff;
}
.pricingTable .pricingContent > i{
 font-size: 60px;
 margin-top: 20px;
}
.pricingTable .pricingContent ul{
 list-style: none;
 padding: 0;
 margin-bottom: 0;
 text-align: left;
}
.pricingTable .pricingContent ul li{
 padding: 12px 0;
 border-bottom: 1px solid #000;
 border-top: 1px solid #333;
 width: 85%;
 margin: 0 auto;
}
.pricingTable .pricingContent ul li:first-child{
 border-top: 0px none;
}
.pricingTable .pricingContent ul li:last-child{
 border-bottom: 0px none;
}
.pricingTable .pricingContent ul li:before{
 content: "\f00c";
 font-family: 'FontAwesome';
 margin-right: 10px;
 transition:all 0.5s ease 0s;
}
.pricingTable .pricingContent ul li:hover:before{
 margin-right: 20px;
}
.pricingTable .pricingTable-sign-up{
 padding: 20px 0;
 background: #151515;
 color:#fff;
 text-transform: capitalize;
}
.pricingTable .pricingTable-sign-up > span{
 margin-top: 10px;
 display: block;
}
.pricingTable .btn-block{
 width: 40%;
 margin: 0 auto;
 background: #e67e22;
 color:#fff;
 text-transform: capitalize;
 border: 0px none;
 padding: 10px;
 border-radius: 3px;
 font-size: 17px;
 transition:all 0.5s ease 0s;
}
.pricingTable .btn-block:hover{
 border-radius: 12px;
}
.pricingTable .btn-block:before{
 content: "\f07a";
 font-family: 'FontAwesome';
 margin-right: 10px;
}
.pricingTable.pink .pricingTable-header{
 background: #ed687c;
}
.pricingTable.orange .pricingTable-header{
 background: #e67e22;
}
.pricingTable.green .pricingTable-header{
 background: #008b8b;
}
@media screen and (max-width: 990px){
 .pricingTable{
 margin-bottom: 20px;
 }
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="heading">
 <h3>Standard</h3>
 <span>Lorem ipsum dolor sit</span>
 </span>
 <span class="price-value">$15<span class="month">month</span> <span>Lorem ipsum </span><span>Lorem ipsum dolor sit amet</span></span>
 </div>

<div class="pricingContent">
 <i class="fa fa-adjust"></i>
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 subdomains</li>
 <li>50 Domains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up</a>
 <span>Lorem ipsum dolor sit amet. </span>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable pink">
 <div class="pricingTable-header">
 <span class="heading">
 <h3>Business</h3>
 <span>Lorem ipsum dolor sit</span>
 </span>
 <span class="price-value">$30<span class="month">month</span> <span>Lorem ipsum</span><span>Lorem ipsum dolor sit amet</span></span>
 </div>

<div class="pricingContent">
 <i class="fa fa-briefcase"></i>
 <ul>
 <li>70GB Disk Space</li>
 <li>70 Email Accounts</li>
 <li>70GB Monthly Bandwidth</li>
 <li>30 subdomains</li>
 <li>70 Domains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up</a>
 <span>Lorem ipsum dolor sit amet. </span>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable orange">
 <div class="pricingTable-header">
 <span class="heading">
 <h3>Premium</h3>
 <span>Lorem ipsum dolor sit</span>
 </span>
 <span class="price-value">$45<span class="month">month</span> <span>Lorem ipsum</span><span>Lorem ipsum dolor sit amet</span></span>
 </div>

<div class="pricingContent">
 <i class="fa fa-cube"></i>
 <ul>
 <li>80GB Disk Space</li>
 <li>80 Email Accounts</li>
 <li>80GB Monthly Bandwidth</li>
 <li>40 subdomains</li>
 <li>80 Domains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up</a>
 <span>Lorem ipsum dolor sit amet. </span>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable green">
 <div class="pricingTable-header">
 <span class="heading">
 <h3>Extra</h3>
 <span>Lorem ipsum dolor sit</span>
 </span>
 <span class="price-value">$60<span class="month">month</span> <span>Lorem ipsum</span><span>Lorem ipsum dolor sit amet</span></span>
 </div>

<div class="pricingContent">
 <i class="fa fa-diamond"></i>
 <ul>
 <li>90GB Disk Space</li>
 <li>90 Email Accounts</li>
 <li>90GB Monthly Bandwidth</li>
 <li>50 subdomains</li>
 <li>90 Domains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up</a>
 <span>Lorem ipsum dolor sit amet. </span>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Таблица пёстрых прайсов

Скриншот

Подробнее

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

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

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