/
chebotardaniel
/
mfc
Обзор
Документация
Войти
/
chebotardaniel
/
mfc
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
369 строк
21 KB
Чеботарь Даниель
feat: главная страница — структура и разметка
03 май 2026, 11:00
03 май 2026, 11:00
f5ed81d
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="МФЦ спортивного клуба «Олимп» — запись на тренировки, фитнес-тестирование, физиотерапия, консультация диетолога и медицинское сопровождение онлайн."> <meta name="keywords" content="МФЦ, спортивный клуб, Олимп, фитнес, тренировки, физиотерапия, диетолог, запись онлайн"> <title>МФЦ СК «Олимп» — Главная</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <a href="#main-content" class="skip-link">Перейти к содержимому</a> <header class="site-header"> <div class="header-inner"> <a href="index.html" class="logo-wrap" aria-label="МФЦ спортивного клуба «Олимп» — на главную"> <div class="logo-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> <path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/> </svg> </div> <div> <div class="site-name">МФЦ СК «Олимп»</div> <div class="site-subtitle">Многофункциональный центр спортивного клуба</div> </div> </a> <button class="burger" id="burger-btn" aria-expanded="false" aria-controls="main-nav" aria-label="Открыть меню"> <span></span><span></span><span></span> </button> <nav class="site-nav" id="main-nav" aria-label="Основная навигация"> <ul> <li><a href="index.html" class="active" aria-current="page">Главная</a></li> <li><a href="services.html">Услуги</a></li> <li><a href="#appointment">Запись</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </nav> </div> </header> <main id="main-content"> <section class="hero" aria-label="Приветственный баннер"> <div class="hero-content"> <div class="hero-badge">Многофункциональный центр клуба</div> <h1>Все услуги клуба —<br>в одном окне</h1> <p>МФЦ спортивного клуба «Олимп» — запись на тренировки, фитнес-тестирование, физиотерапия, диетология и медицинское сопровождение без очередей.</p> <div class="hero-buttons"> <a href="#appointment" class="btn btn-primary"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/></svg> Записаться онлайн </a> <a href="services.html" class="btn btn-outline">Все услуги</a> </div> </div> </section> <section class="section" aria-labelledby="services-heading"> <div class="container"> <h2 class="section-title" id="services-heading">Услуги МФЦ</h2> <p class="section-desc">Всё необходимое для тренировок, восстановления и здоровья — доступно через единый центр</p> <div class="section-divider" role="presentation"></div> <div class="services-grid"> <article class="service-card"> <div class="service-card-icon"> <img src="images/trener.webp" alt="Групповая тренировка в спортивном зале" loading="lazy"> </div> <div class="service-card-body"> <h3>Запись на тренировки</h3> <p>Онлайн-запись на групповые и индивидуальные занятия со всеми тренерами клуба.</p> <a href="services.html#training" class="service-card-link" aria-label="Подробнее: Запись на тренировки">Подробнее</a> </div> </article> <article class="service-card"> <div class="service-card-icon"> <img src="images/fittest.webp" alt="Специалист проводит фитнес-тестирование с измерением состава тела" loading="lazy"> </div> <div class="service-card-body"> <h3>Фитнес-тестирование</h3> <p>Комплексная оценка физической формы: состав тела, гибкость, выносливость, сила.</p> <a href="services.html#testing" class="service-card-link" aria-label="Подробнее: Фитнес-тестирование">Подробнее</a> </div> </article> <article class="service-card"> <div class="service-card-icon"> <img src="images/fizio.webp" alt="Физиотерапевт проводит лечебный массаж спортсмену" loading="lazy"> </div> <div class="service-card-body"> <h3>Физиотерапия и массаж</h3> <p>Восстановительный и спортивный массаж, физиотерапевтические процедуры после травм.</p> <a href="services.html#physio" class="service-card-link" aria-label="Подробнее: Физиотерапия">Подробнее</a> </div> </article> <article class="service-card"> <div class="service-card-icon"> <img src="images/dietolog.webp" alt="Диетолог консультирует клиента за столом с планом питания" loading="lazy"> </div> <div class="service-card-body"> <h3>Консультация диетолога</h3> <p>Составление индивидуального плана питания с учётом целей и нагрузок.</p> <a href="services.html#nutrition" class="service-card-link" aria-label="Подробнее: Диетолог">Подробнее</a> </div> </article> <article class="service-card"> <div class="service-card-icon"> <img src="images/iii.webp" alt="Стойка с профессиональным спортивным инвентарём и экипировкой" loading="lazy"> </div> <div class="service-card-body"> <h3>Аренда инвентаря</h3> <p>Прокат спортивного оборудования, экипировки и аксессуаров для тренировок.</p> <a href="services.html#inventory" class="service-card-link" aria-label="Подробнее: Аренда инвентаря">Подробнее</a> </div> </article> <article class="service-card"> <div class="service-card-icon"> <img src="images/med.webp" alt="Спортивный врач на приёме проводит осмотр спортсмена" loading="lazy"> </div> <div class="service-card-body"> <h3>Медицинское сопровождение</h3> <p>Врачебный контроль, допуск к соревнованиям, справки для секций и бассейна.</p> <a href="services.html#medical" class="service-card-link" aria-label="Подробнее: Медицинское сопровождение">Подробнее</a> </div> </article> </div> <div style="text-align: center; margin-top: 36px;"> <a href="services.html" class="btn btn-secondary">Смотреть все услуги</a> </div> </div> </section> <section class="section section-alt" aria-labelledby="about-heading"> <div class="container"> <div class="about-grid"> <div class="about-text"> <h2 id="about-heading">О МФЦ спортивного клуба «Олимп»</h2> <p>МФЦ клуба «Олимп» — единое окно обслуживания членов клуба. Здесь можно записаться на любое занятие, пройти фитнес-диагностику, получить физиотерапевтическую процедуру, проконсультироваться с диетологом и решить все административные вопросы.</p> <p>Центр работает без выходных и обеспечивает бесшовный сервис: от первичного визита новичка до сопровождения профессионального спортсмена.</p> <p>Онлайн-запись доступна круглосуточно — выбирайте удобное время и специалиста.</p> <a href="services.html" class="btn btn-secondary" style="margin-top: 12px;">Узнать больше</a> </div> <div class="stats-grid" role="region" aria-label="Статистика клуба"> <div class="stat-item"> <div class="stat-number">1 200+</div> <div class="stat-label">Членов клуба</div> </div> <div class="stat-item"> <div class="stat-number">25</div> <div class="stat-label">Тренеров и специалистов</div> </div> <div class="stat-item"> <div class="stat-number">97%</div> <div class="stat-label">Довольных клиентов</div> </div> <div class="stat-item"> <div class="stat-number">7 дней</div> <div class="stat-label">Без выходных</div> </div> </div> </div> </div> </section> <section class="video-section" aria-labelledby="video-heading"> <div class="video-wrap"> <h2 class="section-title" id="video-heading">Добро пожаловать в клуб «Олимп»</h2> <p class="section-desc">Посмотрите обзор нашего спортивного комплекса и центра услуг</p> <div class="video-container" role="figure" aria-label="Видеообзор спортивного клуба «Олимп»"> <video controls muted loop poster="images/videoframe_12894.png" width="720" aria-label="Видео-обзор спортивного клуба и МФЦ «Олимп»"> <source src="images/istockphoto-1183383373-640_adpp_is.mp4" type="video/mp4"> <p>Ваш браузер не поддерживает встроенное видео. <a href="images/istockphoto-1183383373-640_adpp_is.mp4">Скачать видео</a>.</p> </video> </div> </div> </section> <section class="appointment-section" id="appointment" aria-labelledby="form-heading"> <div class="appointment-wrap"> <h2 class="section-title" id="form-heading">Онлайн-запись</h2> <p class="section-desc">Выберите услугу и удобное время — мы подтвердим запись в течение часа</p> <div class="section-divider" role="presentation"></div> <div class="form-card"> <form action="thank-you.html" method="get" aria-label="Форма онлайн-записи в МФЦ СК «Олимп»"> <div class="form-row"> <div class="form-group"> <label for="first-name">Имя <span class="required-mark" aria-hidden="true">*</span></label> <input type="text" id="first-name" name="first_name" placeholder="Иван" required autocomplete="given-name" pattern="[А-ЯЁа-яёA-Za-z][А-ЯЁа-яёA-Za-z\-]{1,49}" minlength="2" maxlength="50" title="Только буквы, минимум 2 символа, без цифр"> </div> <div class="form-group"> <label for="last-name">Фамилия <span class="required-mark" aria-hidden="true">*</span></label> <input type="text" id="last-name" name="last_name" placeholder="Иванов" required autocomplete="family-name" pattern="[А-ЯЁа-яёA-Za-z][А-ЯЁа-яёA-Za-z\-]{1,49}" minlength="2" maxlength="50" title="Только буквы, минимум 2 символа, без цифр"> </div> </div> <div class="form-row"> <div class="form-group"> <label for="phone">Телефон <span class="required-mark" aria-hidden="true">*</span></label> <input type="tel" id="phone" name="phone" placeholder="+7 (000) 000-00-00" required autocomplete="tel" pattern="(\+?7|8)[\s\-]?\(?\d{3}\)?[\s\-]?\d{3}[\s\-]?\d{2}[\s\-]?\d{2}" title="Российский номер: +7 (XXX) XXX-XX-XX, 11 цифр"> </div> <div class="form-group"> <label for="email">Электронная почта</label> <input type="email" id="email" name="email" placeholder="example@mail.ru" autocomplete="email" required pattern="[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}"> </div> </div> <div class="form-group"> <label for="service">Услуга <span class="required-mark" aria-hidden="true">*</span></label> <select id="service" name="service" required> <option value="" disabled selected>— Выберите услугу —</option> <option value="training">Запись на тренировку</option> <option value="testing">Фитнес-тестирование</option> <option value="physio">Физиотерапия и массаж</option> <option value="nutrition">Консультация диетолога</option> <option value="inventory">Аренда инвентаря</option> <option value="medical">Медицинское сопровождение</option> <option value="other">Другое</option> </select> </div> <div class="form-row"> <div class="form-group"> <label for="visit-date">Предпочитаемая дата <span class="required-mark" aria-hidden="true">*</span></label> <input type="date" id="visit-date" name="visit_date" required min="2026-06-16" max="2027-06-16" title="Выберите дату в пределах ближайшего года"> </div> <div class="form-group"> <label for="visit-time">Удобное время</label> <select id="visit-time" name="visit_time"> <option value="">— Любое —</option> <option value="7:00">07:00 – 09:00</option> <option value="9:00">09:00 – 11:00</option> <option value="11:00">11:00 – 13:00</option> <option value="13:00">13:00 – 15:00</option> <option value="15:00">15:00 – 17:00</option> <option value="17:00">17:00 – 19:00</option> <option value="19:00">19:00 – 21:00</option> </select> </div> </div> <div class="form-group"> <label for="comment">Комментарий</label> <textarea id="comment" name="comment" placeholder="Укажите предпочитаемого тренера, особенности здоровья или другие детали..." aria-describedby="comment-hint"></textarea> <small id="comment-hint" class="form-note">Необязательное поле</small> </div> <p class="form-note"> <span class="required-mark">*</span> — поля, обязательные для заполнения. Нажимая «Записаться», вы соглашаетесь с политикой конфиденциальности. </p> <button type="submit" class="btn btn-primary form-submit"> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Записаться </button> </form> </div> </div> </section> <section class="section" id="contacts" aria-labelledby="contacts-heading"> <div class="container"> <h2 class="section-title" id="contacts-heading">Контакты МФЦ</h2> <p class="section-desc">Центр работает 7 дней в неделю — мы всегда на месте</p> <div class="section-divider" role="presentation"></div> <div class="contacts-grid"> <div class="contact-card"> <span class="contact-icon" aria-hidden="true">📍</span> <h3>Адрес</h3> <p>ул. Победы, 12<br>г. Санкт-Петербург, 196128</p> </div> <div class="contact-card"> <span class="contact-icon" aria-hidden="true">📞</span> <h3>Телефон</h3> <p><a href="tel:+78124440011">+7 (812) 444-00-11</a><br><small>Пн–Вс: 7:00–23:00</small></p> </div> <div class="contact-card"> <span class="contact-icon" aria-hidden="true">🕐</span> <h3>Режим работы МФЦ</h3> <p>Пн–Пт: 7:00–23:00<br>Сб–Вс: 8:00–22:00</p> </div> </div> </div> </section> </main> <footer class="site-footer"> <div class="footer-inner"> <div class="footer-top"> <div class="footer-brand"> <a href="index.html" class="logo-wrap" aria-label="Перейти на главную страницу"> <div class="logo-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" fill="var(--color-primary)" aria-hidden="true" focusable="false"> <path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/> </svg> </div> <div><div class="site-name">МФЦ СК «Олимп»</div></div> </a> <p>Многофункциональный центр спортивного клуба. Все услуги — в одном окне.</p> </div> <div class="footer-col"> <h3>Услуги</h3> <ul> <li><a href="services.html#training">Запись на тренировки</a></li> <li><a href="services.html#testing">Фитнес-тестирование</a></li> <li><a href="services.html#physio">Физиотерапия</a></li> <li><a href="services.html#nutrition">Диетолог</a></li> <li><a href="services.html">Все услуги</a></li> </ul> </div> <div class="footer-col"> <h3>Информация</h3> <ul> <li><a href="#appointment">Онлайн-запись</a></li> <li><a href="#contacts">Контакты</a></li> <li><a href="services.html">О центре</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2026 МФЦ СК «Олимп». Все права защищены.</p> <p>Учебный проект. Чеботарь Даниель Олегович, гр. 251-672</p> </div> </div> </footer> </body> </html>