Домашнее задание

Мини-проект 3: сверстайте адаптивную страницу каталога с навбаром, hero-блоком (центрированный заголовок), flex-сеткой карточек и sticky-footer.

Целевой макет: навбар + hero + сетка карточек + sticky-footer

Подготовка окружения

Файлы

Создайте папку lesson-25/ с файлами index.html и styles.css. Подключите CSS в <head>.

Разметка

Соберите каркас: .page → header.navbar, main.site-main (внутри hero и .card-list), footer.

Flexbox

Примените рецепты: навбар (space-between), hero (центрирование), карточки (wrap + gap), страница (column + min-height + flex:1).

Проверка

Откройте файл в браузере, сужайте окно: карточки должны переноситься, footer оставаться внизу при любом объёме контента.

HTML-каркас

📄 lesson-25/index.html

<body>
  <div class="page">
    <header class="navbar">
      <strong>Shop</strong>
      <nav class="menu"><a>Каталог</a> <a>Контакты</a></nav>
    </header>

    <main class="site-main">
      <section class="hero"><h1>Каталог товаров</h1></section>
      <section class="card-list">
        <article class="card">Товар 1</article>
        <article class="card">Товар 2</article>
        <article class="card">Товар 3</article>
        <article class="card">Товар 4</article>
      </section>
    </main>

    <footer class="site-footer">© 2025 Shop</footer>
  </div>
</body>

CSS со всеми рецептами

📄 lesson-25/styles.css

/* sticky-footer: колонка во всю высоту */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1 0 auto; }

/* навбар: лого ← → меню */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.menu { display: flex; gap: 1rem; }

/* hero: центр по обеим осям */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 160px;
}

/* сетка карточек: перенос + промежутки */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card { flex: 1 1 200px; }

Проверка в VS Code

Откройте index.html правым кликом → Open with Live Server (или просто двойным кликом в браузере).
F12 → выберите .card-list, включите flex-overlay и проверьте перенос при сужении окна.
Удалите часть карточек: footer должен остаться внизу окна — значит sticky-footer собран верно.

Связь с разделами: рецепты разобраны в теории и показаны вживую в примерах; если что-то «не работает» — загляните в ошибки.

Урок 25. Домашнее задание: Практические шаблоны Flexbox

⚡ Кратко