Ishkhan Karapetyan Ishkhan
Разрабатываю веб-сервисы, мобильные приложения и AI-решения
Рейтинг
5 417
№ 258 в каталоге
Отзывы
0
Профессионализм
-/10
Коммуникация
- /10
Город
Москва
Опыт работы
2 года
На сайте с
2026 года
Юридический статус
Самозанятый

Лендинг премиального глэмпинга в Сочи — дизайн и вёрстка с нуля, адаптив, анимации, интерактивное бронирование

Используемые навыки CSS3 HTML5 JavaScript Landing Page Верстка

Описание

Задача — разработать с нуля презентационный лендинг для глэмпинга премиум-класса в горах Сочи. Сайт должен передавать атмосферу уединённого отдыха на природе, вызывать доверие и подводить посетителя к бронированию.

Основные требования:
— Премиальный визуал: крупные фото, плавные анимации, «воздушная» типографика.

— Полная адаптивность: от мобильных 360px до десктопа 1440px+.

— Интерактивный календарь свободных дат с мгновенным расчётом стоимости.

— Карточки домиков с детальными модальными окнами (фотогалерея, характеристики, цены).

— Каталог пакетов отдыха, блок активностей, отзывы в виде карусели с drag-свайпом.

— FAQ-аккордеон, контакты, карта и всё — на одной странице без перезагрузки.

— Высокая скорость загрузки и SEO-friendly разметка.

Решение

Дизайн и визуальный стиль:

Выбрал сдержанную природную палитру (оливковые, кремовые тона) и пару шрифтов Prata + Manrope для сочетания элегантности и читабельности. Каждый блок спроектирован по принципу «один экран — одна задача».

Вёрстка:

Чистый HTML5 + CSS3 без фреймворков, что даёт минимальный вес и максимальную скорость. CSS-переменные, grid/flex-разметка, адаптив через два брейкпоинта (860px, 560px). Все анимации на CSS @keyframes и IntersectionObserver (reveal при скролле).

Интерактив. Написал на чистом JavaScript (без библиотек):
— Календарь с навигацией по месяцам, подсветкой свободных/занятых дат и автоматическим расчётом итоговой стоимости.
— Модальные окна карточек домиков с переключением фото, ценами и кнопкой бронирования.

— Панельная система (center-panel) для детализации пакетов, галереи, отзывов и юридических документов.

— Карусель отзывов с drag/swipe-жестами на touch и десктопе.

— Lightbox для полноэкранного просмотра фотографий.

Изображения. Подготовил все фотографии в высоком разрешении (1400–1700px), оптимизировал в JPEG quality 90 для баланса между качеством и весом. Для галереи создал визуально уникальные варианты (кропы, тонировка), чтобы избежать повторов.

Результат

Готовый, полностью функциональный лендинг, который можно адаптировать под реальный бизнес за 1–2 дня (подключить CRM, добавить бэкенд бронирования, заменить контент).

Что получилось: — Время загрузки < 2 сек на 4G, все изображения lazy-loaded. — 100% адаптив: выглядит нативно на iPhone SE, планшетах и 27" мониторах. — Пользователь может выбрать домик, дату, увидеть итоговую цену и оставить заявку — всё без перезагрузки страницы. — Живой сайт: https://glamp-sochi.vercel.app

Сайт демонстрирует навыки, востребованные в коммерческих проектах: умение создать визуально премиальный продукт, написать чистый производительный код и довести проект до рабочего деплоя.

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Премиальный лендинг «Atrium» для компании по ремонту квартир бизнес-класса  Описание:
Премиальный лендинг «Atrium» для компании по ремонту квартир бизнес-класса Описание:
33
Веб-разработка и IT Внешние печатные формы (этикетка со штрихкодом + доработанный наряд) для документа «Сдельный наряд» в 1С:УНФ 3.0 для швейного производства
Внешние печатные формы (этикетка со штрихкодом + доработанный наряд) для документа «Сдельный наряд» в 1С:УНФ 3.0 для швейного производства
10
Веб-разработка и IT Лендинг для клининговой компании Clean Master — привлечение клиентов на услуги уборки квартир и домо
Лендинг для клининговой компании Clean Master — привлечение клиентов на услуги уборки квартир и домо
34
Веб-разработка и IT Разработка имиджевого лендинга для дизайн-студии Lumora — анимации, серверная форма заявки
Разработка имиджевого лендинга для дизайн-студии Lumora — анимации, серверная форма заявки
13