bubble/belazi-landing
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/belazi-landing.git synced 2026-10-11 10:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added section Price

Browse Source
This commit is contained in:
Sergey Yarkov 2019-08-31 16:14:31 +03:00
parent b20ec27f63
commit 51707b6554
4 changed files with 131 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -93,7 +93,32 @@
</section> </section>
<section id="price"> <section id="price">
<div class="container"> <div class="container">
<h2>Получите прайс прямо сейчас<br>
на электронную почту!
</h2>
<div class="row">
<div class="col-lg-8 offset-lg-4">
<div class="wrap-price">
<div class="wrap-price__form">
<form action="#">
<div class="form-price__input">
<input required placeholder="Введите ваш e-mail" type="text">
<input required placeholder="Введите ваш телефон" type="text">
</div>
<div class="form-price__submit">
<div class="form-submit__description">
<p>
Прайс придет к Вам на почту<br>
в течение 5 минут!
</p>
</div>
<button type="submit">Получить прайс</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div> </div>
</section> </section>
</main> </main>

BIN
src/img/main-price/clock-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 B

30
src/styles/media.css
View File

@ -1,3 +1,11 @@
@media (max-width: 991px) {
#price .form-price__input input, #price .form-price__submit button, #price .form-submit__description {
width: 440px;
}
#price h2 {
text-align: center;
}
}
@media (max-width: 880px) { @media (max-width: 880px) {
header .header-wrap { header .header-wrap {
flex-direction: column; flex-direction: column;
@ -23,6 +31,28 @@
text-align: center; text-align: center;
} }
} }
@media (max-width: 630px) {
#price .form-price__input {
flex-direction: column;
}
#price .form-price__input input {
margin-left: 0px;
margin-top: 15px;
width: 100%;
}
#price .form-price__submit {
flex-direction: column;
}
#price .form-submit__description {
width: 100%;
text-align: center;
}
#price .form-price__submit button {
width: 100%;
margin: 0;
margin-top: 30px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
#info .info-wrap__card { #info .info-wrap__card {
padding-left: 50px; padding-left: 50px;

69
src/styles/style.css
View File

@ -46,7 +46,11 @@ p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h2 {
font-family: 'ProximaNovaBlack';
text-align: center;
font-size: 26px;
}
body { body {
font-family: 'ProximaNovaRegular'; font-family: 'ProximaNovaRegular';
margin: 0; margin: 0;
@ -194,3 +198,66 @@ header {
padding-top: 100px; padding-top: 100px;
padding-bottom: 100px; padding-bottom: 100px;
} }
#price h2 {
text-align: right;
}
.wrap-price {
margin-top: 60px;
}
.form-price__input{
display: flex;
justify-content: space-between;
}
.form-price__input input:nth-child(1) {
margin-left: 0px;
}
.form-price__input input {
width: 370px;
margin-left: 30px;
height: 70px;
border: none;
background-color: #f2f2f2;
outline: none;
padding-left: 30px;
font-family: 'ProximaNovaRegular';
text-transform: uppercase;
}
.form-price__submit {
margin-top: 30px;
display: flex;
justify-content: space-between;
}
.form-price__submit p {
text-align: right;
padding-top: 27px;
display: inline-block;
padding-right: 30px;
}
.form-price__submit button {
width: 360px;
margin-left: 30px;
background-color: #1866af;
border: none;
text-transform: uppercase;
color: #fff;
height: 80px;
font-family: 'ProximaNovaBold';
cursor: pointer;
transition: all .2s;
}
.form-price__submit button:hover {
background: none;
border: 2px solid #1866af;
color: #000;
}
.form-submit__description {
width: 360px;
text-align: right;
}
.form-submit__description::after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(../img/main-price/clock-icon.png) no-repeat center center;
}