87 lines
3.5 KiB
HTML
87 lines
3.5 KiB
HTML
<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>
|