Pricing table list header / Прайсы / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-09-08 в 22:11

Метка: 1581109956

⇄ ⇅

.pricingTable{
 text-align: center;
}
.pricingTable .pricingTable-header{
 padding: 30px 0;
 background: #4d4d4d;
 position: relative;
 transition: all 0.3s ease 0s;
}
.pricingTable:hover .pricingTable-header{
 background: #09b2c6;
}
.pricingTable .pricingTable-header:before,
.pricingTable .pricingTable-header:after{
 content: "";
 width: 16px;
 height: 16px;
 border-radius: 50%;
 border: 1px solid #d9d9d8;
 position: absolute;
 bottom: 12px;
}
.pricingTable .pricingTable-header:before{
 left: 40px;
}
.pricingTable .pricingTable-header:after{
 right: 40px;
}
.pricingTable .heading{
 font-size: 20px;
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin-top: 0;
}
.pricingTable .price-value{
 display: inline-block;
 position: relative;
 font-size: 55px;
 font-weight: bold;
 color: #09b1c5;
 transition: all 0.3s ease 0s;
}
.pricingTable:hover .price-value{
 color: #fff;
}
.pricingTable .currency{
 font-size: 30px;
 font-weight: bold;
 position: absolute;
 top: 6px;
 left: -19px;
}
.pricingTable .month{
 font-size: 16px;
 color: #fff;
 position: absolute;
 bottom: 15px;
 right: -30px;
 text-transform: uppercase;
}
.pricingTable .pricing-content{
 padding-top: 50px;
 background: #fff;
 position: relative;
}
.pricingTable .pricing-content:before,
.pricingTable .pricing-content:after{
 content: "";
 width: 16px;
 height: 16px;
 border-radius: 50%;
 border: 1px solid #7c7c7c;
 position: absolute;
 top: 12px;
}
.pricingTable .pricing-content:before{
 left: 40px;
}
.pricingTable .pricing-content:after{
 right: 40px;
}
.pricingTable .pricing-content ul{
 padding: 0 20px;
 margin: 0;
 list-style: none;
}
.pricingTable .pricing-content ul:before,
.pricingTable .pricing-content ul:after{
 content: "";
 width: 8px;
 height: 46px;
 border-radius: 3px;
 background: linear-gradient(to bottom,#818282 50%,#727373 50%);
 position: absolute;
 top: -22px;
 z-index: 1;
 box-shadow: 0 0 5px #707070;
 transition: all 0.3s ease 0s;
}
.pricingTable:hover .pricing-content ul:before,
.pricingTable:hover .pricing-content ul:after{
 background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%);
}
.pricingTable .pricing-content ul:before{
 left: 44px;
}
.pricingTable .pricing-content ul:after{
 right: 44px;
}
.pricingTable .pricing-content ul li{
 font-size: 15px;
 font-weight: bold;
 color: #777473;
 padding: 10px 0;
 border-bottom: 1px solid #d9d9d8;
}
.pricingTable .pricing-content ul li:last-child{
 border-bottom: none;
}
.pricingTable .read{
 display: inline-block;
 font-size: 16px;
 color: #fff;
 text-transform: uppercase;
 background: #d9d9d8;
 padding: 8px 25px;
 margin: 30px 0;
 transition: all 0.3s ease 0s;
}
.pricingTable .read:hover{
 text-decoration: none;
}
.pricingTable:hover .read{
 background: #09b1c5;
}
@media screen and (max-width: 990px){
 .pricingTable{ margin-bottom: 25px; }
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="heading">Standard</h3>
 <span class="price-value">
 <span class="currency">$</span> 10
 <span class="month">/mo</span>
 </span>
 </div>
 <div class="pricing-content">
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 Subdomains</li>
 <li>15 Domains</li>
 </ul>
 <a href="#" class="read">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="heading">Business</h3>
 <span class="price-value">
 <span class="currency">$</span> 20
 <span class="month">/mo</span>
 </span>
 </div>
 <div class="pricing-content">
 <ul>
 <li>60GB Disk Space</li>
 <li>60 Email Accounts</li>
 <li>60GB Monthly Bandwidth</li>
 <li>15 Subdomains</li>
 <li>20 Domains</li>
 </ul>
 <a href="#" class="read">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="heading">Premium</h3>
 <span class="price-value">
 <span class="currency">$</span> 30
 <span class="month">/mo</span>
 </span>
 </div>
 <div class="pricing-content">
 <ul>
 <li>70GB Disk Space</li>
 <li>70 Email Accounts</li>
 <li>70GB Monthly Bandwidth</li>
 <li>20 Subdomains</li>
 <li>25 Domains</li>
 </ul>
 <a href="#" class="read">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="heading">Extra</h3>
 <span class="price-value">
 <span class="currency">$</span> 40
 <span class="month">/mo</span>
 </span>
 </div>
 <div class="pricing-content">
 <ul>
 <li>80GB Disk Space</li>
 <li>80 Email Accounts</li>
 <li>80GB Monthly Bandwidth</li>
 <li>25 Subdomains</li>
 <li>30 Domains</li>
 </ul>
 <a href="#" class="read">sign up</a>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Pricing table list header

Скриншот

Подробнее

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

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

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