Урок 21. Решения: Основы макетирования и статичный landing

Пошаговое решение

1. Сначала пишем смысловую HTML-структуру (header → main с секциями → footer).
2. Добавляем общий контейнер и центрируем его.
3. Настраиваем единый вертикальный ритм секций.
4. Добавляем визуальные акценты: фон hero, кнопку, карточки, sticky-шапку.

Результат сборки

Те же CSS-правила, применённые к каркасу, дают такой лендинг:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.container {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;          /* иначе контент просвечивает сквозь шапку */
}

.hero,
.features,
.cta {
  padding-block: 4rem;       /* единый вертикальный ритм */
}