День 16 | Верстаем баннер

Hero-секция (баннер)

Hero-секция (или просто "баннер") — это главный блок на странице, который находится сразу после шапки. Это первое, что видит пользователь, поэтому он должен быть привлекательным и информативным.

Что обычно в hero-секции?

• Главный заголовок (H1) — основное сообщение
• Подзаголовок или описание — дополнительная информация
• Призыв к действию (CTA) — кнопки "Начать", "Узнать больше"
• Фоновое изображение или градиент
• Иногда — изображение или иллюстрация

HTML структура hero-секции

Создайте структуру в src/index.html:

<section class="hero">
  <div class="hero__overlay"></div>
  <div class="container">
    <div class="hero__content">
      <h1 class="hero__title">Создаем современные сайты</h1>
      <p class="hero__text">Профессиональная верстка с использованием современных технологий</p>
      <div class="hero__buttons">
        <button class="btn btn-primary">Начать</button>
        <button class="btn btn-secondary">Узнать больше</button>
      </div>
    </div>
  </div>
</section>

Разберём структуру:

• <section class="hero"> — секция с классом hero (hero означает "герой", главный элемент)
• <div class="hero__overlay"> — затемняющий слой поверх фона (чтобы текст был читаемым)
• <div class="container"> — контейнер для ограничения ширины контента
• <div class="hero__content"> — обёртка для текстового контента
• <h1> — главный заголовок страницы (должен быть только один на странице для SEO)

Работа с фоновыми изображениями

Есть несколько способов добавить фон к hero-секции:

Способ 1: Градиент (самый простой)

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Что такое linear-gradient? Это функция CSS, которая создаёт плавный переход между цветами.

Параметры:

• 135deg — направление градиента (135 градусов = диагональ слева вниз направо вверх)
• #667eea 0% — начальный цвет (синий) в начале (0%)
• #764ba2 100% — конечный цвет (фиолетовый) в конце (100%)

Способ 2: Фоновое изображение

.hero {
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Разберём свойства:

• background-image — путь к изображению
• background-size: cover — изображение покрывает весь элемент, сохраняя пропорции
  • cover — покрывает весь элемент (может обрезаться)
  • contain — помещается целиком (могут быть пустые области)
  • 100% 100% — растягивает на весь элемент (может исказиться)
• background-position: center — позиционирование изображения (center, top, bottom, left, right)
• background-repeat: no-repeat — не повторять изображение

Способ 3: Градиент + изображение

Часто используют градиент поверх изображения для затемнения:

.hero {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center;
}

Градиент накладывается поверх изображения, создавая эффект затемнения.

Overlay (затемняющий слой)

Overlay — это полупрозрачный слой поверх фона, который делает текст более читаемым. Есть два способа создать overlay:

Способ 1: Отдельный элемент (более гибкий)

.hero {
  position: relative; /* Важно! Для позиционирования overlay */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2; /* Контент поверх overlay */
}

Разберём позиционирование:

• position: relative на .hero — создаёт контекст позиционирования для дочерних элементов
• position: absolute на .hero__overlay — позиционирует элемент относительно ближайшего родителя с position: relative
• top: 0; left: 0; right: 0; bottom: 0 — растягивает overlay на весь родитель
• z-index — определяет порядок наложения:
  • Фон hero — z-index: 0 (по умолчанию)
  • Overlay — z-index: 1 (поверх фона)
  • Контент — z-index: 2 (поверх overlay)

Способ 2: Псевдоэлемент (менее гибкий, но без лишнего HTML)

.hero {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
}

::before — псевдоэлемент, который создаётся перед содержимым элемента. Работает так же, как отдельный элемент.

Позиционирование контента

Контент в hero-секции обычно центрируется. Используем Flexbox:

.hero {
  position: relative;
  min-height: 600px; /* Минимальная высота */
  display: flex;
  align-items: center; /* Вертикальное центрирование */
  justify-content: center; /* Горизонтальное центрирование */
}

Почему min-height, а не height? min-height позволяет секции растягиваться, если контента много. height фиксирует высоту, и контент может не поместиться.

Стилизация текста

Текст в hero-секции должен быть крупным и читаемым:

.hero__title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero__text {
  font-size: 20px;
  margin-bottom: 40px;
  opacity: 0.9;
  line-height: 1.6;
}

Советы по типографике:

• Заголовок должен быть в 2-3 раза больше обычного текста
• Используйте line-height: 1.2 для заголовков (плотнее)
• Используйте line-height: 1.5-1.6 для текста (читабельнее)
• opacity: 0.9 делает текст чуть приглушённым (визуальная иерархия)

Кнопки (CTA - Call To Action)

CTA кнопки должны привлекать внимание. Обычно делают две кнопки:

• Primary (основная) — яркая, привлекает внимание
• Secondary (вторичная) — менее заметная, но видимая

.btn-primary {
  background: #F36049;
  color: white;
}

.btn-primary:hover {
  background: #e04d38;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(243, 96, 73, 0.4);
}

Hover эффекты:

• transform: translateY(-2px) — поднимает кнопку на 2px (эффект "поднятия")
• box-shadow — добавляет тень (усиливает эффект поднятия)

Анимация появления

Анимация делает hero-секцию более живой. Используем CSS анимацию:

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  animation: fadeInUp 0.8s ease-out;
}

.hero__text {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero__buttons {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

Разберём анимацию:

• @keyframes fadeInUp — определяет анимацию:
  • from — начальное состояние (прозрачный, сдвинут вниз на 30px)
  • to — конечное состояние (непрозрачный, на своём месте)
• animation: fadeInUp 0.8s ease-out:
  • fadeInUp — название анимации
  • 0.8s — длительность
  • ease-out — функция времени (начинается быстро, заканчивается медленно)
• 0.2s — задержка (текст появляется через 0.2 секунды после заголовка)
• both — применяет стили и до, и после анимации (элемент остаётся видимым после анимации)

Практическое задание

1. Создайте HTML структуру hero-секции
2. Добавьте градиентный фон или фоновое изображение
3. Создайте overlay для затемнения фона
4. Стилизуйте заголовок и текст (используйте переменные из _variables.scss)
5. Создайте две кнопки (primary и secondary)
6. Добавьте hover эффекты для кнопок
7. Добавьте анимацию появления элементов
8. Сделайте секцию адаптивной (на мобильных текст должен быть меньше)
9. Используйте Flexbox для центрирования контента

Что дальше?

Отлично! Hero-секция готова. В следующих уроках мы изучим CSS анимации подробнее и добавим больше интерактивности нашим элементам.