Как правильно сверстать блок?

Question

[Андрей Годунко]

Я еще совсем зелёный новичок в верстке, не давно начал верстать. И я не могу сверстать один блок. Ну как могу, но когда я начал его верстать мне очень сильно пахло говнокодом. Помогите пожалуйста с кодом, то есть как мне правильно сверстать. Блок выглядит вот так. Я учу верстку по вот этому курсу. Там автор с большим опытом, и пишет чистый код. По его примеру я смог сверстать интро. Но вот как правильно сверстать этот блок не знаю.
Вот мой файлы моего проекта, вот макет

Comments

[Ankhena]

Во-первых, у фигмы нет прав.
Во-вторых, разумнее прикрепить сюда скрин и убрать в спойлер.
В-третьих, ваш код выложить в песочницу, так чтобы можно было посмотреть и отредактировать.

Песочницы это сервисы типа codepen.io и jsfiddle.net.
Но jsfiddle сейчас из России работает только через впн, хоть я его и больше люблю для нужд Тостера (потому что он не требует регистрации и авторизации), так что его, возможно, не все смогут увидеть.

[Андрей Годунко]

Ankhena, Спасибо за введение, я если честно не знал что так надо §(*￣▽￣*)§

[Ankhena]

Андрей Годунко, да вы лучше не спасибо, а код с макетом ))

[Андрей Годунко]

Ankhena, CODEPEN_code. Селектор p_background, у него свойство position: absolute;.
Но мне это свойство не подходит, потому что надо к каждому селектору это применять. Короче, мне надо чтобы background был на нижнем слое и не реагировал на другие объекты(✿◠‿◠)

[Ankhena]

Андрей Годунко, осталось прикрепить скрин макета...
Да что ш такое-то...
Как будто это мне нужно.

[Андрей Годунко]

Ankhena, Макет

[Ankhena]

Андрей Годунко,
1. Так, а зачем вы фон чистым цветом делаете картинкой? Да ещё и контентной.
Для этого есть прекрасное свойство background-color.

2. Этого <div class="line"></div> тоже не должно быть в разметке.
Это украшение => псевдоэлементы.
Как вариант: два бордера, а псевдоэлементом закрасить уголок.
Но я бы лучше всё таки две полоски с помощью псевдо делала.
Чтобы не было заморочек при смене фона.

3. Тексту абсолют тоже не нужен.
Просто флекс на два столбца.
Или гриды.

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

[Андрей Годунко]

Ankhena, Я даже и не знал что такое семантика. И что она так важна... Я еще совсем новичок, и эти указания для меня золотые. И я переписал код
Но у меня осталась одна проблема, вот я уже переписал код . Но все же когда я вставляю картинку она не налезает на background, но почему? Я уже все сделал так как надо

[Ankhena]

Андрей Годунко, для начала так https://codepen.io/AnnaSummer/pen/oNompLx

Контейнер внутри карточки не нужен. Он где-то выше должен быть.

Картинки вставляйте прямоугольные, а углы скругляйте с помощью border-radius. Целее будете при изменениях и картинок и стилей.

Сама карточка это не div.
У вас ведь будет список таких карточек. А это ul и li.
Ну или article, если не хочется делать списком.

Если вам хочется сделать пустой div, то с вероятностью 99% вы делаете что-то не то.
В разметке должны быть только элементы имеющие смысл. Всё остальное в стилях.
Пустые элементы могут быть нужны, если это подготовленное место для вывода чего-нибудь с помощью скриптов. Либо при затейливом дизайне, когда для решения не хватает псевдоэлементов.

Если лектор на курсах делал фоны, как вы, то смотреть его больше не нужно.

А дальше уже история с адаптивом.

Я даже и не знал что такое семантика. И что она так важна...

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

[Андрей Годунко]

Ankhena, Вов, мне повезло получить такие хорошие советы от профессионала. Огромное спасибо что подсказали за семантику, и указали ключевые моменты в моем плохом коде. Я обязательно изучу теги семантики. Всё, удачи тебе и еще раз огромное спасибо))

[Ankhena]

Андрей Годунко, да, это качественный ресурс для изучения.

Answer 1

[DanielTonne]

https://codepen.io/soffrire/pen/VwrqJWw?editors=1100

Пример структуры, стили думаю сделать сможете)

Comments

[Андрей Годунко]

Спасибо большое, но я не знаю как сделать так чтобы на background карточки можно было разместить фото и текст. Мне надо свойство которое закрепит мой background для карточки, чтобы когда я вставлял текст и картинку он был на месте и так чтобы background был на нижнем слое. Потому что постоянно писать на каждом селекторе position: absolute;, ну как то не очень

[DanielTonne]

Андрей Годунко, не совсем понял что вы имеете ввиду. Покажите пример?

[Андрей Годунко]

DanielTonne, Та уже всё не надо). Мне уже помогли разобраться