Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 19 из 53 · 12 мин
Собираем карточку из блочной модели, фона, теней и пропорций.
Вот макет карточки: фото, название, цена, кнопка. Собирай по шагам.
Собираем по шагам: каркас, оформление, детали.
.card: box-sizing: border-box, ширина 260px, padding: 16px, фон #fffaf3, скругление 16px.
Фото .card img: ширина 100%, aspect-ratio: 4 / 3, object-fit: cover, скругление 12px.
.card — тень 0 8px 24px rgb(107 62 38 / 18%); кнопка .card button — фон #6b3e26, белый текст, border: none, border-radius: 999px.
Выберите один ответ.
Зачем в карточке box-sizing: border-box?
Оформите карточку .card в style.css: размеры считаются с учётом рамки (box-sizing для всех элементов), у карточки — внутренние отступы, скруглённые углы и тень, а картинка .card__image не вылезает за ширину и держит пропорции.
Что проверим:
Проверяем состояние обучения…