Прайсы с шестигранниками / Прайсы / Сниппеты Bootstrap

Версия: v1.0

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

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

Для Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-08-15 в 10:25

Метка: 1581113500

⇄ ⇅

.pricingTable{
 text-align: center;
 background: #fff;
 border-radius: 5px;
 margin-top: 60px;
}
.pricingTable .pricingTable-header{
 position: relative;
 border-bottom: 1px solid #e3e0e0;
 border-radius: 5px 5px 0 0;
 padding: 45px 0 0;
 transition: all 0.3s ease 0s;
}

.pricingTable:hover .pricingTable-header{
 background-color: #b696e9;
}
.pricingTable .price-icon{
 display: block;
 width: 87px;
 height: 48px;
 background: #fff;
 border-left: 2px solid #b696e9;
 border-right: 2px solid #b696e9;
 position: absolute;
 top: -20px;
 left: 35%;
}
.pricingTable .price-icon:after,
.pricingTable .price-icon:before{
 content: "";
 width: 61.5px;
 height: 61.5px;
 background: #fff;
 border-bottom: 3px solid #b696e9;
 border-left: 3px solid #b696e9;
 position: absolute;
 bottom: -31.012px;
 left: 10.5px;
 transform: scaleY(0.5774) rotate(-45deg);
 border-radius: 0 7px;
}
.pricingTable .price-icon:before{
 border: 0px none;
 border-right: 3px solid #b696e9;
 border-top: 3px solid #b696e9;
 top: -31.012px;
}
.pricingTable .price-value{
 font-size: 25px;
 color: #b696e9;
 position: absolute;
 top: -24px;
 left: 41%;
}
.pricingTable .month{
 display: block;
 font-size: 12px;
 text-transform: uppercase;
}
.pricingTable .heading{
 font-size: 17px;
 color: #b696e9;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin: 15px 0;
 transition: all 0.4s ease 0s;
}
.pricingTable:hover .heading{
 color: #fff;
}
.pricingTable .pricingContent ul{
 padding: 0;
 margin: 0;
 list-style: none;
}
.pricingTable .pricingContent ul li{
 font-size: 14px;
 color: #878787;
 padding: 13px 0;
 border-bottom: 1px solid #dfeaf0;
}
.pricingTable .pricingContent ul li i{
 margin: 0 10px 0 0;
 font-style: italic;
 color: #b696e9;
}
.pricingTable .pricingTable-signup{
 padding: 30px 0;
}
.pricingTable .pricingTable-signup a{
 display: inline-block;
 font-size: 14px;
 font-style: italic;
 color: #999;
 text-transform: capitalize;
 background-color: #fff;
 border-radius: 25px;
 padding: 10px 25px;
 border: 2px solid #ece8e7;
 transition: all 0.4s ease 0s;
}
.pricingTable .pricingTable-signup a:hover{
 background: #b696e9;
 color: #fff;
 border-color: #b696e9;
}
.pricingTable .pricingTable-signup a i{
 margin-right: 5px;
}
@media screen and (max-width: 990px){
 .pricingTable{ margin-bottom: 20px; }
 .pricingTable .price-icon{ left: 39%; }
 .pricingTable .price-value{ left: 44%;}
}
@media screen and (max-width: 767px){
 .pricingTable .price-icon{ left: 44%; }
 .pricingTable .price-value{ left: 46%;}
}
@media screen and (max-width: 480px){
 .pricingTable .price-icon{ left: 40%; }
 .pricingTable .price-value{ left: 44%;}
}
@media screen and (max-width: 360px){
 .pricingTable .price-icon{ left: 37%; }
 .pricingTable .price-value{ left: 42%;}
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="price-icon"></span>
 <span class="price-value">$10<span class="month">monthly</span></span>
 <h3 class="heading">Standard</h3>
 </div>
 <div class="pricingContent">
 <ul>
 <li><i class="fa fa-check"></i>50GB Disk Space</li>
 <li><i class="fa fa-check"></i>50 Email Accounts</li>
 <li><i class="fa fa-check"></i>10 subdomains</li>
 <li><i class="fa fa-check"></i>15 Domains</li>
 <li><i class="fa fa-check"></i>50GB Monthly Bandwidth</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#"><i class="fa fa-shopping-cart"></i> order now</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="price-icon"></span>
 <span class="price-value">$20<span class="month">monthly</span></span>
 <h3 class="heading">Business</h3>
 </div>
 <div class="pricingContent">
 <ul>
 <li><i class="fa fa-check"></i>60GB Disk Space</li>
 <li><i class="fa fa-check"></i>60 Email Accounts</li>
 <li><i class="fa fa-check"></i>15 subdomains</li>
 <li><i class="fa fa-check"></i>20 Domains</li>
 <li><i class="fa fa-check"></i>60GB Monthly Bandwidth</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#"><i class="fa fa-shopping-cart"></i> order now</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="price-icon"></span>
 <span class="price-value">$30<span class="month">monthly</span></span>
 <h3 class="heading">Premium</h3>
 </div>
 <div class="pricingContent">
 <ul>
 <li><i class="fa fa-check"></i>70GB Disk Space</li>
 <li><i class="fa fa-check"></i>70 Email Accounts</li>
 <li><i class="fa fa-check"></i>20 subdomains</li>
 <li><i class="fa fa-check"></i>25 Domains</li>
 <li><i class="fa fa-check"></i>70GB Monthly Bandwidth</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#"><i class="fa fa-shopping-cart"></i> order now</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="price-icon"></span>
 <span class="price-value">$40<span class="month">monthly</span></span>
 <h3 class="heading">Extra</h3>
 </div>
 <div class="pricingContent">
 <ul>
 <li><i class="fa fa-check"></i>80GB Disk Space</li>
 <li><i class="fa fa-check"></i>80 Email Accounts</li>
 <li><i class="fa fa-check"></i>25 subdomains</li>
 <li><i class="fa fa-check"></i>30 Domains</li>
 <li><i class="fa fa-check"></i>80GB Monthly Bandwidth</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#"><i class="fa fa-shopping-cart"></i> order now</a>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Прайсы с шестигранниками

Скриншот

Подробнее

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

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

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