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

Question

[hymmi]

Ткните носом новичка. Очень интересно как сверстать правильно вот такого плана дизайн www.quay.com.au Похоже на плиточный дизайн, но не он.

Идея в том, что сайте будут распожены по центру блоки частично перекрывающие друг друга. Буду благодарна за ссылки на мануалы и вообще любые полезные советы.

Comments

[ArturArturov]

Открыть devtools и сидеть анализировать

[Владимир]

Какая часть вызывает затруднение ?
Статический фон ? Это просто бекграунд картинкой, у двух блоков одна картинка, у двух - другая. Перекрывающиеся плитки, ну тут можно относительным позиционированием, вызывает вопрос верстка в целом, ну тогда вам на htmlbook.ru,
https://css-tricks.com/
https://www.udemy.com/design-and-develop-a-killer-...
frontender.info

[Владимир]

И еще не в тему, но избавит от многих проблем
frontender.info/a-guide-to-flexbox

А вот эту штуку лучше через гульп подключить
https://autoprefixer.github.io/

Answer 1

[Justin Bieber]

паралакс

Comments

[Владимир]

гладиолус

Answer 2

[Сергей ZSA]

А зачем тут ссылки на мануалы? Просто через инспектор происследуйте нужные вам элементы и посмотрите как они свёрстаны. Ничего сложного в сайте нет, 2 картинки с позицианированием на фоне fixed. Все остальные части (типа наложенных друг на друга блоков) просто позиционирование элементов немного нестандартное с помощью position: relative;и соответствующих top: ; left: ;

Answer 3

[Alex Sokol]

Вариант 1: position: absolute/relative;
Вариант 2: transform: translate(X/Y/3d);

И приправляете z-index(ом)

Answer 4

[Максим]

можно просто вёрстку и стили и js вытащить и потом заменить всё содержимое , если не получается сверстать