Несколько вопросов по верстке?

Question

[EdgeLorD]

Здравствуйте, подскажите, пожалуйста, как правильно поступить в нескольких местах при верстке следующего макета:
Макет с версиями 1200px и 320px:

Верхняя часть макетов

1. Как мне кажется, основная версия должна делиться по блокам следующим образом:

Деление основной версии

Однако, на версии для телефонов вот

эти

элементы по идее должны уйти в popup меню которое будет открываться на кнопку с гамбургером.

Собственно вопрос, как корректно убрать в popup части разных блоков? Я не могу придумать ничего кроме как скрывать оригинальные элементы, а в popup добавить их копии, но разве это корректно?

2. Как правильно вставить вот эту синюю штуку с 1-2-3? Тупо через position: absolute вставить куда надо?

Картинка

3. Картинка та же что и во втором вопросе. У трех блоков есть торчащий треугольничек, вопрос так же в том, как корректно его сделать? Просто через ::before/::after закинуть .svg с треугольником в нужное место?

Answer 1

[approximate solution]

а в popup добавить их копии, но разве это корректно?

Почему нет? Если дизайн UX\UI не продумал момент правильного "складывания" элементов, то ничего нет страшного если вы сделаете display: none \ display: block на медиазапросах в разных частях кода. За это руки не отрывают.

Как правильно вставить вот эту синюю штуку с 1-2-3? Тупо через position: absolute вставить куда надо?

Я так понимаю это слайдер, на весь экран - можно его абсолютно прибить к левому краюbody, и отцентровать по вертикали left: 50%, transfrorm: translateY(-50%)

Просто через ::before/::after закинуть .svg с треугольником в нужное место?

Да, так как это элемент украшения - то только через псевдоэлементы.

Comments

[EdgeLorD]

Спасибо за ответы! Но по поводу второго, я сам не особо понимаю что это за элемент, мне почему-то кажется это просто декорация

[approximate solution]

EdgeLorD, Либо больше похоже на таймлайн, обычно логика видна когда видиш полный макет со всеми переходами и эффектами, которые показывает дизайнер. Т.е дизайн-код, в котором он описывает все эфекты пошагово.

[Aidrei]

1) Можно решить не через display: none \ display: block а сдвигать и выдвигать при помощи transform: translateX и задать transition. Тогда при клике на гамбургер навигация будет красиво выезжать с боку.

2, 3) можно решить при помощи css второе - во флексе 5 блоков три из них с цифрами(закруглены) и два линии всё отцентрировать, а третье - просто через ::before который при помощи css сделать треугольником.