Add editorial guidelines and refresh UI kit
This commit is contained in:
parent
18750fef24
commit
02193a0f66
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
326
article-guidelines.html
Normal file
326
article-guidelines.html
Normal file
@ -0,0 +1,326 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DP Trade — Article Guidelines</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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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 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>
|
||||
|
||||
<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>
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
275
css/site.css
275
css/site.css
@ -1404,6 +1404,12 @@ select {
|
||||
url("https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1800&q=80");
|
||||
}
|
||||
|
||||
.page-hero--guidelines {
|
||||
background-image:
|
||||
linear-gradient(100deg, rgba(22, 20, 17, 0.86), rgba(22, 20, 17, 0.5) 54%, rgba(22, 20, 17, 0.22)),
|
||||
url("https://images.unsplash.com/photo-1516594798947-e65505dbb29d?auto=format&fit=crop&w=1800&q=80");
|
||||
}
|
||||
|
||||
.page-hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.28fr);
|
||||
@ -1636,6 +1642,257 @@ select {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.guideline-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.guideline-card,
|
||||
.guideline-checklist {
|
||||
border: 1px solid rgba(217, 222, 229, 0.9);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.guideline-card {
|
||||
min-width: 0;
|
||||
padding: 24px;
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.guideline-card--lead {
|
||||
grid-column: span 2;
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.guideline-card span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.guideline-card h2,
|
||||
.guideline-checklist h2 {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(24px, 2.6vw, 34px);
|
||||
font-weight: 800;
|
||||
line-height: 1.08;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.guideline-card p {
|
||||
margin: 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.guideline-card ul,
|
||||
.guideline-checklist ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
color: var(--color-neutral-gray-700);
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.guideline-card li + li,
|
||||
.guideline-checklist li + li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.guideline-checklist {
|
||||
padding: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.news-editorial {
|
||||
background: #f4f6f9;
|
||||
}
|
||||
|
||||
.editorial-hero {
|
||||
padding: 54px 0 34px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid rgba(102, 96, 95, 0.14);
|
||||
}
|
||||
|
||||
.editorial-hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.55fr) minmax(360px, 0.45fr);
|
||||
gap: 38px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.editorial-hero h1 {
|
||||
margin: 10px 0 18px;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(42px, 5.6vw, 76px);
|
||||
font-weight: 800;
|
||||
line-height: 0.98;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.editorial-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.editorial-meta span {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(75, 15, 36, 0.16);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-primary-wine-100);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.editorial-hero__image {
|
||||
margin: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 22px 58px rgba(25, 37, 62, 0.12);
|
||||
}
|
||||
|
||||
.editorial-hero__image img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.editorial-section {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
.editorial-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 780px);
|
||||
gap: 56px;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.editorial-side {
|
||||
position: sticky;
|
||||
top: 154px;
|
||||
padding: 18px 0 0;
|
||||
border-top: 2px solid var(--color-primary-wine-100);
|
||||
}
|
||||
|
||||
.editorial-side span {
|
||||
color: var(--color-accent-gold);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.editorial-side p {
|
||||
margin: 12px 0 0;
|
||||
color: var(--color-neutral-gray-600);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.editorial-side ol {
|
||||
margin: 16px 0 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.editorial-side li {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.editorial-side strong {
|
||||
color: var(--color-primary-wine-100);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.editorial-side small {
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.editorial-body .lead {
|
||||
color: var(--color-neutral-black);
|
||||
font-size: clamp(22px, 2.4vw, 30px);
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
.editorial-body p {
|
||||
color: var(--color-neutral-gray-600);
|
||||
font-size: 18px;
|
||||
line-height: 1.74;
|
||||
}
|
||||
|
||||
.editorial-body blockquote {
|
||||
margin: 34px 0;
|
||||
padding: 28px;
|
||||
border-left: 4px solid var(--color-primary-wine-100);
|
||||
background: #eef2f6;
|
||||
color: var(--color-neutral-black);
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(22px, 3vw, 34px);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.editorial-image {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editorial-image img {
|
||||
width: 100%;
|
||||
max-height: 540px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.editorial-photo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.editorial-photo-grid figure {
|
||||
margin: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editorial-photo-grid img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.editorial-section--final {
|
||||
padding-bottom: 82px;
|
||||
}
|
||||
|
||||
.editorial-outro {
|
||||
color: var(--color-primary-wine-100) !important;
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(28px, 4vw, 46px) !important;
|
||||
font-weight: 800;
|
||||
line-height: 1.1 !important;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.filters-panel,
|
||||
.info-panel {
|
||||
padding: 24px;
|
||||
@ -1869,9 +2126,13 @@ select {
|
||||
.card-lab-head,
|
||||
.bottle-card-mix,
|
||||
.page-hero__inner,
|
||||
.editorial-hero__inner,
|
||||
.editorial-layout,
|
||||
.article-layout,
|
||||
.about-grid,
|
||||
.contacts-layout {
|
||||
.contacts-layout,
|
||||
.guideline-grid,
|
||||
.guideline-checklist {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@ -2004,10 +2265,22 @@ select {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.editorial-side {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.editorial-photo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.guideline-card--lead {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.bottle-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
292
news-villa-raiano-v2.html
Normal file
292
news-villa-raiano-v2.html
Normal file
@ -0,0 +1,292 @@
|
||||
<!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 editorial</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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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="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>
|
||||
|
||||
<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>
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
@ -182,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="news-villa-raiano.html">Новость</a><a href="about.html">О компании</a><a href="contacts.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="news-villa-raiano-v2.html">Новость v2</a><a href="article-guidelines.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>
|
||||
|
||||
112
ui-kit.html
112
ui-kit.html
@ -29,6 +29,8 @@
|
||||
<a href="product.html">Карточка товара</a>
|
||||
<a href="bottle-cards.html">Варианты карточек</a>
|
||||
<a href="news-villa-raiano.html">Новость</a>
|
||||
<a href="news-villa-raiano-v2.html">Новость v2</a>
|
||||
<a href="article-guidelines.html">Ред. гайд</a>
|
||||
<a href="about.html">О компании</a>
|
||||
<a href="contacts.html">Контакты</a>
|
||||
</div>
|
||||
@ -260,6 +262,57 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Catalog List Cards</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Card / Product / List / Default</span>
|
||||
<p>Текущая карточка каталога: Image, Product info, Price, CTA. Используется для B2B-выдачи и страниц стран.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Card / Product / List / Compact</span>
|
||||
<p>Сниженная высота, меньше изображение и короче details. Подходит для плотной выдачи и избранного.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Card / Product / List / Color Image</span>
|
||||
<p>Цветной фон только в зоне изображения: Gold, Wine, Green. Бутылка остаётся реальной фотографией без shadow.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Card / Product / List / B2B Dense</span>
|
||||
<p>Дополнительные параметры: тип, сорт, упаковка, артикул. Для профессионального сравнения SKU.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--secondary" href="bottle-cards.html">Открыть варианты карточек</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Editorial Components</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Article / Hero / Split</span>
|
||||
<p>Заголовок, дата/мета, крупное фото. Для новостей производителей и экспертных материалов.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Article / Body</span>
|
||||
<p>Lead, paragraph, blockquote, wide image, photo grid. Не больше 4 текстовых абзацев без визуальной паузы.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Article / Sidebar</span>
|
||||
<p>Sticky fact block, timeline или recognition. На мобильном становится обычным блоком над текстом.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Guidelines</span>
|
||||
<p>Отдельная страница с требованиями к заголовкам, тексту, фото, SEO и pre-publish checklist.</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="button button--secondary" href="news-villa-raiano-v2.html">Новость v2</a>
|
||||
<a class="button button--secondary" href="article-guidelines.html">Редакционный гайд</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subsection">
|
||||
<h3>Navigation</h3>
|
||||
<div class="header-demo">
|
||||
@ -413,6 +466,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subsection">
|
||||
<h3>Content & Inner Pages</h3>
|
||||
<div class="spec-grid">
|
||||
<article class="spec-card">
|
||||
<span>Pattern / News Article / Editorial</span>
|
||||
<p>Split hero, date meta, lead, wide image, timeline sidebar, quote, photo grid, final CTA.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Pattern / About Page / Default</span>
|
||||
<p>Hero + короткая история + сетка преимуществ. Подходит для корпоративной страницы без перегруза.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Pattern / Contacts / Form</span>
|
||||
<p>Контактные панели + форма заявки менеджеру. На мобильном блоки идут одной колонкой.</p>
|
||||
</article>
|
||||
<article class="spec-card">
|
||||
<span>Pattern / Editorial Guidelines</span>
|
||||
<p>Guideline cards + checklist. Используется как внутренняя документация для редакции и контент-менеджера.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="section">
|
||||
@ -437,6 +511,22 @@
|
||||
<span>Template / Producer Page</span>
|
||||
<strong>Story + region + producer catalog</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / News Article</span>
|
||||
<strong>Editorial story + media + timeline</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / About</span>
|
||||
<strong>Company story + advantages</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Contacts</span>
|
||||
<strong>Contact panels + manager request</strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Template / Article Guidelines</span>
|
||||
<strong>Rules + checklist + photo requirements</strong>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -456,6 +546,28 @@
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-grid">
|
||||
<article class="template-card">
|
||||
<span>Screen / Catalog / v1</span>
|
||||
<strong><a href="catalog.html">Product list cards</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Screen / News / v2</span>
|
||||
<strong><a href="news-villa-raiano-v2.html">Villa Raiano editorial</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Screen / About / v1</span>
|
||||
<strong><a href="about.html">Company overview</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Screen / Contacts / v1</span>
|
||||
<strong><a href="contacts.html">Contacts and form</a></strong>
|
||||
</article>
|
||||
<article class="template-card">
|
||||
<span>Screen / Guidelines / v1</span>
|
||||
<strong><a href="article-guidelines.html">Editorial rules</a></strong>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user