13. Фон и блоки

Сегодня мы сделаем наш сайт ещё красивее — добавим фон и создадим большие цветные блоки, как на современных лендингах!

Блоки на сайте — как страницы в комиксе: у каждой своя сцена, свои цвета и настроение!

Что такое секции сайта

Сайт можно разделить на части — секции. Обычно они обозначаются тегом <section>. Например:
  • Главный экран (hero) — где приветствие и заголовок.
  • Про меня — рассказ о себе или о проекте.
  • Галерея — картинки или достижения.

HTML: создаём секцию


<section class="hero">
  <h2>Добро пожаловать!</h2>
  <p>Это мой первый сайт. Мне нравится учиться веб-разработке!</p>
</section>

Секция — это как коробка, в которой лежит один кусочек сайта.

CSS: добавляем фон

Теперь сделаем, чтобы секция выглядела красиво.

.hero {
  background-image: url('bg.jpg'); /* путь к фону */
  background-size: cover;           /* растягивает картинку на весь блок */
  background-position: center;      /* ставит по центру */
  color: white;                     /* текст белый */
  padding: 60px;                    /* внутренние отступы */
  text-align: center;               /* выравнивание по центру */
  border-radius: 16px;              /* скруглённые углы */
}

Если у тебя нет картинки, можешь использовать цвет вместо изображения: 


.hero {
  background-color: #4CAF50;
  color: white;
}

Пример нескольких блоков

Попробуй сделать три секции подряд:

<section class="hero">
  <h2>Привет!</h2>
  <p>Это мой сайт.</p>
</section>
<section class="about">
  <h2>Обо мне</h2>
  <p>Я люблю кодить и рисовать!</p>
</section>
<section class="gallery">
  <h2>Мои работы</h2>
  <img src="cat.jpg" alt="Котик">
  <img src="robot.jpg" alt="Робот">
</section>

А теперь добавим немного стиля: 


.about {
  background: #f0f0f0;
  color: #222;
  padding: 40px;
  border-radius: 12px;
}
.gallery {
  background: linear-gradient(45deg, #2196F3, #00BCD4);
  color: white;
  padding: 40px;
  border-radius: 12px;
}
.gallery img {
  width: 150px;
  border-radius: 10px;
  margin: 10px;
}

Теперь у тебя настоящий цветной сайт!

Добавляем анимацию

Чтобы фон выглядел живее, можно добавить эффект наведения: 

.hero:hover {
  transform: scale(1.02);
  transition: 0.3s;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}

При наведении блок чуть увеличивается и появляется подсветка — как будто дышит!

Совет

Выбирай фон, чтобы текст на нём было видно! Если фон тёмный — делай светлый текст. Если фон светлый — делай тёмный текст.

Мини-проект

Сделай сайт из трёх секций:
  • Hero — Приветствие с красивым фоном (например, небо, космос или луга).
  • About — Короткий рассказ о себе.
  • Gallery — Картинки твоих любимых персонажей.

Пример: 


<section class="hero">
  <h1>Привет! Я Лиза </h1>
  <p>Мне 11 лет, и я учусь создавать сайты!</p>
</section>
<section class="about">
  <h2>Про меня</h2>
  <p>Я люблю котиков и изучаю HTML, CSS и JavaScript.</p>
</section>
<section class="gallery">
  <h2>Мои любимые картинки</h2>
  <img src="cat.jpg" alt="Мой котик">
  <img src="game.jpg" alt="Любимая игра">
</section>

Проверь себя

  • Какой тег используется для создания секции?
  • Как задать фоновое изображение?
  • Что делает свойство background-size: cover?

Забавный факт

На сайтах NASA и Disney тоже используют фоны и секции, чтобы каждая страница выглядела как отдельная история!

Главное запомни

  • <section> делит сайт на блоки.
  • Фон можно задать цветом или картинкой.
  • background-size: cover — заставляет фон красиво растянуться на весь блок.
  • Можно использовать градиенты и плавные эффекты для красоты!
Следующий урок → Немного JavaScript