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 &#8381;
					</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 &#8381;
					</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 &#8381; 
					</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%);
}




/* конец оформления блока с ценами   */