Add UI-kit demo pages and bottle card variants
This commit is contained in:
parent
5127269b0a
commit
4dd01aeb29
BIN
assets/images/00073820_1.png
Normal file
BIN
assets/images/00073820_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
BIN
assets/images/00080768_1.png
Normal file
BIN
assets/images/00080768_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/images/00081726_1.png
Normal file
BIN
assets/images/00081726_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
444
bottle-cards.html
Normal file
444
bottle-cards.html
Normal file
@ -0,0 +1,444 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Bottle Card Variants</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=Inter:wght@400;500;600;700;800&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<div class="container header-top">
|
||||
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
||||
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.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="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>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?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>
|
||||
</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">
|
||||
<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="https://images.unsplash.com/photo-1527281400683-1aae777175f8?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">
|
||||
<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">
|
||||
<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="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?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>
|
||||
</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">
|
||||
<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>
|
||||
<a href="#">Новости</a>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" 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>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="section card-lab-section">
|
||||
<div class="container">
|
||||
<div class="card-lab-head">
|
||||
<div>
|
||||
<p class="eyebrow">UI-kit / Product cards</p>
|
||||
<h1>Варианты карточек бутылок</h1>
|
||||
</div>
|
||||
<p>Отдельная витрина для выбора направления карточки: крупные плитки, компактные версии и горизонтальный формат для B2B-каталога.</p>
|
||||
</div>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="cards-grid-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Variant 01</p>
|
||||
<h2 id="cards-grid-title">Акцентные карточки каталога</h2>
|
||||
</div>
|
||||
<div class="bottle-card-grid">
|
||||
<article class="bottle-card bottle-card--bordeaux">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Bordeaux</p>
|
||||
<h3>Chateau Laroque Grand Cru</h3>
|
||||
<p>France · Red dry · 2019 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>3 890 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--tuscany">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Tuscany</p>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
<p>Italy · Red dry · 2018 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>4 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--mosel">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Mosel</p>
|
||||
<h3>Riesling Kabinett</h3>
|
||||
<p>Germany · White · 2021 · 0.75 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>2 150 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="cards-alt-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Variant 02-04</p>
|
||||
<h2 id="cards-alt-title">Альтернативные форматы</h2>
|
||||
</div>
|
||||
<div class="bottle-card-mix">
|
||||
<article class="bottle-card bottle-card--clean">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00073820_1.png" alt="Oremus Case of Aszu" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Clean retail</p>
|
||||
<h3>Oremus Case of Aszu 5 Puttonyos</h3>
|
||||
<p>Hungary · White sweet · 2000 · 0.5 L</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--compact">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00080768_1.png" alt="Oremus Tokaji Aszu" />
|
||||
</div>
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">Compact</p>
|
||||
<h3>Tokaji Aszu 5 Puttonyos</h3>
|
||||
<p>Hungary · 12% · Furmint, Harslevelu</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--primary button--sm" href="product.html">Подробнее</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="bottle-card bottle-card--horizontal">
|
||||
<div class="bottle-card__media">
|
||||
<img class="bottle-card__photo" src="assets/images/00081726_1.png" alt="Oremus Tokaji Late Harvest" />
|
||||
</div>
|
||||
<div class="bottle-card__content">
|
||||
<div class="bottle-card__body">
|
||||
<p class="bottle-card__region">B2B row card</p>
|
||||
<h3>Oremus Tokaji Late Harvest</h3>
|
||||
<p>Вино белое полусладкое · Венгрия · 11.5%</p>
|
||||
<p class="bottle-card__details">Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="bottle-card__footer">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--secondary button--sm" href="product.html">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card-variant-block" aria-labelledby="catalog-card-title">
|
||||
<div class="card-variant-title">
|
||||
<p class="eyebrow">Catalog current</p>
|
||||
<h2 id="catalog-card-title">Варианты текущей карточки каталога</h2>
|
||||
</div>
|
||||
<div class="catalog-card-variants">
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Default / как в каталоге</p>
|
||||
<div class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Compact / меньше высота</p>
|
||||
<div class="product-card product-card--list product-card--list-compact">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Сладкое · 12% · Фурминт, Харшлевелю, Мускат</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Hover / активная строка</p>
|
||||
<div class="product-card product-card--list product-card--list-hover">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
|
||||
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Полусладкое<br />11.5 %</p>
|
||||
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--primary" href="#">Подробнее</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">Color image / цветной фон фото</p>
|
||||
<div class="product-card product-card--list product-card--list-color">
|
||||
<a class="product-image product-image--gold" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="catalog-card-sample">
|
||||
<p class="catalog-card-sample__label">B2B dense / больше данных</p>
|
||||
<div class="product-card product-card--list product-card--list-b2b">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Венгрия · Tokaj · Oremus · 0.5 л · 12%</p>
|
||||
<div class="product-params">
|
||||
<span>Тип: белое сладкое</span>
|
||||
<span>Сорт: Фурминт 70%</span>
|
||||
<span>Упаковка: 6 шт.</span>
|
||||
<span>Артикул: 00073820</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</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>
|
||||
296
catalog.html
296
catalog.html
@ -10,41 +10,283 @@
|
||||
<link rel="stylesheet" href="css/site.css" />
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<div class="container header-top">
|
||||
<a class="brand-logo" href="index.html" aria-label="DP Trade">
|
||||
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.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="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>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?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>
|
||||
</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">
|
||||
<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="https://images.unsplash.com/photo-1527281400683-1aae777175f8?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">
|
||||
<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">
|
||||
<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="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?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>
|
||||
</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">
|
||||
<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>
|
||||
<a href="#">Новости</a>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" 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>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="section catalog-section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Catalog</p>
|
||||
<h2>Каталог вина</h2>
|
||||
<div class="catalog-head">
|
||||
<div>
|
||||
<p class="eyebrow">Catalog / Country</p>
|
||||
<h1>Венгрия</h1>
|
||||
</div>
|
||||
<div class="catalog-actions" aria-label="Действия каталога">
|
||||
<span>Всего найдено: 22</span>
|
||||
<a class="button button--secondary" href="#">Все в избранное</a>
|
||||
<a class="button button--secondary" href="#">Очистить избранное</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="catalog-toolbar">
|
||||
<span>Всего найдено: 22</span>
|
||||
<select class="input catalog-sort" aria-label="Сортировка">
|
||||
<option>Исходная сортировка</option>
|
||||
<option>По цене</option>
|
||||
<option>По названию</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<section class="product-list" aria-label="Список товаров">
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00073820_1.png" alt="Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Case of Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
<div class="catalog-layout">
|
||||
<aside class="filters-panel">
|
||||
<h3>Фильтры</h3>
|
||||
<label class="checkbox"><input type="checkbox" checked /> Bordeaux</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Tuscany</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Rioja</label>
|
||||
<label class="checkbox"><input type="checkbox" /> Mosel</label>
|
||||
<a class="button button--primary" href="#">Применить</a>
|
||||
<a class="button button--secondary" href="index.html">На главную</a>
|
||||
</aside>
|
||||
<section class="product-grid product-grid--compact">
|
||||
<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</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</p></div>
|
||||
<div class="product-footer"><strong>4 240 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000">
|
||||
<img src="assets/images/00080768_1.png" alt="Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Aszu 5 Puttonyos, 0.5 л. 2000</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Сладкое<br />12 %</p>
|
||||
<p>Сорт: Фурминт (70%), Харшлевелю (28%), Мускат (2%)</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>19 240 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</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</p></div>
|
||||
<div class="product-footer"><strong>2 150 ₽</strong><a class="button button--primary button--sm" href="product.html">Подробнее</a></div>
|
||||
|
||||
<article class="product-card product-card--list">
|
||||
<a class="product-image" href="product.html" aria-label="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021">
|
||||
<img src="assets/images/00081726_1.png" alt="Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021" />
|
||||
</a>
|
||||
<div class="product-info">
|
||||
<h3>Вино белое Oremus, Tokaji Late Harvest, 0.5 л. 2021</h3>
|
||||
<p class="product-origin">Вино белое, Oremus, Венгрия</p>
|
||||
<p>Вино Белое Полусладкое<br />11.5 %</p>
|
||||
<p>Сорт: Фурминт, Зета, Харшлевелю</p>
|
||||
</div>
|
||||
<div class="product-buy">
|
||||
<strong>4 980 ₽</strong>
|
||||
<a class="button button--secondary" href="#">В избранное</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
727
css/site.css
727
css/site.css
@ -243,7 +243,7 @@ select {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 118px;
|
||||
width: min(1180px, calc(100vw - 40px));
|
||||
width: min(var(--container), calc(100vw - 40px));
|
||||
max-height: calc(100vh - 142px);
|
||||
overflow: auto;
|
||||
padding: 22px;
|
||||
@ -429,23 +429,31 @@ select {
|
||||
min-height: calc(100vh - 124px);
|
||||
display: grid;
|
||||
align-items: end;
|
||||
padding: 88px 0;
|
||||
padding: 104px 0 72px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(22, 20, 17, 0.78), rgba(22, 20, 17, 0.18)),
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.84) 0%, rgba(22, 20, 17, 0.58) 38%, rgba(22, 20, 17, 0.12) 72%),
|
||||
url("https://images.unsplash.com/photo-1560493676-04071c5f467b?auto=format&fit=crop&w=1800&q=80");
|
||||
background-position: center;
|
||||
background-position: center right;
|
||||
background-size: cover;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: 760px;
|
||||
width: min(100% - 40px, var(--container));
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr);
|
||||
}
|
||||
|
||||
.hero-copy > * {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 12px 0 20px;
|
||||
max-width: 920px;
|
||||
font-size: clamp(44px, 6.5vw, 82px);
|
||||
max-width: 860px;
|
||||
font-size: clamp(44px, 6vw, 78px);
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -483,6 +491,95 @@ select {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.producer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.producer-card {
|
||||
min-height: 148px;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.14);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
transition: border-color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.producer-card:hover {
|
||||
border-color: rgba(75, 15, 36, 0.34);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.producer-card span,
|
||||
.news-card span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.producer-card strong {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 24px;
|
||||
line-height: 1.14;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.news-section {
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
min-width: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.news-card > div:last-child {
|
||||
padding: 18px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.news-card h3 {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.news-card__image {
|
||||
min-height: 190px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.news-card__image--catena {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80");
|
||||
}
|
||||
|
||||
.news-card__image--brand {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=900&q=80");
|
||||
}
|
||||
|
||||
.news-card__image--italy {
|
||||
background-image: linear-gradient(rgba(22, 22, 22, 0.1), rgba(22, 22, 22, 0.1)), url("https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80");
|
||||
}
|
||||
|
||||
.type-lab-section {
|
||||
background: #eef2f6;
|
||||
}
|
||||
@ -746,11 +843,22 @@ select {
|
||||
.product-media {
|
||||
min-height: 220px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(140deg, #5d1027, #c8a45d);
|
||||
}
|
||||
|
||||
.product-photo {
|
||||
width: auto;
|
||||
max-width: 132px;
|
||||
height: 190px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.product-media--amber {
|
||||
background: linear-gradient(140deg, #a8632a, #dde4ec);
|
||||
}
|
||||
@ -815,6 +923,461 @@ select {
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.catalog-head {
|
||||
margin-bottom: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.8fr) minmax(520px, 1fr);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.catalog-head h1 {
|
||||
margin: 6px 0 0;
|
||||
color: var(--color-primary-wine-100);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(34px, 4vw, 52px);
|
||||
font-weight: 800;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.catalog-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.catalog-actions > span,
|
||||
.catalog-toolbar > span {
|
||||
color: var(--color-neutral-gray-700);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.catalog-toolbar {
|
||||
margin-bottom: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.catalog-sort {
|
||||
width: min(100%, 320px);
|
||||
min-height: 40px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.product-card--list {
|
||||
min-height: 250px;
|
||||
padding: 20px;
|
||||
grid-template-columns: 210px minmax(0, 1fr) 220px;
|
||||
gap: 28px;
|
||||
align-items: center;
|
||||
border-color: rgba(102, 96, 95, 0.08);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
min-height: 214px;
|
||||
max-height: 224px;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: auto;
|
||||
max-width: 132px;
|
||||
height: 208px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.product-info h3 {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-size: clamp(22px, 2.4vw, 32px);
|
||||
font-weight: 800;
|
||||
line-height: 1.18;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.product-info p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 16px;
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
.product-info .product-origin {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.product-buy {
|
||||
min-height: 170px;
|
||||
display: grid;
|
||||
align-content: end;
|
||||
justify-items: end;
|
||||
gap: 56px;
|
||||
}
|
||||
|
||||
.product-buy strong {
|
||||
color: var(--color-neutral-black);
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-buy .button {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.card-lab-section {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(244, 246, 249, 0.96)),
|
||||
var(--color-background-base);
|
||||
}
|
||||
|
||||
.card-lab-head {
|
||||
margin-bottom: 42px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.42fr);
|
||||
gap: 32px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.card-lab-head h1 {
|
||||
margin: 8px 0 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(38px, 5vw, 72px);
|
||||
font-weight: 800;
|
||||
line-height: 0.98;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-lab-head > p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.card-variant-block {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.card-variant-block + .card-variant-block {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.card-variant-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.card-variant-title h2 {
|
||||
margin: 2px 0 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(24px, 2.6vw, 34px);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bottle-card-grid,
|
||||
.bottle-card-mix {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.bottle-card-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.bottle-card-mix {
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.78fr) minmax(320px, 1.3fr);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.bottle-card {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.12);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
box-shadow: 0 18px 46px rgba(18, 25, 38, 0.08);
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bottle-card__media {
|
||||
min-height: 224px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: linear-gradient(135deg, #6a1330 0%, #9e6a4e 48%, #d3b966 100%);
|
||||
}
|
||||
|
||||
.bottle-card__photo {
|
||||
width: auto;
|
||||
max-width: 142px;
|
||||
height: 198px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bottle-card__body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bottle-card__region {
|
||||
margin: 0 0 9px;
|
||||
color: #b59a5a;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bottle-card h3 {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-size: clamp(22px, 2.1vw, 28px);
|
||||
font-weight: 800;
|
||||
line-height: 1.08;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bottle-card p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 16px;
|
||||
line-height: 1.42;
|
||||
}
|
||||
|
||||
.bottle-card__details {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bottle-card__footer {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottle-card__footer strong {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bottle-card__footer .button {
|
||||
min-width: 132px;
|
||||
}
|
||||
|
||||
.bottle-card--tuscany .bottle-card__media {
|
||||
background: linear-gradient(135deg, #b16d2c 0%, #c8ad94 52%, #dfe5eb 100%);
|
||||
}
|
||||
|
||||
.bottle-card--mosel .bottle-card__media {
|
||||
background: linear-gradient(135deg, #214f3d 0%, #8aa38e 48%, #e8ebdc 100%);
|
||||
}
|
||||
|
||||
.bottle-card--clean .bottle-card__media {
|
||||
background: linear-gradient(135deg, #edf1f5 0%, #d7dee7 100%);
|
||||
}
|
||||
|
||||
.bottle-card--clean .bottle-card__photo {
|
||||
height: 214px;
|
||||
}
|
||||
|
||||
.bottle-card--compact {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.bottle-card--compact .bottle-card__media {
|
||||
min-height: 178px;
|
||||
background: linear-gradient(135deg, #f3f5f8 0%, #dbe2ea 100%);
|
||||
}
|
||||
|
||||
.bottle-card--compact .bottle-card__photo {
|
||||
height: 154px;
|
||||
}
|
||||
|
||||
.bottle-card--compact h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.bottle-card--compact p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.bottle-card--horizontal {
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottle-card--horizontal .bottle-card__media {
|
||||
min-height: 230px;
|
||||
background: linear-gradient(135deg, #e9eef4 0%, #cfd8e3 100%);
|
||||
}
|
||||
|
||||
.bottle-card--horizontal .bottle-card__photo {
|
||||
height: 208px;
|
||||
}
|
||||
|
||||
.bottle-card__content {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.catalog-card-variants {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.catalog-card-sample {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.catalog-card-sample__label {
|
||||
margin: 0;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.product-card--list-compact {
|
||||
min-height: 198px;
|
||||
grid-template-columns: 160px minmax(0, 1fr) 190px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-image {
|
||||
min-height: 164px;
|
||||
max-height: 174px;
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-image img {
|
||||
max-width: 104px;
|
||||
height: 156px;
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-info {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-info h3 {
|
||||
font-size: clamp(19px, 2vw, 25px);
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-info p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-card--list-compact .product-buy {
|
||||
min-height: 132px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.product-card--list-hover {
|
||||
border-color: rgba(75, 15, 36, 0.28);
|
||||
box-shadow: 0 22px 54px rgba(25, 37, 62, 0.13);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.product-card--list-hover .product-image {
|
||||
border-radius: var(--radius-sm);
|
||||
background: linear-gradient(135deg, #eef2f6 0%, #dde6ef 100%);
|
||||
}
|
||||
|
||||
.product-card--list-hover .button {
|
||||
border-color: var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.product-card--list-color {
|
||||
border-color: rgba(185, 150, 91, 0.24);
|
||||
}
|
||||
|
||||
.product-card--list-color .product-image {
|
||||
min-height: 214px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.product-image--gold {
|
||||
background: linear-gradient(135deg, #b9965b 0%, #d7c18b 48%, #eef2f6 100%);
|
||||
}
|
||||
|
||||
.product-image--wine {
|
||||
background: linear-gradient(135deg, #6d1c36 0%, #9b5366 46%, #e6dce1 100%);
|
||||
}
|
||||
|
||||
.product-image--green {
|
||||
background: linear-gradient(135deg, #1f4d3a 0%, #88a28e 48%, #eef2e5 100%);
|
||||
}
|
||||
|
||||
.product-card--list-b2b {
|
||||
min-height: 226px;
|
||||
grid-template-columns: 176px minmax(0, 1fr) 190px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.product-card--list-b2b .product-image {
|
||||
min-height: 184px;
|
||||
max-height: 194px;
|
||||
}
|
||||
|
||||
.product-card--list-b2b .product-image img {
|
||||
max-width: 108px;
|
||||
height: 178px;
|
||||
}
|
||||
|
||||
.product-params {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px 14px;
|
||||
}
|
||||
|
||||
.product-params span {
|
||||
min-width: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.product-card--list-b2b .product-buy {
|
||||
min-height: 148px;
|
||||
gap: 34px;
|
||||
}
|
||||
|
||||
.filters-panel,
|
||||
.info-panel {
|
||||
padding: 24px;
|
||||
@ -854,6 +1417,11 @@ select {
|
||||
min-height: 520px;
|
||||
}
|
||||
|
||||
.product-detail .product-photo {
|
||||
max-width: 220px;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.detail-copy h1 {
|
||||
margin: 10px 0 18px;
|
||||
font-family: var(--font-heading);
|
||||
@ -1033,14 +1601,47 @@ select {
|
||||
|
||||
.menu-grid,
|
||||
.product-grid,
|
||||
.bottle-card-grid,
|
||||
.producer-grid,
|
||||
.news-grid,
|
||||
.type-options--five {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.card-lab-head,
|
||||
.bottle-card-mix {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.type-options {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.catalog-head {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.product-card--list {
|
||||
grid-template-columns: 150px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.product-card--list-compact,
|
||||
.product-card--list-b2b {
|
||||
grid-template-columns: 140px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.product-buy {
|
||||
grid-column: 2;
|
||||
min-height: auto;
|
||||
align-content: start;
|
||||
justify-items: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.mega-menu {
|
||||
top: 172px;
|
||||
}
|
||||
@ -1089,6 +1690,9 @@ select {
|
||||
.menu-grid,
|
||||
.appellations,
|
||||
.product-grid,
|
||||
.bottle-card-grid,
|
||||
.producer-grid,
|
||||
.news-grid,
|
||||
.type-options--five,
|
||||
.type-options,
|
||||
.section-heading--split,
|
||||
@ -1101,10 +1705,119 @@ select {
|
||||
padding: 56px 0;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
width: min(100% - 28px, var(--container));
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 56px 0;
|
||||
}
|
||||
|
||||
.card-lab-head {
|
||||
gap: 18px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-lab-head h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.card-variant-title {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bottle-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.bottle-card__media {
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.bottle-card__photo {
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
.bottle-card h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.bottle-card__footer {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bottle-card__footer .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottle-card--horizontal {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog-toolbar,
|
||||
.catalog-actions {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-sort {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-card--list {
|
||||
min-height: auto;
|
||||
grid-template-columns: 108px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.product-card--list-compact,
|
||||
.product-card--list-b2b {
|
||||
grid-template-columns: 96px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
min-height: 180px;
|
||||
max-height: 186px;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
max-width: 98px;
|
||||
height: 172px;
|
||||
}
|
||||
|
||||
.product-info h3 {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.product-info p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.product-params {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-photo {
|
||||
max-width: 98px;
|
||||
height: 164px;
|
||||
}
|
||||
|
||||
.product-buy {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.product-buy strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
@ -101,10 +101,24 @@ select {
|
||||
}
|
||||
|
||||
.side-nav {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.side-nav__group {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.side-nav__group span {
|
||||
padding: 0 12px;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.side-nav a {
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
@ -273,6 +287,37 @@ h3 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.spec-grid {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.spec-card {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(102, 96, 95, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.spec-card span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.spec-card p {
|
||||
margin: 0;
|
||||
color: var(--color-gray-600);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.swatch-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
@ -466,6 +511,16 @@ code {
|
||||
var(--media-bg, #dde4ec);
|
||||
}
|
||||
|
||||
.product-photo {
|
||||
width: auto;
|
||||
max-width: 132px;
|
||||
height: 190px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.product-card--compact .product-media {
|
||||
min-height: 130px;
|
||||
}
|
||||
@ -831,7 +886,8 @@ tbody tr:hover {
|
||||
.product-grid--3,
|
||||
.template-grid,
|
||||
.screen-preview__content,
|
||||
.token-grid {
|
||||
.token-grid,
|
||||
.spec-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
175
index.html
175
index.html
@ -163,7 +163,36 @@
|
||||
</div>
|
||||
<a href="#">Поставки</a>
|
||||
<a href="#">Новости</a>
|
||||
<a href="ui-kit.html">UI-kit</a>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" 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>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -180,123 +209,47 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section type-lab-section">
|
||||
<section class="section producers-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Typography direction</p>
|
||||
<h2>5 вариантов типографики</h2>
|
||||
<p class="eyebrow">Producers</p>
|
||||
<h2>Производители</h2>
|
||||
</div>
|
||||
<p>
|
||||
Выбранное направление — Premium Retail: сильная витрина, крупные уверенные заголовки
|
||||
и читаемый интерфейс для каталога.
|
||||
</p>
|
||||
<p>Ключевые винные дома и хозяйства из портфеля DP Trade: от классических брендов до эксклюзивных партнеров.</p>
|
||||
</div>
|
||||
<div class="producer-grid">
|
||||
<a class="producer-card" href="#"><span>Argentina</span><strong>Catena Zapata</strong></a>
|
||||
<a class="producer-card" href="#"><span>Champagne</span><strong>Bollinger</strong></a>
|
||||
<a class="producer-card" href="#"><span>Burgundy</span><strong>Domaine De Villaine</strong></a>
|
||||
<a class="producer-card" href="#"><span>Italy</span><strong>Gaja</strong></a>
|
||||
<a class="producer-card" href="#"><span>France</span><strong>Pascal Jolivet</strong></a>
|
||||
<a class="producer-card" href="#"><span>Rhone</span><strong>Paul Jaboulet Aine</strong></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section class="section news-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Latest news</p>
|
||||
<h2>Последние новости</h2>
|
||||
</div>
|
||||
<h3>Редкие вина для профессиональной торговли</h3>
|
||||
<p>
|
||||
Cormorant Garamond для крупных заголовков и Manrope для интерфейса. Больше премиальности,
|
||||
культурного контекста и ощущения curated selection.
|
||||
</p>
|
||||
<div class="type-usage">
|
||||
<strong>Где использовать</strong>
|
||||
<span>Имиджевые hero, истории производителей, региональные editorial-блоки.</span>
|
||||
</div>
|
||||
<div class="type-scale">
|
||||
<span>H1 72/78</span>
|
||||
<span>Body 16/25</span>
|
||||
<span>Label 12/16</span>
|
||||
<a class="button button--secondary" href="#">Все новости</a>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--catena"></div>
|
||||
<div><span>Интервью</span><h3>Интервью с Лаурой Катеной</h3></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-usage">
|
||||
<strong>Где использовать</strong>
|
||||
<span>Личный кабинет, таблицы, фильтры, B2B-операции и плотные интерфейсы.</span>
|
||||
</div>
|
||||
<div class="type-scale">
|
||||
<span>H1 64/70</span>
|
||||
<span>Body 16/24</span>
|
||||
<span>Label 12/16</span>
|
||||
</div>
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--brand"></div>
|
||||
<div><span>Бренды</span><h3>Catena Zapata вновь признана самым почитаемым винным брендом мира</h3></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-usage">
|
||||
<strong>Где использовать</strong>
|
||||
<span>Промо-разделы, подборки, страницы брендов и спокойные premium-лендинги.</span>
|
||||
</div>
|
||||
<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-usage">
|
||||
<strong>Где использовать</strong>
|
||||
<span>Главная, навигация, карточки, шаблоны страниц и основные marketing-блоки.</span>
|
||||
</div>
|
||||
<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-usage">
|
||||
<strong>Где использовать</strong>
|
||||
<span>Каталог, выдача поиска, фильтрованные списки и страницы с высокой плотностью товаров.</span>
|
||||
</div>
|
||||
<div class="type-scale">
|
||||
<span>H1 48/54</span>
|
||||
<span>Body 15/22</span>
|
||||
<span>Label 11/14</span>
|
||||
</div>
|
||||
<article class="news-card">
|
||||
<div class="news-card__image news-card__image--italy"></div>
|
||||
<div><span>Италия</span><h3>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h3></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@ -310,17 +263,17 @@
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" /></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 class="product-media product-media--amber"><img class="product-photo" src="assets/images/00080768_1.png" alt="Brunello di Montalcino" /></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 class="product-media product-media--green"><img class="product-photo" src="assets/images/00081726_1.png" alt="Riesling Kabinett" /></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>
|
||||
|
||||
206
product.html
206
product.html
@ -10,9 +10,195 @@
|
||||
<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">
|
||||
<img src="https://wine-dp-trade.ru/wp-content/uploads/2024/11/logo-500x107.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="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>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?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>
|
||||
</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">
|
||||
<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="https://images.unsplash.com/photo-1527281400683-1aae777175f8?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">
|
||||
<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">
|
||||
<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="https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?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>
|
||||
</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">
|
||||
<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>
|
||||
<a href="#">Новости</a>
|
||||
<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="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=900&q=80" 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>
|
||||
</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>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="section">
|
||||
<div class="container product-detail">
|
||||
<div class="product-media"><span class="bottle"></span></div>
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00073820_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<section class="detail-copy">
|
||||
<p class="eyebrow">Product / Default</p>
|
||||
<h1>Chateau Laroque Grand Cru</h1>
|
||||
@ -31,5 +217,23 @@
|
||||
</section>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
97
ui-kit.html
97
ui-kit.html
@ -22,12 +22,21 @@
|
||||
</span>
|
||||
</a>
|
||||
<nav class="side-nav" aria-label="Разделы UI-kit">
|
||||
<a href="index.html">Site Preview</a>
|
||||
<div class="side-nav__group">
|
||||
<span>Demo pages</span>
|
||||
<a href="index.html">Главная</a>
|
||||
<a href="catalog.html">Каталог</a>
|
||||
<a href="product.html">Карточка товара</a>
|
||||
<a href="bottle-cards.html">Варианты карточек</a>
|
||||
</div>
|
||||
<div class="side-nav__group">
|
||||
<span>UI-kit</span>
|
||||
<a href="#foundations">01 Foundations</a>
|
||||
<a href="#components">02 Components</a>
|
||||
<a href="#patterns">03 Patterns</a>
|
||||
<a href="#templates">04 Templates</a>
|
||||
<a href="#screens">05 Screens</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@ -48,7 +57,7 @@
|
||||
<div class="kit-hero__visual" aria-label="Пример карточки продукта">
|
||||
<article class="product-card product-card--featured">
|
||||
<div class="product-media product-media--wine">
|
||||
<span class="bottle"></span>
|
||||
<img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" />
|
||||
</div>
|
||||
<div class="product-meta">
|
||||
<span class="tag tag--filled">Bordeaux</span>
|
||||
@ -100,7 +109,7 @@
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-background-base)"></span>
|
||||
<strong>Color / Background / Base</strong>
|
||||
<code>#FAF8F5</code>
|
||||
<code>#F4F6F9</code>
|
||||
</article>
|
||||
<article class="swatch">
|
||||
<span style="--swatch: var(--color-accent-gold)"></span>
|
||||
@ -177,13 +186,27 @@
|
||||
<button class="button button--secondary">Button / Secondary / Default</button>
|
||||
<button class="button button--ghost">Button / Ghost / Default</button>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Анатомия</span>
|
||||
<p>Button / Background + Label. Высота 48px, compact 38px, radius 8px, padding 12/22.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Состояния</span>
|
||||
<p>Default, Hover, Focus, Disabled. Hover меняет фон/тень, focus должен иметь видимый outline.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Использование</span>
|
||||
<p>Primary для главного CTA, Secondary для каталогов и избранного, Ghost для тихих действий.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Product Card</h3>
|
||||
<div class="product-grid product-grid--3">
|
||||
<article class="product-card">
|
||||
<div class="product-media product-media--amber"><span class="bottle"></span></div>
|
||||
<div class="product-media product-media--amber"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Tuscany</span>
|
||||
<h3>Brunello di Montalcino</h3>
|
||||
@ -195,7 +218,7 @@
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--hover">
|
||||
<div class="product-media product-media--wine"><span class="bottle"></span></div>
|
||||
<div class="product-media product-media--wine"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Rioja</span>
|
||||
<h3>Reserva Seleccion Especial</h3>
|
||||
@ -207,7 +230,7 @@
|
||||
</div>
|
||||
</article>
|
||||
<article class="product-card product-card--compact">
|
||||
<div class="product-media product-media--green"><span class="bottle"></span></div>
|
||||
<div class="product-media product-media--green"><img class="product-photo" src="assets/images/00073820_1.png" alt="Product bottle" /></div>
|
||||
<div class="product-meta">
|
||||
<span class="muted-caps">Mosel</span>
|
||||
<h3>Riesling Kabinett</h3>
|
||||
@ -218,6 +241,20 @@
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Варианты</span>
|
||||
<p>Card / Product / Default, Hover, Compact, List. List используется в каталоге и поисковой выдаче.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Анатомия</span>
|
||||
<p>Image, Meta, Name, Details, Price, CTA. Для list-card добавляется Product info + Product buy.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Состояния</span>
|
||||
<p>Default, Hover, Favorite, Out of stock. Hover усиливает border/shadow без изменения размеров.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
@ -232,6 +269,20 @@
|
||||
</nav>
|
||||
<button class="button button--secondary button--sm">Запросить прайс</button>
|
||||
</div>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Анатомия</span>
|
||||
<p>Logo, Search, Phone, Account, Cart, Main nav, Mega-menu. Header sticky, две строки.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Состояния</span>
|
||||
<p>Default, Sticky, Dropdown open, Focus. У nav hover только underline, без pill-background.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Dropdown</span>
|
||||
<p>Mega-menu: visual image, intro, 3 content columns, popular links. Hover bridge удерживает меню.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection component-columns">
|
||||
@ -268,6 +319,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<h3>Controls Specs</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Filters</span>
|
||||
<p>Checkbox Default/Active/Disabled, Chip Default/Active, Range Slider Default/Dragging.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Inputs</span>
|
||||
<p>Input Default/Focus/Error/Disabled. Error меняет border и helper text, не меняет высоту поля.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Tags</span>
|
||||
<p>Default для метаданных, Filled для выбранного статуса, Outline для мягких категорий.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Tables / B2B</h3>
|
||||
@ -301,6 +369,23 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<h3>Table Specs</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Анатомия</span>
|
||||
<p>Table Header, Row, Cell, Numeric cell, Actions. Горизонтальный scroll на мобильных.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Состояния</span>
|
||||
<p>Row Default/Hover/Selected, Header, Empty, Loading. Hover используется для B2B-сканирования.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Использование</span>
|
||||
<p>Прайс-листы, остатки, коммерческие условия и сравнение SKU.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="patterns" class="section">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user