Consolidate to Eleventy as single source of truth
Remove root HTML pages and the parallel client-side scheme (components/head.js, components/*.html, assets/js/components.js) along with duplicated assets/, css/, fonts/ at the root. Eleventy partials in src/_includes/ already cover head (with Plausible), header (with mega menu and full nav), and footer. Add .claude/ to .gitignore to keep local worktrees out of commits. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
ab4689bd2b
commit
5e80185cf7
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,3 +3,4 @@ node_modules/
|
||||
dist/
|
||||
_site/
|
||||
.env
|
||||
.claude/
|
||||
|
||||
55
about.html
55
about.html
@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — О компании</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<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>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,121 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Article Guidelines</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-page guidelines-page">
|
||||
<section class="page-hero page-hero--guidelines">
|
||||
<div class="container page-hero__inner">
|
||||
<div>
|
||||
<p class="eyebrow">Editorial guidelines</p>
|
||||
<h1>Рекомендации по статьям DP Trade</h1>
|
||||
<p>Требования к структуре материала, заголовкам, тексту и фотографиям для новостей, историй производителей и экспертных заметок.</p>
|
||||
</div>
|
||||
<aside class="page-hero__meta">
|
||||
<span>Для редакции</span>
|
||||
<strong>Article system</strong>
|
||||
<p>Единые правила помогают статьям выглядеть как часть продукта, а не как случайные публикации.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container guideline-grid">
|
||||
<article class="guideline-card guideline-card--lead">
|
||||
<span>01</span>
|
||||
<h2>Структура статьи</h2>
|
||||
<p>Каждый материал должен быстро отвечать на три вопроса: о ком/о чём статья, почему это важно для аудитории DP Trade и какое действие читатель может сделать дальше.</p>
|
||||
<ul>
|
||||
<li>Заголовок: конкретный, с именем производителя, региона или события.</li>
|
||||
<li>Лид: 1-2 предложения, раскрывает главный повод.</li>
|
||||
<li>Основной текст: 3-5 смысловых блоков с подзаголовками или визуальными паузами.</li>
|
||||
<li>Финал: вывод, рекомендация, ссылка в каталог или повод обратиться к менеджеру.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>02</span>
|
||||
<h2>Заголовки</h2>
|
||||
<p>Заголовок должен быть редакционным, но полезным: не только красивым, а ещё и объясняющим тему.</p>
|
||||
<ul>
|
||||
<li>Оптимально: 55-90 символов.</li>
|
||||
<li>Использовать имена: Villa Raiano, Gaja, Bordeaux, Fiano.</li>
|
||||
<li>Избегать пустых формул: «уникальная история», «легендарное событие» без факта.</li>
|
||||
<li>Подзаголовки должны вести читателя по смыслу, а не повторять заголовок.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>03</span>
|
||||
<h2>Текст</h2>
|
||||
<p>Стиль: профессиональный, спокойный, без рекламного нажима. Пишем для закупщиков, сомелье, ресторанов и розницы.</p>
|
||||
<ul>
|
||||
<li>Абзац: 350-650 знаков.</li>
|
||||
<li>Лид: до 280 знаков.</li>
|
||||
<li>Новость: 3 000-5 500 знаков.</li>
|
||||
<li>История производителя: 5 000-8 000 знаков.</li>
|
||||
<li>Цифры, годы, награды и сорта проверять отдельно.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>04</span>
|
||||
<h2>Фотографии</h2>
|
||||
<p>Фотографии должны показывать реальный продукт, место, людей или процесс. Лучше меньше декоративности и больше конкретики.</p>
|
||||
<ul>
|
||||
<li>Hero: горизонтальное фото от 1600px по ширине.</li>
|
||||
<li>Внутренние фото: от 1200px, без сильной компрессии.</li>
|
||||
<li>Для карточек: предмет или бутылка должны быть читаемы на мобильном.</li>
|
||||
<li>Не использовать тёмные, размытые, случайно обрезанные изображения.</li>
|
||||
<li>Обязательно писать alt: кто/что изображено и где.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>05</span>
|
||||
<h2>Композиция</h2>
|
||||
<p>Для длинной статьи нужны визуальные паузы: крупное фото после лида, цитата или факт-блок в середине и финальный акцент.</p>
|
||||
<ul>
|
||||
<li>Не ставить подряд больше 4 текстовых абзацев без паузы.</li>
|
||||
<li>Цитаты использовать только если они усиливают материал.</li>
|
||||
<li>Сайдбар может содержать факты: страна, регион, сорт, год, награда.</li>
|
||||
<li>Финальный CTA должен быть связан с каталогом или менеджером.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="guideline-card">
|
||||
<span>06</span>
|
||||
<h2>SEO и handoff</h2>
|
||||
<p>Материал должен быть понятен поиску и разработке: один H1, последовательные H2, корректные alt и прозрачная структура блоков.</p>
|
||||
<ul>
|
||||
<li>Title: до 60 символов, включает бренд или тему.</li>
|
||||
<li>Description: 140-160 символов.</li>
|
||||
<li>URL: латиница, короткий slug.</li>
|
||||
<li>Изображения называть по смыслу, а не `photo-final-2`.</li>
|
||||
<li>В CMS хранить дату, автора/раздел, теги и связанные товары.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section muted-section">
|
||||
<div class="container guideline-checklist">
|
||||
<div>
|
||||
<p class="eyebrow">Pre-publish checklist</p>
|
||||
<h2>Проверка перед публикацией</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Заголовок отражает конкретный повод и не звучит как реклама.</li>
|
||||
<li>В лиде понятна ценность материала для профессиональной аудитории.</li>
|
||||
<li>Все годы, имена, апелласьоны и награды проверены.</li>
|
||||
<li>Есть минимум 2-4 качественные фотографии с alt-текстами.</li>
|
||||
<li>Финал ведёт к каталогу, производителю, товару или контакту с менеджером.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 215 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
@ -1,13 +0,0 @@
|
||||
(function () {
|
||||
async function load(id, url) {
|
||||
var el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
var r = await fetch(url);
|
||||
if (!r.ok) return;
|
||||
el.outerHTML = await r.text();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
load('site-header', 'components/menu.html');
|
||||
load('site-footer', 'components/footer.html');
|
||||
});
|
||||
})();
|
||||
@ -1,241 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Bottle Card Variants</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<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/00081538_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/00081538_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/00081538_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/00081538_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>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
89
catalog.html
89
catalog.html
@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Catalog</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main class="section catalog-section">
|
||||
<div class="container">
|
||||
<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/00081538_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>
|
||||
</article>
|
||||
|
||||
<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 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>
|
||||
</main>
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,73 +0,0 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-container">
|
||||
<section class="footer-main">
|
||||
<div class="footer-brand-block">
|
||||
<a class="footer-brand" 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>
|
||||
<p class="footer-brand-subtitle">Территория качественного вина</p>
|
||||
</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="contacts-auth.html">Контакты auth</a></li>
|
||||
<li><a href="#">Склады</a></li>
|
||||
<li><a href="#">Реквизиты</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<div class="social-links" aria-label="Социальные сети">
|
||||
<a href="#" aria-label="Telegram">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 4 3 11.2l6.3 2.2L18 7.7l-6.8 7.1.2 5.2 3-3.3 4.7 3.5L21 4Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="VK">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 7h3l2 4.2c.5 1.1 1 1.6 1.3 1.6.2 0 .4-.3.4-1V7h3v3.7c0 .4.2.6.5.6.6 0 1.8-1.6 2.6-4.3H20c-.7 3-1.8 4.8-3 5.7 1.2.8 2.4 2.2 3.2 4.3h-3.4c-.8-1.5-1.8-2.7-2.5-2.7-.4 0-.6.3-.6.8V17h-1.5C8.8 17 6.2 13.9 4 7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="footer-legal" aria-label="Правовая информация">
|
||||
<p>
|
||||
Интернет-витрина размещает информацию об алкогольной продукции исключительно в целях ознакомления.
|
||||
Дистанционная продажа алкогольной продукции не осуществляется.
|
||||
<a href="#">Подробнее о правовой информации</a>
|
||||
</p>
|
||||
<p>© 2026 DP-Trade</p>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,17 +0,0 @@
|
||||
(function () {
|
||||
var css = document.currentScript.getAttribute('data-css') || 'css/site.css';
|
||||
document.currentScript.insertAdjacentHTML('beforebegin',
|
||||
'<meta charset="UTF-8">' +
|
||||
'<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
|
||||
'<link rel="preconnect" href="https://fonts.googleapis.com">' +
|
||||
'<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' +
|
||||
'<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700' +
|
||||
'&family=Inter:wght@400;500;600;700;800' +
|
||||
'&family=Manrope:wght@400;500;600;700;800' +
|
||||
'&family=Montserrat:wght@500;600;700;800' +
|
||||
'&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">' +
|
||||
'<link rel="stylesheet" href="' + css + '">' +
|
||||
'<script async src="https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js"><\/script>' +
|
||||
'<script>window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init()<\/script>'
|
||||
);
|
||||
})();
|
||||
@ -1,253 +0,0 @@
|
||||
<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 popular-column">
|
||||
<p class="section-title">Популярные регионы</p>
|
||||
<div class="popular-list">
|
||||
<a href="#">Бордо</a>
|
||||
<a href="#">Тоскана</a>
|
||||
<a href="#">Пьемонт</a>
|
||||
<a href="#">Риоха</a>
|
||||
<a href="#">Напа Вэлли</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">Вино <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||
|
||||
<section class="mega-menu" aria-label="Вино">
|
||||
<div class="mega-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Вино</p>
|
||||
<h2>Каталог по типу и стилю</h2>
|
||||
</div>
|
||||
<p>Быстрый выбор вина по цвету, категории и уровню сладости.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="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 popular-column">
|
||||
<p class="section-title">Популярное</p>
|
||||
<div class="popular-list">
|
||||
<a href="#">Новинки</a>
|
||||
<a href="#">Хиты продаж</a>
|
||||
<a href="#">Для ресторанов</a>
|
||||
<a href="#">Премиум подборка</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">Крепкий алкоголь <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||
|
||||
<section class="mega-menu" aria-label="Крепкий алкоголь">
|
||||
<div class="mega-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Spirits</p>
|
||||
<h2>Крепкий алкоголь</h2>
|
||||
</div>
|
||||
<p>Подборка крепких напитков для баров, ресторанов и специализированной розницы.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="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 popular-column">
|
||||
<p class="section-title">Популярное</p>
|
||||
<div class="popular-list">
|
||||
<a href="#">Single Malt</a>
|
||||
<a href="#">Cognac VSOP</a>
|
||||
<a href="#">Premium Gin</a>
|
||||
<a href="#">Bar Selection</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="nav-item">
|
||||
<button class="nav-trigger" type="button" aria-expanded="false">Производители <span class="nav-chevron" aria-hidden="true"><svg viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" /></svg></span></button>
|
||||
|
||||
<section class="mega-menu" aria-label="Производители">
|
||||
<div class="mega-intro">
|
||||
<div>
|
||||
<p class="eyebrow">Производители</p>
|
||||
<h2>Дома, хозяйства и бренды</h2>
|
||||
</div>
|
||||
<p>Навигация по ключевым производителям, регионам и партнерским брендам DP Trade.</p>
|
||||
</div>
|
||||
|
||||
<div class="menu-grid">
|
||||
<article class="menu-column visual-column">
|
||||
<img src="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 popular-column">
|
||||
<p class="section-title">Форматы</p>
|
||||
<div class="popular-list">
|
||||
<a href="#">Семейные хозяйства</a>
|
||||
<a href="#">Grand Cru</a>
|
||||
<a href="#">Органика</a>
|
||||
<a href="#">Эксклюзив DP Trade</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<a href="#">Поставки</a>
|
||||
<a href="#">Новости</a>
|
||||
<a href="ui-kit.html">UI-kit</a>
|
||||
</nav>
|
||||
</header>
|
||||
@ -1,70 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Контакты / Auth Gate</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="content-page contacts-auth-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>
|
||||
<section class="contact-form contact-auth-gate" aria-labelledby="auth-gate-title">
|
||||
<div class="auth-gate__badge">Требуется аккаунт</div>
|
||||
<h2 id="auth-gate-title">Заявка доступна после входа</h2>
|
||||
<p>Мы показываем телефон и email открыто, но форму заявки менеджеру оставляем внутри личного кабинета: так менеджер сразу видит компанию, историю запросов и коммерческий статус клиента.</p>
|
||||
<div class="auth-gate__actions">
|
||||
<a class="button button--primary" href="#">Войти</a>
|
||||
<a class="button button--secondary" href="#">Зарегистрироваться</a>
|
||||
</div>
|
||||
<div class="auth-gate__note">
|
||||
<strong>После входа откроется:</strong>
|
||||
<span>форма заявки, автозаполнение контактов, привязка к компании и история обращений.</span>
|
||||
</div>
|
||||
<div class="locked-form-preview" aria-label="Предпросмотр заблокированной формы">
|
||||
<label>Имя<input class="input" type="text" placeholder="Как к вам обращаться" disabled /></label>
|
||||
<label>Телефон или email<input class="input" type="text" placeholder="Контакт для ответа" disabled /></label>
|
||||
<label>Сообщение<textarea class="input" rows="4" placeholder="Напишите, что нужно подобрать" disabled></textarea></label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Контакты</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<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>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2541
css/site.css
2541
css/site.css
File diff suppressed because it is too large
Load Diff
665
css/tokens.css
665
css/tokens.css
@ -1,665 +0,0 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Cormorant Garamond';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/cormorant-garamond-600-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2213, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/inter-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Manrope';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/manrope-400-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic-ext.woff2') format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-cyrillic.woff2') format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-latin-ext.woff2') format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('../fonts/playfair-display-600-latin.woff2') format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-primary-wine-100: #4b0f24;
|
||||
--color-primary-wine-80: #6d1c36;
|
||||
--color-neutral-black: #161616;
|
||||
--color-neutral-gray-700: #30343a;
|
||||
--color-neutral-gray-600: #66605f;
|
||||
--color-neutral-gray-300: #d9dee6;
|
||||
--color-background-base: #f4f6f9;
|
||||
--color-surface: #ffffff;
|
||||
--color-accent-gold: #b9965b;
|
||||
--color-accent-blue: #1f3476;
|
||||
|
||||
--font-heading: "Montserrat", "Inter", Arial, sans-serif;
|
||||
--font-body: "Inter", Arial, sans-serif;
|
||||
--font-heading-classic: "Playfair Display", Georgia, serif;
|
||||
--font-body-classic: "Inter", Arial, sans-serif;
|
||||
--font-heading-retail: "Montserrat", "Inter", Arial, sans-serif;
|
||||
|
||||
--spacing-4: 4px;
|
||||
--spacing-8: 8px;
|
||||
--spacing-16: 16px;
|
||||
--spacing-24: 24px;
|
||||
--spacing-32: 32px;
|
||||
--spacing-48: 48px;
|
||||
--spacing-64: 64px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 24px;
|
||||
|
||||
--shadow-soft: 0 12px 32px rgba(22, 22, 22, 0.08);
|
||||
--shadow-lift: 0 20px 52px rgba(75, 15, 36, 0.14);
|
||||
--container: 1240px;
|
||||
}
|
||||
1392
css/ui-kit.css
1392
css/ui-kit.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
101
index.html
101
index.html
@ -1,101 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Home</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="container hero-copy">
|
||||
<p class="eyebrow">DP Trade</p>
|
||||
<h1>Премиальный каталог вина для торговли</h1>
|
||||
<p>Регионы, производители, партии и коммерческие условия собраны в одном интерфейсе для быстрых закупочных решений.</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="catalog.html">Смотреть каталог</a>
|
||||
<a class="button button--secondary" href="ui-kit.html">Открыть UI-kit</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section producers-section">
|
||||
<div class="container">
|
||||
<div class="section-heading section-heading--split">
|
||||
<div>
|
||||
<p class="eyebrow">Producers</p>
|
||||
<h2>Производители</h2>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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="news-card">
|
||||
<div class="news-card__image news-card__image--brand"></div>
|
||||
<div><span>Бренды</span><h3>Catena Zapata вновь признана самым почитаемым винным брендом мира</h3></div>
|
||||
</article>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Recommendations</p>
|
||||
<h2>Рекомендации недели</h2>
|
||||
</div>
|
||||
<div class="product-grid">
|
||||
<article class="product-card">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_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"><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"><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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Villa Raiano editorial</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<main class="news-editorial">
|
||||
<article>
|
||||
<header class="editorial-hero">
|
||||
<div class="container editorial-hero__inner">
|
||||
<div class="editorial-hero__copy">
|
||||
<p class="eyebrow">Новости / Villa Raiano</p>
|
||||
<h1>Villa Raiano: от оливкового масла к одному из лучших фиано Италии</h1>
|
||||
<div class="editorial-meta"><span>6 апреля, 2026</span><span>Ирпиния, Кампания</span></div>
|
||||
</div>
|
||||
<figure class="editorial-hero__image">
|
||||
<img src="assets/images/photo_2026-04-06_16-53-26.jpg" alt="Винодельня Villa Raiano среди холмов Ирпинии" />
|
||||
</figure>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section editorial-section">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side">
|
||||
<span>Article focus</span>
|
||||
<p>Семья Бассо, новая винодельня, ставка на белые вина и признание Fiano di Avellino.</p>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p class="lead">Рассказываем о семье Бассо и винодельне Villa Raiano, совершившей небольшую революцию в Ирпинии, сменив курс с красных вин на белые. Судя по нашим последним дегустациям, у них это получилось.</p>
|
||||
<p>На холмах Сан-Микеле-ди-Серино, в провинции Авеллино, расположена винодельня семьи Бассо. Название связано с корнями: Villa Raiano — историческая местность коммуны Серино, где находилась старая оливковая плантация семьи.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<figure class="container editorial-image editorial-image--wide">
|
||||
<img src="assets/images/photo_2026-04-06_16-53-24.jpg" alt="Сбор белого винограда Villa Raiano" />
|
||||
</figure>
|
||||
|
||||
<section class="section editorial-section">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side editorial-side--timeline">
|
||||
<span>Timeline</span>
|
||||
<ol>
|
||||
<li><strong>1990-е</strong><small>семейная маслобойня</small></li>
|
||||
<li><strong>2008</strong><small>новое оборудование и команда</small></li>
|
||||
<li><strong>2009</strong><small>винодельня на холме</small></li>
|
||||
<li><strong>2024</strong><small>подземная винодельня</small></li>
|
||||
</ol>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p>В середине 1990-х с основанием винодельни в Ирпинии начался винодельческий бум. Первые годы для семьи Бассо были скорее хобби: они делали и разливали вино на семейной маслобойне. С 1999 по 2008 год они стали сотрудничать с энологом Луиджи Мойо, который учился вместе с Сабино Бассо в аграрном институте Авеллино.</p>
|
||||
<blockquote>«В 2008 году мы купили новое оборудование, начали сотрудничество с Фортунато Себастьяно и построили винодельню на вершине холма в Сан-Микеле-ди-Серино», — рассказывает сын Сабино Бассо, Федерико.</blockquote>
|
||||
<p>Открытие в 2009 году совпало с новым курсом: появились четыре белых вина с отдельных виноградников — три Fiano di Avellino и один Greco di Tufo. Через десять лет к работе подключилось новое поколение: «В компанию пришли я, мой брат Фабрицио и наша кузина Брунелла, дочь Симоне».</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container editorial-photo-grid" aria-label="Фото Villa Raiano">
|
||||
<figure><img src="assets/images/photo_2026-04-06_16-53-23.jpg" alt="Ящики с белым виноградом Villa Raiano" /></figure>
|
||||
<figure><img src="assets/images/photo_2026-04-06_16-53-23-2.jpg" alt="Работа в погребе Villa Raiano" /></figure>
|
||||
</section>
|
||||
|
||||
<section class="section editorial-section editorial-section--final">
|
||||
<div class="container editorial-layout">
|
||||
<aside class="editorial-side">
|
||||
<span>Recognition</span>
|
||||
<p>Gambero Rosso отметил Fiano di Avellino 2024 за лучшее соотношение цены и качества в регионе.</p>
|
||||
</aside>
|
||||
<div class="editorial-body">
|
||||
<p>В 2024 году открылась новая подземная винодельня, полностью интегрированная в ландшафт. Сегодня Villa Raiano владеет 30 гектарами виноградников: хозяйство работает по биологическим принципам и сертифицировано с 2011 года.</p>
|
||||
<blockquote>«Мы уверены, что наш регион — земля великих белых вин», — говорит Федерико. «Сила наших DOC — в огромных различиях, которые один и тот же сорт может проявлять в разных условиях».</blockquote>
|
||||
<p>Континентальный климат позволяет ягодам созревать медленно, что делает вина особенными — как красные, так и белые. На последних дегустациях Gambero Rosso Fiano di Avellino 2024 года особенно впечатлил итальянских экспертов, получив премию Miglior Qualità Prezzo Regionale гида BereBene 2026.</p>
|
||||
<p class="editorial-outro">Чем не повод самому проверить мнение Gambero Rosso?</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Villa Raiano</title>
|
||||
</head>
|
||||
<body class="compact-type">
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
<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>
|
||||
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
36
product.html
36
product.html
@ -1,36 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<script src="components/head.js"></script>
|
||||
<title>DP Trade — Product</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<div id="site-header"></div>
|
||||
|
||||
<main class="section">
|
||||
<div class="container product-detail">
|
||||
<div class="product-media"><img class="product-photo" src="assets/images/00081538_1.png" alt="Chateau Laroque Grand Cru" /></div>
|
||||
<section class="detail-copy">
|
||||
<p class="eyebrow">Product / Default</p>
|
||||
<h1>Chateau Laroque Grand Cru</h1>
|
||||
<p>Премиальная позиция из Bordeaux для ресторанных карт и специализированной розницы.</p>
|
||||
<div class="meta-list">
|
||||
<div><span>Регион</span><strong>Bordeaux</strong></div>
|
||||
<div><span>Тип</span><strong>Red dry</strong></div>
|
||||
<div><span>Год</span><strong>2019</strong></div>
|
||||
<div><span>Объем</span><strong>0.75 L</strong></div>
|
||||
<div><span>Цена</span><strong>3 890 ₽</strong></div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--primary" href="#">Запросить прайс</a>
|
||||
<a class="button button--secondary" href="catalog.html">Вернуться в каталог</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<div id="site-footer"></div>
|
||||
</div>
|
||||
<script src="assets/js/components.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1172
ui-kit.html
1172
ui-kit.html
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user