Обновление проекта
This commit is contained in:
|
Before Width: | Height: | Size: 165 KiB After Width: | Height: | Size: 165 KiB |
BIN
public/img/food.webp
Normal file
BIN
public/img/food.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
public/img/h777l.webp
Normal file
BIN
public/img/h777l.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
BIN
public/img/h777o.webp
Normal file
BIN
public/img/h777o.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
BIN
public/img/h777v.webp
Normal file
BIN
public/img/h777v.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/img/h777z.webp
Normal file
BIN
public/img/h777z.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 424 KiB After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 54 KiB |
@@ -3,108 +3,138 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Hotel 777 — отдых в Абхазии, Мгудзырхуа. Комфортные номера, пляж, домашняя кухня.">
|
||||
<title>Hotel 777 | Отдых в Абхазии</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Шапка сайта -->
|
||||
<header>
|
||||
<div class="logo">
|
||||
HOTEL 777
|
||||
<select class="lang-switch" id="langSwitch">
|
||||
<option value="ru">Русский</option>
|
||||
<option value="ab">Аҧсуа</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="logo">HOTEL 777</div>
|
||||
<nav>
|
||||
<a href="#about" data-i18n="nav_about">О нас</a>
|
||||
<a href="#food" data-i18n="nav_food">Кухня</a>
|
||||
<a href="#location" data-i18n="nav_location">Где мы</a>
|
||||
<a href="#booking" data-i18n="nav_booking">Бронь</a>
|
||||
</nav>
|
||||
<select id="langSwitch" class="lang-switch" aria-label="Выбор языка">
|
||||
<option value="ru">Русский</option>
|
||||
<option value="ab">Аҧсуа</option>
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</header>
|
||||
|
||||
<!-- Hero секция с циклическим фоном -->
|
||||
<section class="hero">
|
||||
<h1 class="animate" data-i18n="hero_title">Добро пожаловать</h1>
|
||||
<p class="animate delay-1" data-i18n="hero_subtitle">Ваш идеальный отдых на берегу Черного моря</p>
|
||||
<a href="#booking" class="btn animate delay-2" data-i18n="hero_btn">Забронировать номер</a>
|
||||
</section>
|
||||
|
||||
<section id="about">
|
||||
<!-- Секция "О нас" -->
|
||||
<section id="about" class="white-bg">
|
||||
<h2 class="section-title animate" data-i18n="about_title">Море в шаговой доступности</h2>
|
||||
<div class="about-grid">
|
||||
<div class="animate delay-1">
|
||||
<div class="about-text animate delay-1">
|
||||
<h3 data-i18n="about_subtitle">Бескрайние пляжи Гудауты</h3>
|
||||
<p data-i18n="about_text">Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к широкому, чистому галечно-песчаному пляжу.</p>
|
||||
</div>
|
||||
<div class="about-image-wrapper animate delay-2">
|
||||
<img src="img/XXXL.webp" alt="Пляж" class="about-img">
|
||||
<img src="img/beach.webp" alt="Пляж в Мгудзырхуа" class="about-img" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="food" class="white-bg">
|
||||
<!-- Секция "Кухня" -->
|
||||
<section id="food">
|
||||
<h2 class="section-title animate" data-i18n="food_title">Вкус Абхазии</h2>
|
||||
<div class="about-grid">
|
||||
<div class="about-image-wrapper animate">
|
||||
<img src="img/food.webp" alt="Абхазская кухня" class="about-img">
|
||||
<div class="about-image-wrapper animate delay-1">
|
||||
<img src="img/food.webp" alt="Абхазская кухня" class="about-img" loading="lazy">
|
||||
</div>
|
||||
<div class="animate delay-1">
|
||||
<div class="about-text animate delay-2">
|
||||
<h3 data-i18n="food_subtitle">Домашняя кухня из местных продуктов</h3>
|
||||
<p data-i18n="food_text">Почувствуйте настоящее гостеприимство! Мы готовим из того, что выросло прямо здесь: свежайший сыр сулугуни, ароматная абыста, сочные овощи с грядки и домашнее вино.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="location">
|
||||
<!-- Секция "Где мы" с картинкой znak и картой -->
|
||||
<section id="location" class="white-bg">
|
||||
<h2 class="section-title animate" data-i18n="loc_title">Удобное расположение</h2>
|
||||
|
||||
<div class="about-grid">
|
||||
<div class="animate delay-1">
|
||||
<img src="img/znak.webp" alt="Указатель" class="signpost-img">
|
||||
<div class="about-text animate delay-1">
|
||||
<p style="font-size:1.1rem; margin-bottom:1.5rem;">
|
||||
Все красоты Абхазии рядом
|
||||
</p>
|
||||
<div style="background:var(--input-bg); padding:2rem; border-radius:16px; margin-bottom:1.5rem;">
|
||||
<strong style="color:var(--primary); font-size:1.2rem;">📍 Адрес:</strong><br>
|
||||
<span style="font-size:1.1rem;">Мгудзырхуа, Набережная улица, 1</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;">
|
||||
<div style="background:var(--bg); padding:1rem 1.5rem; border-radius:12px; text-align:center; min-width:120px;">
|
||||
<div style="font-size:1.5rem; margin-bottom:0.5rem;">🚗</div>
|
||||
<div style="font-weight:600; color:var(--primary);">Гудаута</div>
|
||||
<div style="font-size:0.9rem; color:#666;">10 км</div>
|
||||
</div>
|
||||
<div style="background:var(--bg); padding:1rem 1.5rem; border-radius:12px; text-align:center; min-width:120px;">
|
||||
<div style="font-size:1.5rem; margin-bottom:0.5rem;">🚗</div>
|
||||
<div style="font-weight:600; color:var(--primary);">Новый Афон</div>
|
||||
<div style="font-size:0.9rem; color:#666;">25 км</div>
|
||||
</div>
|
||||
<div style="background:var(--bg); padding:1rem 1.5rem; border-radius:12px; text-align:center; min-width:120px;">
|
||||
<div style="font-size:1.5rem; margin-bottom:0.5rem;">🚗</div>
|
||||
<div style="font-weight:600; color:var(--primary);">Сухум</div>
|
||||
<div style="font-size:0.9rem; color:#666;">51 км</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate delay-2">
|
||||
<h3 data-i18n="loc_subtitle">Все красоты Абхазии рядом</h3>
|
||||
<p data-i18n="loc_address"><strong>Адрес:</strong> Мгудзырхуа, Набережная улица, 1.</p>
|
||||
<ul class="dist-list">
|
||||
<li>🚗 Гудаута — 10 км</li>
|
||||
<li>🚗 Новый Афон — 25 км</li>
|
||||
<li>🚗 Сухум — 51 км</li>
|
||||
</ul>
|
||||
|
||||
<!-- Картинка указателя -->
|
||||
<div class="about-image-wrapper animate delay-2">
|
||||
<img src="img/znak.webp" alt="Указатель Hotel 777" class="about-img signpost-img" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контейнер для Яндекс.Карты -->
|
||||
</section>
|
||||
|
||||
<section id="booking" class="white-bg">
|
||||
<!-- Секция "Бронирование" -->
|
||||
<section id="booking">
|
||||
<h2 class="section-title animate" data-i18n="book_title">Забронировать отдых</h2>
|
||||
<div class="booking-form animate delay-1">
|
||||
<form id="bookingForm">
|
||||
<div class="form-group">
|
||||
<label data-i18n="label_name">Ваше имя</label>
|
||||
<input type="text" id="name" required data-i18n-ph="ph_name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label data-i18n="label_phone">Номер телефона</label>
|
||||
<input type="tel" id="phone" required placeholder="+7 (999) 000-00-00">
|
||||
</div>
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="fz152" required>
|
||||
<label for="fz152" data-i18n="fz152">Согласие на обработку данных (152-ФЗ)</label>
|
||||
</div>
|
||||
<button type="submit" class="btn full-width" data-i18n="book_btn">Отправить заявку</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="bookingForm" class="booking-form animate">
|
||||
<div class="form-group">
|
||||
<label for="name" data-i18n="label_name">Ваше имя</label>
|
||||
<input type="text" id="name" name="name" required
|
||||
data-i18n-ph="ph_name" placeholder="Иван Иванов">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone" data-i18n="label_phone">Номер телефона</label>
|
||||
<input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__">
|
||||
</div>
|
||||
<div style="margin:1.5rem 0; font-size:0.9rem; color:#666;">
|
||||
<input type="checkbox" id="consent" required style="margin-right:8px;">
|
||||
<label for="consent" data-i18n="fz152" style="display:inline; font-weight:400;">Согласие на обработку данных (152-ФЗ)</label>
|
||||
</div>
|
||||
<button type="submit" class="btn full-width" data-i18n="book_btn">Отправить заявку</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Футер -->
|
||||
<footer>
|
||||
<p data-i18n="footer_text">© 2026 Hotel 777. Абхазия, Мгудзырхуа.</p>
|
||||
<p data-i18n="footer_text">© 2026 Hotel 777. Абхазия, Мгудзырхуа.</p>
|
||||
</footer>
|
||||
|
||||
<div class="cookie-banner" id="cookieBanner">
|
||||
<!-- Cookie баннер -->
|
||||
<div id="cookieBanner" class="cookie-banner">
|
||||
<p data-i18n="cookie_text">Мы используем файлы cookie для улучшения работы сайта.</p>
|
||||
<button class="cookie-btn" onclick="acceptCookies()" data-i18n="cookie_btn">Согласен</button>
|
||||
</div>
|
||||
|
||||
<!-- Подключение скриптов -->
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,75 +1,91 @@
|
||||
const translations = {
|
||||
ru: {
|
||||
nav_about: "О нас", nav_food: "Кухня", nav_location: "Где мы", nav_booking: "Бронь",
|
||||
hero_title: "Добро пожаловать", hero_subtitle: "Ваш идеальный отдых на берегу Черного моря", hero_btn: "Забронировать номер",
|
||||
about_title: "Море в шаговой доступности", about_subtitle: "Бескрайние пляжи Гудауты", about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к морю.",
|
||||
food_title: "Вкус Абхазии", food_subtitle: "Домашняя кухня из местных продуктов", food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино.",
|
||||
loc_title: "Удобное расположение", book_title: "Забронировать отдых", label_name: "Ваше имя", label_phone: "Номер телефона", ph_name: "Иван Иванов",
|
||||
fz152: "Согласие на обработку данных (152-ФЗ)", book_btn: "Отправить заявку", footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа.",
|
||||
cookie_text: "Мы используем файлы cookie для улучшения работы сайта.", cookie_btn: "Согласен", alert_msg: "Спасибо! Ваша заявка принята."
|
||||
},
|
||||
en: {
|
||||
nav_about: "About", nav_food: "Kitchen", nav_location: "Location", nav_booking: "Booking",
|
||||
hero_title: "Welcome", hero_subtitle: "Your perfect vacation on the Black Sea", hero_btn: "Book a room",
|
||||
about_title: "Sea at your doorstep", food_title: "Taste of Abkhazia", food_subtitle: "Local home cooking",
|
||||
alert_msg: "Thank you! Your request has been received."
|
||||
},
|
||||
ab: {
|
||||
nav_about: "Ҳазкы", nav_food: "Афатә", nav_location: "Аҭыԥ", nav_booking: "Аанкылара",
|
||||
hero_title: "Бзиала шәаабеит", hero_subtitle: "Амшын аԥшаҳәаҿы адырра", hero_btn: "Ауада аанкылара",
|
||||
food_title: "Аԥсны аҳамҭа", alert_msg: "Ишәҭабуп! Азҳәара дәықәҵоуп."
|
||||
}
|
||||
ru: {
|
||||
nav_about: "О нас ", nav_food: "Кухня ", nav_location: "Где мы ", nav_booking: "Бронь ",
|
||||
hero_title: "Добро пожаловать ", hero_subtitle: "Ваш идеальный отдых на берегу Черного моря ", hero_btn: "Забронировать номер ",
|
||||
about_title: "Море в шаговой доступности ", about_subtitle: "Бескрайние пляжи Гудауты ", about_text: "Наш отель расположен в живописном селе Мгудзырхуа. Мы предлагаем комфортные номера и прямой выход к морю. ",
|
||||
food_title: "Вкус Абхазии ", food_subtitle: "Домашняя кухня из местных продуктов ", food_text: "Почувствуйте гостеприимство! Свежайший сыр сулугуни, мамалыга, овощи с грядки и домашнее вино. ",
|
||||
loc_title: "Удобное расположение ", book_title: "Забронировать отдых ", label_name: "Ваше имя ", label_phone: "Номер телефона ", ph_name: "Иван Иванов ",
|
||||
fz152: "Согласие на обработку данных (152-ФЗ) ", book_btn: "Отправить заявку ", footer_text: "© 2026 Hotel 777. Абхазия, Мгудзырхуа. ",
|
||||
cookie_text: "Мы используем файлы cookie для улучшения работы сайта. ", cookie_btn: "Согласен ", alert_msg: "Спасибо! Ваша заявка принята. "
|
||||
},
|
||||
en: {
|
||||
nav_about: "About ", nav_food: "Kitchen ", nav_location: "Location ", nav_booking: "Booking ",
|
||||
hero_title: "Welcome ", hero_subtitle: "Your perfect vacation on the Black Sea ", hero_btn: "Book a room ",
|
||||
about_title: "Sea at your doorstep ", food_title: "Taste of Abkhazia ", food_subtitle: "Local home cooking ",
|
||||
alert_msg: "Thank you! Your request has been received. "
|
||||
},
|
||||
ab: {
|
||||
nav_about: "Ҳазкы ", nav_food: "Афатә ", nav_location: "Аҭыԥ ", nav_booking: "Аанкылара ",
|
||||
hero_title: "Бзиала шәаабеит ", hero_subtitle: "Амшын аԥшаҳәаҿы адырра ", hero_btn: "Ауада аанкылара ",
|
||||
food_title: "Аԥсны аҳамҭа ", alert_msg: "Ишәҭабуп! Азҳәара дәықәҵоуп. "
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Прогрессивная загрузка фона
|
||||
const hero = document.querySelector('.hero');
|
||||
const imgHD = new Image();
|
||||
imgHD.src = 'img/h777.webp';
|
||||
imgHD.onload = () => { hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${imgHD.src}')`; };
|
||||
// Циклическая смена фона (мимикрия)
|
||||
const hero = document.querySelector('.hero');
|
||||
const images = ['img/h777.webp', 'img/h777o.webp', 'img/h777l.webp', 'img/h777z.webp'];
|
||||
let currentImg = 0;
|
||||
|
||||
// Локализация
|
||||
const langSelect = document.getElementById('langSwitch');
|
||||
let currentLang = localStorage.getItem('siteLang') || 'ru';
|
||||
|
||||
const updateText = (lang) => {
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
if (translations[lang][key]) el.innerHTML = translations[lang][key];
|
||||
});
|
||||
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n-ph');
|
||||
if (translations[lang][key]) el.placeholder = translations[lang][key];
|
||||
});
|
||||
localStorage.setItem('siteLang', lang);
|
||||
const setHeroBackground = () => {
|
||||
const img = new Image();
|
||||
img.src = images[currentImg];
|
||||
img.onload = () => {
|
||||
hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${img.src}')`;
|
||||
};
|
||||
};
|
||||
|
||||
langSelect.value = currentLang;
|
||||
updateText(currentLang);
|
||||
langSelect.onchange = (e) => updateText(e.target.value);
|
||||
// Запуск первого изображения
|
||||
setHeroBackground();
|
||||
|
||||
// Cookie
|
||||
if (!localStorage.getItem('cookiesAccepted')) {
|
||||
setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
|
||||
}
|
||||
// Смена каждые 15 секунды
|
||||
setInterval(() => {
|
||||
currentImg = (currentImg + 1) % images.length;
|
||||
setHeroBackground();
|
||||
}, 15000);
|
||||
|
||||
// Форма
|
||||
document.getElementById('bookingForm').onsubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert(translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
|
||||
};
|
||||
// Локализация
|
||||
const langSelect = document.getElementById('langSwitch');
|
||||
let currentLang = localStorage.getItem('siteLang') || 'ru';
|
||||
|
||||
// Анимации при скролле
|
||||
const obs = new IntersectionObserver(entries => {
|
||||
entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
|
||||
const updateText = (lang) => {
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
if (translations[lang][key]) el.innerHTML = translations[lang][key];
|
||||
});
|
||||
document.querySelectorAll('.animate').forEach(el => {
|
||||
el.style.animationPlayState = 'paused';
|
||||
obs.observe(el);
|
||||
document.querySelectorAll('[data-i18n-ph]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n-ph');
|
||||
if (translations[lang][key]) el.placeholder = translations[lang][key];
|
||||
});
|
||||
localStorage.setItem('siteLang', lang);
|
||||
};
|
||||
|
||||
langSelect.value = currentLang;
|
||||
updateText(currentLang);
|
||||
langSelect.onchange = (e) => updateText(e.target.value);
|
||||
|
||||
// Cookie
|
||||
if (!localStorage.getItem('cookiesAccepted')) {
|
||||
setTimeout(() => document.getElementById('cookieBanner').classList.add('show'), 2000);
|
||||
}
|
||||
|
||||
// Форма
|
||||
document.getElementById('bookingForm').onsubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert(translations[localStorage.getItem('siteLang') || 'ru'].alert_msg);
|
||||
};
|
||||
|
||||
// Анимации при скролле
|
||||
const obs = new IntersectionObserver(entries => {
|
||||
entries.forEach(en => { if(en.isIntersecting) en.target.style.animationPlayState = 'running'; });
|
||||
});
|
||||
document.querySelectorAll('.animate').forEach(el => {
|
||||
el.style.animationPlayState = 'paused';
|
||||
obs.observe(el);
|
||||
});
|
||||
});
|
||||
|
||||
function acceptCookies() {
|
||||
localStorage.setItem('cookiesAccepted', 'true');
|
||||
document.getElementById('cookieBanner').classList.remove('show');
|
||||
localStorage.setItem('cookiesAccepted', 'true');
|
||||
document.getElementById('cookieBanner').classList.remove('show');
|
||||
}
|
||||
107
public/style.css
107
public/style.css
@@ -1,103 +1,88 @@
|
||||
:root {
|
||||
--primary: #005f73;
|
||||
--secondary: #0a9396;
|
||||
--light: #e9d8a6;
|
||||
--dark: #001219;
|
||||
--bg: #f8f9fa;
|
||||
--white: #ffffff;
|
||||
--input-bg: #f0f4f5;
|
||||
--primary: #005f73;
|
||||
--secondary: #0a9396;
|
||||
--light: #e9d8a6;
|
||||
--dark: #001219;
|
||||
--bg: #f8f9fa;
|
||||
--white: #ffffff;
|
||||
--input-bg: #f0f4f5;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; }
|
||||
|
||||
{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, sans-serif; }
|
||||
html { font-size: 16px; scroll-behavior: smooth; }
|
||||
@media (min-width: 2000px) { html { font-size: 22px; } }
|
||||
|
||||
@media (min-width: 2000px) { html { font-size: 22px; } }
|
||||
body { background: var(--bg); color: var(--dark); line-height: 1.6; }
|
||||
|
||||
/* ШАПКА */
|
||||
header {
|
||||
background: rgba(0, 18, 25, 0.95);
|
||||
color: var(--white);
|
||||
padding: 1rem 5%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,0.2);
|
||||
header {
|
||||
background: rgba(0, 18, 25, 0.95);
|
||||
color: var(--white);
|
||||
padding: 1rem 5%;
|
||||
position: fixed;
|
||||
width: 90%;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.lang-switch {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: var(--white);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
.lang-switch {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: var(--white);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.lang-switch option { background: var(--dark); color: var(--white); }
|
||||
|
||||
nav a { color: var(--white); text-decoration: none; margin-left: clamp(10px, 2vw, 20px); font-weight: 500; transition: 0.3s; font-size: 0.9rem; }
|
||||
nav a:hover { color: var(--secondary); }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; color: var(--white); padding: 0 20px;
|
||||
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/h777-tiny.webp') center/cover;
|
||||
.hero {
|
||||
height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; color: var(--white); padding: 0 20px;
|
||||
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/h777-tiny.webp') center/cover;
|
||||
transition: background-image 1.5s ease-in-out; /* Плавный переход */
|
||||
}
|
||||
.hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; }
|
||||
|
||||
/* СЕКЦИИ */
|
||||
section { padding: 6rem 10%; }
|
||||
.white-bg { background: var(--white); }
|
||||
.section-title { font-size: clamp(2rem, 5vw, 3rem); color: var(--primary); margin-bottom: 3.5rem; text-align: center; }
|
||||
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--secondary); margin: 15px auto; border-radius: 2px; }
|
||||
|
||||
.about-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
|
||||
@media (min-width: 992px) { .about-grid { grid-template-columns: 1fr 1fr; } }
|
||||
|
||||
.about-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
|
||||
.about-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
|
||||
.about-image-wrapper:hover .about-img { transform: scale(1.05); }
|
||||
|
||||
.signpost-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
|
||||
|
||||
/* ФОРМА */
|
||||
.booking-form {
|
||||
max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
|
||||
border-radius: 30px; box-shadow: 0 30px 60px rgba(0,18,25,0.1); border: 1px solid rgba(0,0,0,0.05);
|
||||
.booking-form {
|
||||
max-width: 550px; margin: 0 auto; background: var(--white); padding: 3rem;
|
||||
border-radius: 30px; box-shadow: 0 30px 60px rgba(0,18,25,0.1); border: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--dark); }
|
||||
.form-group input {
|
||||
width: 100%; padding: 14px; border: 2px solid transparent;
|
||||
background: var(--input-bg); border-radius: 12px; transition: 0.3s;
|
||||
.form-group input {
|
||||
width: 100%; padding: 14px; border: 2px solid transparent;
|
||||
background: var(--input-bg); border-radius: 12px; transition: 0.3s;
|
||||
}
|
||||
.form-group input:focus { outline: none; border-color: var(--secondary); background: var(--white); }
|
||||
|
||||
.btn {
|
||||
display: inline-block; padding: 16px 30px; background: var(--secondary);
|
||||
color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s;
|
||||
.btn {
|
||||
display: inline-block; padding: 16px 30px; background: var(--secondary);
|
||||
color: var(--white); border-radius: 14px; font-weight: 700; border: none; cursor: pointer; transition: 0.3s;
|
||||
}
|
||||
.btn:hover { background: var(--primary); transform: translateY(-3px); }
|
||||
.full-width { width: 100%; }
|
||||
|
||||
/* COOKIE & ANIMATIONS */
|
||||
.cookie-banner {
|
||||
position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px;
|
||||
background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px; transition: 0.6s; z-index: 1000;
|
||||
.cookie-banner {
|
||||
position: fixed; bottom: -200px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px;
|
||||
background: var(--dark); color: var(--white); padding: 20px; border-radius: 20px; transition: 0.6s; z-index: 1000;
|
||||
}
|
||||
.cookie-banner.show { bottom: 20px; }
|
||||
.cookie-btn { background: var(--light); border: none; padding: 8px 20px; border-radius: 8px; font-weight: 700; cursor: pointer; margin-top: 10px; }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.animate { animation: fadeIn 1s ease-out forwards; opacity: 0; }
|
||||
.delay-1 { animation-delay: 0.3s; }
|
||||
.delay-2 { animation-delay: 0.6s; }
|
||||
|
||||
footer { background: var(--dark); color: rgba(255,255,255,0.5); text-align: center; padding: 3rem; }
|
||||
Reference in New Issue
Block a user