47 Модуль 10 Реальные проекты 20 мин урок 22 из 25

Проект: лендинг

Собираем страницу целиком: герой с диагональю, липкая навигация, карточки тарифов, вопросы без скриптов и появление при скролле.

Что ты научишься делать

Соберёшь лендинг из готовых компонентов, а не экран за экраном
Сделаешь липкую навигацию, которая не мешает якорям
Добавишь появление при скролле, уважающее спокойный режим

#Что собираем

Лендинг кофейни: пять экранов, одна цель — записаться на дегустацию. Всё на чистом CSS, ни одной библиотеки.

Липкая навигация, появляющаяся после первого экрана
Герой с диагональным низом и текстом поверх градиента
Три карточки преимуществ с ровными кнопками
Тарифы, где средний выделен
Вопросы и ответы без единой строки скрипта
Появление блоков при прокрутке

#Шаг 1. Токены и каркас

Начинаем не с шапки, а с системы. Двадцать строк, которые определят весь остальной код.

CSSТокены и контейнер

1@layer reset, tokens, base, layout, components, utilities;23@layer tokens {4  :root {5    color-scheme: light dark;67    --color-bg: light-dark(#fdfcfa, #12131a);8    --color-surface: light-dark(#fff, #1b1d27);9    --color-text: light-dark(#16181d, #e8eaf2);10    --color-muted: light-dark(#5b6070, #a7adc2);11    --color-accent: light-dark(#6544e0, #b9a5ff);12    --color-on-accent: light-dark(#fff, #16181d);1314    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;15    --space-4: 16px; --space-6: 24px; --space-8: 32px;16    --space-12: 48px; --space-16: 64px;1718    --radius-md: 14px;19    --radius-full: 999px;2021    --step-0: 1rem;22    --step-1: 1.25rem;23    --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);24    --step-3: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);2526    --ease: cubic-bezier(.22, 1, .36, 1);27  }28}2930@layer layout {31  /* Полноширинный прорыв из урока 29:32     блок выходит на всю ширину одной строкой */33  .page {34    display: grid;35    grid-template-columns:36      [full-start] minmax(var(--space-4), 1fr)37      [content-start] minmax(0, 1140px) [content-end]38      minmax(var(--space-4), 1fr) [full-end];39  }4041  .page > * { grid-column: content; }42  .page > .full { grid-column: full; }43}

#Шаг 2. Липкая навигация

Навигация прижата к верху и появляется, когда первый экран уехал. Главная тонкость — scroll-padding-top: без него якорные ссылки прячут заголовок под шапкой.

CSSnav.css

1@layer layout {2  html {3    /* Якорь не заедет под липкую шапку */4    scroll-padding-block-start: 76px;5    scroll-behavior: smooth;6  }78  /* Кому движение мешает — прокрутка мгновенная */9  @media (prefers-reduced-motion: reduce) {10    html { scroll-behavior: auto; }11  }1213  .nav {14    position: sticky;15    inset-block-start: 0;16    z-index: 10;1718    display: flex;19    align-items: center;20    gap: var(--space-6);21    padding-block: var(--space-3);2223    background: color-mix(in oklab, var(--color-bg) 82%, transparent);24    backdrop-filter: blur(12px);25    -webkit-backdrop-filter: blur(12px);26    border-block-end: 1px solid transparent;27    transition: border-color .25s var(--ease);28  }2930  /* Граница появляется, только когда под шапкой что-то есть.31     :has() смотрит вперёд по документу — скрипт не нужен */32  .page:has(.hero:not(:hover)) .nav { border-color: inherit; }3334  .nav__list { display: flex; gap: var(--space-4); margin-inline-start: auto; }35}

#Шаг 3. Герой с диагональю

Первый экран

<section class="hero">  <div class="hero__inner">    <p class="hero__badge">Открыты с 8:00</p>    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>    <p class="hero__lead">Свежая обжарка каждую неделю, тихий зал и розетки у каждого стола.</p>    <a class="btn btn--primary" href="#book">Записаться на дегустацию</a>  </div></section><section class="after">  <p>Следующая секция подъезжает под скос.</p></section>

.hero {  padding: 48px 20px 72px;  color: #fff;  background: linear-gradient(135deg, #6544e0, #b06cff 60%, #f2777a);  /* Скос: правый нижний угол выше левого */  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);}.hero__inner { max-width: 640px; }.hero__badge {  display: inline-block;  margin: 0 0 12px;  padding: 4px 12px;  font-size: 13px;  font-weight: 600;  background: rgb(255 255 255 / .18);  border-radius: 999px;}.hero__title {  margin: 0 0 12px;  font-size: clamp(28px, 5vw, 44px);  line-height: 1.12;  /* Строки заголовка выравниваются по длине */  text-wrap: balance;}.hero__lead {  margin: 0 0 24px;  max-width: 46ch;  opacity: .9;}.btn {  display: inline-block;  padding: 12px 24px;  font-weight: 600;  text-decoration: none;  border-radius: 999px;}.btn--primary { color: #6544e0; background: #fff; }.after {  /* Подтягиваем под скос */  margin-top: -28px;  padding: 32px 20px;  background: #f4f4f8;}.after p { margin: 0; }

В песочницу

#Шаг 4. Карточки с ровными кнопками

Три преимущества с текстом разной длины. Кнопки должны стоять на одной линии — это тот самый случай для subgrid из урока 29, с запасным вариантом на флексах.

Преимущества

<section class="features">  <h2 class="features__title">Почему к нам возвращаются</h2>  <div class="features__grid">    <article class="feature">      <h3>Своя обжарка</h3>      <p>Зерно приезжает раз в неделю и обжаривается у нас же, в зале.</p>      <a class="feature__link" href="#">Как это устроено</a>    </article>    <article class="feature">      <h3>Тихо</h3>      <p>Без музыки.</p>      <a class="feature__link" href="#">Посмотреть зал</a>    </article>    <article class="feature">      <h3>Можно работать</h3>      <p>Розетки у каждого стола, быстрый интернет и никто не торопит с заказом даже через три часа.</p>      <a class="feature__link" href="#">Условия</a>    </article>  </div></section>

.features__title {  margin: 0 0 20px;  font-size: 26px;  text-wrap: balance;}/* База: флексы. Кнопка прижата вниз своим отступом */.features__grid {  display: flex;  flex-wrap: wrap;  gap: 16px;}.feature {  flex: 1 1 220px;  display: flex;  flex-direction: column;  gap: 8px;  padding: 18px;  background: #f5f5fa;  border-radius: 14px;}.feature h3 { margin: 0; font-size: 17px; }.feature p { margin: 0; font-size: 14px; color: #5b6070; }.feature__link {  margin-top: auto;  color: #6544e0;  font-weight: 600;  font-size: 14px;}/* Улучшение: строки выравниваются между карточками */@supports (grid-template-rows: subgrid) {  .features__grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));    grid-auto-rows: auto 1fr auto;  }  .feature {    display: grid;    grid-row: span 3;    grid-template-rows: subgrid;  }  .feature__link { margin-top: 0; }}

В песочницу

#Шаг 5. Тарифы

Три карточки, средняя выделена. Выделение — модификатор, а не отдельный компонент: меняются только цвета и масштаб.

CSSpricing.css

1@layer components {2  .plan {3    display: grid;4    gap: var(--space-3);5    padding: var(--space-6);6    background: var(--color-surface);7    border: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);8    border-radius: var(--radius-md);910    /* Точка настройки: модификатор поменяет одно значение */11    --plan-accent: var(--color-text);12  }1314  .plan__price {15    font-size: var(--step-2);16    font-weight: 700;17    color: var(--plan-accent);18  }1920  /* Выделенный тариф: три строки вместо копии компонента */21  .plan--featured {22    --plan-accent: var(--color-accent);23    border-color: var(--color-accent);24    box-shadow: 0 20px 44px -28px var(--color-accent);25  }2627  /* Приподнимаем только там, где это уместно.28     На узком экране карточки идут в столбик — подъём мешает */29  @media (min-width: 900px) {30    .plan--featured { transform: scale(1.04); }31  }32}

#Шаг 6. Вопросы без скриптов

FAQ на details

<section class="faq">  <h2 class="faq__title">Частые вопросы</h2>  <details class="faq__item" name="faq">    <summary>Нужно ли бронировать стол?</summary>    <div class="faq__body"><p>В будни нет, в выходные лучше написать заранее.</p></div>  </details>  <details class="faq__item" name="faq">    <summary>Есть ли безлактозное молоко?</summary>    <div class="faq__body"><p>Кокосовое, миндальное и овсяное, без доплаты.</p></div>  </details>  <details class="faq__item" name="faq">    <summary>Можно ли со своей кружкой?</summary>    <div class="faq__body"><p>Нужно! Дадим скидку 20 рублей.</p></div>  </details></section>

.faq__title { margin: 0 0 16px; font-size: 24px; }.faq__item {  margin-bottom: 8px;  background: #f5f5fa;  border-radius: 12px;  overflow: hidden;}summary {  display: flex;  justify-content: space-between;  align-items: center;  gap: 16px;  padding: 14px 16px;  font-weight: 600;  cursor: pointer;  list-style: none;}/* Убираем стандартный треугольник и рисуем свой */summary::-webkit-details-marker { display: none; }summary::after {  content: "";  width: 10px;  height: 10px;  border-right: 2px solid #6544e0;  border-bottom: 2px solid #6544e0;  transform: rotate(45deg) translate(-2px, -2px);  transition: transform .2s ease;}.faq__item[open] summary::after {  transform: rotate(-135deg) translate(-4px, -4px);}summary:focus-visible {  outline: 3px solid #6544e0;  outline-offset: -3px;}.faq__body { padding: 0 16px 14px; font-size: 14px; color: #5b6070; }.faq__body p { margin: 0; }

В песочницу

#Шаг 7. Мобильное меню

На узком экране навигация не помещается. Обычный путь — выезжающая панель по кнопке, и здесь легко потерять доступность: панель открывается, а фокус остаётся на странице под ней.

Самый честный вариант без скриптов — не прятать меню вовсе, а превратить его в горизонтальную ленту с прокруткой. Ссылки остаются видимыми и доступными, ничего не ломается.

CSSМеню-лента на узком экране

1@media (max-width: 720px) {2  .nav__list {3    display: flex;4    gap: var(--space-4);5    overflow-x: auto;6    /* Прокрутка останавливается на пунктах, а не между ними */7    scroll-snap-type: x proximity;8    /* Края тают — видно, что список продолжается */9    mask-image: linear-gradient(10      to right, transparent, #000 16px, #000 calc(100% - 16px), transparent11    );12  }1314  .nav__item { flex: none; scroll-snap-align: start; }1516  /* Полосу прокрутки прячем, но саму прокрутку оставляем */17  .nav__list::-webkit-scrollbar { block-size: 0; }18}

#Шаг 8. Форма записи

Целевое действие всего лендинга. Здесь применяется всё из сорок четвёртого урока: подписи, отложенная проверка, подсказки для мобильной клавиатуры.

Одна деталь именно для лендинга: полей должно быть минимально возможное число. Каждое лишнее поле заметно снижает долю тех, кто дойдёт до конца. Имя и телефон — обычно достаточно, остальное спрашивают при звонке.

CSSbook.css

1@layer components {2  .book {3    display: grid;4    gap: var(--space-4);5    max-inline-size: 420px;6  }78  .book__input:user-invalid {9    border-color: var(--color-danger);10  }1112  /* Кнопка блокируется, пока в форме есть ошибка —13     без единой строки скрипта */14  .book:has(:user-invalid) .book__submit {15    opacity: .55;16    pointer-events: none;17  }18}

#Шаг 9. Появление при скролле

База — рабочая страница без анимации. Улучшение — плавное появление. Порядок именно такой: если скрипт не выполнится, содержимое обязано остаться видимым.

CSSreveal.css

1@layer utilities {2  /* Прячем только когда скрипты работают.3     Флаг ставит тот же скрипт, что и тему, — в head */4  [data-js] [data-reveal] {5    opacity: 0;6    transform: translateY(12px);7    transition: opacity .6s var(--ease), transform .6s var(--ease);8  }910  [data-js] [data-reveal].is-in {11    opacity: 1;12    transform: none;13  }1415  /* Кому движение мешает — показываем сразу */16  @media (prefers-reduced-motion: reduce) {17    [data-js] [data-reveal] {18      opacity: 1;19      transform: none;20      transition: none;21    }22  }23}

#Порядок, в котором это собиралось

Обрати внимание: экраны шли не по порядку сверху вниз. Сначала токены, потом сетка страницы, потом карточка — самый частый компонент. Навигация появилась не первой, хотя на макете она сверху.

Причина в том, что навигация опирается почти на всё: на токены, на сетку, на кнопки, на поведение прокрутки. Начав с неё, пришлось бы принимать десяток решений вслепую и потом переделывать.

Второе наблюдение — про адаптив. Он не был отдельным этапом в конце. Каждый компонент считался готовым только когда работал на всех ширинах. Так дешевле: поправить одну карточку проще, чем разбирать поехавшую страницу целиком.

#Грабли этого проекта

Что случилось	Почему	Решение
Якорь прячет заголовок под шапкой	Липкая навигация перекрывает цель прокрутки	`scroll-padding-block-start` на `html`
Секция наехала на навигацию	У липкого элемента не задан `z-index`	Небольшое значение `z-index` навигации
Диагональ съела тень героя	`clip-path` режет элемент целиком	Тень у родителя через `filter: drop-shadow()`
Выделенный тариф вылез за экран	`scale` на узком экране	Масштаб только от 900 пикселей
Страница пустая без скриптов	Появление спрятало содержимое насовсем	Прятать только при флаге `data-js`
Заголовок висит одним словом	Перенос по умолчанию	`text-wrap: balance`

#Чек-лист сдачи

Перед отправкой заказчику

Проверил на 360, 768 и 1440 — нет горизонтальной прокрутки
Прошёл страницу клавишей Tab, фокус виден везде
Выключил JavaScript — содержимое на месте
Включил спокойный режим — движение выключилось
Проверил в настоящем Safari, а не в режиме устройства
Все картинки с alt, размерами и lazy ниже сгиба
Заголовки идут по уровням без пропусков, h1 один
Контраст текста не ниже 4.5 : 1 в обеих темах
Ноль ошибок в консоли

Где спотыкаются почти все

Секции обёрнуты в .container каждая

Почему Блок во всю ширину требует отрицательных отступов, которые ломаются при появлении полосы прокрутки.

Как надо Сетка на уровне страницы с именованными линиями — и grid-column: full для полноширинных блоков.

Анимация появления без запасного варианта

Почему Без скриптов страница остаётся пустой. Это ломает и поисковую выдачу, и людей с блокировщиками.

Как надо Прячь содержимое только при флаге, который ставит скрипт.

Выделенный тариф — отдельный компонент

Почему Дублируется вся разметка и стили. Правка обычного тарифа не попадает в выделенный.

Как надо Модификатор, меняющий переменную и пару свойств.

Смещение якоря сделано отступом у заголовка

Почему Невидимый отступ ломает расстояния между блоками и мешает при обычной прокрутке.

Как надо scroll-padding-block-start у html — свойство создано ровно для этого.

Полноширинный прорыв full-bleed: Блок выходит за колонку контента на всю ширину средствами сетки.
Отступ прокрутки scroll-padding: Запас, который браузер оставляет при переходе по якорю.
Липкое позиционирование sticky: Элемент в потоке, прилипающий к краю при прокрутке.
Аккордеон accordion: Набор раскрывающихся блоков, где открыт один. Делается атрибутом name у details.

Задание

Собрать первый экран лендинга

Собери герой лендинга: секция с градиентом и диагональным низом через clip-path, заголовок с балансировкой строк, подзаголовок с мерой не больше 50ch и кнопка-ссылка.

Следующая секция должна подъезжать под скос — задай ей отрицательный верхний отступ. Обязательно: видимая обводка фокуса у кнопки.

<section class="hero">  <div class="hero__inner">    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>    <p class="hero__lead">Свежая обжарка каждую неделю, тихий зал и розетки у каждого стола.</p>    <a class="btn" href="#book">Записаться</a>  </div></section><section class="after">  <p>Эта секция должна подъезжать под скос.</p></section>

.hero {  padding: 44px 20px 68px;  color: #fff;  background: linear-gradient(135deg, #6544e0, #b06cff);  /* 1. Добавь скос */}.hero__inner { max-width: 640px; }.hero__title {  margin: 0 0 12px;  font-size: clamp(28px, 5vw, 44px);  line-height: 1.12;  /* 2. Выровняй длину строк */}.hero__lead {  margin: 0 0 24px;  opacity: .9;  /* 3. Ограничь меру набора */}.btn {  display: inline-block;  padding: 12px 24px;  font-weight: 600;  color: #6544e0;  background: #fff;  text-decoration: none;  border-radius: 999px;}/* 5. Верни видимый фокус */.after {  padding: 32px 20px;  background: #f4f4f8;  /* 4. Подтяни под скос */}.after p { margin: 0; }

Открыть в песочнице

Подсказка 1

Скос: clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);

Подсказка 2

Заголовку: text-wrap: balance; Подзаголовку: max-inline-size: 46ch;

Подсказка 3

Подтягивание: .after { margin-top: -26px; }

Подсказка 4

Фокус: .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

Показать решение

HTMLindex.html

1<section class="hero">2  <div class="hero__inner">3    <h1 class="hero__title">Кофе, ради которого стоит выйти из дома</h1>4    <p class="hero__lead">Свежая обжарка каждую неделю, тихий зал и розетки у каждого стола.</p>5    <a class="btn" href="#book">Записаться</a>6  </div>7</section>89<section class="after">10  <p>Эта секция должна подъезжать под скос.</p>11</section>

CSSstyle.css

1.hero {2  padding: 44px 20px 68px;3  color: #fff;4  background: linear-gradient(135deg, #6544e0, #b06cff);5  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);6}78.hero__inner { max-width: 640px; }910.hero__title {11  margin: 0 0 12px;12  font-size: clamp(28px, 5vw, 44px);13  line-height: 1.12;14  text-wrap: balance;15}1617.hero__lead {18  margin: 0 0 24px;19  max-inline-size: 46ch;20  opacity: .9;21}2223.btn {24  display: inline-block;25  padding: 12px 24px;26  font-weight: 600;27  color: #6544e0;28  background: #fff;29  text-decoration: none;30  border-radius: 999px;31}3233.btn:focus-visible {34  outline: 3px solid #fff;35  outline-offset: 3px;36}3738.after {39  margin-top: -26px;40  padding: 32px 20px;41  background: #f4f4f8;42}4344.after p { margin: 0; }

Проект: лендинг

Что ты научишься делать

#Что собираем

#Шаг 1. Токены и каркас

#Шаг 2. Липкая навигация

#Шаг 3. Герой с диагональю

#Шаг 4. Карточки с ровными кнопками

#Шаг 5. Тарифы

#Шаг 6. Вопросы без скриптов

#Шаг 7. Мобильное меню

#Шаг 8. Форма записи

#Шаг 9. Появление при скролле

#Порядок, в котором это собиралось

#Грабли этого проекта

#Чек-лист сдачи

Перед отправкой заказчику

Где спотыкаются почти все

Секции обёрнуты в .container каждая

Анимация появления без запасного варианта

Выделенный тариф — отдельный компонент

Смещение якоря сделано отступом у заголовка

Проверь себя

Собрать первый экран лендинга

Горячие клавиши

В редакторе кода

#Что собираем

#Шаг 1. Токены и каркас

#Шаг 2. Липкая навигация

#Шаг 3. Герой с диагональю

#Шаг 4. Карточки с ровными кнопками

#Шаг 5. Тарифы

#Шаг 6. Вопросы без скриптов

#Шаг 7. Мобильное меню

#Шаг 8. Форма записи

#Шаг 9. Появление при скролле

#Порядок, в котором это собиралось

#Грабли этого проекта

#Чек-лист сдачи

Перед отправкой заказчику

Где спотыкаются почти все

Секции обёрнуты в .container каждая

Анимация появления без запасного варианта

Выделенный тариф — отдельный компонент

Смещение якоря сделано отступом у заголовка

Проверь себя

Рядом по теме