День 30 | Верстаем блок с направлениями обучения

Блок направлений обучения

Блок направлений обычно содержит карточки с разными курсами или направлениями. Каждая карточка имеет изображение, заголовок, описание и ссылку.

Работа с изображениями

Для изображений в карточках используйте object-fit:

.card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
}

/* Или если используете <img> */
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

object-fit значения:

• cover — заполняет контейнер, сохраняя пропорции (может обрезаться)
• contain — помещается целиком, сохраняя пропорции
• fill — растягивает на весь контейнер (может исказиться)

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

1. Создайте блок направлений с карточками
2. Добавьте изображения или градиенты
3. Стилизуйте карточки с hover эффектами
4. Сделайте блок адаптивным