Яркие прайсы тарифов / Прайсы / Сниппеты Bootstrap

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

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

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

Авторство: Посмотреть

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

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

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

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

Добавлено: 2017-04-28 в 15:26

Метка: 1493382364

⇄ ⇅

/* style pricing */
.mega-pricing-item {
 background: #fff none repeat scroll 0 0;
 box-shadow: 0 0 10px #f1f1f1;
 padding: 30px;
 text-align: center;
}
.bordered-btn {
 border: 1px solid;
 color: #fff;
 display: inline-block;
 font-weight: 700;
 padding: 10px 30px;
 text-transform: uppercase;
} 
.bordered-btn {
 border-radius: 3px;
} 
.bordered-btn:hover {
 color: #fff;
 background-color: #1360f4;
 border-color: #1360f4;
 text-decoration:none} 
.boxed-btn {
 display: inline-block;
 font-weight: 600;
 text-transform: uppercase
}
.boxed-btn {
 border-radius: 2px;
 font-size: 14px;
 margin-top: 15px;
 padding: 10px 30px;
 color: #fff
}
.boxed-btn:hover{
 background-color: #333;
 color: #fff;
 text-decoration:none
} 
.mega-pricing-item ul {
 line-height: 35px;
 list-style: outside none none;
 margin: 0;
 min-height: 198px;
 padding: 0;
}
.mega-pricing-item a.boxed-btn {
 margin: 0;
}
.mega-pricing-item h1 {
 font-size: 55px;
 font-weight: 300;
}
.mega-pricing-item h1 span {
 font-size: 25px;
 padding-right: 3px;
}
.mega-pricing-item h3 {
 font-size: 25px;
 font-weight: 300;
}
.gradient-style-1 {
 background: #e62f17;
 background: -webkit-linear-gradient(45deg, #e62f17 0%, #f2ba30 100%);
 background: linear-gradient(45deg, #e62f17 0%, #f2ba30 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e62f17', endColorstr='#f2ba30', GradientType=1);
}
.gradient-style-2 {
 background: #0a3466;
 background: -webkit-linear-gradient(45deg, #0a3466 0%, #17b6e3 100%);
 background: linear-gradient(45deg, #0a3466 0%, #17b6e3 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0a3466', endColorstr='#17b6e3', GradientType=1);
}
.gradient-style-3 {
 background: #18b9e5;
 background: -webkit-linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%);
 background: linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%);
 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#18b9e5', endColorstr='#81d9b8', GradientType=1);
}
.gradient-style-1,
.gradient-style-2,
.gradient-style-3 {
 color: #fff;
 box-shadow: 0 0 10px #ccc
}
.pricing-icon {
 font-size: 80px;
 line-height: 80px;
 margin-bottom: 20px;
}
.gradient-style-1 a,
.gradient-style-2 a,
.gradient-style-3 a {
 background-color: transparent;
 border: 1px solid #fff;
 color: #fff;
}
.pricing-duration {
 margin-top: -15px;
 margin-bottom: 15px;
 font-size: 12px;
}
.mega-pricing-item.flat-style-pricing {
 border: 1px solid #f7f9fc;
 box-shadow: 0 0 0;
}
.mega-pricing-item.flat-style-pricing.active {
 border-top: 3px solid;
 box-shadow: 0 0 10px #f1f1f1;
}
.mega-pricing-item h3 span {
 display: block;
 font-size: 14px;
 line-height: 20px;
}
</style>

<div class="col-sm-4">
 <div class="mega-pricing-item gradient-style-1">
 <div class="pricing-icon">
 <i class="fa fa-heart-o"></i>
 </div>
 <h3><strong>Basic</strong> Plan</h3>

<ul>
 <li><strong>Manage</strong> tasks</li>
 <li><strong>Sync</strong> notes</li>
 <li><strong>Set</strong> deadline</li>
 </ul>
 <h1><span>$</span>100</h1>
 <p class="pricing-duration">Per month</p>
 <a href="" class="bordered-btn">Buy now</a>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="mega-pricing-item gradient-style-2 active">
 <div class="pricing-icon">
 <i class="fa fa-plane"></i>
 </div>
 <h3><strong>Advance</strong> Plan</h3>

<ul>
 <li><strong>Manage</strong> tasks</li>
 <li><strong>Sync</strong> notes</li>
 <li><strong>Another</strong> item</li>
 <li><strong>Set</strong> deadline</li>
 </ul>
 <h1><span>$</span>200</h1>
 <p class="pricing-duration">Per month</p>
 <a href="" class="boxed-btn">Buy now</a>
 </div>
 </div>
 <div class="col-sm-4">
 <div class="mega-pricing-item gradient-style-3">
 <div class="pricing-icon">
 <i class="fa fa-grav"></i>
 </div>
 <h3><strong>Mega</strong> Plan</h3>

<ul>
 <li><strong>Manage</strong> tasks</li>
 <li><strong>Sync</strong> notes</li>
 <li><strong>Another</strong> item</li>
 <li><strong>Second</strong> option</li>
 <li><strong>Set</strong> deadline</li>
 </ul>
 <h1><span>$</span>300</h1>
 <p class="pricing-duration">Per month</p>
 <a href="" class="bordered-btn">Buy now</a>
 </div>
 </div>

</div>
</div>

BootstrapTema

Яркие прайсы тарифов

Скриншот

Подробнее

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

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

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