Прайсы CSS & HTML с ценниками / Прайсы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.3 Kb

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

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

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

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

Прикреплён файл №2: /stuff/0-0-0-5251-20

Скачали бесплатно: 15 раз

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

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

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

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

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

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

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

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

Добавлено: 2022-04-09 в 10:56

Метка: 1649490984

⇄ ⇅

}

.pricingTable .pricingTable-header{
 color: #E97002;
 background-color: #fff;
 text-align: center;
 padding: 60px 0 40px;
 margin: 0 10px;
 display: block;
 -webkit-clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
 clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
 position: relative;
 z-index: -1;
}

.pricingTable .title{
 font-size: 45px;
 letter-spacing: 2px;
 margin: 0;
}

.pricingTable .pricing-content{
 background: linear-gradient(to bottom,#FBEA54,#F39733);
 border-radius: 20px;
 padding: 15px 15px 25px;
 margin-top: -15px;
 z-index: 2;
 transition:all 0.3s;
}

.pricingTable:hover .pricing-content{
 box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.pricingTable .content{
 background: #fff;
 border-radius: 10px;
 padding: 20px 20px 60px;
 margin-bottom: 20px;
 -webkit-clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%);
 clip-path: polygon(50% 100%, 100% 80%, 100% 0, 0 0, 0 80%);
}

.pricingTable .content ul{
 color: #000;
 text-align: left;
 font-size: 18px;
 line-height: 30px;
 text-transform: capitalize;
 letter-spacing: 1px;
 list-style: disc;
 padding: 0;
 display: inline-block;
 margin: 0 auto 5px;
}

.pricingTable .content ul li{
 margin-bottom: 10px;
}

.pricingTable .content ul li span{
 color: #F39733;
}

.pricingTable .price-value{
 color: #000;
 font-size: 30px;
 transition: all 0.3s;
}

.pricingTable .amount {
 color: #F39733;
}

.pricingTable .pricingTable-signup{
 color: #fff;
 font-size: 20px;
 letter-spacing: 1px;
 text-transform: uppercase;
 position: relative;
 transition: all 0.3s;
 text-decoration: none;
}

.pricingTable .pricingTable-signup:hover{
 padding: 10px 15px;
 box-shadow: 0 0 20px rgba(255,255,255,0.7) inset;
}

.pricingTable.green .pricingTable-header{color: #6CB022;}
.pricingTable.green .price-value .amount{color: #6CB022;}
.pricingTable.green .pricing-content ul span{color: #6CB022;}
.pricingTable.green .pricing-content{background: linear-gradient(to bottom,#B0C333,#46A450);}

.pricingTable.blue .pricingTable-header{color: #1CA2D8;}
.pricingTable.blue .price-value .amount{color: #1CA2D8;}
.pricingTable.blue .pricing-content ul span{color: #1CA2D8;}
.pricingTable.blue .pricing-content{background: linear-gradient(to bottom,#B2DAC2,#51B9B6);}

@media only screen and (max-width: 990px){
 .pricingTable{ margin-bottom: 30px; }
}
@media only screen and (max-width: 479px){
 .pricingTable{ margin:0 0 30px; }
 .pricingTable .content ul{ font-size: 15px; }
 .pricingTable .price-value{ font-size: 23px; }
}
</style>

<div class="row">
 <div class="col-md-4 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="title">Standard</h3>
 </div>
 <div class="pricing-content">
 <div class="content">
 <ul>
 <li><span>50GB</span> Disk Space</li>
 <li><span>50</span> Email Accounts</li>
 <li><span>50GB</span> Bandwidth</li>
 <li><span>10</span> Subdomains</li>
 <li><span>15</span> Domains</li>
 </ul>
 <div class="price-value">
 <span>$ <span class="amount">12.99</span>/month</span>
 </div>
 </div>
 <a href="#" class="pricingTable-signup">Subscribe Now</a>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="pricingTable green">
 <div class="pricingTable-header">
 <h3 class="title">Business</h3>
 </div>
 <div class="pricing-content">
 <div class="content">
 <ul>
 <li><span>50GB</span> Disk Space</li>
 <li><span>50</span> Email Accounts</li>
 <li><span>50GB</span> Bandwidth</li>
 <li><span>10</span> Subdomains</li>
 <li><span>15</span> Domains</li>
 </ul>
 <div class="price-value">
 <span>$ <span class="amount">32.99</span>/month</span>
 </div>
 </div>
 <a href="#" class="pricingTable-signup">Subscribe Now</a>
 </div>
 </div>
 </div>

<div class="col-md-4 col-sm-6">
 <div class="pricingTable blue">
 <div class="pricingTable-header">
 <h3 class="title">Premium</h3>
 </div>
 <div class="pricing-content">
 <div class="content">
 <ul>
 <li><span>50GB</span> Disk Space</li>
 <li><span>50</span> Email Accounts</li>
 <li><span>50GB</span> Bandwidth</li>
 <li><span>10</span> Subdomains</li>
 <li><span>15</span> Domains</li>
 </ul>
 <div class="price-value">
 <span>$ <span class="amount">42.99</span>/month</span>
 </div>
 </div>
 <a href="#" class="pricingTable-signup">Subscribe Now</a>
 </div>
 </div>
 </div>
 </div>

</div>

BootstrapTema

Прайсы CSS & HTML с ценниками

Скриншот

Подробнее

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

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

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