Попадаются иногда такие макеты, что фантазии не хватает как всё это интерактивно выверстать. Кто что посоветует? Верстаю на бустрапе, но есть пара блоков такого формата, точно не колоночного.
Конечно лучший совет это оторвать руки дизайнеру, но как-то надо выкручиваться, с блоками более менее понятно, можно и абсолютным позиционированием, можно и падингами, маргинами, а вот черточки, чтобы при адаптивности не рушилась система.
Наверное, самый простой вариант:
Текст абсолютами с координатами в %, при необходимости calc.
Текст - нумерованный список.
Цифры - counter-reset, counter-increment.
Остальное одним фоном. Хорошо бы, если бы этот фон оказался SVG, чтобы не делать 100500 экземпляров картинки.
Если хочется, можно прямоугольники выковырять из фона и поставить как ::after к элементам списка.
Можно и гридами замутить, если правильную кратность сетке задать. Только смысл...
На мелких экранах перестраивать во что-нибудь по-проще. Типа в столбик, но со смещениями.
Отрывать руки дизайнеру не стоит.
Сложные макеты это повышение вашей квалификации.
"Верстать" одинаковые сайты по одинаковой сетке под копирку могут и школьники.
Ну пускай дизайнер рисует как он видит адаптацию этого дела хотяб для трёх основных размеров и от туда уже плясать.
Иначе влепи картинкой с width: 100% и вёрстка готова.)
Абсолютное позиционирование, задать конкретную высоту контейнера, top left width и height указывать в процентах (height только для тех элементов которые не должны рушатся - стрелки линии и т.п.), тогда стрелки и линии будут на своих местах, + 3 телеги медиа-запросов. И как подметили выше, для мобилки отдельный дизайн нужен.
WebforSelf, За это проценты буду отвечать и все будет пропорционально складываться, а медиа-запросы нужны чтобы просто подрихтовать если что-то в друг съедет.
WebforSelf, кстати, вместо указания конкретной высоты можно картинку в контейнер кинуть, как зайдний фон, тогда при изменении ширины она будет пропорционально менять высоту, типа:
<div class="some-wrapper">
<img src="..." class="some-bg"/>
<div class="some-content">тут весь контент</div>
</div>
Руководитель frontend направления, предприниматель
1. Enlish club это, бесспорно, круто.
2. Бутстрап не панацея и не надо пытаться под него все подогнать.
3. Применяй mobile-first подход + бэм (номер и позиция «листка» более чем легко описываются модификаторами).
4. На десктопе делай либо абсолютное, либо гриды.
5. Декоративные рисульки можно как фоновой картинкой (которой на мобилке быть не должно, ну или должна быть другая), но лучше спозиционировать их относительно блоков-пунктов.
6. Со стрелками и пунктирными линиями да, придется заморочиться, но так как это все же секция, которую врядли будут по контенту дергать каждый день, то рассчетами можно пренебречь и задать проценты и соотношения. Ну и SVG для упрощения жизни.
В целом ничего сложного, просто достаточно много надо описать, относительно, если бы был какой-то типовой нахрен приевшийся блок.
Простой
Простой
