mirror of
https://github.com/sergeyyarkov/belazi-landing.git
synced 2026-10-11 02:08:59 +03:00
670 lines
32 KiB
HTML
670 lines
32 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">
|
||
<!-- Owl Carousel CSS -->
|
||
<link rel="stylesheet" href="src/styles/owl.carousel.min.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="questions">
|
||
<h2>У Вас остались вопросы?</h2>
|
||
<div class="title-description">
|
||
<p>
|
||
На Ваши вопросы отвечает Эдуард
|
||
</p>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row wrap-questions">
|
||
<div class="col-lg-6">
|
||
<div class="wrap-questions__item">
|
||
<p>
|
||
1.<a>Как заказать деталь правильно?</a>
|
||
</p>
|
||
<div class="question-content">
|
||
<span class="tooltip-close">
|
||
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
|
||
</span>
|
||
<p>
|
||
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore et dolore magna aliqua. <br><br>
|
||
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-questions__item">
|
||
<p>
|
||
<span>2.</span><a>Что делать, если запчасть не понадобилась?</a>
|
||
</p>
|
||
<div class="question-content">
|
||
<span class="tooltip-close">
|
||
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
|
||
</span>
|
||
<p>
|
||
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore et dolore magna aliqua. <br><br>
|
||
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-questions__item">
|
||
<p>
|
||
3.<a>Можете ли Вы установить деталь?</a>
|
||
</p>
|
||
<div class="question-content">
|
||
<span class="tooltip-close">
|
||
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
|
||
</span>
|
||
<p>
|
||
3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore et dolore magna aliqua. <br><br>
|
||
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-questions__item">
|
||
<p>
|
||
4.<a>В чем преимущества оригинальных деталей?</a>
|
||
</p>
|
||
<div class="question-content">
|
||
<span class="tooltip-close">
|
||
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
|
||
</span>
|
||
<p>
|
||
4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore et dolore magna aliqua. <br><br>
|
||
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-questions__item">
|
||
<p>
|
||
5.<a>В чем преимущества оригинальных деталей?</a>
|
||
</p>
|
||
<div class="question-content">
|
||
<span class="tooltip-close">
|
||
<img src="./src/img/main-questions/tooltip-close.png" alt="#">
|
||
</span>
|
||
<p>
|
||
5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
||
incididunt ut labore et dolore magna aliqua. <br><br>
|
||
|
||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="more-questions">
|
||
<p>
|
||
<a href="#">Еще вопросы</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="wrap-questions__image">
|
||
<img src="./src/img/main-questions/photo.png" alt="#">
|
||
</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>
|
||
<section id="stock">
|
||
<h2>У нас собственный склад!</h2>
|
||
<div class="title-description">
|
||
<p>
|
||
Это позволяет нам быстро обрабатывать запросы и отгружать детали<br>
|
||
в день заказа!
|
||
</p>
|
||
</div>
|
||
<div class="container">
|
||
<div class="stock-wrap">
|
||
<div class="owl-carousel">
|
||
<img src="./src/img/main-stock/photo-1.png" alt="#">
|
||
<img src="./src/img/main-stock/photo-2.png" alt="#">
|
||
<img src="./src/img/main-stock/photo-3.png" alt="#">
|
||
<img src="./src/img/main-stock/photo-1.png" alt="#">
|
||
<img src="./src/img/main-stock/photo-2.png" alt="#">
|
||
<img src="./src/img/main-stock/photo-3.png" alt="#">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="team">
|
||
<h2>
|
||
У нас в штате есть мобильные бригады,<br>
|
||
готовые выехать на сервисное обслуживание,<br>
|
||
ремонт и проведение диагностики!<br>
|
||
</h2>
|
||
<div class="container">
|
||
<div class="row wrap-team">
|
||
<div class="col-md-4">
|
||
<div class="wrap-team__item">
|
||
<div class="team-item__img">
|
||
<div class="team-img">
|
||
<img src="./src/img/main-team/icon-1.png" alt="#">
|
||
</div>
|
||
</div>
|
||
<div class="team-item__description">
|
||
<p>
|
||
Организуем выезд специалистов<br>
|
||
в течение двух дней
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="wrap-team__item">
|
||
<div class="team-item__img">
|
||
<div class="team-img">
|
||
<img src="./src/img/main-team/icon-2.png" alt="#">
|
||
</div>
|
||
</div>
|
||
<div class="team-item__description">
|
||
<p>
|
||
Бригады укомплектованы
|
||
всем необходимым оборудованием
|
||
для производства работ
|
||
любой сложности
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="wrap-team__item">
|
||
<div class="team-item__img">
|
||
<div class="team-img">
|
||
<img src="./src/img/main-team/icon-3.png" alt="#">
|
||
</div>
|
||
</div>
|
||
<div class="team-item__description">
|
||
<p>
|
||
Все специалисты проходят обучение<br>
|
||
и ежегодную аттестацию
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="advice">
|
||
<h2>Если Вам необходима бесплатная консультация по вопросу обслуживания</h2>
|
||
<div class="title-telephone">
|
||
<p>
|
||
Звоните нам по телефону:<br>
|
||
<span> +7 (818) 247-47-25</span>
|
||
</p>
|
||
</div>
|
||
<div class="container">
|
||
<form action="#">
|
||
<div class="row wrap-advice">
|
||
<div class="col-lg-4 offset-lg-2 col-sm-6">
|
||
<div class="wrap-advice__input">
|
||
<input required placeholder="Введите ваш телефон" type="text">
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-sm-6">
|
||
<div class="wrap-advice__button">
|
||
<button>Перезвонить сейчас</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
<section id="come">
|
||
<h2>Приезжайте в наш офис!</h2>
|
||
<div class="title-description">
|
||
<p>
|
||
г. Архангельск, Москва-Сити, оф. 3725<br>
|
||
<span>+7 (818) 247-47-25</span>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
<section id="map">
|
||
<iframe src="https://yandex.ru/map-widget/v1/-/CGGZjHnA" width="100%" height="375" frameborder="none"
|
||
allowfullscreen="true"></iframe>
|
||
</section>
|
||
</main>
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-wrap">
|
||
<div class="footer-wrap__logo">
|
||
<img src="./src/img/header/header-logo.png" alt="#">
|
||
</div>
|
||
<div class="footer-wrap__copy">
|
||
<p>© 2019</p>
|
||
</div>
|
||
<div class="footer-wrap__info">
|
||
<p>
|
||
Есть вопросы? Звоните!<br>
|
||
<span>+7 (818) 247-47-25</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- jQuery 3.4.1 -->
|
||
<script src="src/js/jquery-3.4.1.min.js"></script>
|
||
<!-- Owl Carousel JS -->
|
||
<script src="src/js/owl.carousel.min.js"></script>
|
||
<!-- Index Js -->
|
||
<script src="./src/js/index.js"></script>
|
||
</body>
|
||
|
||
</html> |