42point/dp-trade-UI-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add demo pages for news, about, and contacts

Browse Source
This commit is contained in:
Alexey S 2026-04-17 18:35:38 +03:00
parent 4dd01aeb29
commit 18750fef24
13 changed files with 1098 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

260
about.html Normal file
View File

@ -0,0 +1,260 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DP Trade — О компании</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="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="content-page">
<section class="page-hero page-hero--about">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">О компании</p>
<h1>DP Trade — территория качественного вина</h1>
<p>Импорт, каталог, персональная работа с клиентами, собственные склады в регионах и доставка собственным транспортом.</p>
</div>
<aside class="page-hero__meta" aria-label="Кратко о компании">
<span>Since 1991</span>
<strong>Premium wine trade</strong>
<p>Портфель винных домов для ресторанов, розницы и профессиональных закупок.</p>
</aside>
</div>
</section>
<section class="section">
<div class="container about-grid">
<article class="article-body">
<p class="lead">DP Trade развивает профессиональный винный каталог, где регионы, производители, партии и коммерческие условия собраны в едином интерфейсе для быстрых закупочных решений.</p>
<p>Главная ценность сервиса — соединить сильный ассортимент с понятной навигацией: от страны и апелласьона до конкретного производителя, винтажа и карточки товара.</p>
<h2>Как устроен подход</h2>
<p>Компания делает акцент на удобном каталоге, персональном отношении, собственных складских возможностях и доставке собственным транспортом. Для B2B-клиентов это значит меньше ручных уточнений и быстрее путь от выбора до заказа.</p>
</article>
<div class="feature-grid feature-grid--about">
<article class="feature-card"><span>01</span><h3>Удобный каталог</h3><p>Фильтры по типу, региону, производителю, сорту, году, объему и стилю.</p></article>
<article class="feature-card"><span>02</span><h3>Персональный подход</h3><p>Быстрая коммуникация с менеджером и подборки под формат клиента.</p></article>
<article class="feature-card"><span>03</span><h3>Склады в регионах</h3><p>Инфраструктура для регулярных поставок и управления доступностью.</p></article>
<article class="feature-card"><span>04</span><h3>Собственная доставка</h3><p>Контроль логистики и аккуратная работа с профессиональными заказами.</p></article>
</div>
</div>
</section>
<section class="section muted-section">
<div class="container section-heading section-heading--split">
<div><p class="eyebrow">Portfolio</p><h2>Винные дома и регионы</h2></div>
<p>Страница показывает, как может выглядеть корпоративный раздел: спокойная подача, крупные тезисы и блок преимуществ без перегруза.</p>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-container">
<section class="footer-main">
<div class="footer-left">
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

BIN
assets/images/photo_2026-04-06_16-53-23-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
assets/images/photo_2026-04-06_16-53-23.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

BIN
assets/images/photo_2026-04-06_16-53-24.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
assets/images/photo_2026-04-06_16-53-26.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

10
bottle-cards.html
View File

@ -162,7 +162,9 @@
</section>
</div>
<a href="#">Поставки</a>
<a href="#">Новости</a>
<a href="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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">
@ -180,7 +182,7 @@
</article>
<article class="menu-column">
<p class="section-title">Demo pages</p>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
</article>
<article class="menu-column">
<p class="section-title">UI-kit sections</p>
@ -428,12 +430,12 @@
<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>
<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="contacts.html">Связаться с менеджером</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>
<article class="nav-group"><h2>Компания</h2><ul><li><a href="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

10
catalog.html
View File

@ -162,7 +162,9 @@
</section>
</div>
<a href="#">Поставки</a>
<a href="#">Новости</a>
<a href="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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">
@ -180,7 +182,7 @@
</article>
<article class="menu-column">
<p class="section-title">Demo pages</p>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
</article>
<article class="menu-column">
<p class="section-title">UI-kit sections</p>
@ -276,12 +278,12 @@
<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>
<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="contacts.html">Связаться с менеджером</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>
<article class="nav-group"><h2>Компания</h2><ul><li><a href="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

264
contacts.html Normal file
View File

