224 lines
14 KiB
HTML
224 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>DP Trade — Home</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="css/site.css" />
|
||
</head>
|
||
<body>
|
||
<div class="site-shell">
|
||
<header class="site-header">
|
||
<div class="container header-top">
|
||
<a class="brand-logo" href="index.html" aria-label="DP Trade"><span>DP</span> Trade<small>since 1991</small></a>
|
||
<form class="search-bar" action="#" role="search">
|
||
<button type="submit" aria-label="Поиск">⌕</button>
|
||
<input type="search" placeholder="Найти название, марку, бренд, производителя..." aria-label="Поиск" />
|
||
</form>
|
||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||
</div>
|
||
<nav class="container main-nav" aria-label="Основная навигация">
|
||
<a href="#">О нас</a>
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span aria-hidden="true">⌄</span></button>
|
||
<section class="mega-menu" aria-label="Регион">
|
||
<div class="mega-intro">
|
||
<p class="eyebrow">Регион</p>
|
||
<h2>Выбор вина по географии</h2>
|
||
<p>Один экран для выбора страны, апелласьона или популярного региона без длинного дерева навигации.</p>
|
||
</div>
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80" alt="Виноградник на холмах" />
|
||
<p>Выбирайте через знакомую страну или сразу через регион, если точно знаете, что ищете.</p>
|
||
</article>
|
||
<article class="menu-column">
|
||
<p class="section-title">Страны</p>
|
||
<a href="#">Старый Свет</a><a href="#">Франция</a><a href="#">Италия</a><a href="#">Испания</a><a href="#">Германия</a><a href="#">Новый Свет</a><a href="#">Чили</a><a href="#">Аргентина</a>
|
||
</article>
|
||
<article class="menu-column appellations">
|
||
<p class="section-title">Апелласьоны</p>
|
||
<div class="appellation-group"><a class="country-link" href="#">Франция</a><a href="#">Bordeaux</a><a href="#">Medoc</a><a href="#">Margaux</a><a href="#">Pauillac</a><a href="#">Saint-Emilion</a></div>
|
||
<div class="appellation-group"><a class="country-link" href="#">Италия</a><a href="#">Toscana</a><a href="#">Chianti</a><a href="#">Brunello di Montalcino</a><a href="#">Piemonte</a></div>
|
||
</article>
|
||
<article class="menu-column">
|
||
<p class="section-title">Популярные регионы</p>
|
||
<div class="popular-list"><a href="#">Бордо</a><a href="#">Тоскана</a><a href="#">Пьемонт</a><a href="#">Риоха</a><a href="#">Напа Вэлли</a></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<a href="catalog.html">Вино</a>
|
||
<a href="#">Крепкий алкоголь</a>
|
||
<a href="#">Стиль и вкус</a>
|
||
<a href="#">Новости</a>
|
||
<a href="ui-kit.html">UI-kit</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container hero-copy">
|
||
<p class="eyebrow">DP Trade</p>
|
||
<h1>Премиальный каталог вина для торговли</h1>
|
||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||
<div class="hero-actions">
|
||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||
<a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section type-lab-section">
|
||
<div class="container">
|
||
<div class="section-heading section-heading--split">
|
||
<div>
|
||
<p class="eyebrow">Typography direction</p>
|
||
<h2>5 вариантов типографики</h2>
|
||
</div>
|
||
<p>
|
||
Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки
|
||
и читаемый интерфейс для каталога.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="type-options type-options--five">
|
||
<article class="type-card type-card--editorial">
|
||
<div class="type-card__meta">
|
||
<span>Option 01</span>
|
||
<strong>Editorial Wine</strong>
|
||
</div>
|
||
<h3>Редкие вина для профессиональной торговли</h3>
|
||
<p>
|
||
Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
|
||
культурного контекста и ощущения curated selection.
|
||
</p>
|
||
<div class="type-scale">
|
||
<span>H1 72/78</span>
|
||
<span>Body 16/25</span>
|
||
<span>Label 12/16</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="type-card type-card--neo">
|
||
<div class="type-card__meta">
|
||
<span>Option 02</span>
|
||
<strong>Neo Trade</strong>
|
||
</div>
|
||
<h3>Каталог, который работает как торговый инструмент</h3>
|
||
<p>
|
||
Manrope везде: современно, ровно, технологично. Хорошо подойдет, если сайт должен читаться
|
||
как быстрый B2B-продукт.
|
||
</p>
|
||
<div class="type-scale">
|
||
<span>H1 64/70</span>
|
||
<span>Body 16/24</span>
|
||
<span>Label 12/16</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="type-card type-card--classic">
|
||
<div class="type-card__meta">
|
||
<span>Option 03</span>
|
||
<strong>Modern Classic</strong>
|
||
</div>
|
||
<h3>Вино, регионы и производители в ясной системе</h3>
|
||
<p>
|
||
Playfair Display + Inter. Более классический premium retail, но с аккуратной цифровой
|
||
читаемостью в карточках, фильтрах и таблицах.
|
||
</p>
|
||
<div class="type-scale">
|
||
<span>H1 68/74</span>
|
||
<span>Body 16/24</span>
|
||
<span>Label 12/16</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="type-card type-card--retail is-selected">
|
||
<div class="type-card__meta">
|
||
<span>Option 04</span>
|
||
<strong>Выбрано</strong>
|
||
</div>
|
||
<h3>Сильная витрина с акцентом на выбор</h3>
|
||
<p>
|
||
Montserrat для заголовков и Inter для текста. Более собранный, коммерческий, уверенный
|
||
вариант для каталога с большим количеством позиций.
|
||
</p>
|
||
<div class="type-scale">
|
||
<span>H1 60/66</span>
|
||
<span>Body 16/24</span>
|
||
<span>Label 12/16</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="type-card type-card--compact is-selected-soft">
|
||
<div class="type-card__meta">
|
||
<span>Option 05</span>
|
||
<strong>Compact Retail</strong>
|
||
</div>
|
||
<h3>Компактный каталог для быстрого выбора</h3>
|
||
<p>
|
||
Montserrat + Inter, но с меньшим scale: заголовки спокойнее, карточки плотнее,
|
||
больше товаров помещается в первый экран.
|
||
</p>
|
||
<div class="type-scale">
|
||
<span>H1 48/54</span>
|
||
<span>Body 15/22</span>
|
||
<span>Label 11/14</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Recommendations</p>
|
||
<h2>Рекомендации недели</h2>
|
||
</div>
|
||
<div class="product-grid">
|
||
<article class="product-card">
|
||
<div class="product-media"><span class="bottle"></span></div>
|
||
<div><span class="muted-caps">Bordeaux</span><h3>Chateau Laroque Grand Cru</h3><p>France · Red dry · 2019 · 0.75 L</p></div>
|
||
<div class="product-footer"><strong>3 890 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||
</article>
|
||
<article class="product-card">
|
||
<div class="product-media product-media--amber"><span class="bottle"></span></div>
|
||
<div><span class="muted-caps">Tuscany</span><h3>Brunello di Montalcino</h3><p>Italy · Red dry · 2018 · 0.75 L</p></div>
|
||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||
</article>
|
||
<article class="product-card">
|
||
<div class="product-media product-media--green"><span class="bottle"></span></div>
|
||
<div><span class="muted-caps">Mosel</span><h3>Riesling Kabinett</h3><p>Germany · White · 2021 · 0.75 L</p></div>
|
||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="container footer-container">
|
||
<section class="footer-main">
|
||
<div class="footer-left">
|
||
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
|
||
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
|
||
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="#">Связаться с менеджером</a></article>
|
||
</div>
|
||
<section class="footer-nav" aria-label="Навигация по разделам">
|
||
<article class="nav-group"><h2>Каталог</h2><ul><li><a href="catalog.html">Вина по регионам</a></li><li><a href="#">Франция</a></li><li><a href="#">Италия</a></li><li><a href="#">Испания</a></li><li><a href="#">Новинки</a></li></ul></article>
|
||
<article class="nav-group"><h2>Клиентам</h2><ul><li><a href="#">Доставка</a></li><li><a href="#">Оплата</a></li><li><a href="#">Как купить</a></li><li><a href="#">Скачать каталог</a></li></ul></article>
|
||
<article class="nav-group"><h2>Компания</h2><ul><li><a href="#">О компании</a></li><li><a href="#">Контакты</a></li><li><a href="#">Склады</a></li><li><a href="#">Реквизиты</a></li></ul></article>
|
||
<section class="footer-legal" aria-label="Правовая информация"><p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления. Дистанционная продажа алкогольной продукции не осуществляется. <a href="#">Подробнее о правовой информации</a></p><p>© 2026 DP-Trade</p></section>
|
||
</section>
|
||
</section>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|