Files
olimparena/index.html
2026-05-13 14:14:26 +03:00

424 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OlimpArena</title>
<link rel="stylesheet" href="./assets/css/main.min.css">
</head>
<body>
<div class="site">
<header class="header" id="top">
<div class="container header__inner">
<a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena">
</a>
<nav class="header__nav" aria-label="Основная навигация">
<a href="#objects">Объекты</a>
<a href="#services">Услуги</a>
<a href="#pricing">Стоимость</a>
<a href="#gallery">Галерея</a>
<a href="#contacts">Контакты</a>
</nav>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</header>
<main>
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__content">
<h1>
Спорткомплекс полного цикла в <span>Москве:</span>
лёд, залы, проживание и питание на одной территории
</h1>
<p>
Два ледовых поля 56×26 м, универсальный зал, фитнес-центр и
апарт-отель на 70+ номеров. 15 минут от центра, своя парковка.
</p>
<ul class="hero__tags">
<li>2 ледовых поля 56×26 м</li>
<li>Универсальный зал, фитнес и залы единоборств</li>
<li>Проживание и питание на территории</li>
</ul>
<div class="hero__actions">
<a class="btn" href="#booking">Забронировать площадку</a>
<a class="btn btn--ghost" href="#">Посмотреть расписание</a>
</div>
</div>
</section>
<section class="highlights">
<div class="container highlights__grid">
<article class="info-card">
<h3>Всё в одном месте</h3>
<p>Лёд, спортзалы, фитнес, проживание и питание — без переездов между объектами. Команда заезжает и работает по полной программе.</p>
</article>
<article class="info-card">
<h3>Удобная логистика</h3>
<p>15 минут пешком от метро, удобный заезд на автомобиле, бесплатная парковка для гостей и команд.</p>
</article>
<article class="info-card">
<h3>Комфорт для команд</h3>
<p>9 раздевалок, судейские помещения, ресторан, апарт-отель — всё для тренировок, сборов и турниров любого масштаба.</p>
</article>
<article class="info-card">
<h3>Готовы к соревнованиям</h3>
<p>Стандартные размеры площадок, профессиональное оборудование, опыт проведения турниров.</p>
</article>
</div>
</section>
<section class="section section--pattern objects" id="objects">
<div class="container">
<header class="section__head">
<h2>Наши объекты</h2>
<p>Профессиональная инфраструктура для ваших целей</p>
</header>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/ledovie.jpg');"></div>
<div class="object-card__content">
<h3>Два ледовых поля</h3>
<p>Стандарт 56×26 м. Тренировки, сборы, соревнования.</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="object-card__content">
<h3>Универсальный зал</h3>
<p>Паркетное покрытие. Игровые виды спорта, ОФП, турниры.</p>
<a class="btn btn--small" href="#booking">Забронировать</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__content">
<h3>Фитнес-центр</h3>
<p>Кардио, силовая и функциональная зоны. Premium-оборудование.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card object-card--reverse">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/1231.png');"></div>
<div class="object-card__content">
<h3>Зал хореографии</h3>
<p>Зеркала, станки. Танцы, групповые программы, ОФП.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="object-card__content">
<h3>Зал единоборств</h3>
<p>Бокс, ММА, борьба. Ринг, татами, мешки.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="object-card__content">
<h3>Апарт-отель</h3>
<p>70+ номеров для команд и гостей. Прямо на территории.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="object-card__content">
<h3>Ресторан</h3>
<p>Сбалансированное спортивное питание. Меню для команд.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
<article class="object-card">
<div class="object-card__image" style="background-image: linear-gradient(0deg, rgba(18,18,18,.3), rgba(18,18,18,.3)), url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="object-card__content">
<h3>Парковка и подъезд</h3>
<p>Своя парковка для гостей и автобусов команд.</p>
<a class="btn btn--small" href="#booking">Подробнее</a>
</div>
</article>
</div>
</section>
<section class="section infrastructure" id="infrastructure">
<div class="container">
<header class="section__head">
<h2>Инфраструктура</h2>
<p>Всё для комфорта спортсменов</p>
</header>
<div class="infrastructure__grid">
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-complex"></use>
</svg>
</div>
<h3>Апарт-отель</h3>
<p>70+ номеров на территории.</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-restaurant"></use>
</svg>
</div>
<h3>Ресторан</h3>
<p>Сбалансированное питание для спортсменов. Меню под запрос команды (диета, время приёмов, специализированное питание).</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-changingrooms"></use>
</svg>
</div>
<h3>9 раздевалок</h3>
<p>Душевые, индивидуальные шкафчики, скамейки, всё необходимое для команд и посетителей.</p>
</article>
<article class="feature-card">
<div class="feature-card__icon" aria-hidden="true">
<svg viewBox="0 0 32 32" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-drying"></use>
</svg>
</div>
<h3>Судейские помещения</h3>
<p>Отдельные комнаты для судей, организаторов и пресс-зоны при проведении соревнований.</p>
</article>
</div>
</div>
</section>
<section class="section services" id="services">
<div class="container">
<header class="section__head">
<h2>Услуги</h2>
<p>Широкий спектр возможностей для вашего спорта</p>
</header>
<div class="services__grid">
<a class="service-card" href="#booking">Аренда льда — почасовая или абонементом</a>
<a class="service-card" href="#booking">Аренда залов — универсального, единоборств, хореографии, фитнес-зон</a>
<a class="service-card" href="#booking">Сборы команд «под ключ» — лёд + зал + проживание + питание</a>
<a class="service-card" href="#booking">Проведение турниров и соревнований</a>
<a class="service-card" href="#booking">Корпоративные мероприятия и тимбилдинги</a>
<a class="service-card" href="#booking">Фитнес — индивидуально, абонемент, групповые занятия</a>
</div>
<div class="services__cta">
<a class="btn services__cta-btn" href="#">Подобрать формат и время</a>
</div>
</div>
</section>
<section class="section pricing" id="pricing">
<div class="container">
<header class="section__head">
<h2>Стоимость</h2>
</header>
<div class="pricing__list">
<article class="pricing-item">
<h3>Аренда льда</h3>
<p>от Х ₽/час</p>
</article>
<article class="pricing-item">
<h3>Аренда универсального зала</h3>
<p>от Х ₽/час</p>
</article>
<article class="pricing-item">
<h3>Сборы (пакет лёд+зал+проживание+питание на 1 чел./сутки)</h3>
<p>от Х</p>
</article>
<article class="pricing-item">
<h3>Фитнес (разовое посещение / месячный абонемент)</h3>
<p>от Х</p>
</article>
</div>
<p class="pricing__note">Точная стоимость зависит от времени, длительности и пакета услуг. Оставьте заявку — пришлём расчёт за 30 минут.</p>
<div class="pricing__cta">
<a class="btn pricing__cta-btn" href="#booking">Получить расчёт</a>
</div>
</div>
</section>
<section class="section gallery" id="gallery">
<div class="container">
<header class="section__head">
<h2>Галерея</h2>
<p>Пространства OlimpArena в деталях</p>
</header>
<div class="gallery__grid">
<div class="gallery__item" style="background-image:url('./assets/images/other/1231.png');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/8540eec74dd51616e6b30215183b38ad1-870x580.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/IMG_4521-min.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/ledovie.jpg');"></div>
<div class="gallery__item" style="background-image:url('./assets/images/other/6399e455dd0120ee5802a0d0_643691cf6bb745.08564640.jpg');"></div>
</div>
</div>
</section>
<section class="section reviews">
<div class="container">
<header class="section__head">
<h2>Отзывы</h2>
<p>Что говорят о нас спортсмены и тренеры</p>
</header>
<div class="reviews__grid">
<article class="review-card">
<p>"Лучшие ледовые условия в Москве. Качество льда на высочайшем уровне, всё организовано профессионально."</p>
<strong>Александр Иванов</strong>
<span>Тренер хоккейной школы</span>
</article>
<article class="review-card">
<p>"Отличный комплекс для тренировок. Залы хореографии и фитнеса действительно помогают прогрессировать быстрее."</p>
<strong>Елена Петрова</strong>
<span>Фигуристка</span>
</article>
<article class="review-card">
<p>"Проводим здесь турниры уже второй год. Профессиональный подход команды и высокая готовность площадок."</p>
<strong>Дмитрий Соколов</strong>
<span>Организатор турниров</span>
</article>
</div>
<div class="stats">
<article><strong>150+</strong><span>Мест для проживания</span></article>
<article><strong>2</strong><span>Профессиональных ледовых поля</span></article>
<article><strong>10</strong><span>Оборудованных раздевалок</span></article>
</div>
</div>
</section>
<section class="section booking" id="booking">
<div class="container booking__wrap">
<div class="booking__form">
<h2>Забронировать время</h2>
<p>Заполните форму, и мы свяжемся с вами в ближайшее время для подтверждения заявки.</p>
<form action="#" method="post">
<label>
<input type="text" name="sport" placeholder="Вид спорта">
</label>
<label>
<input type="text" name="date" placeholder="Желаемая дата">
</label>
<label>
<input type="text" name="name" placeholder="Ваше имя">
</label>
<label>
<input type="tel" name="phone" placeholder="Телефон">
</label>
<button class="btn" type="submit">Отправить заявку</button>
</form>
</div>
<div class="booking__contacts" id="contacts">
<div class="contacts-card">
<h3>Контакты</h3>
<ul>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-address"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Адрес</strong>
<span>Москва, в пределах ТТК<br>15 минут от м. Волгоградский проспект</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-telephone"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Телефон</strong>
<span>+7 (495) 123-45-67</span>
</div>
</li>
<li>
<span class="contacts-card__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<use href="./assets/images/svg-sprites.svg#icon-email"></use>
</svg>
</span>
<div class="contacts-card__item-content">
<strong>Email</strong>
<span>receptionadmin@o-arena.ru</span>
</div>
</li>
</ul>
</div>
<div class="hours-card">
<h4>Режим работы</h4>
<p>Ежедневно: 06:00 — 23:00</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__top">
<div class="footer__brand">
<a class="logo" href="#top" aria-label="OlimpArena">
<img src="./assets/images/logo.svg" alt="OlimpArena">
</a>
<p>Современный спортивный комплекс в центре Москвы</p>
</div>
<nav class="footer__nav" aria-label="Навигация в футере">
<h4>Навигация</h4>
<a href="#objects">Объекты</a>
<a href="#services">Услуги</a>
<a href="#gallery">Галерея</a>
<a href="#contacts">Контакты, режим работы</a>
</nav>
<div class="footer__contacts">
<h4>Контакты</h4>
<span>+7 (495) 123-45-67</span>
<span>receptionadmin@o-arena.ru</span>
<span>Москва, ТТК</span>
</div>
<div class="footer__social">
<h4>Социальные сети</h4>
<div class="footer__socials">
<a href="#" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none">
<rect x="2.5" y="2.5" width="19" height="19" rx="5" stroke="currentColor" stroke-width="2"/>
<circle cx="12" cy="12" r="4.25" stroke="currentColor" stroke-width="2"/>
<circle cx="17.2" cy="6.8" r="1.2" fill="currentColor"/>
</svg>
</a>
<a href="#" aria-label="Facebook">
<svg viewBox="0 0 24 24" fill="none">
<path d="M14.5 8H16.5V5H14C11.8 5 10 6.8 10 9V11H8V14H10V19H13V14H15.5L16 11H13V9.5C13 8.67 13.67 8 14.5 8Z" fill="currentColor"/>
</svg>
</a>
</div>
</div>
</div>
<div class="footer__bottom">
<span>© 2026 OlimpArena. Все права защищены.</span>
<div class="footer__legal">
<a href="#">Политика конфиденциальности</a>
<a href="#">Условия использования</a>
</div>
</div>
</div>
</footer>
</div>
<script src="./assets/js/main.js" defer></script>
</body>
</html>