Лендинги
ХРЕБЕТ — горные экспедиции
Одностраничный сайт компании горных экспедиций: чередование тёмных и светлых секций, две темы, два языка.
Галерея
-
Светлые секции чередуются с тёмными — приём работает в обеих темах -
О проекте
Лендинг на чистых HTML, CSS и JavaScript — без сборки и зависимостей, разворачивается на любом статическом хостинге. Дизайн-система построена на CSS-переменных: чтобы добавить секцию с обратной темой, достаточно навесить класс, компоненты сами возьмут нужные цвета.
Что внутри
- Тёмная и светлая тема применяются инлайн-скриптом до первой отрисовки — вспышки не той темы нет
- Русский и английский: весь текст размечен data-атрибутами, словарь лежит одним объектом
- Бесшовная бегущая строка: обе половины ленты строятся кодом из одного списка, иначе перевод разъезжает их по ширине и раз в полминуты появляется рывок
- Фильтр маршрутов, слайдер отзывов, аккордеон FAQ с пересчётом высоты при смене языка
- Проверено в headless Chromium: четыре комбинации темы и языка на десктопе и мобильном