349 lines
16 KiB
Plaintext
349 lines
16 KiB
Plaintext
<header class="site-header">
|
||
<div class="container header-top">
|
||
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
||
<img src="assets/images/logo-dp-trade.png" alt="DP Trade" width="156" height="33">
|
||
</a>
|
||
|
||
<form class="search-bar" action="#" role="search">
|
||
<button type="submit" aria-label="Поиск">⌕</button>
|
||
<input type="search" placeholder="Поиск по вину, региону, производителю" aria-label="Поиск">
|
||
</form>
|
||
|
||
<div class="header-actions">
|
||
<a class="phone-link" href="tel:+74959379460">+7 (495) 937-94-60</a>
|
||
<a class="header-icon header-icon--air" href="#" aria-label="Аккаунт">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 12.2a4.1 4.1 0 1 0 0-8.2 4.1 4.1 0 0 0 0 8.2Z" />
|
||
<path d="M4.8 20.2c1.1-3.3 3.6-5 7.2-5s6.1 1.7 7.2 5" />
|
||
</svg>
|
||
</a>
|
||
<a class="header-icon header-icon--air" href="#" aria-label="Корзина">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M5 6h2l1.4 9.2h8.5L19 8H8" />
|
||
<path d="M9.4 19.2h.1M16.8 19.2h.1" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="container main-nav" aria-label="Основная навигация">
|
||
<a href="catalog.html">Каталог</a>
|
||
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">Регион <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
|
||
<section class="mega-menu" aria-label="Регион">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">Регион</p>
|
||
<h2>Вина по географии</h2>
|
||
</div>
|
||
<p>Быстрый вход в каталог через страну, апелласьон или популярный регион.</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/vineyard-hills.jpg" 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 popular-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>
|
||
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
|
||
<section class="mega-menu" aria-label="Вино">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">Вино</p>
|
||
<h2>Каталог по типу и стилю</h2>
|
||
</div>
|
||
<p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/wine-glasses.jpg" 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>
|
||
</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>
|
||
</article>
|
||
|
||
<article class="menu-column popular-column">
|
||
<p class="section-title">Популярное</p>
|
||
<div class="popular-list">
|
||
<a href="#">Новинки</a>
|
||
<a href="#">Хиты продаж</a>
|
||
<a href="#">Для ресторанов</a>
|
||
<a href="#">Премиум подборка</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
|
||
<section class="mega-menu" aria-label="Крепкий алкоголь">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">Spirits</p>
|
||
<h2>Крепкий алкоголь</h2>
|
||
</div>
|
||
<p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/spirits-glass.jpg" 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">
|
||
<p class="section-title">По стилю</p>
|
||
<a href="#">Односолодовый</a>
|
||
<a href="#">Купажированный</a>
|
||
<a href="#">Выдержанный</a>
|
||
<a href="#">Пряный</a>
|
||
<a href="#">Дижестив</a>
|
||
<a href="#">Для коктейлей</a>
|
||
</article>
|
||
|
||
<article class="menu-column popular-column">
|
||
<p class="section-title">Популярное</p>
|
||
<div class="popular-list">
|
||
<a href="#">Single Malt</a>
|
||
<a href="#">Cognac VSOP</a>
|
||
<a href="#">Premium Gin</a>
|
||
<a href="#">Bar Selection</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
|
||
<section class="mega-menu" aria-label="Производители">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">Производители</p>
|
||
<h2>Дома, хозяйства и бренды</h2>
|
||
</div>
|
||
<p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/winery-barrels.jpg" 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>
|
||
</article>
|
||
|
||
<article class="menu-column">
|
||
<p class="section-title">Избранные</p>
|
||
<a href="#">Chateau Laroque</a>
|
||
<a href="#">Marchesi Antinori</a>
|
||
<a href="#">Torres</a>
|
||
<a href="#">Dr. Loosen</a>
|
||
<a href="#">Catena Zapata</a>
|
||
<a href="#">Penfolds</a>
|
||
</article>
|
||
|
||
<article class="menu-column popular-column">
|
||
<p class="section-title">Форматы</p>
|
||
<div class="popular-list">
|
||
<a href="#">Семейные хозяйства</a>
|
||
<a href="#">Grand Cru</a>
|
||
<a href="#">Органика</a>
|
||
<a href="#">Эксклюзив DP Trade</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<a href="#">Поставки</a>
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">О компании <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
|
||
<section class="mega-menu" aria-label="О компании">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">DP Trade</p>
|
||
<h2>О компании и контакты</h2>
|
||
</div>
|
||
<p>Истории, статьи и прямые контакты для клиентов и партнёров.</p>
|
||
</div>
|
||
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/winery-barrels.jpg" alt="Винные бочки в погребе">
|
||
<p>Команда DP Trade работает с вином как с живым продуктом — от поставки до клиента.</p>
|
||
</article>
|
||
|
||
<article class="menu-column">
|
||
<p class="section-title">Компания</p>
|
||
<a href="about.html">О нас</a>
|
||
<a href="contacts.html">Контакты</a>
|
||
<a href="contacts-auth.html">Контакты для партнёров</a>
|
||
</article>
|
||
|
||
<article class="menu-column">
|
||
<p class="section-title">Новости и статьи</p>
|
||
<a href="news-villa-raiano.html">Villa Raiano — классика</a>
|
||
<a href="news-villa-raiano-v2.html">Villa Raiano — editorial</a>
|
||
<a href="article-guidelines.html">Редакционный гайд</a>
|
||
</article>
|
||
|
||
<article class="menu-column popular-column">
|
||
<p class="section-title">Быстрые ссылки</p>
|
||
<div class="popular-list">
|
||
<a href="#">Склады и логистика</a>
|
||
<a href="#">Реквизиты</a>
|
||
<a href="#">Карьера</a>
|
||
<a href="#">Пресса</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="nav-item">
|
||
<button class="nav-trigger" type="button" aria-expanded="false">UI-kit <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||
<section class="mega-menu" aria-label="UI-kit">
|
||
<div class="mega-intro">
|
||
<div>
|
||
<p class="eyebrow">Design system</p>
|
||
<h2>UI-kit и демо-страницы</h2>
|
||
</div>
|
||
<p>Быстрый доступ к живым страницам, компонентам, паттернам и токенам для разработки.</p>
|
||
</div>
|
||
<div class="menu-grid">
|
||
<article class="menu-column visual-column">
|
||
<img src="assets/images/wine-glasses.jpg" alt="Демонстрация винного каталога" />
|
||
<p>Все демо-страницы собраны в одном месте для проверки header, footer, карточек и каталожных сценариев.</p>
|
||
</article>
|
||
<article class="menu-column">
|
||
<p class="section-title">Demo pages</p>
|
||
<a href="index.html">Главная</a>
|
||
<a href="catalog.html">Каталог</a>
|
||
<a href="product.html">Карточка товара</a>
|
||
<a href="bottle-cards.html">Варианты карточек</a>
|
||
<a href="product-card-white.html">Карточка на белом</a>
|
||
<a href="news-villa-raiano.html">Новость</a>
|
||
<a href="news-villa-raiano-v2.html">Новость v2</a>
|
||
<a href="article-guidelines.html">Ред. гайд</a>
|
||
<a href="about.html">О компании</a>
|
||
<a href="contacts.html">Контакты</a>
|
||
<a href="contacts-auth.html">Контакты auth</a>
|
||
</article>
|
||
<article class="menu-column">
|
||
<p class="section-title">UI-kit sections</p>
|
||
<a href="ui-kit.html#foundations">Foundations</a>
|
||
<a href="ui-kit.html#components">Components</a>
|
||
<a href="ui-kit.html#patterns">Patterns</a>
|
||
<a href="ui-kit.html#templates">Templates</a>
|
||
<a href="ui-kit.html#screens">Screens</a>
|
||
</article>
|
||
<article class="menu-column">
|
||
<p class="section-title">Dev handoff</p>
|
||
<div class="popular-list">
|
||
<a href="ui-kit.html#tokens">Tokens</a>
|
||
<a href="ui-kit.html#components">States</a>
|
||
<a href="ui-kit.html#patterns">Layouts</a>
|
||
<a href="ui-kit.html">Full UI-kit</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="design-toggle design-toggle--nav" role="group" aria-label="Версия дизайна">
|
||
<button type="button" class="design-toggle__btn" data-version="v1">V1</button>
|
||
<button type="button" class="design-toggle__btn" data-version="v2">V2</button>
|
||
</div>
|
||
</nav>
|
||
</header>
|