frontend-coder
2/15/2017 - 4:09 PM
block price
<!-- блок с ценами -->
<section id="price" class="block" id="price">
<div class="container">
<h2>Стоимость и варианты участия</h2>
<h3>
Школа получилась очень объемной. Итак, что ждет вас во время обучения и какие варианты прохождения обучения. Вы можете оплатить участие сразу за все блоки или оплачивать только один блок который для вас актуален.
</h3>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="price-basic">
<div class="price-basic-title">
Standart
</div>
<div class="price-basic-prices">
<span>4 900</span> 2 790 ₽
</div>
<div class="price-basic-serves">
участие в блоке "Создание сайта"
</div>
<div class="price-basic-serves price-basic-serves-grey">
Доступ ко всем раздаточным материалам
</div>
<div class="price-basic-serves">
проверка ДЗ и обратная связь
</div>
<div class="price-basic-serves price-basic-serves-grey">
Участие в блоке "рассылка"
</div>
<div class="price-basic-serves">
Участие в блоке "Соцсети"
</div>
<div class="price-basic-serves price-basic-serves-grey price-basic-serves-un">
Участие в блоке "Канал YouTube"
</div>
<div class="price-basic-serves price-basic-serves-un">
Бонус: скрипт создания подписных и продающих страниц + уроки к нему
</div>
<div class="price-basic-button">
<a href="#call-back" data-form="заказываю пакет Базовый" data-text="Заказать пакет Базовый">заказать сейчас</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="price-basic price-block-red">
<div class="price-basic-img price-basic-img-pr">
</div>
<div class="price-basic-title">
VIP
<div class="wrap">
<span class="ribbon6">лучший</span>
</div>
</div>
<div class="price-basic-prices price-basic-prices-red">
<span>24 500</span> 13 950 ₽
</div>
<div class="price-basic-serves">
участие в блоке "Создание сайта"
</div>
<div class="price-basic-serves">
Доступ ко всем раздаточным материалам
</div>
<div class="price-basic-serves">
проверка ДЗ и обратная связь
</div>
<div class="price-basic-serves">
Участие в блоке "рассылка"
</div>
<div class="price-basic-serves">
Участие в блоке "Соцсети"
</div>
<div class="price-basic-serves">
Участие в блоке "Канал YouTube"
</div>
<div class="price-basic-serves">
Бонус: скрипт создания подписных и продающих страниц + уроки к нему
</div> <div class="price-basic-button">
<a href="#call-back" data-form="заказываю пакет Премиум" data-text="Заказать пакет Премиум">заказать сейчас</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="price-basic">
<div class="price-basic-img price-basic-img-b">
</div>
<div class="price-basic-title">
Platinum
</div>
<div class="price-basic-prices">
<span>24 500</span>13 950 ₽
</div>
<div class="price-basic-serves">
участие в блоке "Создание сайта"
</div>
<div class="price-basic-serves">
Доступ ко всем раздаточным материалам
</div>
<div class="price-basic-serves">
проверка ДЗ и обратная связь
</div>
<div class="price-basic-serves">
Участие в блоке "рассылка"
</div>
<div class="price-basic-serves">
Участие в блоке "Соцсети"
</div>
<div class="price-basic-serves">
Участие в блоке "Канал YouTube"
</div>
<div class="price-basic-serves">
Бонус: скрипт создания подписных и продающих страниц + уроки к нему
</div>
<div class="price-basic-button">
<a href="#call-back" data-form="заказываю пакет Платинум" data-text="Заказать пакет Платинум">заказать сейчас</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- конец блока с ценами -->
css
/* начало оформления блока с ценами */
/* оформление блока с ценами */
.price-basic {
border:1px solid rgb(35,45,52);
border-radius:20px;
text-align: center;
padding: 30px 0;
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.price-basic:hover {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
z-index: 1;
}
.price-block-red {
border:1px solid #ec2e4a; position: relative; font-size: 1em;
}
.price-basic-title {
font-size: 1.8em;
line-height: 1.8;
text-transform: uppercase;
margin-bottom: 40px;
}
.wrap {
width: 100%;
height: 155px;
position: absolute;
top: -8px;
left: 8px;
overflow: hidden;
}
.wrap:before, .wrap:after {
content: "";
position: absolute;
}
.wrap:before {
width: 40px;
height:8px;
right: 100px;
background: $button-zakaz;
border-radius: 8px 8px 0px 0px;
}
.wrap:after {
width: 8px;
height: 40px;
right: 0px;
top: 100px;
background: $button-zakaz;
border-radius: 0px 8px 8px 0px;
}
.ribbon6 {
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px dashed;
box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: #57DD43;
text-align: center;
font-size: .8em;
color:#fff;
}
.price-basic-prices {
background-color: #263138;
color:#fff;
font-family: "HelveticaBold", sans-serif;
font-size: 1.9em;
margin: 10px 0 50px;
}
.price-basic-serves-grey {
background-color: #eee;
}
.price-basic-serves-un{
text-decoration: line-through;
}
.price-basic-prices-red {
background-color: #ec2e4a;
}
.price-basic-prices span {
font-size: 2.1em;
font-weight: 600;
color:$button-zakaz;
text-decoration: line-through;
}
.price-basic-prices-red span {
color:#ff0;
}
.price-basic-serves {
font-size: 1em;
line-height: 1.5;
text-transform: uppercase;
padding:10px 0;
}
.price-basic-button {
margin-top: 20px;
}
.price-basic-button a {
display: inline-block;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
background-color: $button-zakaz;
text-decoration: none;
border-radius:20px;
text-transform: uppercase;
color:#fff;
@include trans;
}
.price-basic-button a:hover {
background-color:darken($button-zakaz, 10%);
}
/* конец оформления блока с ценами */