Отдельно оформила первый экран для устройств расширением больше 640px. Это связано с использованием сложной анимации step by step, которая интересует многих заказчиков. Я считаю, что контент — главный герой сайта, а его лучший друг структура, поэтому увлекаться анимацией не нужно. Но есть проекты, в которых это смотрится эффектно.

Экран сделан на zero, использован window контейнер. Это когда элементы растягиваются относительно границ экрана, а не основной рабочей области, получается как бы «резиновая вёрстка». Её уместно использовать именно для десктопной версии, потому что есть люди, которые заходят на сайт с широкоформатных устройств, и сайт должен выглядеть достойно.

В работе столкнулась с такой проблемой. Фоновое видео, почему-то не воспроизводится автоматически на устройствах меньше 640px, поэтому для мобильной версии сделала более статичный вариант.

Первый экран для устройств расширением меньше 640px сделан также на zero, но использован grid контейнер. Это когда элементы привязаны к основной рабочей области. Разумеется настроена адаптация под все устройства. Эффект неона для текста и рамка для фото сделаны в Figma. Настроена акцентная анимация для кнопки и небольшая анимация для заголовка.

Фото взято с https://unsplash.com автор Karen Zhao