Рабочие фрагменты лендинга

В каждом примере сверху живой результат, снизу — код. Фрагменты идут по возрастанию: шапка → hero → карточки → footer → всё вместе.

1. Header — шапка с логотипом и навигацией

Шапка прижимает логотип влево, ссылки вправо. Тёмная полоса на всю ширину, контент по центру.

CodeStart

📄 lesson-21/header.html

<header class="site-header">
  <a class="logo" href="#">CodeStart</a>
  <nav aria-label="Главная навигация">
    <a href="#">Курс</a>
    <a href="#">Цены</a>
    <a href="#">Контакты</a>
  </nav>
</header>

📄 lesson-21/header.css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.5rem;
  background: #0f766e;
  color: #ecfeff;
}

2. Hero — главное предложение и кнопка

Hero — витрина страницы: крупный заголовок, короткое описание и одна заметная кнопка.

HTML & CSS intensive

Соберите первый статичный landing

Освойте структуру, отступы, карточки и аккуратную визуальную иерархию.

Начать

📄 lesson-21/hero.html

<section class="hero">
  <div class="container">
    <p class="eyebrow">HTML & CSS intensive</p>
    <h1>Соберите первый статичный landing</h1>
    <p>Освойте структуру, отступы, карточки и иерархию.</p>
    <a class="button" href="#signup">Начать</a>
  </div>
</section>

📄 lesson-21/hero.css

.hero {
  padding-block: 5rem;
  background: #f1f5f9;
  text-align: center;
}

.button {
  display: inline-block;     /* можно задать padding кнопке-ссылке */
  padding: 0.8rem 1.6rem;
  background: #0f766e;
  color: #fff;
  border-radius: 8px;
}

3. Карточки преимуществ (без Flexbox)

До изучения Flexbox карточки складываются вертикально. Каждая — это блок с padding и рамкой. Сетку в ряд добавим в следующей фазе.

⚡ Быстрый старт

Первая страница уже на первом занятии.

🧱 Чистая структура

Семантика и аккуратные отступы с самого начала.

🎯 Практика

Каждый урок завершается мини-проектом.

📄 lesson-21/features.html

<section class="features">
  <article class="feature-card">
    <h3>⚡ Быстрый старт</h3>
    <p>Первая страница уже на первом занятии.</p>
  </article>
  <article class="feature-card">...</article>
  <article class="feature-card">...</article>
</section>

📄 lesson-21/features.css

.feature-card {
  display: block;
  padding: 1.2rem;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
}

4. Footer — подвал с контактами

Footer закрывает страницу: контакты, ссылки, копирайт. Тёмный фон визуально отделяет его от контента.

📄 lesson-21/footer.html

<footer class="site-footer">
  <p class="brand">CodeStart</p>
  <p>hello@codestart.dev · +7 999 000-00-00</p>
  <p class="copy">© 2026 CodeStart. Все права защищены.</p>
</footer>

📄 lesson-21/footer.css

.site-footer {
  padding: 1.4rem 1.5rem;
  background: #334155;
  color: #e2e8f0;
}

5. Всё вместе — мини-лендинг в контейнере

Собираем фрагменты в одну страницу. Контейнер центрирует контент, секции идут сверху вниз.

CodeStartМеню

Первый landing

Начать

⚡ Быстрый старт

🧱 Чистая структура

📄 lesson-21/index.html

<header class="site-header">...</header>
<main>
  <section class="hero"><div class="container">...</div></section>
  <section class="features"><div class="container">...</div></section>
</main>
<footer class="site-footer">...</footer>

Эксперимент: открой любой пример в DevTools (F12) и поменяй padding секции или background hero — результат обновится мгновенно.

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

⚡ Кратко

Рабочие фрагменты лендинга

1. Header — шапка с логотипом и навигацией

2. Hero — главное предложение и кнопка

Соберите первый статичный landing

3. Карточки преимуществ (без Flexbox)

⚡ Быстрый старт

🧱 Чистая структура

🎯 Практика

4. Footer — подвал с контактами

5. Всё вместе — мини-лендинг в контейнере

Первый landing

Навигация