Используемые Свойства
flex-wrap: wrap; Это свойство позволяет flex-элементам переноситься на новую строку, если они не помещаются в одну линию. Это может быть полезно для адаптивности и управления расположением карточек
position: absolute; Используется для позиционирования текста поверх изображения. Без него текст будет отображаться под или рядом с изображением.
position: relative; Необходимо для родительского элемента (в данном случае .offer-banner_card). Это позволяет абсолютному дочернему элементу (overlay-text) позиционироваться относительно родителя.
Создал новую секцию, которая идет под другой. Сюда прописал два <div> класса, один относящийся к тексту, другой чтобы наложить текст внутри карточек.
CSS Стили
.offer-banner:
добавляет отступы по 150 пикселей сверху и снизу.
.offer-banner .container:
display: flex; - позволяет использовать flexbox для расположения дочерних элементов.
justify-content: space-between; - равномерно распределяет дочерние элементы по горизонтали, оставляя равные интервалы между ними.
flex-wrap: wrap; - позволяет переносить элементы на новую строку при необходимости.
gap: 10px; - устанавливает расстояние между соседними элементами в 10 пикселей.
.offer-banner_card:
position: relative; - позволяет абсолютному дочернему элементу позиционироваться относительно этого родителя.
width: 682px; - фиксированная ширина карточки
overflow: - управляет отображением содержимого блочного элемента, а hidden используется для того, чтобы скрыть содержимое элемента, которое выходит за его границы.
border-radius: 10px; - добавляет закругленные углы.
.offer-banner__overlay:
Это накладывает текст поверх изображения на расстоянии указанных координат от верхнего левого угла родительской карточки.
.offer-banner_img:
Это масштабирует изображение так, чтобы оно полностью заполнило доступное пространство, сохраняя при этом пропорции.
.offer-banner__title:
Устанавливает размер шрифта заголовка в 48 пикселей и добавляет небольшой отступ вниз.
.offer-banner__desc:
Устанавливает размер шрифта описания в 40 пикселей, выравнивает текст по левому краю и делает его прозрачным на уровне 0.7 для лучшей читаемости над фоном изображения.
.offer-banner__text-wrapper:
Добавляет внутренние отступы слева и справа к блоку с текстом, но эти стили не используются напрямую в предоставленном примере код
Важно знать и помнить
У каждой секции должен быть заголовок — это улучшает структуру документа и облегчает навигацию по содержанию.
Вывод
В результате применения этих стилей удалось успешно настроить карточки с размещением текста внутри фотографий без искажений пропорций или потери читаемости над фоном изображений.
Однако еще остается работа над правильным оформлением кода.