Светлые прайсы с эффектом наведения / Прайсы / Сниппеты Bootstrap

Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-09-02 в 14:05

Метка: 1581110784

⇄ ⇅

.pricingTable{
 text-align: center;
 background: #fff;
 margin: 0 -15px;
 box-shadow: 0 0 10px #ababab;
 padding-bottom: 40px;
 border-radius: 10px;
 color: #cad0de;
 transform: scale(1);
 transition: all 0.5s ease 0s;
}
.pricingTable:hover{
 transform: scale(1.05);
 z-index: 1;
}
.pricingTable .pricingTable-header{
 padding: 40px 0;
 background: #f5f6f9;
 border-radius: 10px 10px 50% 50%;
 transition: all 0.5s ease 0s;
}
.pricingTable:hover .pricingTable-header{
 background: #ff9624;
}
.pricingTable .pricingTable-header i{
 font-size: 50px;
 color: #858c9a;
 margin-bottom: 10px;
 transition: all 0.5s ease 0s;
}
.pricingTable .price-value{
 font-size: 35px;
 color: #ff9624;
 transition: all 0.5s ease 0s;
}
.pricingTable .month{
 display: block;
 font-size: 14px;
 color: #cad0de;
}
.pricingTable:hover .pricingTable-header i,
.pricingTable:hover .price-value,
.pricingTable:hover .month{
 color: #fff;
}
.pricingTable .heading{
 font-size: 24px;
 color: #ff9624;
 margin-bottom: 20px;
 text-transform: uppercase;
}
.pricingTable .pricing-content ul{
 list-style: none;
 padding: 0;
 margin-bottom: 30px;
}
.pricingTable .pricing-content ul li{
 line-height: 30px;
 color: #a7a8aa;
}
.pricingTable .pricingTable-signup a{
 display: inline-block;
 font-size: 15px;
 color: #fff;
 padding: 10px 35px;
 border-radius: 20px;
 background: #ffa442;
 text-transform: uppercase;
 transition: all 0.3s ease 0s;
}
.pricingTable .pricingTable-signup a:hover{
 box-shadow: 0 0 10px #ffa442;
}
.pricingTable.blue .price-value,
.pricingTable.blue .heading{
 color: #4b64ff;
}
.pricingTable.blue:hover .pricingTable-header,
.pricingTable.blue .pricingTable-signup a{
 background: #4b64ff;
}
.pricingTable.blue .pricingTable-signup a:hover{
 box-shadow: 0 0 10px #4b64ff;
}
.pricingTable.red .price-value,
.pricingTable.red .heading{
 color: #ff4b4b;
}
.pricingTable.red:hover .pricingTable-header,
.pricingTable.red .pricingTable-signup a{
 background: #ff4b4b;
}
.pricingTable.red .pricingTable-signup a:hover{
 box-shadow: 0 0 10px #ff4b4b;
}
.pricingTable.green .price-value,
.pricingTable.green .heading{
 color: #40c952;
}
.pricingTable.green:hover .pricingTable-header,
.pricingTable.green .pricingTable-signup a{
 background: #40c952;
}
.pricingTable.green .pricingTable-signup a:hover{
 box-shadow: 0 0 10px #40c952;
}
.pricingTable.blue:hover .price-value,
.pricingTable.red:hover .price-value,
.pricingTable.green:hover .price-value{
 color: #fff;
}
@media screen and (max-width: 990px){
 .pricingTable{ margin: 0 0 20px 0; }
}
</style>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <i class="fa fa-adjust"></i>
 <div class="price-value"> $10.00 <span class="month">per month</span> </div>
 </div>
 <h3 class="heading">Standard</h3>
 <div class="pricing-content">
 <ul>
 <li><b>50GB</b> Disk Space</li>
 <li><b>50</b> Email Accounts</li>
 <li><b>50GB</b> Monthly Bandwidth</li>
 <li><b>10</b> subdomains</li>
 <li><b>15</b> Domains</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable green">
 <div class="pricingTable-header">
 <i class="fa fa-briefcase"></i>
 <div class="price-value"> $20.00 <span class="month">per month</span> </div>
 </div>
 <h3 class="heading">Business</h3>
 <div class="pricing-content">
 <ul>
 <li><b>60GB</b> Disk Space</li>
 <li><b>60</b> Email Accounts</li>
 <li><b>60GB</b> Monthly Bandwidth</li>
 <li><b>15</b> subdomains</li>
 <li><b>20</b> Domains</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable blue">
 <div class="pricingTable-header">
 <i class="fa fa-diamond"></i>
 <div class="price-value"> $30.00 <span class="month">per month</span> </div>
 </div>
 <h3 class="heading">Premium</h3>
 <div class="pricing-content">
 <ul>
 <li><b>70GB</b> Disk Space</li>
 <li><b>70</b> Email Accounts</li>
 <li><b>70GB</b> Monthly Bandwidth</li>
 <li><b>20</b> subdomains</li>
 <li><b>25</b> Domains</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#">sign up</a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable red">
 <div class="pricingTable-header">
 <i class="fa fa-cube"></i>
 <div class="price-value"> $40.00 <span class="month">per month</span> </div>
 </div>
 <h3 class="heading">Extra</h3>
 <div class="pricing-content">
 <ul>
 <li><b>80GB</b> Disk Space</li>
 <li><b>80</b> Email Accounts</li>
 <li><b>80GB</b> Monthly Bandwidth</li>
 <li><b>25</b> subdomains</li>
 <li><b>30</b> Domains</li>
 </ul>
 </div>
 <div class="pricingTable-signup">
 <a href="#">sign up</a>
 </div>
 </div>
 </div>

</div>
</div>

BootstrapTema

Светлые прайсы с эффектом наведения

Скриншот

Подробнее

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

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

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