Pricing Bootstrap Classic / Прайсы / Сниппеты Bootstrap

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

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

Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2017-05-02 в 21:38

Метка: 1493750337

⇄ ⇅

/* style pricing */
.bt-pricing {
margin-bottom: 30px;
margin-top: 30px;
text-align: center;
border: 1px solid #e4e4e4;
background-color: #F4F4F4;
color: #3C3C3C
}
.bt-pricing:hover {
margin-top: 10px;
-moz-transition: margin-top 0.25s ease 0s;
-ms-transition: margin-top 0.25s ease 0s;
transition: margin-top 0.25s ease 0s
}
.bt-pricing ul {
list-style: none;
margin: 0;
text-align: center;
padding-left: 0px
}
.bt-pricing ul li {
padding: 20px;
cursor: pointer
}
.bt-pricing ul li.title-text {
background-color: #9074E3;
color: #fff;
font-family: Verdana;
font-weight: 900
}
.bt-pricing ul li.price {
padding: 40px 20px 0px 20px;
font-size: 60px;
font-weight: 900;
color: #9074E3
}
.bt-pricing ul li.price small {
color: #000000;
display: block;
font-size: 12px
}
.bt-pricing ul li.price::after {
padding-top: 20px;
content: "";
display: block;
position: relative;
bottom: 100%;
left: 50%;
margin-left: -50.75px;
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 35px solid #9074E3
}
.bt-pricing .pricing-footer {
padding: 20px
}
</style>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="bt-pricing">
<ul>
<li class="price">
<sup>$</sup>100
<small>one year</small>
</li>
<li class="title-text">ONE PRICE
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn btn-danger ">ORDER</a>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="bt-pricing">
<ul>
<li class="price">
<sup>$</sup>200
<small>one year</small>
</li>
<li class="title-text">TWO PRICE
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn btn-danger btn-block btn-lg">ORDER</a>
</div>
</div>
</div>

<div class="col-lg-4 col-md-4 col-sm-4">
<div class="bt-pricing">
<ul>
<li class="price">
<sup>$</sup>300
<small>one year</small>
</li>
<li class="title-text">THREE PRICE
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</li>
</ul>
<div class="pricing-footer">
<a href="#" class="btn btn-danger btn-block">ORDER</a>
</div>
</div>
</div>

</div>
</div>

BootstrapTema

Pricing Bootstrap Classic

Скриншот

Подробнее

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

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

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