@ -0,0 +1,264 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DP Trade — Контакты</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="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="content-page">
<section class="page-hero page-hero--contacts">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Контакты</p>
<h1>Связаться с DP Trade</h1>
<p>Для вопросов по каталогу, ассортименту, поставкам и работе с менеджером используйте телефон, почту или форму заявки.</p>
</div>
<aside class="page-hero__meta" aria-label="Основные контакты">
<span>Sales office</span>
<strong>+7 (495) 937-94-60</strong>
<p>dptr@dp-trade.ru</p>
</aside>
</div>
</section>
<section class="section">
<div class="container contacts-layout">
<div class="contact-stack">
<article class="contact-panel">
<span>Телефон</span>
<a href="tel:+74959379460">+7 (495) 937-94-60</a>
<p>Для консультаций по ассортименту, поставкам и условиям сотрудничества.</p>
</article>
<article class="contact-panel">
<span>Email</span>
<a href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a>
<p>Удобно для запросов прайса, карточек производителей и B2B-документов.</p>
</article>
<article class="contact-panel">
<span>Юридическая информация</span>
<p>Интернет-витрина размещает информацию об алкогольной продукции исключительно в ознакомительных целях. Дистанционная продажа алкогольной продукции не осуществляется.</p>
</article>
</div>
<form class="contact-form" action="#">
<h2>Заявка менеджеру</h2>
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" /></label>
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" /></label>
<label>Сообщение<textarea class="input" rows="5" placeholder="Напишите, что нужно подобрать"></textarea></label>
<button class="button button--primary" type="submit">Отправить заявку</button>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-container">
<section class="footer-main">
<div class="footer-left">
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

281
css/site.css
View File

