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

Question

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

Я не могу никак сверстать блок. Мне надо зафиксировать background, но я не знаю как это сделать. Я попытался, но у меня получился плохой код. Я уже мучаюсь над этим блоком 2 день, но уровень моих знаний не дает мне его правильно сверстать. Прошу кода в котором этот блок правильно свёрстанный

Comments

[Ankhena]

Прошу кода в котором этот блок правильно свёрстанный

Я же вам его уже давала.

Куда потерялся?
Что не так?

[Ankhena]

Вот же
https://qna.habr.com/q/1122654
https://codepen.io/AnnaSummer/pen/oNompLx

А у вас опять пустые блоки и всё о чем я писала, а вы кивали..

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

Ankhena, Я просто не могу до конца понять ваш код. Я на могу его выровнять его по центру, и в некоторых моментах я ни как ни могу его понять

[Ankhena]

Андрей Годунко, кого по чьему центру?
Вы бы макет всей страницы показали.

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

Ankhena, Макет. Я не могу отступить от интро никак. padding-top не работает. Код. Пока что без семантики. Просто ваш уровень верстки настолько велик что я не понимаю весь код

[Ankhena]

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

Рекомендация в любом случае: обводите блоки рамочками, так будет понятно что работает, а что нет.

Если вам нужен отступ между секциями, то:
- Это может быть margin. Предварительно нужно прочитать про "схлопывание и выпадение вертикальных margin"
- А может быть и padding, если фон цветной.

Сейчас вполне разумно поступить, например так:
Карточек в макете у вас несколько, а сколько будет на реальном сайте вообще не известно.
Имеет смысл обернуть их в секцию (тег <section>)
И уже её задать верхний паддинг.

Важно: не забывайте проверять код валидатором https://validator.w3.org/nu/
Сейчас в нем есть ошибки.

Для переноса текста используйте <br>

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

Ankhena, Мне надо чтобы заголовок Matrix 4, был выше но я не знаю как это сделать. Я искал в интернете свойство антагонист педдингу, но такового нет. И как мне сделать полоски фиксированными, ведь когда я удаляю текст, полоски тоже уменьшаются. I true

[Ankhena]

Андрей Годунко, зачем городить огород, если можно просто вынести заголовок из блока с полосками.
https://codepen.io/AnnaSummer/pen/vYWMXpK

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

Ankhena, Короче, посоветуй пожалуйста хороший бесплатный курс по вёрстке

[Ankhena]

Андрей Годунко, платный знаю, бесплатный нет.
Какая-то часть тренажеров бесплатна у HTML Academy.

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

Ankhena, Я хотел учить html/css прямо в вёрстке но вижу что так у меня не получается(

[Ankhena]

Андрей Годунко, https://qna.habr.com/q/336726#answer_849520

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

Ankhena, Да, наверно я буду верстать тот самый макет что и человек в этом видео. Как бы буду верстать в месте м ним то что он, думаю так будет наилучше. А твое мнение какое? Лучшее изучать какой либо курс html/css. Либо курс где верстают?

[Ankhena]

Андрей Годунко,

А твое мнение какое?

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

Лучшее изучать какой либо курс html/css. Либо курс где верстают?

Не осознала в чем разница.
Если первое это то, где вам зачитывают справочник со свойствами и тегами, то опять же: если на слух вам удобнее, то почему нет. По-моему, читать быстрее.