Prices Best / Прайсы / Сниппеты Bootstrap

Версия: v1.0.2

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

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

Для Bootstrap: 3, 4, 5

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

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

Вес файла: 69.1 Kb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2018-12-24 в 11:51

Метка: 1566147151

⇄ ⇅

/* prices */
.pricing-container{
 display: block;
 float: left;
 width: 100%;
 padding: 80px 0;
}
.pricing-container .plan:hover{
 -webkit-box-shadow: 0px 0px 43px -1px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 0px 43px -1px rgba(0,0,0,0.2);
 box-shadow: 0px 0px 43px -1px rgba(0,0,0,0.1);
 transform: scale(1.02);
}
.pricing-container .spsl-plan{
 margin-top: -20px;
 position: relative;
}
.pricing-container .spsl-plan .plans-footer a{
 font-weight: bold; 
 border: 2px solid #955db8;
 padding: 7px 40px;
 border-radius: 40px;
 text-decoration: none;
 color: #fff !important;
 background: #955db8;
}
.pricing-container .spsl-plan .plans-footer a:hover{
 color: #955db8 !important;
 background: #fff !important;
 text-decoration: none;
}
.pricing-container .plan .paln-head{
 background-size: 100%;
 height: 154px;
 text-align: center;
 padding-top: 40px;
 position: relative;
 border-radius: 12px 12px 0 0;
}
.pricing-container .plan .planone{
 background: url(https://bootstraptema.ru/snippets/price/2018/pricesbest/price-1.jpg) no-repeat top center;
}
.pricing-container .plan .plantwo{
 background: url(https://bootstraptema.ru/snippets/price/2018/pricesbest/price-2.jpg) no-repeat top center;
}

.pricing-container .plan .plantree{
 background: url(https://bootstraptema.ru/snippets/price/2018/pricesbest/price-3.jpg) no-repeat top center;
}
.pricing-container .plan .paln-head>span{
 z-index: 2;
 position: relative;
 color: #fff;
 font-weight: bold;
 font-size: 39px;
}
.pricing-container .plan .paln-head>span>b{
 font-family: 'Roboto', sans-serif;
 font-weight: 100;
 font-size: 19px;
}
.pricing-container .plan .paln-head>span>i{
 font-family: 'Roboto', sans-serif;
 font-weight: 100;
 display: block;
 color: #fff;
 position: relative;
 z-index: 3;
 font-size: 12px;
 margin-top: -8px;
}
.pricing-container .plan .paln-head:after{
 content: '';
 position: absolute;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(61, 148, 206, 0.74);
 top: 0;
 border-radius: 12px 12px 0 0;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
.pricing-container .plan:hover .paln-head:after{
 background: rgba(44, 119, 169, 0.74);
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 -ms-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
.pricing-container .plan .plans-tag{
 background: -webkit-linear-gradient(left, #06a8f1, #22ce9c);
 background: -o-linear-gradient(right, #06a8f1, #22ce9c);
 background: -moz-linear-gradient(right, #06a8f1, #22ce9c);
 background: linear-gradient(to right, #06a8f1, #22ce9c);
 font-family: 'Roboto', sans-serif;
 font-weight: bold;
 color: #fff;
 text-transform: uppercase;
 font-size: 13px;
 display: block;
 max-width: 140px;
 text-align: center;
 padding: 11px;
 border-radius: 41px;
 margin: auto;
 margin-top: -20px;
 position: relative;
}
.pricing-container .plan .plans-body{
 background: rgba(238, 241, 241, 0.68);
 margin-top: -20px;
 padding: 30px;
 padding-top: 41px;
 color: #afbac3;
 font-family: 'Roboto', sans-serif;
 font-weight: normal;
 font-size: 14px;
}

.pricing-container .plan .plans-body ul{
 padding-left: 0;
}
.pricing-container .plan .plans-body ul>li{
 list-style: none;
 margin: 18px 0;
 font-size: 13px;
 cursor: pointer;
 color: #9ba6af;
}
.pricing-container .plan .plans-body ul>li>i{
 margin-right: 5px;
}
.pricing-container .plan .plans-body ul>li:hover{
 color: #7e8a94;
}
.pricing-container .plan .plans-footer{
 background: rgba(243, 246, 246, 0.54);
 padding: 30px;
 text-align: center;
 border-top: 1px solid rgba(227, 232, 232, 0.55);
}
.pricing-container .plan .plans-footer a{
 color: #955db8;
 font-weight: bold; 
 border: 2px solid #955db8;
 padding: 7px 40px;
 border-radius: 40px;
 text-decoration: none;
}
.pricing-container .plan .plans-footer a:hover{
 color: #ffffff;
 background: #955db8;
 text-decoration: none;
}
.plans-footer{
 margin-bottom:30px;
}
.pricing-container .spsl-plan{
 margin-bottom:-20px;
}
.pricing-container .plan .ribbon {
 position: relative;
 margin-bottom: 80px;
}
.pricing-container .plan .ribbon span {
 position: absolute;
 display: -webkit-box;
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 transform: rotate(-90deg);
 top: 28px;
 margin-left: 2px;
 font-weight: bold;
 font-size: 13px;
 text-transform: uppercase;
 color: rgba(3, 36, 58, 0.52);
}
.pricing-container .plan:hover .ribbon span {
 opacity:0;
}
.pricing-container .plan .ribbon:before,.pricing-container .plan .ribbon:after {
 content: "";
 position: absolute;
}
.pricing-container .plan .ribbon {
 width: 35px;
 height: 70px;
 background: #efe94f;
 top: -6px;
 left: 8px;
 position: absolute;
 z-index: 22;
}
.pricing-container .plan:hover .ribbon {
 height: 20px;
}
.pricing-container .plan .ribbon:before {
 height: 0;
 width: 0;
 border-bottom: 6px solid #cac441;
 border-right: 6px solid transparent;
 right: -6px;
}
.pricing-container .plan .ribbon:after {
 height: 0;
 width: 0;
 border-left: 18px solid #efe94f;
 border-right: 17px solid #efe94f;
 border-bottom: 18px solid transparent;
 bottom: -17px;
}
</style>

<div class="col-md-4">
<div class="plan">
<div class="paln-head planone">
<span>free <i>all-time</i></span>
</div>
<div class="plans-tag">Economic</div>
<div class="plans-body">
<ul>
<li><i class="fa fa-database" aria-hidden="true"></i> <b>Unlimited</b> Storage</li>
<li><i class="fa fa-download" aria-hidden="true"></i> <b>Unlimited</b> Bandwith</li>
<li><i class="fa fa-microchip" aria-hidden="true"></i> <b>Memory</b> 2 GB</li>
<li><i class="fa fa-book" aria-hidden="true"></i> <b>performance</b> standard</li>
<li><i class="fa fa-check" aria-hidden="true"></i> <b>SSL Certificate</b> Not included</li>
<li><i class="fa fa-globe" aria-hidden="true"></i> <b>free doumain</b> Not included</li>
</ul>
</div>
<div class="plans-footer">
<a href="#">purchase</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="plan spsl-plan">
<div class="ribbon"><span>best</span></div>
<div class="paln-head plantwo">
<span>9.59 <b>$</b> <i>monthly</i></span>
</div>
<div class="plans-tag">personal</div>
<div class="plans-body">
<ul>
<li><i class="fa fa-database" aria-hidden="true"></i> <b>Unlimited</b> Storage</li>
<li><i class="fa fa-download" aria-hidden="true"></i> <b>Unlimited</b> Bandwith</li>
<li><i class="fa fa-microchip" aria-hidden="true"></i> <b>Memory</b> 2 GB</li>
<li><i class="fa fa-book" aria-hidden="true"></i> <b>performance</b> standard</li>
<li><i class="fa fa-check" aria-hidden="true"></i> <b>SSL Certificate</b> Not included</li>
<li><i class="fa fa-globe" aria-hidden="true"></i> <b>free doumain</b> Not included</li>
</ul>
</div>
<div class="plans-footer">
<a href="#">purchase</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="plan">
<div class="paln-head plantree">
<span>13.46 <b>$</b> <i>monthly</i></span>
</div>
<div class="plans-tag">business</div>
<div class="plans-body">
<ul>
<li><i class="fa fa-database" aria-hidden="true"></i> <b>Unlimited</b> Storage</li>
<li><i class="fa fa-download" aria-hidden="true"></i> <b>Unlimited</b> Bandwith</li>
<li><i class="fa fa-microchip" aria-hidden="true"></i> <b>Memory</b> 2 GB</li>
<li><i class="fa fa-book" aria-hidden="true"></i> <b>performance</b> standard</li>
<li><i class="fa fa-check" aria-hidden="true"></i> <b>SSL Certificate</b> Not included</li>
<li><i class="fa fa-globe" aria-hidden="true"></i> <b>free doumain</b> Not included</li>
</ul>
</div>
<div class="plans-footer">
<a href="#">purchase</a>
</div>
</div>
</div>

</div>

</div>

BootstrapTema

Prices Best

Скриншот

Подробнее

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

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

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