@ -1378,6 +1378,264 @@ select {
gap: 34px;
}
.content-page {
background: var(--color-background-base);
}
.page-hero {
padding: 78px 0;
color: #f8fafc;
background:
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.48) 54%, rgba(22, 20, 17, 0.22)),
url("https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=80");
background-position: center;
background-size: cover;
}
.page-hero--about {
background-image:
linear-gradient(100deg, rgba(22, 20, 17, 0.84), rgba(22, 20, 17, 0.46) 54%, rgba(22, 20, 17, 0.18)),
url("https://images.unsplash.com/photo-1568213816046-0ee1c42bd559?auto=format&fit=crop&w=1800&q=80");
}
.page-hero--contacts {
background-image:
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.2)),
url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80");
}
.page-hero__inner {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr);
gap: 36px;
align-items: end;
}
.page-hero h1 {
max-width: 980px;
margin: 10px 0 18px;
font-family: var(--font-heading);
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 800;
line-height: 0.98;
text-transform: uppercase;
}
.page-hero p {
max-width: 740px;
margin: 0;
font-size: 19px;
line-height: 1.55;
}
.page-hero__meta,
.info-card,
.feature-card,
.contact-panel,
.contact-form {
border: 1px solid rgba(217, 222, 229, 0.9);
border-radius: var(--radius-sm);
background: var(--color-surface);
box-shadow: var(--shadow-soft);
}
.page-hero__meta {
padding: 22px;
color: var(--color-neutral-black);
}
.page-hero__meta span,
.info-card span,
.feature-card span,
.contact-panel span {
color: var(--color-accent-gold);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.page-hero__meta strong {
display: block;
margin: 10px 0 8px;
color: var(--color-primary-wine-100);
font-family: var(--font-heading);
font-size: 26px;
line-height: 1.1;
text-transform: uppercase;
}
.page-hero__meta p {
color: var(--color-neutral-gray-600);
font-size: 15px;
line-height: 1.45;
}
.article-layout,
.contacts-layout {
display: grid;
grid-template-columns: minmax(0, 0.68fr) minmax(300px, 0.32fr);
gap: 34px;
align-items: start;
}
.about-grid {
display: grid;
grid-template-columns: minmax(0, 0.58fr) minmax(360px, 0.42fr);
gap: 34px;
align-items: start;
}
.article-body {
max-width: 860px;
}
.article-body .lead {
color: var(--color-neutral-black);
font-size: 22px;
line-height: 1.48;
}
.article-body h2 {
margin: 34px 0 12px;
font-family: var(--font-heading);
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: 1.08;
text-transform: uppercase;
}
.article-body p {
color: var(--color-neutral-gray-600);
font-size: 17px;
line-height: 1.72;
}
.article-body blockquote {
margin: 30px 0;
padding: 22px 24px;
border-left: 4px solid var(--color-primary-wine-100);
background: #eef2f6;
color: var(--color-neutral-black);
font-size: 20px;
font-weight: 700;
line-height: 1.45;
}
.article-aside,
.contact-stack {
display: grid;
gap: 16px;
}
.info-card {
padding: 22px;
}
.info-card dl {
margin: 18px 0 0;
display: grid;
gap: 12px;
}
.info-card dl div {
display: flex;
justify-content: space-between;
gap: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(102, 96, 95, 0.14);
}
.info-card dt {
color: var(--color-neutral-gray-600);
}
.info-card dd {
margin: 0;
color: var(--color-neutral-black);
font-weight: 800;
text-align: right;
}
.info-card--accent {
background: #eef2f6;
}
.info-card--accent p {
color: var(--color-neutral-gray-600);
line-height: 1.55;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.feature-card {
min-height: 210px;
padding: 22px;
display: grid;
align-content: space-between;
}
.feature-card h3 {
margin: 18px 0 8px;
color: var(--color-neutral-black);
font-family: var(--font-heading);
font-size: 22px;
text-transform: uppercase;
}
.feature-card p,
.contact-panel p {
margin: 0;
color: var(--color-neutral-gray-600);
line-height: 1.55;
}
.muted-section {
background: #eef2f6;
}
.contact-panel,
.contact-form {
padding: 24px;
}
.contact-panel a {
display: block;
margin: 8px 0 10px;
color: var(--color-primary-wine-100);
font-family: var(--font-heading);
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
line-height: 1.1;
}
.contact-form {
display: grid;
gap: 16px;
}
.contact-form h2 {
margin: 0;
font-family: var(--font-heading);
font-size: 30px;
text-transform: uppercase;
}
.contact-form label {
display: grid;
gap: 7px;
color: var(--color-neutral-gray-700);
font-weight: 800;
}
.contact-form textarea.input {
min-height: 132px;
resize: vertical;
}
.filters-panel,
.info-panel {
padding: 24px;
@ -1609,7 +1867,11 @@ select {
}
.card-lab-head,
.bottle-card-mix {
.bottle-card-mix,
.page-hero__inner,
.article-layout,
.about-grid,
.contacts-layout {
grid-template-columns: 1fr;
}
@ -1729,6 +1991,23 @@ select {
gap: 6px;
}
.page-hero {
padding: 56px 0;
}
.page-hero h1 {
font-size: 36px;
}
.page-hero p,
.article-body .lead {
font-size: 17px;
}
.feature-grid {
grid-template-columns: 1fr;
}
.bottle-card {
padding: 14px;
}

10
index.html
View File

@ -162,7 +162,9 @@
</section>
</div>
<a href="#">Поставки</a>
<a href="#">Новости</a>
<a href="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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">
@ -180,7 +182,7 @@
</article>
<article class="menu-column">
<p class="section-title">Demo pages</p>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
</article>
<article class="menu-column">
<p class="section-title">UI-kit sections</p>
@ -288,12 +290,12 @@
<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>
<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="contacts.html">Связаться с менеджером</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>
<article class="nav-group"><h2>Компания</h2><ul><li><a href="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

267
news-villa-raiano.html Normal file
View File

@ -0,0 +1,267 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DP Trade — Villa Raiano</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="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="content-page">
<section class="page-hero page-hero--news">
<div class="container page-hero__inner">
<div>
<p class="eyebrow">Новости / Италия</p>
<h1>Villa Raiano: от оливкового масла к одному из лучших Fiano Италии</h1>
<p>История семейного хозяйства из Кампании, где любовь к Ирпинии выросла из маслобойного производства в современную винодельню.</p>
</div>
<aside class="page-hero__meta" aria-label="Параметры новости">
<span>Producer spotlight</span>
<strong>Villa Raiano</strong>
<p>Campania · Irpinia · Fiano di Avellino</p>
</aside>
</div>
</section>
<section class="section">
<div class="container article-layout">
<article class="article-body">
<p class="lead">Villa Raiano появилась в 1996 году по инициативе семьи Бассо, известной производством оливкового масла. Первые вина делались в помещениях старого маслобойного завода, а в 2009 году хозяйство переехало в новую винодельню в Ирпинии.</p>
<p>Для DP Trade эта история важна не только как биография производителя. Villa Raiano показывает, как локальная ремесленная культура Кампании может стать точной, современной и очень узнаваемой винной стилистикой.</p>
<h2>Почему Fiano di Avellino</h2>
<p>Фьяно из Авеллино ценят за минеральность, плотную фактуру и способность к развитию в бутылке. В молодых винах часто появляются цитрусовые, груша, персик, травы и медовые оттенки; с возрастом они становятся глубже, прянее и сложнее.</p>
<p>Villa Raiano работает с традиционными сортами региона: Fiano, Greco, Falanghina и Aglianico. Такой фокус помогает хозяйству говорить не универсальным языком международного вина, а языком конкретного места.</p>
<blockquote>Фокус карточки новости: семейная история, локальный сорт и ценность производителя для профессионального каталога.</blockquote>
<h2>Что показать в каталоге</h2>
<p>Для товарной страницы и подборок можно вынести происхождение, сорт, стиль, потенциал выдержки и гастрономические пары. В B2B-сценарии особенно полезны быстрые маркеры: регион, апелласьон, тип вина, крепость, объем и доступность партии.</p>
</article>
<aside class="article-aside">
<div class="info-card">
<span>Ключевые факты</span>
<dl>
<div><dt>Страна</dt><dd>Италия</dd></div>
<div><dt>Регион</dt><dd>Кампания, Ирпиния</dd></div>
<div><dt>Основание</dt><dd>1996</dd></div>
<div><dt>Сорта</dt><dd>Fiano, Greco, Aglianico</dd></div>
</dl>
</div>
<div class="info-card info-card--accent">
<span>Для UI-kit</span>
<p>Эта страница проверяет длинный заголовок новости, текстовую статью, боковую карточку фактов и CTA обратно в каталог.</p>
<a class="button button--primary button--sm" href="catalog.html">В каталог</a>
</div>
</aside>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container footer-container">
<section class="footer-main">
<div class="footer-left">
<div><a class="footer-brand" href="index.html" aria-label="DP Trade"><span>DP</span>.Trade</a><p class="footer-brand-subtitle">Территория качественного вина</p></div>
<div><span class="section-title">Мы в соцсетях</span><div class="social-links"><a href="#" aria-label="Telegram">TG</a><a href="#" aria-label="VK">VK</a></div></div>
<article class="contacts-card"><h2>Контакты</h2><a class="contact-link contact-phone" href="tel:+74959379460">+7 (495) 937-94-60</a><a class="contact-link" href="mailto:dptr@dp-trade.ru">dptr@dp-trade.ru</a><a class="button button--primary button--sm" href="contacts.html">Связаться с менеджером</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="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

10
product.html
View File

@ -162,7 +162,9 @@
</section>
</div>
<a href="#">Поставки</a>
<a href="#">Новости</a>
<a href="news-villa-raiano.html">Новости</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</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">
@ -180,7 +182,7 @@
</article>
<article class="menu-column">
<p class="section-title">Demo pages</p>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a>
<a href="index.html">Главная</a><a href="catalog.html">Каталог</a><a href="product.html">Карточка товара</a><a href="bottle-cards.html">Варианты карточек</a><a href="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.html">Контакты</a>
</article>
<article class="menu-column">
<p class="section-title">UI-kit sections</p>
@ -223,12 +225,12 @@
<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>
<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="contacts.html">Связаться с менеджером</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>
<article class="nav-group"><h2>Компания</h2><ul><li><a href="about.html">О компании</a></li><li><a href="contacts.html">Контакты</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>

3
ui-kit.html
View File

@ -28,6 +28,9 @@
<a href="catalog.html">Каталог</a>
<a href="product.html">Карточка товара</a>
<a href="bottle-cards.html">Варианты карточек</a>
<a href="news-villa-raiano.html">Новость</a>
<a href="about.html">О компании</a>
<a href="contacts.html">Контакты</a>
</div>
<div class="side-nav__group">
<span>UI-kit</span>