mirror of
https://github.com/sergeyyarkov/granit-flex.git
synced 2026-10-11 10:19:27 +03:00
348 lines
16 KiB
HTML
348 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Granit Flex</title>
|
||
<!-- Style CSS -->
|
||
<link rel="stylesheet" href="./src/styles/style.css">
|
||
<!-- Media CSS -->
|
||
<link rel="stylesheet" href="./src/styles/media.css">
|
||
<!-- Fonts -->
|
||
<link rel="stylesheet" href="./src/styles/fonts.css">
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<div class="header-wrap">
|
||
<div class="header-content_top">
|
||
<div class="header-logo">
|
||
<p>Granit<br>
|
||
<small>Доставка нерудных материалов</small>
|
||
</p>
|
||
</div>
|
||
<div class="header-info">
|
||
<p>8 800 342-13-33<br>
|
||
<small>Бесплатный звонок по России</small>
|
||
</p>
|
||
<button>Обратный звонок</button>
|
||
</div>
|
||
</div>
|
||
<div class="header-content_bottom">
|
||
<div class="header-nav">
|
||
<ul>
|
||
<li><a href="#">Главная</a></li>
|
||
<li><a href="#">Каталог</a></li>
|
||
<li><a href="#">Услуги</a></li>
|
||
<li><a href="#">Доставка</a></li>
|
||
<li><a href="#">О компании</a></li>
|
||
<li><a href="#">Контакты</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<section id="main-info">
|
||
<div class="container">
|
||
<div class="main-info_content">
|
||
<h1>Быстрая доставка</h1>
|
||
<p>бетона, щебня, песка<br>
|
||
и других нерудных материалов<br>
|
||
по Москве и Московской области
|
||
</p>
|
||
<div class="more-info">
|
||
<button class="btn-yellow">Подробнее о доставке</button>
|
||
<span>или <a href="#">перейти в каталог</a></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="catalogue">
|
||
<div class="container">
|
||
<h2>Всегда в наличии</h2>
|
||
<div class="catalogue-content">
|
||
<div class="item">
|
||
<div class="item-image">
|
||
<img src="./src/img/catalogue/item-1.png" alt="#">
|
||
</div>
|
||
<div class="item-title">
|
||
<h3>Песок речной</h3>
|
||
</div>
|
||
<div class="item-description">
|
||
<p>
|
||
Мелкий речной песок повышает прочность, долговечность и морозоустойчивость растворов, в
|
||
состав которых он входит.
|
||
</p>
|
||
</div>
|
||
<div class="item-price">
|
||
<p>от 330 р./т</p>
|
||
</div>
|
||
<div class="item-btn">
|
||
<button class="btn-yellow">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-image">
|
||
<img src="./src/img/catalogue/item-2.png" alt="#">
|
||
</div>
|
||
<div class="item-title">
|
||
<h3>Щебень</h3>
|
||
</div>
|
||
<div class="item-description">
|
||
<p>
|
||
Мелкий речной песок повышает прочность, долговечность и морозоустойчивость растворов, в
|
||
состав которых он входит.
|
||
</p>
|
||
</div>
|
||
<div class="item-price">
|
||
<p>от 330 р./т</p>
|
||
</div>
|
||
<div class="item-btn">
|
||
<button class="btn-yellow">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="item-image">
|
||
<img src="./src/img/catalogue/item-3.png" alt="#">
|
||
</div>
|
||
<div class="item-title">
|
||
<h3>Грунт</h3>
|
||
</div>
|
||
<div class="item-description">
|
||
<p>
|
||
Мелкий речной песок повышает прочность, долговечность и морозоустойчивость растворов, в
|
||
состав которых он входит.
|
||
</p>
|
||
</div>
|
||
<div class="item-price">
|
||
<p>от 330 р./т</p>
|
||
</div>
|
||
<div class="item-btn">
|
||
<button class="btn-yellow">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="advantages">
|
||
<div class="container">
|
||
<h2>Наши преимущества</h2>
|
||
<div class="advantages-content">
|
||
<div class="advantage">
|
||
<div class="advantage-image">
|
||
<img src="./src/img/advantages/icon-1.png" alt="#">
|
||
</div>
|
||
<div class="advantage-title">
|
||
<h3>Низкая Цена</h3>
|
||
</div>
|
||
<div class="advantage-description">
|
||
<p>
|
||
Мы сотрудничаем напрямую
|
||
с производителем, поэтому можем гарантировать самую низкую цену.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="advantage-image">
|
||
<img src="./src/img/advantages/icon-2.png" alt="#">
|
||
</div>
|
||
<div class="advantage-title">
|
||
<h3>Быстрая доставка</h3>
|
||
</div>
|
||
<div class="advantage-description">
|
||
<p>
|
||
Весь товар уже находится на нашем складе. Нам остается только погрузить его и в путь!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="advantage">
|
||
<div class="advantage-image">
|
||
<img src="./src/img/advantages/icon-3.png" alt="#">
|
||
</div>
|
||
<div class="advantage-title">
|
||
<h3>Индивидуальный подход</h3>
|
||
</div>
|
||
<div class="advantage-description">
|
||
<p>
|
||
Вам нужны бесперебойные поставки
|
||
или большая партия товара со скидкой?
|
||
Мы найдем решение!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="popular-items">
|
||
<div class="container">
|
||
<h2>Популярные товары</h2>
|
||
<div class="popular-items_content">
|
||
<div class="pop-item sale">
|
||
<div class="pop-img">
|
||
<span>Акция</span>
|
||
<img src="./src/img/popular-items/pop-item-1.png" alt="#">
|
||
</div>
|
||
<div class="pop-title">
|
||
<h3>Гранитный щебень 5-20мм</h3>
|
||
</div>
|
||
<div class="pop-price">
|
||
<p>
|
||
<span>1 500 р./т</span> 1 350 р./т
|
||
</p>
|
||
</div>
|
||
<div class="pop-btn">
|
||
<button class="btn-yellow">Купить</button>
|
||
</div>
|
||
</div>
|
||
<div class="pop-item sale">
|
||
<div class="pop-img">
|
||
<span>Акция</span>
|
||
<img src="./src/img/popular-items/pop-item-2.png" alt="#">
|
||
</div>
|
||
<div class="pop-title">
|
||
<h3>Гранитный щебень 5-20мм</h3>
|
||
</div>
|
||
<div class="pop-price">
|
||
<p>
|
||
<span>1 500 р./т</span> 1 350 р./т
|
||
</p>
|
||
</div>
|
||
<div class="pop-btn">
|
||
<button class="btn-yellow">Купить</button>
|
||
</div>
|
||
</div>
|
||
<div class="pop-item">
|
||
<div class="pop-img">
|
||
<img src="./src/img/popular-items/pop-item-3.png" alt="#">
|
||
</div>
|
||
<div class="pop-title">
|
||
<h3>Гранитный щебень 0-5мм (отсев)</h3>
|
||
</div>
|
||
<div class="pop-price">
|
||
<p>
|
||
1 350 р./т
|
||
</p>
|
||
</div>
|
||
<div class="pop-btn">
|
||
<button class="btn-yellow">Купить</button>
|
||
</div>
|
||
</div>
|
||
<div class="pop-item">
|
||
<div class="pop-img">
|
||
<img src="./src/img/popular-items/pop-item-4.png" alt="#">
|
||
</div>
|
||
<div class="pop-title">
|
||
<h3>Гранитный щебень 5-20мм</h3>
|
||
</div>
|
||
<div class="pop-price">
|
||
<p>
|
||
1 350 р./т
|
||
</p>
|
||
</div>
|
||
<div class="pop-btn">
|
||
<button class="btn-yellow">Купить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="services">
|
||
<div class="container">
|
||
<h2>Наши услуги</h2>
|
||
<div class="services-content">
|
||
<a href="#">
|
||
<div class="service">
|
||
<div class="service-img">
|
||
<img src="./src/img/services/service-1.png" alt="#">
|
||
</div>
|
||
<div class="service-title">
|
||
<h3>Аренда самосвала</h3>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<a href="#">
|
||
<div class="service">
|
||
<div class="service-img">
|
||
<img src="./src/img/services/service-2.png" alt="#">
|
||
</div>
|
||
<div class="service-title">
|
||
<h3>Аренда спецтехники</h3>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a href="#">
|
||
<div class="service">
|
||
<div class="service-img">
|
||
<img src="./src/img/services/service-3.png" alt="#">
|
||
</div>
|
||
<div class="service-title">
|
||
<h3>Рытье траншеи</h3>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="contacts">
|
||
<div class="container">
|
||
<div class="contacts-content">
|
||
<div class="contacts-info">
|
||
<div class="contact-title">
|
||
<h3>Контакты</h3>
|
||
</div>
|
||
<div class="contact-telephone">
|
||
<p>
|
||
8 800 034-23-34
|
||
<br>
|
||
8 495 034-23-34
|
||
</p>
|
||
</div>
|
||
<div class="contact-place">
|
||
<p>
|
||
Московская обл. г. Балашиха,<br>
|
||
пер. Столовой, д.23, кор. 34
|
||
</p>
|
||
</div>
|
||
<div class="contact-email">
|
||
<a href="#">Info@stroika.ru</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-wrap">
|
||
<div class="footer-content_top">
|
||
<div class="footer-logo">
|
||
<p>Granit<br>
|
||
<small>Доставка нерудных материалов</small>
|
||
</p>
|
||
</div>
|
||
<div class="footer-info">
|
||
<p>8 800 342-13-33<br>
|
||
<small>Бесплатный звонок по России</small>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-content_bottom">
|
||
<div class="footer-copy">
|
||
<span>© 2019. Гранти</span>
|
||
</div>
|
||
<div class="footer-btn">
|
||
<button class="btn-yellow">Обратный звонок</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
|
||
</html> |