• Стек:
HTML5, Tailwind CSS (CDN), vanilla JavaScript. Никаких сборщиков — один index.html, открыл и работает. Шрифты: Unbounded + Inter через Google Fonts с preconnect.
• CSS:
Кастомная тема Tailwind: четыре цвета, два шрифта, скругления. Жидкое стекло на
backdrop-filter: blur(20px) без JS. Анимации — hover на кнопках/карточках через transform, модалка на cubic-bezier (снизу-вверх на мобилках, scale на ПК). Куки-баннер без моргания — проверка localStorage перед показом.• Слайдеры:
Два автослайдера на flex + translateX. Автопрокрутка каждые 2-3 секунды, пауза при наведении и таче. Swipe через touchstart/touchend с порогом 40px. Индикаторы — статичная вёрстка, JS только переключает active-класс.
• FAQ:
Нативные
<details> без единой строчки JS. Анимация rotate на маркере через [open] в CSS.• Адаптивность:
Mobile-first, три брейкпоинта. Мобильное меню — toggle hidden. Плавный скролл к якорям с учётом высоты фиксированного хедера. Все картинки lazy-load.
• Результат:
Продакшен-реди лендинг в одном файле: адаптив, SEO, модалка, слайдеры, куки-баннер. Без бэкенда, без сборщиков.
#кейс
Потыкать: вживую-туапсе.рф
😊 Канал | Сайт | Бот
😊 Связаться | Отзывы