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

Создай карточку персонажа

HTML + CSS в одном файле — карточка героя из игры, аниме или фильма

Пример результата
Кибер-Самурай

Кибер-Самурай

Мечник • Уровень 42

  • 92Атака
  • 78Защита
  • 85Скорость

Странствующий воин из Нового Токио. Владеет плазменной катаной и наноброней.

  • Плазменный удар
  • Невидимость
  • Нанощит

Персонаж может быть из игры, аниме, фильма или полностью выдуманный

🖼 Как добавить картинку в карточку

Чтобы вставить изображение персонажа, нужна ссылка на картинку. Загрузи изображение на бесплатный хостинг:

  1. Перейди на ru.imgbb.com — бесплатный хостинг картинок, загрузи картинку персонажа
  2. После загрузки нажми правой кнопкой мыши на картинку и выбери «Копировать URL-адрес ссылки»
  3. Вставь ссылку в тег: <img src="ССЫЛКА" alt="Имя">

💡 Можно использовать любой другой хостинг картинок или ссылку из интернета

Задание

Создай карточку персонажа в одном HTML-файле. Стили пишем в <style> внутри <head>.

  1. Каркас: <!DOCTYPE html>, <html>, <head>, <body>
  2. Метаданные <meta charset="UTF-8"> и <title>
  3. Блок <style> внутри <head> — все стили только там
  4. Тёмный фон страницы и светлый текст
  5. Карточка по центру с рамкой и скруглёнными углами
  6. Изображение персонажа <img src="..." alt="...">
  7. Имя персонажа в <h1> и класс/роль
  8. Характеристики (атака, защита и т.д.) или описание
  9. Способности/навыки — список или бейджики

Потренируйся в песочнице ниже, потом собери в Блокноте и сохрани как character.html.

Отправь в папку Домашки

⏰ Дедлайн: 20 марта, 23:59 МСК
Как сохранить файл
  1. Открой Блокнот (Пуск → набери «Блокнот»)
  2. Скопируй готовый код из песочницы или напиши заново
  3. Файл → Сохранить как… → имя character.html → тип Все файлы → кодировка UTF-8
  4. Открой двойным кликом — проверь в браузере
Песочница — собери карточку здесь
Твой код
Превью
Нажми «▶ Запустить»
чтобы увидеть карточку
Пример решения
Чеклист перед сдачей
0 / 9 выполнено
Частые ошибки