Верстка нестандартного шаблона. Как реализовать?

Question

[Сергей Васенин]

Доброго всем дня. Положил давно глаз на такого рода макеты и решил сверстать на флексах. Но что то не совсем получается хотелось бы узнать совета по поводу каркаса данного макета.

Comments

[drawnofmymind]

aside отдельно flex-direction column)
main flex-сами раскидываешь на две колонки и ставишь flex-basis: 45% для каждой (остальное space-between Раздвинет)
Ну это прикидка)

[Сергей Васенин]

drawnofmymind, я изначально задал main всему контейнеру потом через колом поделил на 2 части и когда начал позиционировать блоки правой менюшки то начались какие то траблы

[drawnofmymind]

Сергей Васенин, сколько контейнер у тебя?)

[Сергей Васенин]

drawnofmymind, wrap 100% боковая nav 10% а main 90%

Answer 1

[Арсений Матыцин]

Чтобы в принципе верстать макеты, а нестандартного тут ничего нет (вообще, какие стандарты-то?) тебе необходимо уметь видеть его логические части.

В данном примере есть шапка, которая к карусели никак не относится, кроме того, что «лежит» поверх.

Сама карусель это другой уровень, как я понимаю презентация во весь экран со сменой снизу вверх, следовательно, у тебя слайды с навигацией слева, абсолютно спозиционированной поверх всех слайдов, ведь тебе надо отобразить и сменить весь слайд безболезненно, внутри него уже простая колоночная разбивка с отступами + абсолютно спозиционированный блок для запуска видео.

Впрочем, самый безболезненный путь → сверстать все на абсолютном позиционировании. А потом обосраться на разных экранах. Поэтому да, флексы\гриды, суть неважно, это необходимое решение + то, что я описал выше.

Ну и немного приправь это дело JS. Где-то в интернетах, я знаю точно, есть уже готовый плагин для такого формата слайдов.

Answer 2

[akopniko12]

На картинке карусел блоков. Вам нужно подобрать соответстсвующий Jquery плагин.

Comments

[Сергей Васенин]

Full page scrol пойдет ?