Если это swiper, то нужно убрать у слайдов высоту 100%.
Если не swiper, то смотреть, что в стилях и почему они стали такой высоты.
Может, сами слайды одинакового размера, но внутри есть доп обертка.
Или еще что-нибудь.
По скрину этого не определить.
Контейнер внутри карточки не нужен. Он где-то выше должен быть.
Картинки вставляйте прямоугольные, а углы скругляйте с помощью border-radius. Целее будете при изменениях и картинок и стилей.
Сама карточка это не div.
У вас ведь будет список таких карточек. А это ul и li.
Ну или article, если не хочется делать списком.
Если вам хочется сделать пустой div, то с вероятностью 99% вы делаете что-то не то.
В разметке должны быть только элементы имеющие смысл. Всё остальное в стилях.
Пустые элементы могут быть нужны, если это подготовленное место для вывода чего-нибудь с помощью скриптов. Либо при затейливом дизайне, когда для решения не хватает псевдоэлементов.
Если лектор на курсах делал фоны, как вы, то смотреть его больше не нужно.
А дальше уже история с адаптивом.
Я даже и не знал что такое семантика. И что она так важна...
Да, потому что совсем не все, кто пользуется сайтами могу или умеют смотреть глазами.
Это и люди с ограниченными возможностями и читалки, которые им читают и разнообразные роботы.
Андрей Годунко,
1. Так, а зачем вы фон чистым цветом делаете картинкой? Да ещё и контентной.
Для этого есть прекрасное свойство background-color.
2. Этого <div class="line"></div> тоже не должно быть в разметке.
Это украшение => псевдоэлементы.
Как вариант: два бордера, а псевдоэлементом закрасить уголок.
Но я бы лучше всё таки две полоски с помощью псевдо делала.
Чтобы не было заморочек при смене фона.
3. Тексту абсолют тоже не нужен.
Просто флекс на два столбца.
Или гриды.
4. Почитайте немножко про семантику.
Какие теги для заголовков, какие для текста и т.д.
ambisinister One, ну предположим, вы найдете верхнюю левую закорюку в html-сущностях и остальные правильной толщины...
Сколько псевдоэлементов вам нужно будет сделать и прибить абсолютом? Некоторые там ещё двоятся.
Но вы в праве считать, что это короче и проще, чем свойство background.
Нужно посмотреть весь макет и понять, то что помечено красными стрелками повторяется где-то ещё или нет и как ведет себя при адаптиве.
И решить, можно ли их слить вместе с мужиком.
Если нет, то можно ли их слить в одну SVG.
Если снова нет, то множественный фон с нужными bg position.
Мужик псевдоэлементом (ну или тоже фоном, как вам удобнее).
"Блюр" - обычно это какие-то размытые SVG.
Ставите их на фон.
Если сайт будет сильно тормозить от таких SVG, то заменить на png и не забыть про ретину и разные размеры.
тут