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

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

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

Для Bootstrap: 3, 4

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/Qo6H7V

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

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

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

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

Добавлено: 2017-05-06 в 21:14

Метка: 1494094491

⇄ ⇅

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing Snippets | BootstrapTema</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
/* background demo */
body{background:#400400}

/* pricing demo */
.bt-bk-color-one {
background-color: #f55039;
}
.bt-bk-color-two {
background-color: #46A6F7;
}
.bt-button-color-green {
background-color: #469E6F;
color: #fff;
border: none;
border-radius: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
}
.bt-button-color-green:hover, .bt-button-color-green:focus {
color: #fff;
}
.bt-pricing-six {
margin-bottom: 30px;
margin-top: 30px;
text-align: center;
overflow: hidden;
position: relative;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transform: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.bt-pricing-six:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.bt-pricing-six .pricing-header {
padding: 20px;
color: #fff;
}
.bt-pricing-six .best {
background: #000000;
overflow: hidden;
position: absolute;
right: -70px;
top: 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bt-pricing-six .best p {
text-transform: uppercase;
color: #fff;
display: block;
margin: 0;
padding: 5px 0;
width: 200px;
text-align: center;
text-decoration: none;
}
.bt-pricing-six .pricing-header h1.price {
width: 130px;
height: 130px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding: 35px 15px;
margin-left: auto;
margin-right: auto;
border: 4px solid #fff;
font-size: 20px;
font-weight: 900;
}
.bt-pricing-six .pricing-header h1 small {
color: #fff;
display: block;
margin: 18px;
font-size: 12px;
}
.bt-pricing-six ul {
list-style: none;
margin: 0;
background: #fafafa;
text-align: center;
padding-left: 0px;
}
.bt-pricing-six ul li {
padding: 25px;
}
.bt-pricing-six ul li.type {
background-color: #03B082;
color: #fff;
line-height: 25px;
font-size: 12px;
}
.bt-pricing-six ul li.type mark {
margin: 3px;
background-color: rgba(47, 47, 47, 0.46);
color: #FDFDFD;
padding: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.bt-pricing-six .pricing-footer {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row bt-padding-btm">

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="bt-wrapper">
<div class="bt-pricing-six ">
<div class="pricing-header bt-bk-color-one">
<h1 class="price">
<sup>$</sup>
100
<sub>.00</sub>
<small>USD</small>
</h1>
</div>
<ul>
<li class="type">This plan will be billed <mark>daily </mark>, so book accordingly.
</li>
<li>One Free Domain</li>
<li>5 Templates Design</li>
<li>20 Days Delivery </li>
<li>+20 Acounts Free</li>
</ul>
<div class="pricing-footer bt-bk-color-one">
<a href="#" class="btn btn-lg bt-button-color-green btn-block">TAKE OFFER</a>
</div>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="bt-wrapper">
<div class="bt-pricing-six ">
<div class="pricing-header bt-bk-color-two">
<h1 class="price">
<sup>$</sup>
200
<sub>.00</sub>
<small>USD</small>
</h1>
<div class="best">
<p>Best</p>
</div>
</div>
<ul>
<li class="type">This plan will be billed <mark>monthly </mark>, so book accordingly.
</li>
<li>One Free Domain</li>
<li>5 Templates Design</li>
<li>20 Days Delivery </li>
<li>+20 Acounts Free</li>
</ul>
<div class="pricing-footer bt-bk-color-two">
<a href="#" class="btn btn-lg bt-button-color-green btn-block">TAKE OFFER</a>
</div>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="bt-wrapper">
<div class="bt-pricing-six ">
<div class="pricing-header bt-bk-color-one">
<h1 class="price">
<sup>$</sup>
300
<sub>.00</sub>
<small>USD</small>
</h1>
</div>
<ul>
<li class="type">This plan will be billed <mark>quarterly </mark>, so book accordingly.
</li>
<li>One Free Domain</li>
<li>5 Templates Design</li>
<li>20 Days Delivery </li>
<li>+20 Acounts Free</li>
</ul>
<div class="pricing-footer bt-bk-color-one">
<a href="#" class="btn btn-lg bt-button-color-green btn-block">TAKE OFFER</a>
</div>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="bt-wrapper">
<div class="bt-pricing-six ">
<div class="pricing-header bt-bk-color-one">
<h1 class="price">
<sup>$</sup>
400
<sub>.00</sub>
<small>USD</small>
</h1>
</div>
<ul>
<li class="type">This plan will be billed <mark>annualy </mark>, so book accordingly.
</li>
<li>One Free Domain</li>
<li>5 Templates Design</li>
<li>20 Days Delivery </li>
<li>+20 Acounts Free</li>
</ul>
<div class="pricing-footer bt-bk-color-one">
<a href="#" class="btn btn-lg bt-button-color-green btn-block">TAKE OFFER</a>
</div>
</div>
</div>
</div>

</div>
</div>
</body>
</html>

BootstrapTema

Offer Pricing Table

Скриншот

Подробнее

Похожие

Архив

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