103 lines
5.9 KiB
HTML
103 lines
5.9 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#f2efe8">
|
||
<meta name="description" content="Gradient Garden — короткие заметки о цвете, свете и спокойных цифровых пространствах.">
|
||
<title>Gradient Garden — наблюдения о цвете</title>
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<link rel="stylesheet" href="/styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<a class="brand" href="#top" aria-label="Gradient Garden — на главную">
|
||
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
||
<span>Gradient Garden</span>
|
||
</a>
|
||
<nav aria-label="Основная навигация">
|
||
<a href="#notes">Наблюдения</a>
|
||
<a href="#principles">Принципы</a>
|
||
<a href="#about">О проекте</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="hero-copy">
|
||
<p class="eyebrow">Независимый визуальный блокнот · Выпуск 01</p>
|
||
<h1 id="hero-title">Цвету тоже нужно<br><em>пространство.</em></h1>
|
||
<p class="intro">Небольшая коллекция наблюдений о градиентах, естественном свете и интерфейсах, в которых приятно задержаться.</p>
|
||
<a class="text-link" href="#notes">Перейти к заметкам <span aria-hidden="true">↘</span></a>
|
||
</div>
|
||
|
||
<div class="composition" aria-label="Абстрактная цветовая композиция">
|
||
<div class="composition-noise"></div>
|
||
<div class="orb orb-coral"></div>
|
||
<div class="orb orb-violet"></div>
|
||
<div class="orb orb-lime"></div>
|
||
<div class="composition-caption">
|
||
<span>Study 01</span>
|
||
<span>Warm / Quiet</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="notes" id="notes" aria-labelledby="notes-title">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Три наблюдения</p>
|
||
<h2 id="notes-title">Как собирать атмосферу</h2>
|
||
<p>Не правила, а отправные точки для спокойной визуальной работы.</p>
|
||
</div>
|
||
|
||
<div class="note-grid">
|
||
<article class="note-card card-sunrise">
|
||
<div class="card-art" aria-hidden="true"><span></span></div>
|
||
<p class="card-index">01 / Мягкий контраст</p>
|
||
<h3>Начинайте не с цвета, а со света</h3>
|
||
<p>Сначала определите, откуда приходит свет и насколько он рассеян. Палитра станет естественным продолжением этого решения.</p>
|
||
</article>
|
||
|
||
<article class="note-card card-depth">
|
||
<div class="card-art" aria-hidden="true"><span></span></div>
|
||
<p class="card-index">02 / Глубина</p>
|
||
<h3>Один оттенок может звучать по-разному</h3>
|
||
<p>Меняйте не только яркость, но и температуру. Тёплый передний план и холодная глубина создают объём без лишнего шума.</p>
|
||
</article>
|
||
|
||
<article class="note-card card-air">
|
||
<div class="card-art" aria-hidden="true"><span></span></div>
|
||
<p class="card-index">03 / Воздух</p>
|
||
<h3>Пустое место — часть композиции</h3>
|
||
<p>Свободное пространство даёт глазу точку отдыха. Благодаря ему даже насыщенные сочетания воспринимаются спокойнее.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="principles" id="principles" aria-labelledby="principles-title">
|
||
<div class="principles-panel">
|
||
<p class="eyebrow">Рабочая памятка</p>
|
||
<h2 id="principles-title">Тише, но выразительнее</h2>
|
||
<p>Хорошая палитра поддерживает содержание, а не просит всё внимание себе. Достаточно одного заметного акцента, последовательной температуры и честного белого пространства.</p>
|
||
</div>
|
||
<ol class="principle-list">
|
||
<li><span>01</span><p><strong>Выберите настроение</strong> до выбора конкретных оттенков.</p></li>
|
||
<li><span>02</span><p><strong>Оставьте один акцент,</strong> остальным цветам дайте поддерживающую роль.</p></li>
|
||
<li><span>03</span><p><strong>Проверьте палитру без цвета:</strong> иерархия должна сохраниться.</p></li>
|
||
</ol>
|
||
</section>
|
||
|
||
<section class="about" id="about" aria-labelledby="about-title">
|
||
<p class="eyebrow">О проекте</p>
|
||
<h2 id="about-title">Gradient Garden — место для визуальных экспериментов без спешки.</h2>
|
||
<p>Здесь появляются короткие заметки о цвете, композиции и цифровой среде. Новые материалы выходят тогда, когда есть наблюдение, которым действительно хочется поделиться.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<span>Gradient Garden</span>
|
||
<span>Наблюдения о цвете · 2026</span>
|
||
</footer>
|
||
</body>
|
||
</html>
|