@sasha761

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

Подскажите пожалуйста направление в каком двигаться что б сверстать правильно , адаптивно ( до 768px ).
Первая картинка в разрешении 1920
5c9e86b6a76da986415459.png

Вторая картинка в разрешении 768
5c9e86ca4736e727469485.png

Кривую линию взял как background-image а остальные блоки спозиционировал абсолютом, но при сужении экрана все идет не так как надо (
  • Вопрос задан
  • 141 просмотр
Пригласить эксперта
Ответы на вопрос 2
Сделай полностью картинкой и не парься)
Ответ написан
@ksnk
А что сделать-то надо ? Если полностью резиновый дизайн - то для начала - сделать полностью "резиновую" кривую, с возможностью получить реперные координаты блоков. Лучше такую кривую делать на svg, так как при расширяемой картинке будет меняться ширина линии. Само решение для линии может выглядет так - по window.resize, через маленький интервал времени перерисовываем кривую на svg и вставляем ее в бякграунд.
Для блоков с текстом все страшнее - нужно расставлять блоки не точно в реперные точки, а так, чтобы блоки не налезали друг на друга. Если сам текстовый блок будет не такой, как кажется дизайнеру, а такой как хочется владельцу сайта, то придется освоить ремесло плиточника ;)
Как простой вариант - ставить текстовые блоки с репером в левом-верхнем углу, а если выходит за рамки - то правым или нижним... на том же window.resize
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы