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

Версия: v1.0.1

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

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

Bootstrap: 3

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

Язык: Русский

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2015-12-24 в 19:52

Метка: 1581766509

⇄ ⇅

.panel.price>.panel-heading{
box-shadow: 0px 5px 0px rgba(50,50,50, .2) inset;
text-shadow:0px 3px 0px rgba(50,50,50, .6);
}

.price .list-group-item{
border-bottom-:1px solid rgba(250,250,250, .5);
}

.panel.price .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel.price .list-group-item:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}

.price .panel-footer {
color: #fff;
border-bottom:0px;
background-color: rgba(0,0,0, .1);
box-shadow: 0px 3px 0px rgba(0,0,0, .3);
}

.panel.price .btn{
box-shadow: 0 -1px 0px rgba(50,50,50, .2) inset;
border:0px;
}

/* зелёные */

.price.panel-green>.panel-heading {
color: #fff;
background-color: #57AC57;
border-color: #71DF71;
border-bottom: 1px solid #71DF71;
}

.price.panel-green>.panel-body {
color: #fff;
background-color: #65C965;
}

.price.panel-green>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}

.price.panel-green .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}

/* голубые */

.price.panel-blue>.panel-heading {
color: #fff;
background-color: #608BB4;
border-color: #78AEE1;
border-bottom: 1px solid #78AEE1;
}

.price.panel-blue>.panel-body {
color: #fff;
background-color: #73A3D4;
}

.price.panel-blue>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}

.price.panel-blue .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}

/* красные */

.price.panel-red>.panel-heading {
color: #fff;
background-color: #D04E50;
border-color: #FF6062;
border-bottom: 1px solid #FF6062;
}

.price.panel-red>.panel-body {
color: #fff;
background-color: #EF5A5C;
}

.price.panel-red>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}

.price.panel-red .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}

/* серые */

.price.panel-grey>.panel-heading {
color: #fff;
background-color: #6D6D6D;
border-color: #B7B7B7;
border-bottom: 1px solid #B7B7B7;
}

.price.panel-grey>.panel-body {
color: #fff;
background-color: #808080;
}

.price.panel-grey>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}

.price.panel-grey .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}

/* белые */

.price.panel-white>.panel-heading {
color: #333;
background-color: #f9f9f9;
border-color: #ccc;
border-bottom: 1px solid #ccc;
text-shadow: 0px 2px 0px rgba(250,250,250, .7);
}

.panel.panel-white.price:hover>.panel-heading{
box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
}

.price.panel-white>.panel-body {
color: #fff;
background-color: #dfdfdf;
}

.price.panel-white>.panel-body .lead{
text-shadow: 0px 2px 0px rgba(250,250,250, .8);
color:#666;
}

.price:hover.panel-white>.panel-body .lead{
text-shadow: 0px 2px 0px rgba(250,250,250, .9);
color:#333;
}

.price.panel-white .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
</style>

<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>PRO ПЛАН</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$10 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-check text-danger"></i> Персональный</li>
<li class="list-group-item"><i class="fa fa-check text-danger"></i> Безлимитный</li>
<li class="list-group-item"><i class="fa fa-check text-danger"></i> 24/7 поддержка</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
</div>
</div>

</div>

<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>DEV ПЛАН</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$20 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-check text-info"></i> Персональный</li>
<li class="list-group-item"><i class="fa fa-check text-info"></i> Безлимитный</li>
<li class="list-group-item"><i class="fa fa-check text-info"></i> 24/7 поддержка</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info" href="#">BUY NOW!</a>
</div>
</div>

</div>

<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>FREE ПЛАН</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Персональный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> Безлимитный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> 24/7 поддержка</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-success" href="#">BUY NOW!</a>
</div>
</div>

</div>

<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>FREE ПЛАН</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Персональный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> Безлимитный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> 24/7 поддержка</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-primary" href="#">BUY NOW!</a>
</div>
</div>

</div>

<div class="panel price panel-white">
<div class="panel-heading arrow_box text-center">
<h3>FREE ПЛАН</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:40px"><strong>$0 / month</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"><i class="fa fa-check text-success"></i> Персональный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> Безлимитный</li>
<li class="list-group-item"><i class="fa fa-check text-success"></i> 24/7 поддержка</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-default" href="#">BUY NOW!</a>
</div>
</div>

</div>

</div>

</div>

</div>

</div></div>

BootstrapTema

Четыре прайса

Скриншот

Подробнее

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

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

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