Как сверстать эту секцию?

Question

[Syrone]

Подскажите как сверстать эту секцию.
Вроде флексами можно, но попробовав ничего не получается. Скорее всего опыта не хватает.
Догадался до того, чтобы верхнюю и нижнюю часть разделить на два блока и сделать flex-direction: column
а дальше не понимаю.

Comments

[Ankhena]

Да хоть гридом..
Поделите как хотите, потом внутри ячеек выстраивайте.
Для адаптива calc и vw в помощь (возможно, пригодятся clamp, min, max)


Ну или абсолютами, по старинке.

[ildar-meyker]

Здесь нет явной сетки. Верстайте на абсолютах.

[Syrone]

Ну я вижу следующее, как вариант и видимо единственно верным. Это текст сделать на флексах и сделать position: relative и через псевдоэлемент фигачить картинки на абсолютах. Картинку дома сделать тоже абсолютным, но позиционироваться будет от контейнера.

[Syrone]

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

[Ankhena]

Syrone, достаточно одной картинки. Зачем вам несколько? Они затейливо ведут себя при адаптиве?

[Syrone]

Ankhena, имеешь ввиду вообще не парится и сделать полностью монолитной картинкой и на фон ее нацепить?

[Ankhena]

Syrone, я не знаю, что происходит у вас макете при адаптиве или есть ли какая-то анимация у этой композиции.

А так, не вижу смысла разбивать её на несколько. С какой целью? Побольше оберток понаделать, да стилей понаписать?

[Syrone]

Ankhena, в макете адаптива нет, я уже 200 раз пожалел что начал верстать это недоразумение. Но уже куча всего сделал и жалко бросать. Анимации тоже нет. Буду очень рад если что-то интересное предложите, как именно сверстать.

[Ankhena]

Syrone, тогда пока на "десктопах" точно не вижу смысла делить картинку на части

Answer 1

[TreeFall]

Ну лично мне кажется что использовать position: absolute самый простой вариант.
Либо разделить на два блока, верх и низ, и после уже текст выставлять отступами от предшествующего к примеру.

Comments

[Syrone]

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

[TreeFall]

Syrone, ну тогда просто абсолютной позицией выставляй. Так довольно коротко будет.