Домашнее задание · 45–60 минут

Карточка любимой игры

Создай небольшую страницу об игре, которая тебе нравится или выхода которой ты ждёшь. Задание закрепляет HTML-теги, классы и изученные свойства CSS.

Результат

Готовая страница содержит заголовки, текст, изображение и кнопку. Всё содержимое собрано в карточку с фоном, границей, скруглением и отступами.

Что нужно создать

HTML

Содержание

Название игры, подзаголовок, описание, изображение и кнопка.

CSS

Оформление

Фон, цвет текста, граница, скругление, внешние и внутренние отступы.

Самостоятельно

Выбор темы

Можно взять Standoff 2, Forza или выбрать любую другую игру.

Порядок выполнения

Шаг	Что сделать	Что повторяем
1	Создай основной блок `<div class="game">`.	Тег, класс, открывающий и закрывающий теги.
2	Добавь название игры через `h1` и подзаголовок через `h2`.	Уровни заголовков.
3	Напиши два абзаца: почему игра интересна и чего ты от неё ждёшь.	Тег `p`.
4	Добавь изображение игры и заполни атрибуты `src` и `alt`.	Тег `img` и атрибуты.
5	Добавь кнопку «Хочу поиграть».	Тег `button`.
6	Оформи карточку и кнопку с помощью CSS.	Селекторы и свойства стилей.

Обязательные требования

На странице есть один заголовок h1 и хотя бы один заголовок другого уровня.
Есть минимум два абзаца p.
Есть изображение img с понятным описанием в alt.
Есть кнопка button.
Основной блок имеет класс game.
Для .game заданы border, border-radius, padding и margin.
Ширина карточки ограничена через width или max-width.
Для кнопки изменены background и color.

Каркас HTML

Можно начать с этого кода. Замени подсказки своим содержанием и самостоятельно добавь недостающие элементы.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя любимая игра</title>
  <style>
    /* Стили напиши здесь */
  </style>
</head>
<body>
  <div class="game">
    <h1>Название игры</h1>
    <h2>Короткий подзаголовок</h2>

    <!-- Добавь два абзаца, изображение и кнопку -->
  </div>
</body>
</html>

Подсказки по CSS

Не копируй готовое оформление целиком. Используй список свойств как памятку и самостоятельно выбери значения.

.game {
  background: /* цвет фона */;
  color: /* цвет текста */;
  border: /* толщина, стиль и цвет */;
  border-radius: /* радиус скругления */;
  padding: /* внутренний отступ */;
  margin: /* внешний отступ */;
  max-width: /* максимальная ширина */;
}

button {
  background: /* фон кнопки */;
  color: /* цвет текста */;
  border: /* граница */;
  border-radius: /* скругление */;
  padding: /* внутренние отступы */;
}

Задание со звёздочкой

Добавь ещё одну карточку для второй игры.
Дай карточкам общий класс game, чтобы одни стили применились к обеим.
Добавь второй класс одной из карточек и измени только цвет её границы.
Сделай так, чтобы нажатие на одну кнопку показывало сообщение через onclick="alert('...')".

Самопроверка

Все открытые теги закрыты.
Текст находится между открывающим и закрывающим тегами.
Класс в HTML записан как class="game", а в CSS выбран как .game.
У изображения указан настоящий путь в src; пустой src="" не оставлен.
Текст хорошо читается на выбранном фоне.
Граница содержит толщину, стиль и цвет, например 3px solid #6f9cff.
Страница открывается без ошибок, а кнопка видна и нажимается.

Что отправить преподавателю: сохрани работу в комнате урока. Перед отправкой открой предпросмотр и проверь каждый пункт из раздела «Самопроверка».