Задача: сверстать макет сайта для трёх групп устройств: десктопные экраны, планшеты и смартфоны. Итоговый сайт должен быть копией макетов, предоставленных дизайнером.
Реализовано: Написан сайт с использованием семантической верстки для десктопной версии, на его основе с помощью медиазапросов сделаны версии для планшетов и смартфонов.
- Промежуточные между макетами состояния реализованы по принципу резиновой верстки:
- При повороте экрана (пейзажная ориентация) секция с трендами меняет вид:
- Также сверстано всплывающее окно для фидбэка (сейчас скрыто, с классом .hidden):
- Итоговый десктопный сайт и его виды для других устройств являются копией предоставленного макета, для реализации точности использовался PerfectPixel.