Как бы вы сверстали эти элементы?

Question

[GoodProject]

Доброе всем.

Как бы вы сверстали эти элементы? Сайт адаптивный.

1.)
Книжку и форму. Книжку отделять от бэкграунда или нет? Как её расположить в "потоке", зафлоить весь блок?! Притом у книжки свой фон.. т.е уже зафлоатить не получится ибо фон книги заходит под текст.. хм

Притом форма больше блока-секции как её лучше впихнуть внутрь всей секции? Абсолютным позиционированием?



2.)
Тоже интересный вариант, бэкграунд картинкой наложить, и эти 2 секции как 1 блок сделать, или сделать 2 секции и сместить нижний блок наверх? Что из этого будет правильнее?

Answer 1

[Ankhena]

Для 1:
Серый фон отдельно. Можно 2мя частями, тогда верхняя часть - светлый параллелепипед. Возможно градиентом.
Книжка отдельно.
Форме position: relative; и сдвиг

Для 2:
Квадратики рисуются либо заливкой rgba, если это вдруг разные блоки.
Либо множественным фоном из нескольких градиентов.