---

1. Скопируйте styled.html и style.css из задания 5 в новую подпапку
02-css/box-model (или продолжайте в тех же файлах — по
указанию преподавателя).
2. Первым правилом файла стилей добавьте универсальное * { box-
sizing: border-box; margin: 0; } и наблюдайте, как уплотнилась
страница.
3. Создайте на странице блок <div class="info-card"> с тремя абзацами о
себе. Задайте ему ширину 480 пикселей, белый фон, рамку 2
пикселя цвета #333366 и скругление углов border-radius: 12px.
4. Подберите внутренние отступы карточки (padding: 24px) и
внешние (margin: 20px 0), чтобы текст не прилипал к рамке, а
карточка отделялась от соседних блоков.
5. Добавьте к карточке правило .info-card:hover { box-shadow: 0 4px 12px
rgba(0,0,0,0.15); } — при наведении появляется тень.
6. Оформите текст страницы: line-height: 1.6 для абзацев, отступ между
абзацами через p { margin-bottom: 12px; }, для заголовков h2 — letter-
spacing: 0.5px и text-transform: uppercase.
7. Откройте инструменты разработчика (F12 → вкладка Elements,
кнопка со стрелкой) и наведите курсор на карточку: браузер

Основы HTML и CSS · учебный практикум

23

подсветит content, padding, border и margin разными цветами.
Сфотографируйте эту схему для отчёта.