Условие
В style.css есть карточка .card, бейджи .badge-new (NEW) и .badge-sale (−20%), а также слой .overlay. NEW - в правый верх (отступ 12px), −20% - в левый низ (отступ 12px), overlay - на всю карточку и под бейджами. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что в HTML — какой класс отвечает за что
Разметка уже готова во вкладке index.html. Менять её не нужно — только стили. Какой класс отвечает за карточку, слой, NEW, −20% и текст:
-
.cardсерая карточка (блок товара) -
.overlayполупрозрачный слой на всю карточку -
.badge-newкрасный бейдж NEW -
.badge-saleбирюзовый бейдж −20% -
pтекст «Карточка товара»
Что нужно сделать
- Сделайте карточку точкой отсчёта для бейджей и слоя.
- Поставьте NEW в правый верх, а −20% - в левый низ (отступ 12px).
- Растяните
.overlayна всю карточку черезinset: 0(не бейджи!) так, чтобы слой оставался под бейджами.
Подсказка для новичка
Родитель задаёт точку отсчёта, бейджи и слой «вынимаются» из потока и ставятся по углам / на всю площадь. Имена свойств - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Бейджи по углам · слой на всю карточку
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; внутри - карточка.card.<div class="card">- серая карточка-родитель.<div class="overlay">- слой поверх карточки (под бейджами).<span class="badge-new">/.badge-sale- бейджи NEW и −20%.<p>- текст «Карточка товара» (уже сz-index).position: relative/absolute- точка отсчёта и позиционирование.top/right/bottom/left/inset- отступы и растягивание.z-index- кто выше по слоям.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор подробнее: всё, что есть на странице.
Файл style.css - что уже написано
В старте есть правила для
.card,
пустой блок
.overlay,
общие стили бейджей, отдельные фоны
.badge-new
/
.badge-sale
и стили
p.
Вам нужно добавить позиционирование.
Правило .card
-
width: 280px/height: 180px- размер карточки. -
padding: 20px- внутренний отступ. -
background: #94a3b8- серо-голубой фон. -
border: 2px solid #334155- тёмная рамка. -
box-sizing: border-box- ширина/высота включают padding и border (удобнее считать размер). -
overflow: hidden- обрезать содержимое, которое вылезло за края карточки. -
Сюда же нужно добавить
position: relative- точка отсчёта для absolute-потомков.
Правила бейджей и .overlay
-
.overlayв старте пустой. В решении:position: absolute,inset: 0(растянуть на всю карточку),background: rgba(15, 23, 42, 0.45)(полупрозрачный тёмный слой),z-index: 1(под бейджами и текстом). -
.badge-new, .badge-sale- общие стили:display: inline-block,width/height: max-content(бейдж не растягивается на всю карточку),padding: 4px 10px,color: #fff,font-size: 12px,font-weight: 700. -
.badge-new- фон#e53935; в решении ещёposition: absolute,top: 12px,right: 12px,z-index: 2(правый верхний угол). -
.badge-sale- фон#0f766e; в решенииposition: absolute,bottom: 12px,left: 12px,z-index: 2(левый нижний угол).
Правило p
-
position: relativeиz-index: 2- текст выше overlay (слой сz-index: 1). -
margin: 56px 0 0- большой отступ сверху, чтобы подпись не наезжала на бейдж NEW. -
font-family: Arial, sans-serif/color: #fff- шрифт и белый цвет.
Позиционирование в этой задаче
Родителю
.card
-
relative.
Бейджам и
.overlay
-
absolute,
чтобы считать отступы от карточки, а не от всей страницы.
inset: 0
- короткая запись
top/right/bottom/left: 0.
z-index
решает, кто поверх: overlay (1), бейджи и текст (2).
Коротко:
relative
на карточке,
absolute
на бейджах и overlay, углы через
top/right
и
bottom/left
по 12px, overlay -
inset: 0.
Сверьте с вкладкой
«Результат».