add why and form block

This commit is contained in:
Sergey Krylov 2021-03-20 16:40:13 +03:00
parent 15312b210a
commit 963a2273b6
4 changed files with 131 additions and 2 deletions

View File

@ -0,0 +1,20 @@
<div class="graduation__block callback">
<div class="content">
<div class="headers">
<h2>Мы позвоним</h2>
<p>Оставьте номер телефона для заказа выпускного</p>
</div>
<form action="callback.php" method="POST">
<label>
<input type="text" placeholder="Введите телефон">
</label>
<label>
<input type="text" placeholder="Введите ФИО">
</label>
<button class="graduation-btn">Отправить</button>
</form>
<div class="copyright">
<span>© Copyright. Все права защищены</span>
</div>
</div>
</div>

View File

@ -0,0 +1,40 @@
<div class="graduation__block why">
<div class="content">
<div class="headers">
<h2>Почему мы</h2>
<p>Мы делаем все, чтобы у ваших детей был незабываемый выпускной вечер</p>
</div>
<div class="row icons">
<div class="col-3">
<div class="icon">
<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/clock.png'?>" alt="clock"></div>
<h4>Тщательная подготовка</h4>
<p>Организуем мероприятие заранее, чтобы к вашему приезду все было наготове</p>
</div>
</div>
<div class="col-3">
<div class="icon">
<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/rocket.png'?>" alt="rocekt"></div>
<h4>Мы в тренде</h4>
<p>Самые популярные развлечения для детских праздников </p>
</div>
</div>
<div class="col-3">
<div class="icon">
<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/label.png'?>" alt="label"></div>
<h4>Фиксированная цена</h4>
<p>Не будем навязывать вам доплату или дополнительные услуги</p>
</div>
</div>
<div class="col-3">
<div class="icon">
<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/medal.png'?>" alt="medal"></div>
<h4>Мы в тренде</h4>
<p>Эксклюзивный диплом выпускника от Armany Quests</p>
</div>
</div>
</div>
</div>
</div>

View File

@ -97,7 +97,7 @@ main
h2
text-align: center
font-size: 40px
p
padding: 0 50px
font-family: Montserrat;
@ -166,4 +166,71 @@ main
font-style: normal
font-weight: 600
font-size: 18px
margin-bottom: 14px
margin-bottom: 14px
&.why
.content
h2
color: #4A4A4A
.icons
.icon
width: 259px
.img-icon
height: 164px
img
display: block
margin: 0 auto
height: 100%
h4
font-family: Shadow
font-size: 16px
text-align: center
margin-top: 40px
margin-bottom: 16px
p
font-family: Montserrat
font-size: 14px
text-align: center
&.callback
background: url('../../img/graduation/callback_bg.png')
position: relative
height: 100vh
.content
form
label
display: block
width: 400px
margin: 0 auto 20px auto
padding: 14px
background: #fff
input
width: 100%
border: 0px transparent
outline: none
button
margin: 40px auto 0 auto
.copyright
position: absolute
bottom: 40px
left: 50%
transform: translateX(-50%)
text-align: center
font-family: Montserrat
font-size: 14px
color: #FFFFFF;

View File

@ -9,5 +9,7 @@
get_template_part('parts/landings/graduation/main');
get_template_part('parts/landings/graduation/description');
get_template_part('parts/landings/graduation/offers');
get_template_part('parts/landings/graduation/why');
get_template_part('parts/landings/graduation/callback');
get_template_part('parts/landings/graduation/footer');
?>