Таблица 4 ярлыков ценообразования / Прайсы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

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

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

Bootstrap: 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-06-04 в 16:34

Метка: 1581147368

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<br><br><br>

<style>
.pricingTable{
 text-align: center;
 box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.1);
}
.pricingTable > .pricingTable-header{
 color:#fff;
 padding: 3px 0;
 background: #727cb6;
}
.pricingTable .price-value{
 background: #353740;
 display: block;
 padding: 24px 12px;
 font-size: 32px;
 position: relative;
}
.pricingTable .price-value:after,
.pricingTable .price-value:before{
 content: "";
 width: 24px;
 height: 24px;
 background: #fff;
 border-radius: 50%;
 display: inline-block;
 position: absolute;
 top:40%;
 right:-15px;
}
.pricingTable .price-value:before{
 left:-15px;
}
.pricingTable .price-value > span{
 font-size: 24px;
}
.pricingTable .price-value > .month{
 display: block;
 text-transform: uppercase;
 font-size: 12px;
}
.pricingTable .price-value > .month:before{
 content: "";
 border: 1px solid #fff;
 width: 28px;
 display: block;
 margin: 0 auto;
 margin-bottom: 5px;
}
.pricingTable .icon{
 display: block;
 padding: 30px 0;
 font-size: 54px;
}
.pricingTable .icon > i{
 transform: rotateY(0deg);
 transition: all 1s ease-out 0s;
}
.pricingTable .icon:hover > i{
 transform: rotateY(360deg);
 color:#333333;
 transition: all 1s ease-out 0s;
}
.pricingTable .heading{
 padding: 12px 0;
 background: #353740;
 display: block;
}
.pricingTable .heading > h3{
 margin: 0;
 text-transform: capitalize;
}
.pricingTable > .pricingContent{
 text-align: left;
}
.pricingTable > .pricingContent > ul{
 list-style: none;
 padding: 0;
 margin-bottom: 0;
}
.pricingTable > .pricingContent > ul > li{
 padding: 12px;
 background: #fff;
 border-bottom: 1px solid #e5e5e5;
 transition: all 0.3s ease-out 0s;
}
.pricingTable > .pricingContent > ul > li:before{
 content: "\f105";
 font-family: 'FontAwesome';
 margin-right: 5px;
 font-weight: bold;
 font-size: 15px;
 transition:all 0.5s ease 0s;
}
.pricingTable > .pricingContent > ul > li:hover{
 background: #f8f8f8;
 color:#727cb6;
}
.pricingTable > .pricingContent > ul > li:hover:before{
 margin-right: 15px;
}
.pricingTable .pricingTable-sign-up{
 padding: 15px 0;
 background: #fff;
}
.pricingTable-sign-up > .btn-block{
 width: 50%;
 margin: 0 auto;
 background: #727cb6;
 color:#fff;
 text-transform: uppercase;
 padding: 10px 0;
 border-radius: 0px;
 position: relative;
 transition: all 0.5s ease-out 0s;
}
.pricingTable-sign-up > .btn-block:after,
.pricingTable-sign-up > .btn-block:before{
 content: "";
 width: 16px;
 height: 16px;
 border-radius: 50%;
 background: #fff;
 display: inline-block;
 position: absolute;
 top:30%;
 right: -10px;
 transition:all 0.8s ease 0s;
}
.pricingTable-sign-up > .btn-block:before{
 left:-10px;
}
.pricingTable .btn-block:hover:after,
.pricingTable .btn-block:hover:before{
 width: 0;
 height: 0;
}
.pricingTable.pink .pricingTable-header,
.pricingTable.pink .btn-block{
 background: #ed687c;
}
.pricingTable.pink .pricingContent > ul > li:hover{
 color: #ed687c;
}
.pricingTable.orange .pricingTable-header,
.pricingTable.orange .btn-block{
 background: #e67e22;
}
.pricingTable.orange .price-value > .month:after{
 content: "best";
 width: 42px;
 height:42px;
 border-radius: 50%;
 background: #fff;
 display: inline-block;
 position: absolute;
 top:3px;
 right: 3px;
 color:#000;
 font-size: 12px;
 line-height: 42px;
 font-weight: bold;
}
.pricingTable.orange .pricingContent > ul > li:hover{
 color: #e67e22;
}
.pricingTable.dark-green .pricingTable-header,
.pricingTable.dark-green .btn-block{
 background: #008b8b;
}
.pricingTable.dark-green .pricingContent > ul > li:hover{
 color: #008b8b;
}
@media screen and (max-width: 990px){
 .pricingTable{
 margin-bottom: 20px;
 }
}
</style>

<div class="container">
 <div class="row">

<div class="col-md-3 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <span class="price-value">$10<span>.09</span><span class="month">per year</span></span>
 <span class="icon"><i class="fa fa-adjust"></i></span>
 <span class="heading">
 <h3>Standard</h3>
 </span>
 </div>

<div class="pricingContent">
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 subdomains</li>
 <li>50 Domains</li>
 <li>Unlimited Subdomains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up <i class="fa fa-shopping-cart"></i></a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable pink">
 <div class="pricingTable-header">
 <span class="price-value">$20<span>.09</span><span class="month">per year</span></span>
 <span class="icon"><i class="fa fa-briefcase"></i></span>
 <span class="heading">
 <h3>Business</h3>
 </span>
 </div>

<div class="pricingContent">
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 subdomains</li>
 <li>50 Domains</li>
 <li>Unlimited Subdomains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up <i class="fa fa-shopping-cart"></i></a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable orange">
 <div class="pricingTable-header">
 <span class="price-value">$30<span>.09</span><span class="month">per year</span></span>
 <span class="icon"><i class="fa fa-cube"></i></span>
 <span class="heading">
 <h3>Premium</h3>
 </span>
 </div>

<div class="pricingContent">
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 subdomains</li>
 <li>50 Domains</li>
 <li>Unlimited Subdomains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up <i class="fa fa-shopping-cart"></i></a>
 </div>
 </div>
 </div>

<div class="col-md-3 col-sm-6">
 <div class="pricingTable dark-green">
 <div class="pricingTable-header">
 <span class="price-value">$40<span>.09</span><span class="month">per year</span></span>
 <span class="icon"><i class="fa fa-diamond"></i></span>
 <span class="heading">
 <h3>Extra</h3>
 </span>
 </div>

<div class="pricingContent">
 <ul>
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Monthly Bandwidth</li>
 <li>10 subdomains</li>
 <li>50 Domains</li>
 <li>Unlimited Subdomains</li>
 </ul>
 </div>

<div class="pricingTable-sign-up">
 <a href="#" class="btn btn-block btn-default">sign up <i class="fa fa-shopping-cart"></i></a>
 </div>
 </div>
 </div>

</div>
</div>