mirror of
https://github.com/sergeyyarkov/belazi-landing.git
synced 2026-10-11 10:19:06 +03:00
419 lines
20 KiB
HTML
419 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>Belazi Landing</title>
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" href="./src/styles/style.css">
|
||
<link rel="stylesheet" href="./src/styles/media.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container">
|
||
<div class="header-wrap">
|
||
<div class="header-wrap__logo">
|
||
<a href="#">
|
||
<img src="./src/img/header/header-logo.png" alt="#">
|
||
</a>
|
||
</div>
|
||
<div class="header-wrap__opening">
|
||
<p>
|
||
c 9:00 до 21:00<br>
|
||
<span>без выходных</span>
|
||
</p>
|
||
</div>
|
||
<div class="header-wrap__info">
|
||
<p>
|
||
+7 (818) 247-47-25<br>
|
||
+7(818) 247-47-25
|
||
</p>
|
||
<button>Заказать звонок</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<section id="info">
|
||
<div class="container">
|
||
<div class="row no-gutter">
|
||
<div class="col-lg-6">
|
||
<div class="info-wrap">
|
||
<div class="info-wrap__card">
|
||
<div class="info-card__title">
|
||
<h1>Оригинальные<br>
|
||
запчасти<br>
|
||
для Белаз
|
||
</h1>
|
||
</div>
|
||
<div class="info-card__description">
|
||
<p>
|
||
с бесплатной доставкой <br>в Ваш город!
|
||
</p>
|
||
</div>
|
||
<div class="info-card__advantages">
|
||
<div class="info-advantages__item">
|
||
<p>
|
||
Дилерские цены - ниже на 20%,<br> работаем без посредников!
|
||
</p>
|
||
</div>
|
||
<div class="info-advantages__item">
|
||
<p>
|
||
Срочная бесплатная доставка<br>
|
||
за 7 дней
|
||
</p>
|
||
</div>
|
||
<div class="info-advantages__item">
|
||
<p>
|
||
Даем рассрочку<br>
|
||
6 месяцев
|
||
</p>
|
||
</div>
|
||
<div class="info-advantages__item">
|
||
<p>
|
||
Даем гарантию<br>
|
||
от 12 месяцев
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="price">
|
||
<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>
|
||
</section>
|
||
<section id="advantages">
|
||
<div class="container">
|
||
<h2>Вам не придется ждать!</h2>
|
||
<div class="title-description">
|
||
<p>
|
||
Любые запчасти для всех моделей Белаз<br>
|
||
всегда в наличии!
|
||
</p>
|
||
</div>
|
||
<div class="row wrap-advantages">
|
||
<div class="col-lg-3 col-sm-6">
|
||
<div class="wrap-advantages__card">
|
||
<div class="advantages-card__img">
|
||
<img src="./src/img/main-advantages/icon-1.png" alt="#">
|
||
</div>
|
||
<div class="advantages-card__description">
|
||
<p>
|
||
Все модификации Белаз<br>
|
||
от 45т до 450 т
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-sm-6">
|
||
<div class="wrap-advantages__card">
|
||
<div class="advantages-card__img">
|
||
<img src="./src/img/main-advantages/icon-2.png" alt="#">
|
||
</div>
|
||
<div class="advantages-card__description">
|
||
<p>
|
||
Отгружаем в день заказа!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-sm-6">
|
||
<div class="wrap-advantages__card">
|
||
<div class="advantages-card__img">
|
||
<img src="./src/img/main-advantages/icon-3.png" alt="#">
|
||
</div>
|
||
<div class="advantages-card__description">
|
||
<p>
|
||
Любые типы деталей<br>
|
||
от шайбы до двигателя!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-sm-6">
|
||
<div class="wrap-advantages__card">
|
||
<div class="advantages-card__img">
|
||
<img src="./src/img/main-advantages/icon-4.png" alt="#">
|
||
</div>
|
||
<div class="advantages-card__description">
|
||
<p>
|
||
Доставим в любое место!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 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 class="row wrap-working">
|
||
<div class="col-sm-4">
|
||
<div class="wrap-working__item">
|
||
<div class="working-item__img">
|
||
<img src="./src/img/main-working/icon-1.png" alt="#">
|
||
</div>
|
||
<div class="working-item__description">
|
||
<p>
|
||
Вы вносите предоплату<br>
|
||
в размере 50%<br>
|
||
от стоимости запчасти<br>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="wrap-working__item">
|
||
<div class="working-item__img">
|
||
<img src="./src/img/main-working/icon-2.png" alt="#">
|
||
</div>
|
||
<div class="working-item__description">
|
||
<p>
|
||
Отправляем запчасти<br>
|
||
в день заказа
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="wrap-working__item">
|
||
<div class="working-item__img">
|
||
<img src="./src/img/main-working/icon-3.png" alt="#">
|
||
</div>
|
||
<div class="working-item__description">
|
||
<p>
|
||
Получаете деталь,<br>
|
||
проверяете, оплачиваете<br>
|
||
оставшиеся 50%
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Index Js -->
|
||
<script src="./src/js/index.js"></script>
|
||
</body>
|
||
|
||
</html> |