mirror of
https://github.com/sergeyyarkov/belazi-landing.git
synced 2026-10-11 10:19:06 +03:00
Added section discount
This commit is contained in:
parent
7cdfddd2ee
commit
6cf567fcc8
81
index.html
81
index.html
@ -258,7 +258,7 @@
|
||||
<div class="guarantees-card__desctiption">
|
||||
<p>
|
||||
Каждая запчасть доставляется с завода<br>
|
||||
в жесткой упаковке
|
||||
в жесткой упаковке
|
||||
</p>
|
||||
</div>
|
||||
<div class="guarantees-card__link">
|
||||
@ -287,15 +287,88 @@
|
||||
</section>
|
||||
<section id="discount">
|
||||
<h2>
|
||||
У нас разработаны бонусные системы<br>
|
||||
У нас разработаны бонусные системы<br>
|
||||
и скидки для наших клиентов
|
||||
</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="row wrap-discount">
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="wrap-discount__item">
|
||||
<div class="discount-item__img">
|
||||
<div class="discount-img">
|
||||
<span>10%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount-item__description">
|
||||
<p>
|
||||
Дополнительная скидка 10%<br>
|
||||
на вторую запчасть<br>
|
||||
и любые последующие<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="wrap-discount__item">
|
||||
<div class="discount-item__img">
|
||||
<div class="discount-img">
|
||||
<span>20%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount-item__description">
|
||||
<p>
|
||||
Скидка 20% при заключении<br>
|
||||
договора на годовое<br>
|
||||
сервисное обслуживание<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="wrap-discount__item">
|
||||
<div class="discount-item__img">
|
||||
<div class="discount-img">
|
||||
<img src="./src/img/main-discount/delivery-truck.png" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount-item__description">
|
||||
<p>
|
||||
Бесплатная доставка<br>
|
||||
по всей России<br>
|
||||
для всех клиентов<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6">
|
||||
<div class="wrap-discount__item">
|
||||
<div class="discount-item__img">
|
||||
<div class="discount-img">
|
||||
<img src="./src/img/main-discount/telemarketer.png" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
<div class="discount-item__description">
|
||||
<p>
|
||||
Бесплатная круглосуточная<br>
|
||||
техническая поддержка<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="working">
|
||||
<h2>С нами удобно работать!</h2>
|
||||
<div class="title-description">
|
||||
<p>
|
||||
Более 70% клиентов приходят к нам по рекомендации!
|
||||
</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Index Js -->
|
||||
<script src="./src/js/index.js"></script>
|
||||
|
||||
BIN
src/img/main-discount/delivery-truck.png
Normal file
BIN
src/img/main-discount/delivery-truck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/img/main-discount/telemarketer.png
Normal file
BIN
src/img/main-discount/telemarketer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -9,7 +9,9 @@
|
||||
#price h2 {
|
||||
text-align: center;
|
||||
}
|
||||
#guarantees .guarantees-card__desctiption p br {
|
||||
|
||||
#guarantees .guarantees-card__desctiption p br,
|
||||
#discount .discount-item__description p br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -43,14 +45,17 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px){
|
||||
|
||||
@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;
|
||||
|
||||
@ -68,6 +68,7 @@ a {
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 70px;
|
||||
border: none;
|
||||
@ -267,11 +268,13 @@ header {
|
||||
width: 370px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -352,6 +355,7 @@ header {
|
||||
.advantages-card__img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* Section Detail */
|
||||
#detail {
|
||||
min-height: 580px;
|
||||
@ -359,19 +363,26 @@ header {
|
||||
background: url(../img/main-detail/main-detail__background.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
#detail h2, .title-description p {
|
||||
|
||||
#detail h2,
|
||||
.title-description p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#detail .title-description {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.wrap-detail {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.wrap-detail input, .wrap-detail button {
|
||||
|
||||
.wrap-detail input,
|
||||
.wrap-detail button {
|
||||
width: 100%;
|
||||
}
|
||||
.wrap-detail .col-lg-4:nth-child(2) .wrap-detail__input input{
|
||||
|
||||
.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;
|
||||
@ -394,64 +405,139 @@ header {
|
||||
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 {
|
||||
|
||||
.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;
|
||||
padding-bottom: 100px;
|
||||
background-color: #08243e;
|
||||
}
|
||||
|
||||
#discount h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wrap-discount {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.wrap-discount__item {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.discount-item__img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discount-img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discount-img span {
|
||||
align-self: center;
|
||||
color: #fff;
|
||||
font-family: 'ProximaNovaExtraBold';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.discount-img img {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.discount-item__description {
|
||||
color: #fff;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
#info,
|
||||
#price,
|
||||
#advantages,
|
||||
#detail,
|
||||
#guarantees,
|
||||
#discount {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Section Working */
|
||||
#working {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
#working .title-description p {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#working .title-description {
|
||||
margin-top: 25px;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user