244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Квадро-туры | Экскурсии на квадроциклах в горах</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Unbounded:wght@700;900&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏍️</text></svg>">
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--orange:#FF6B35;--orange-dark:#E55A2B}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.section{padding:80px 0}
|
||
.section h2{font:700 36px/1.15 'Unbounded',sans-serif;margin-bottom:40px;text-align:center}
|
||
.hero{background:linear-gradient(135deg,var(--ink) 0%,#1a1f2e 100%);color:var(--white);padding:120px 24px;text-align:center}
|
||
.hero h1{font:900 56px/1.05 'Unbounded',sans-serif;margin-bottom:24px;color:var(--cyan)}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin:0 auto 32px}
|
||
.btn{display:inline-block;background:var(--orange);color:var(--white);padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;transition:background 0.3s}
|
||
.btn:hover{background:var(--orange-dark)}
|
||
.btn-cyan{background:var(--cyan);color:var(--ink)}
|
||
.routes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
|
||
.route-card{background:var(--gray-100);border-radius:16px;overflow:hidden;transition:transform 0.3s}
|
||
.route-card:hover{transform:translateY(-5px)}
|
||
.route-img{width:100%;height:220px;object-fit:cover;background:#ddd}
|
||
.route-content{padding:24px}
|
||
.route-content h3{font:700 22px/1.3 'Unbounded',sans-serif;margin-bottom:12px}
|
||
.route-meta{display:flex;gap:16px;margin-bottom:16px;font-size:14px;color:var(--gray-500)}
|
||
.route-meta span{background:var(--white);padding:4px 12px;border-radius:20px}
|
||
.route-price{font:700 28px/1 var(--orange);margin-bottom:16px}
|
||
.timeline{max-width:800px;margin:0 auto}
|
||
.timeline-item{display:flex;gap:24px;margin-bottom:32px;position:relative}
|
||
.timeline-item::before{content:'';position:absolute;left:20px;top:40px;bottom:-32px;width:2px;background:var(--cyan);opacity:0.3}
|
||
.timeline-item:last-child::before{display:none}
|
||
.timeline-icon{width:40px;height:40px;border-radius:50%;background:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;z-index:1}
|
||
.timeline-content{flex:1;padding-top:4px}
|
||
.timeline-content h4{font:700 18px/1.3 'Unbounded',sans-serif;margin-bottom:8px}
|
||
.timeline-content p{color:var(--gray-500)}
|
||
.safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
|
||
.safety-card{background:var(--cyan-50);border-radius:12px;padding:24px;border-left:4px solid var(--cyan)}
|
||
.safety-card h4{font:700 18px/1.3 'Unbounded',sans-serif;margin-bottom:12px;display:flex;align-items:center;gap:8px}
|
||
.contact-section{background:var(--ink);color:var(--white);text-align:center}
|
||
.contact-section h2{color:var(--white)}
|
||
.phone{font:900 42px/1.2 var(--cyan);margin:24px 0;text-decoration:none;display:block}
|
||
.phone:hover{color:var(--white)}
|
||
.contact-note{color:#9aa3b2;max-width:500px;margin:0 auto}
|
||
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
|
||
.reveal.in{opacity:1;transform:none}
|
||
@media(max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}.phone{font-size:28px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>🏔️ Экскурсии на квадроциклах в горах</h1>
|
||
<p>Незабываемое приключение среди горных вершин с профессиональными инструкторами. Адреналин, живописные виды и кофе-брейк на высоте!</p>
|
||
<a class="btn" href="#routes">Выбрать маршрут</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="routes" class="section">
|
||
<div class="container">
|
||
<h2>Наши маршруты</h2>
|
||
<div class="routes-grid">
|
||
<div class="route-card reveal">
|
||
<img src="https://loremflickr.com/800/600/mountain,quad" alt="Лёгкий маршрут" class="route-img">
|
||
<div class="route-content">
|
||
<h3>Лёгкий</h3>
|
||
<div class="route-meta">
|
||
<span>⏱️ 2 часа</span>
|
||
<span>📍 40 км</span>
|
||
<span>👥 2-8 чел</span>
|
||
</div>
|
||
<p>Идеален для новичков. Живописная долина, горная река, панорамные виды. Без сложного рельефа.</p>
|
||
<div class="route-price">8 000 ₸</div>
|
||
<a class="btn btn-cyan" href="#contact">Записаться</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-card reveal">
|
||
<img src="https://loremflickr.com/800/600/offroad,adventure" alt="Средний маршрут" class="route-img">
|
||
<div class="route-content">
|
||
<h3>Средний</h3>
|
||
<div class="route-meta">
|
||
<span>⏱️ 4 часа</span>
|
||
<span>📍 80 км</span>
|
||
<span>👥 4-10 чел</span>
|
||
</div>
|
||
<p>Горные перевалы, лесные тропы, водопад. Кофе-брейк на смотровой площадке. Требуется опыт вождения.</p>
|
||
<div class="route-price">15 000 ₸</div>
|
||
<a class="btn btn-cyan" href="#contact">Записаться</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="route-card reveal">
|
||
<img src="https://loremflickr.com/800/600/extreme,mountain" alt="Экстремальный маршрут" class="route-img">
|
||
<div class="route-content">
|
||
<h3>Экстремальный</h3>
|
||
<div class="route-meta">
|
||
<span>⏱️ 6 часов</span>
|
||
<span>📍 120 км</span>
|
||
<span>👥 2-6 чел</span>
|
||
</div>
|
||
<p>Высокогорье, каменистые участки, горные озёра. Полное погружение в дикую природу. Только для опытных.</p>
|
||
<div class="route-price">25 000 ₸</div>
|
||
<a class="btn btn-cyan" href="#contact">Записаться</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>Программа дня</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">🎯</div>
|
||
<div class="timeline-content">
|
||
<h4>09:00 — Встреча и инструктаж</h4>
|
||
<p>Знакомство с группой, получение экипировки, изучение базовых правил управления квадроциклом.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">🏍️</div>
|
||
<div class="timeline-content">
|
||
<h4>09:30 — Начало маршрута</h4>
|
||
<p>Движение по горной тропе, первые остановки для фотографий, адаптация к технике.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">🏔️</div>
|
||
<div class="timeline-content">
|
||
<h4>11:00 — Смотровая площадка</h4>
|
||
<p>Панорамный вид на горные вершины. Время для фотосессии и короткого отдыха.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">☕</div>
|
||
<div class="timeline-content">
|
||
<h4>12:00 — Кофе-брейк</h4>
|
||
<p>Привал в живописном месте. Горячий чай, кофе, бутерброды и горный воздух.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">🌊</div>
|
||
<div class="timeline-content">
|
||
<h4>13:30 — Водопад</h4>
|
||
<p>Остановка у горного водопада. Можно освежиться и сделать эффектные кадры.</p>
|
||
</div>
|
||
</div>
|
||
<div class="timeline-item reveal">
|
||
<div class="timeline-icon">🏁</div>
|
||
<div class="timeline-content">
|
||
<h4>15:00 — Возвращение</h4>
|
||
<p>Финиш маршрута, вручение сертификатов участников, обмен впечатлениями.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="container">
|
||
<h2>Инструкция по безопасности</h2>
|
||
<div class="safety-grid">
|
||
<div class="safety-card reveal">
|
||
<h4>🪖 Экипировка обязательна</h4>
|
||
<p>Шлем, защитные очки, перчатки и наколенники выдаются перед стартом. Использование обязательно на всём маршруте.</p>
|
||
</div>
|
||
<div class="safety-card reveal">
|
||
<h4>📋 Инструктаж</h4>
|
||
<p>Внимательно прослушайте инструктаж перед началом. Задайте вопросы, если что-то непонятно.</p>
|
||
</div>
|
||
<div class="safety-card reveal">
|
||
<h4>⚠️ Дистанция</h4>
|
||
<p>Держите дистанцию 30-50 метров между квадроциклами. Не обгоняйте без сигнала инструктора.</p>
|
||
</div>
|
||
<div class="safety-card reveal">
|
||
<h4>🚫 Запрещено</h4>
|
||
<p>Управление в нетрезвом состоянии, резкие манёвры, съезд с обозначенного маршрута.</p>
|
||
</div>
|
||
<div class="safety-card reveal">
|
||
<h4>👥 Группа</h4>
|
||
<p>Не отставать от группы. Если произошла остановка — сразу сообщите инструктору.</p>
|
||
</div>
|
||
<div class="safety-card reveal">
|
||
<h4>🌦️ Погода</h4>
|
||
<p>Маршрут может быть отменён из-за恶劣ных погодных условий. Следуйте указаниям гида.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="background:var(--gray-100)">
|
||
<div class="container">
|
||
<h2>Оставить заявку</h2>
|
||
<form action="https://formsubmit.co/your@email.com" method="POST" style="max-width:500px;margin:0 auto;background:var(--white);padding:32px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08)">
|
||
<div style="margin-bottom:20px">
|
||
<input type="text" name="name" placeholder="Ваше имя" required style="width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:16px;font-family:inherit">
|
||
</div>
|
||
<div style="margin-bottom:20px">
|
||
<input type="tel" name="phone" placeholder="Телефон" required style="width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:16px;font-family:inherit">
|
||
</div>
|
||
<div style="margin-bottom:20px">
|
||
<select name="route" style="width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:16px;font-family:inherit">
|
||
<option value="">Выберите маршрут</option>
|
||
<option value="Лёгкий">Лёгкий (8 000 ₸)</option>
|
||
<option value="Средний">Средний (15 000 ₸)</option>
|
||
<option value="Экстремальный">Экстремальный (25 000 ₸)</option>
|
||
</select>
|
||
</div>
|
||
<div style="margin-bottom:20px">
|
||
<textarea name="message" placeholder="Комментарий (количество человек, дата, пожелания)" rows="4" style="width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:16px;font-family:inherit;resize:vertical"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn" style="width:100%;border:none;cursor:pointer;font-size:16px">Отправить заявку</button>
|
||
<p style="margin-top:16px;font-size:14px;color:var(--gray-500);text-align:center">Менеджер свяжется с вами в течение 15 минут</p>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact" class="section contact-section">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<p class="contact-note">Звоните ежедневно с 9:00 до 20:00. Ответим на все вопросы и подберем удобный маршрут.</p>
|
||
<a class="phone" href="tel:+77771234567">+7 (777) 123-45-67</a>
|
||
<div style="margin-top:32px">
|
||
<a class="btn" href="https://wa.me/77771234567?text=Здравствуйте! Хочу записаться на квадро-тур">Написать в WhatsApp</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
var io=new IntersectionObserver(function(entries){
|
||
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('in'); });
|
||
},{threshold:.15});
|
||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|