mirror of
https://github.com/sergeyyarkov/belazi-landing.git
synced 2026-10-11 10:19:06 +03:00
Added Section Guaranteed
This commit is contained in:
parent
95de82c950
commit
7cdfddd2ee
120
index.html
120
index.html
@ -35,9 +35,7 @@
|
||||
+7 (818) 247-47-25<br>
|
||||
+7(818) 247-47-25
|
||||
</p>
|
||||
<a href="#">
|
||||
<button>Заказать звонок</button>
|
||||
</a>
|
||||
<button>Заказать звонок</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -124,7 +122,7 @@
|
||||
<section id="advantages">
|
||||
<div class="container">
|
||||
<h2>Вам не придется ждать!</h2>
|
||||
<div class="title-desctiprion">
|
||||
<div class="title-description">
|
||||
<p>
|
||||
Любые запчасти для всех моделей Белаз<br>
|
||||
всегда в наличии!
|
||||
@ -184,6 +182,120 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="detail">
|
||||
<h2>Ищете конкретную деталь?</h2>
|
||||
<div class="title-description">
|
||||
<p>
|
||||
Если у Вас есть артикул - введите его в поле ниже и получите цену<br>
|
||||
ПРЯМО СЕЙЧАС!
|
||||
</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<form action="#">
|
||||
<div class="row wrap-detail">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<div class="wrap-detail__input">
|
||||
<input required placeholder="Введите артикул детали" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<div class="wrap-detail__input">
|
||||
<input required placeholder="Введите ваш телефон" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="wrap-detail__button">
|
||||
<button>Узнать цену</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="detail-description">
|
||||
<div class="detail-desctiption__callback">
|
||||
<p>Мы перезвоним вам в течение 3 минут и назовем цену детали!</p>
|
||||
</div>
|
||||
<div class="detail-desciption__number">
|
||||
<p>
|
||||
Или Вы можете перезвонить нам сами:<br>
|
||||
<span> +7 (818) 247-47-25</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="guarantees">
|
||||
<h2>
|
||||
Мы гарантируем сохранность деталей<br>
|
||||
во время перевозки!
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="row wrap-guarantees">
|
||||
<div class="col-md-4">
|
||||
<div class="wrap-guarantees__card">
|
||||
<div class="guarantees-card__img">
|
||||
<img src="./src/img/main-guarantees/guar-1.png" alt="#">
|
||||
</div>
|
||||
<div class="guarantees-card__desctiption">
|
||||
<p>
|
||||
Гарантия на целостность поставки<br>
|
||||
прописана в договоре
|
||||
</p>
|
||||
</div>
|
||||
<div class="guarantees-card__link">
|
||||
<a href="#">Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="wrap-guarantees__card">
|
||||
<div class="guarantees-card__img">
|
||||
<img src="./src/img/main-guarantees/guar-2.png" alt="#">
|
||||
</div>
|
||||
<div class="guarantees-card__desctiption">
|
||||
<p>
|
||||
Каждая запчасть доставляется с завода<br>
|
||||
в жесткой упаковке
|
||||
</p>
|
||||
</div>
|
||||
<div class="guarantees-card__link">
|
||||
<a href="#">Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="wrap-guarantees__card">
|
||||
<div class="guarantees-card__img">
|
||||
<img src="./src/img/main-guarantees/guar-3.png" alt="#">
|
||||
</div>
|
||||
<div class="guarantees-card__desctiption">
|
||||
<p>
|
||||
Дополнительный контроль качества<br>
|
||||
нашими специалистами
|
||||
</p>
|
||||
</div>
|
||||
<div class="guarantees-card__link">
|
||||
<a href="#">Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="discount">
|
||||
<h2>
|
||||
У нас разработаны бонусные системы<br>
|
||||
и скидки для наших клиентов
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Index Js -->
|
||||
<script src="./src/js/index.js"></script>
|
||||
|
||||
BIN
src/img/main-detail/main-detail__background.jpg
Normal file
BIN
src/img/main-detail/main-detail__background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
src/img/main-guarantees/guar-1.png
Normal file
BIN
src/img/main-guarantees/guar-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
src/img/main-guarantees/guar-2.png
Normal file
BIN
src/img/main-guarantees/guar-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
src/img/main-guarantees/guar-3.png
Normal file
BIN
src/img/main-guarantees/guar-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
src/img/main-price/email-icon.png
Normal file
BIN
src/img/main-price/email-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 475 B |
BIN
src/img/main-price/phone-icon.png
Normal file
BIN
src/img/main-price/phone-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 B |
@ -9,6 +9,9 @@
|
||||
#price h2 {
|
||||
text-align: center;
|
||||
}
|
||||
#guarantees .guarantees-card__desctiption p br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 880px) {
|
||||
@ -40,7 +43,14 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px){
|
||||
#guarantees .wrap-guarantees__card {
|
||||
margin-top: 25px;
|
||||
}
|
||||
#guarantees .guarantees-card__desctiption {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 630px) {
|
||||
#price .form-price__input {
|
||||
flex-direction: column;
|
||||
|
||||
@ -60,15 +60,29 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
input {
|
||||
height: 70px;
|
||||
border: none;
|
||||
background-color: #f2f2f2;
|
||||
outline: none;
|
||||
padding-left: 30px;
|
||||
font-family: 'ProximaNovaRegular';
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1170px;
|
||||
}
|
||||
|
||||
.title-desctiprion {
|
||||
.title-description {
|
||||
text-align: center;
|
||||
margin-top: 35px;
|
||||
}
|
||||
@ -252,13 +266,16 @@ header {
|
||||
.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__input input:nth-child(1) {
|
||||
background-image: url(../img/main-price/email-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 30px;
|
||||
}
|
||||
.form-price__input input:nth-child(2) {
|
||||
background-image: url(../img/main-price/phone-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 30px;
|
||||
}
|
||||
|
||||
.form-price__submit {
|
||||
@ -285,6 +302,7 @@ header {
|
||||
font-family: 'ProximaNovaBold';
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.form-price__submit button:hover {
|
||||
@ -333,4 +351,107 @@ header {
|
||||
|
||||
.advantages-card__img {
|
||||
height: 100px;
|
||||
}
|
||||
/* Section Detail */
|
||||
#detail {
|
||||
min-height: 580px;
|
||||
padding-top: 100px;
|
||||
background: url(../img/main-detail/main-detail__background.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
#detail h2, .title-description p {
|
||||
color: #fff;
|
||||
}
|
||||
#detail .title-description {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.wrap-detail {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.wrap-detail input, .wrap-detail button {
|
||||
width: 100%;
|
||||
}
|
||||
.wrap-detail .col-lg-4:nth-child(2) .wrap-detail__input input{
|
||||
background-image: url(../img/main-price/phone-icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 30px;
|
||||
}
|
||||
|
||||
.wrap-detail__button button {
|
||||
background-color: #f7b516;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
height: 70px;
|
||||
font-family: 'ProximaNovaBold';
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.wrap-detail__button button:hover {
|
||||
background: none;
|
||||
border: 2px solid #f7b516;
|
||||
color: #fff;
|
||||
}
|
||||
.detail-description {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-top: 57px;
|
||||
}
|
||||
.detail-desciption__number {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.detail-desciption__number p span {
|
||||
font-family: 'ProximaNovaExtraBold';
|
||||
font-size: 32px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrap-detail__input, .wrap-detail__button {
|
||||
margin-top: 15px;
|
||||
}
|
||||
/* Section Guarantees */
|
||||
#guarantees {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.wrap-guarantees {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.wrap-guarantees__card {
|
||||
text-align: center;
|
||||
}
|
||||
.guarantees-card__img {
|
||||
height: 300px;
|
||||
}
|
||||
.wrap-guarantees .col-md-4:nth-child(1) .wrap-guarantees__card .guarantees-card__img img {
|
||||
background-color: #e1e1e1;
|
||||
padding: 15px;
|
||||
height: 300px;
|
||||
width: 230px;
|
||||
}
|
||||
.guarantees-card__desctiption {
|
||||
margin-top: 35px;
|
||||
font-family: 'ProximaNovaRegular';
|
||||
}
|
||||
.guarantees-card__link {
|
||||
text-transform: uppercase;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.guarantees-card__link a {
|
||||
border-bottom: 1px solid #000;
|
||||
font-family: 'ProximaNovaBold';
|
||||
}
|
||||
/* #info, #price, #advantages, #detail, #guarantees {
|
||||
display: none;
|
||||
} */
|
||||
/* Section Discount */
|
||||
#discount {
|
||||
padding-top: 100px;
|
||||
background-color: #08243e;
|
||||
}
|
||||
#discount h2 {
|
||||
color: #fff;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user