Price linear-gradient / Прайсы / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.5 Kb

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

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

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

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

Прикреплён файл №1: /_sf/52/5299.html

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

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

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

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

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

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

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

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

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

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

Добавлено: 2022-05-17 в 18:45

Метка: 1652802355

⇄ ⇅

.pricingTable:hover{ box-shadow: 0 0 20px -5px #000; }

.pricingTable .pricingTable-header{ padding: 20px 0; }

.pricingTable .title{
 font-size: 35px;
 text-transform: uppercase;
 margin: 0;
}

.pricingTable .month{
 font-size: 15px;
 text-transform: uppercase;
 display: block;
}

.pricingTable .price-value{
 color: #fff;
 background-color: #009DD2;
 padding: 13px 0;
 display: block;
 overflow: hidden;
 position: relative;
 z-index: 1;
}

.pricingTable .price-value:before,
.pricingTable .price-value:after{
 content: '';
 height: 100%;
 width: 100%;
 background: linear-gradient(140deg,#019CD2 25%, #0EB1DC 26%);
 position: absolute;
 left: 0;
 top: 0;
 z-index: -1;
}

.pricingTable .price-value:after{
 background: rgba(69,211,235,0.6);
 width: 160%;
 transform: rotate(-60deg);
}

.pricingTable .amount{
 font-size: 55px;
 font-weight: 600;
}

.pricingTable .amount:before,
.pricingTable .amount:after{
 content: '';
 height: 100%;
 width: 100%;
 background: rgba(69,211,235,0.5);
 transform: rotate(85deg);
 position: absolute;
 left: -70px;
 top: 0;
 z-index: -1;
}

.pricingTable .amount:after{
 background: rgba(69,211,235,0.2);
 left: -100px;
}

.pricingTable .amount span{
 font-size: 35px;
 font-weight: 600;
 vertical-align: top;
 margin-left: -5px;
 display: inline-block;
}

.pricingTable .pricing-content{
 font-size: 18px;
 text-transform: capitalize;
 text-align: left;
 line-height: 40px;
 letter-spacing: 1px;
 padding: 10px;
 margin: 25px 0;
 border-top: 2px solid #009DD2;
 border-bottom: 2px solid #009DD2;
 list-style: none;
 display: inline-block;
}

.pricingTable .pricingTable-signup{
 background-color: #009DD2;
 padding: 30px 0;
 display: block;
 overflow: hidden;
 position: relative;
 z-index: 1;
}

.pricingTable .pricingTable-signup:before,
.pricingTable .pricingTable-signup:after{
 content: '';
 height: 100%;
 width: 100%;
 background: linear-gradient(140deg,#019CD2 25%, #0EB1DC 26%);
 position: absolute;
 left: 0;
 top: 0;
 z-index: -1;
}

.pricingTable .pricingTable-signup:after{
 background: rgba(69,211,235,0.6);
 width: 160%;
 transform: rotate(-60deg);
}

.pricingTable .pricingTable-signup span{
 color: #fff;
 font-size: 28px;
 font-weight: 600;
 text-transform: uppercase;
 padding: 7px 15px;
 border: 2px solid #fff;
 display: inline-block;
 transition: all 0.3s ease;
}

.pricingTable .pricingTable-signup span:before,
.pricingTable .pricingTable-signup span:after{
 content: '';
 height: 100%;
 width: 100%;
 background: rgba(69,211,235,0.5);
 transform: rotate(-85deg);
 position: absolute;
 left: -70px;
 top: 0;
 z-index: -1;
}

.pricingTable .pricingTable-signup span:after{
 background: rgba(69,211,235,0.2);
}

.pricingTable .pricingTable-signup span:hover{
 color: #fff;
 letter-spacing: 1px;
 box-shadow: 0 0 20px -1px #fff;
}

.pricingTable.yellow{ color: #F2B705; }
.pricingTable.yellow .pricing-content{ border-color: #F2B705; }
.pricingTable.yellow .price-value{ background-color: #F7B403; }
.pricingTable.yellow .price-value:before{
 background: linear-gradient(140deg,#F19900 25%, #F5C906 26%);
}
.pricingTable.yellow .price-value:after{ background: rgba(250,215,9,0.8); }
.pricingTable.yellow .amount:before{ background: rgba(250,215,9,0.5); }
.pricingTable.yellow .amount:after{ background: rgba(250,215,9,0.2); }
.pricingTable.yellow .pricingTable-signup{ background-color: #F1BD25; }
.pricingTable.yellow .pricingTable-signup:before{
 background: linear-gradient(140deg,#F19900 25%, #F5C906 26%);
}
.pricingTable.yellow .pricingTable-signup:after{ background: rgba(250,215,9,0.8); }
.pricingTable.yellow .pricingTable-signup span:before{ background: rgba(250,215,9,0.5); }
.pricingTable.yellow .pricingTable-signup span:after{ background: rgba(250,215,9,0.2); }

.pricingTable.red{ color: #EA003F; }
.pricingTable.red .pricing-content{ border-color: #EA003F; }
.pricingTable.red .price-value{ background-color: #EA003F; }
.pricingTable.red .price-value:before{
 background: linear-gradient(140deg,#EA003F 25%, #F392B1 26%);
}
.pricingTable.red .price-value:after{ background: rgba(248,172,200,0.8); }
.pricingTable.red .amount:before{ background: rgba(248,172,200,0.5); }
.pricingTable.red .amount:after{ background: rgba(248,172,200,0.2); }
.pricingTable.red .pricingTable-signup{ background-color: #EA003F; }
.pricingTable.red .pricingTable-signup:before{
 background: linear-gradient(140deg,#EA003F 25%, #F392B1 26%);
}
.pricingTable.red .pricingTable-signup:after{ background: rgba(248,172,200,0.8); }
.pricingTable.red .pricingTable-signup span:before{ background: rgba(248,172,200,0.5); }
.pricingTable.red .pricingTable-signup span:after{ background: rgba(248,172,200,0.2); }

@media only screen and (max-width: 990px){
 .pricingTable{ margin-bottom: 30px; }
}
@media only screen and (max-width: 479px){
 .pricingTable{ margin: 0 0 30px; }
}
</style>

<div class="row">
 <div class="col-md-4 col-sm-6">
 <div class="pricingTable">
 <div class="pricingTable-header">
 <h3 class="title">Standard</h3>
 <span class="month">Monthly Plan</span>
 </div>
 <div class="price-value">
 <span class="amount">$10.<span>99</span></span>
 </div>
 <ul class="pricing-content">
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Bandwidth</li>
 <li>10 Subdomains</li>
 <li>15 Domains</li>
 </ul>
 <a href="#" class="pricingTable-signup"><span>Buy Now</span></a>
 </div>
 </div>
 <div class="col-md-4 col-sm-6">
 <div class="pricingTable yellow">
 <div class="pricingTable-header">
 <h3 class="title">Business</h3>
 <span class="month">Monthly Plan</span>
 </div>
 <div class="price-value">
 <span class="amount">$20.<span>99</span></span>
 </div>
 <ul class="pricing-content">
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Bandwidth</li>
 <li>10 Subdomains</li>
 <li>15 Domains</li>
 </ul>
 <a href="#" class="pricingTable-signup"><span>Buy Now</span></a>
 </div>
 </div>
 <div class="col-md-4 col-sm-6">
 <div class="pricingTable red">
 <div class="pricingTable-header">
 <h3 class="title">Premium</h3>
 <span class="month">Monthly Plan</span>
 </div>
 <div class="price-value">
 <span class="amount">$30.<span>99</span></span>
 </div>
 <ul class="pricing-content">
 <li>50GB Disk Space</li>
 <li>50 Email Accounts</li>
 <li>50GB Bandwidth</li>
 <li>10 Subdomains</li>
 <li>15 Domains</li>
 </ul>
 <a href="#" class="pricingTable-signup"><span>Buy Now</span></a>
 </div>
 </div>
 
 </div>

</div>

BootstrapTema

Price linear-gradient

Скриншот

Подробнее

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

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

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