На чем лучше сверстать данный макет?

Question

[WebforSelf]

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



Весь макет построен на различных угловых блоках.

Буду признателен за советы, кто на чем верстает и насколько удобно. Понятное дело что можно на media сделать, но думаю что удобных инструментов очень много.

Comments

[Ankhena]

на чем посоветуйте сверстать?

Не надо таких провокаций в вопросах.

@media вам тоже понадобится.
А также флексы, позиционирование, псевдоэлементы, градиенты.

Спойлер: несколько намеков

Answer 1

[Алекс Глебов]

Я бы все делал на стандартной сетке, это скелет верстки который не сломается в любом браузере.

прямоугольниками выделил колонки

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

тык

Answer 2

[Владимир Коротенко]

Как по мне сверстайте с z index и абсолютным позиционированием.

Контент и подвал верстаете обыкновенным бутстрапом, фото заверстываете с абсолютным позиционированием и clip css

Answer 3

[Тарас Шульга]

Позиционирование + flex. Ну а по сетке? Слава smart-grid от Лаврика

Comments

[jeruthadam]

Слава smart-grid от Лаврика

фейспалм

[Тарас Шульга]

jeruthadam, причина?)

Answer 4

[Sergey4562]

Если не требуется дальнейшая посадка на CMS - на тильде. Быстро по времени, минимум трудозатрат и никакого головняка.