Blue Lagoon Villa — сайт-визитка (Мальдивы)

Одностраничный промо-сайт для аренды виллы. Чистые HTML, CSS и JavaScript — без фреймворков, сборки и зависимостей.

Как открыть

Дважды кликните index.html — сайт откроется в браузере. Локальный сервер не нужен: все пути относительные, фотографии подгружаются прямо из интернета.

Если нужно открыть через сервер:

python -m http.server 8000
# затем http://localhost:8000

Структура

index.html          — вся разметка страницы
css/styles.css      — оформление, адаптив, анимации
js/main.js          — вся логика

Что есть на странице

Секция	Что внутри
Hero	фон на весь экран, заголовок, счётчики-факты
О вилле	текст, фото-коллаж, список удобств
Галерея	12 фото, лайтбокс со стрелками, Esc и свайпами
Удобства	6 карточек с SVG-иконками
Полоса-CTA	фон с эффектом параллакса
Цены	3 тарифа, кнопка переносит тариф в форму брони
Отзывы	слайдер с автопрокруткой, точками и свайпами
Бронирование	форма с проверкой полей и расчётом стоимости
FAQ	аккордеон, открыт только один вопрос
Подвал	контакты, соцсети, год подставляется автоматически

Дополнительно: прелоадер, мобильное меню, подсветка активного пункта меню, появление блоков при прокрутке, кнопка «наверх», плавающая кнопка брони, поддержка prefers-reduced-motion и стили для печати.

Что стоит поменять перед публикацией

1. Контакты — телефон +960 777 00 00, e-mail hello@bluelagoonvilla.mv и ссылки на соцсети в index.html (подвал и секция «Бронирование»).
2. Цены — в блоках тарифов и в <select id="f-plan"> (атрибут data-price).
3. Форма — сейчас отправка имитируется через setTimeout, реальная заявка никуда не уходит. В js/main.js найдите комментарий «Демонстрация: реальная отправка здесь не выполняется» и замените setTimeout на fetch() к вашему обработчику (Formspree, Getform, свой бэкенд).
4. Фотографии — сейчас это прямые ссылки на Unsplash. Для рабочего сайта лучше скачать снимки в папку img/ и заменить адреса на локальные: чужие ссылки могут перестать работать.

Совместимость

Chrome, Edge, Firefox, Safari (включая мобильные). Используются IntersectionObserver, CSS-переменные, grid и свойство translate — актуальные версии браузеров поддерживают их полностью.

Лицензия на фотографии

Изображения загружаются с Unsplash и распространяются по лицензии Unsplash License — бесплатно, в том числе для коммерческого использования, без обязательной атрибуции.