schoolfest / index.html
mDuck's picture
Add 3 files
cc4947d verified
Raw History Blame Contribute Delete
47.3 kB
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фестиваль школьного спорта 2025 | Открой в себе супергероя!</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Ruthless+Sketch:wght@400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root {
--yellow: #FFD700;
--orange: #FF6B35;
--blue: #4361EE;
--green: #38B000;
--red: #D90429;
}
body {
font-family: 'Rubik', sans-serif;
background-color: #f8f9fa;
color: #333;
overflow-x: hidden;
}
.comic-font {
font-family: 'Ruthless Sketch', cursive;
letter-spacing: 1px;
font-style: italic;
font-weight: 400;
}
.comic-box {
border: 4px solid #000;
box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
position: relative;
background: white;
}
.comic-box::before {
content: "";
position: absolute;
top: -15px;
left: -15px;
right: -15px;
bottom: -15px;
border: 3px dashed var(--orange);
z-index: -1;
opacity: 0.7;
}
.bang {
position: absolute;
font-family: 'Ruthless Sketch', cursive;
font-style: italic;
color: var(--red);
font-size: 3rem;
transform: rotate(-20deg);
text-shadow: 3px 3px 0 #000;
animation: pulse 1.5s infinite alternate;
}
@keyframes pulse {
0% { transform: rotate(-20deg) scale(1); }
100% { transform: rotate(-20deg) scale(1.1); }
}
.hero {
background: linear-gradient(135deg, var(--blue), var(--green));
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.comic-card {
transition: all 0.3s ease;
}
.comic-card:hover {
transform: translateY(-10px) rotate(2deg);
box-shadow: 15px 15px 0 rgba(0,0,0,0.3);
}
.comic-stripe {
background: repeating-linear-gradient(
45deg,
var(--yellow),
var(--yellow) 10px,
var(--orange) 10px,
var(--orange) 20px
);
height: 10px;
}
.speech-bubble {
position: relative;
background: white;
border: 3px solid #000;
border-radius: 20px;
padding: 15px;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -15px;
left: 50px;
border-width: 15px 15px 0;
border-style: solid;
border-color: white transparent;
display: block;
width: 0;
}
.speech-bubble:before {
content: '';
position: absolute;
bottom: -18px;
left: 50px;
border-width: 15px 15px 0;
border-style: solid;
border-color: black transparent;
display: block;
width: 0;
z-index: -1;
}
.dot-pattern {
background-image: radial-gradient(circle, #000 1px, transparent 1px);
background-size: 10px 10px;
}
.activity-tag {
position: absolute;
top: -10px;
right: 20px;
background: var(--red);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
box-shadow: 3px 3px 0 #000;
font-family: 'Ruthless Sketch', cursive;
font-style: italic;
}
.scroll-top {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--orange);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 3px 3px 0 #000;
transition: all 0.3s ease;
z-index: 1000;
}
.scroll-top:hover {
transform: translateY(-5px);
background: var(--red);
}
.map-container {
position: relative;
overflow: hidden;
border: 5px solid #000;
box-shadow: 10px 10px 0 rgba(0,0,0,0.2);
}
.map-container iframe {
width: 100%;
height: 400px;
border: none;
}
.nav-item {
position: relative;
}
.nav-item::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: var(--yellow);
transition: width 0.3s ease;
}
.nav-item:hover::after {
width: 100%;
}
.comic-divider {
height: 10px;
background: repeating-linear-gradient(
to right,
var(--blue),
var(--blue) 10px,
var(--green) 10px,
var(--green) 20px
);
margin: 40px 0;
}
.partner-logo {
filter: grayscale(100%);
transition: all 0.3s ease;
opacity: 0.7;
}
.partner-logo:hover {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.1);
}
@media (max-width: 768px) {
.hero {
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.comic-box::before {
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
.bang {
font-size: 2rem;
}
}
</style>
</head>
<body class="bg-gray-100">
<!-- Навигация -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="comic-font text-3xl font-bold text-blue-600 mr-2">ФШС<span class="text-orange-500">2025</span></div>
<div class="hidden md:flex space-x-6 ml-10">
<a href="#about" class="nav-item text-gray-800 hover:text-blue-600 font-bold">О фестивале</a>
<a href="#activities" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Активности</a>
<a href="#partners" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Партнёры</a>
<a href="#location" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Где проходит</a>
</div>
</div>
<div>
<a href="#register" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:scale-105">
Хочу участвовать!
</a>
</div>
</div>
</div>
</nav>
<!-- Герой-блок -->
<section class="hero text-white py-20 md:py-32 relative overflow-hidden">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 relative">
<div class="bang" style="top: -30px; left: -20px;">BAM!</div>
<div class="bang" style="bottom: 20px; right: -20px;">POW!</div>
<h1 class="comic-font text-5xl md:text-7xl mb-6 leading-tight">
Открой в себе <span class="text-yellow-300">супергероя</span> —<br>
на Фестивале школьного спорта!
</h1>
<p class="text-xl mb-8">
Присоединяйся к самому яркому спортивному событию года!<br>
Москва, 15-17 мая 2025 года
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#register" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105 text-center">
<i class="fas fa-running mr-2"></i> Хочу участвовать!
</a>
<a href="#activities" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105 text-center">
<i class="fas fa-list-ul mr-2"></i> Программа
</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="comic-box p-2 bg-white relative">
<img src="https://images.unsplash.com/photo-1541534741688-6078c6efb9d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети занимаются спортом" class="w-full h-auto max-w-md">
<div class="activity-tag comic-font">NEW 2025!</div>
</div>
</div>
</div>
<div class="comic-stripe absolute bottom-0 left-0 right-0"></div>
</section>
<!-- О фестивале -->
<section id="about" class="py-16 bg-white relative">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800">
<span class="text-blue-600">Фестиваль</span> <span class="text-orange-500">школьного</span> <span class="text-green-500">спорта</span>
</h2>
<div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div>
<p class="text-xl text-gray-600 max-w-4xl mx-auto">
Где обычные школьники становятся настоящими супергероями!
</p>
</div>
<div class="flex flex-col md:flex-row items-center mb-16">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<div class="comic-box p-6 dot-pattern">
<div class="speech-bubble">
<p class="text-lg leading-relaxed">
Не все герои носят яркие костюмы и обладают сверхспособностями. Некоторые из них каждый день отправляются в школу или колледж, занимаются спортом и добиваются невероятных высот.
</p>
</div>
</div>
</div>
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1517649763962-0c623066f6f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети занимаются спортом" class="w-full rounded-lg shadow-xl">
</div>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 order-2 md:order-1 mt-10 md:mt-0">
<img src="https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети играют в баскетбол" class="w-full rounded-lg shadow-xl">
</div>
<div class="md:w-1/2 order-1 md:order-2 md:pl-10">
<div class="comic-box p-6 bg-blue-50">
<h3 class="comic-font text-3xl text-blue-600 mb-4">Настоящие истории героев</h3>
<p class="text-lg leading-relaxed mb-4">
Представьте себе мир, где школьники, студенты и их наставники становятся настоящими героями. В нашем уникальном комиксе оживают реальные истории, и вы погрузитесь в мир, где молодые спортсмены стремятся к своим мечтам.
</p>
<p class="text-lg leading-relaxed">
Возможно, вы не всегда замечаете этих героев, но они среди нас – на нашем Фестивале школьного спорта! Здесь их достижения и упорство становятся источником вдохновения для каждого жителя Москвы.
</p>
</div>
</div>
</div>
<div class="comic-divider"></div>
<div class="text-center">
<h3 class="comic-font text-3xl text-gray-800 mb-6">Итак, мы начинаем путешествие по страницам нашего комикса!</h3>
<a href="#activities" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
<i class="fas fa-arrow-down mr-2"></i> Узнать программу
</a>
</div>
</div>
</section>
<!-- Карточки активностей -->
<section id="activities" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800">
<span class="text-blue-600">Спортивные</span> <span class="text-orange-500">активности</span>
</h2>
<div class="w-24 h-2 bg-green-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-600 max-w-4xl mx-auto">
Выбери свой путь супергероя! Более 20 видов спорта и активностей для всех возрастов.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="activities-grid">
<!-- Карточки будут загружены через JavaScript -->
</div>
<div class="text-center mt-16">
<a href="#full-activities" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
<i class="fas fa-list-ol mr-2"></i> Посмотреть полную программа
</a>
</div>
</div>
</section>
<!-- Полная программа активностей -->
<section id="full-activities" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800">
<span class="text-orange-500">Полная</span> <span class="text-blue-600">программа</span> <span class="text-green-500">фестиваля</span>
</h2>
<div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div>
<p class="text-xl text-gray-600 max-w-4xl mx-auto">
Все активности, мастер-классы и соревнования Фестиваля школьного спорта 2025
</p>
</div>
<!-- Баскетбол 3x3 -->
<div class="mb-20 comic-box p-6 bg-white relative">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0 md:pr-6">
<img src="https://images.unsplash.com/photo-1546519638-68e109498ffc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Баскетбол 3x3" class="w-full rounded-lg shadow-md">
</div>
<div class="md:w-2/3">
<h3 class="comic-font text-3xl text-blue-600 mb-4">Баскетбол 3x3</h3>
<div class="flex items-center mb-4">
<span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">Для всех</span>
<span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">15-17 мая</span>
</div>
<p class="text-lg leading-relaxed mb-4">
Динамичная версия классического баскетбола с меньшим количеством игроков. Идеально подходит для уличных площадок и быстрых матчей. Прими участие в турнире или просто поиграй для удовольствия!
</p>
<div class="mb-4">
<h4 class="font-bold text-lg mb-2">Расписание:</h4>
<ul class="list-disc pl-5">
<li>15 мая: 10:00-14:00 - Регистрация команд</li>
<li>15 мая: 14:00-18:00 - Групповой этап</li>
<li>16 мая: 11:00-17:00 - Плей-офф</li>
<li>17 мая: 12:00-14:00 - Финал и награждение</li>
</ul>
</div>
<a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300">
Зарегистрироваться
</a>
</div>
</div>
</div>
<!-- Игры ГТО -->
<div class="mb-20 comic-box p-6 bg-white relative">
<div class="flex flexocol md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0 md:pr-6">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Игры ГТО" class="w-full rounded-lg shadow-md">
</div>
<div class="md:w-2/3">
<h3 class="comic-font text-3xl text-blue-600 mb-4">Игры ГТО</h3>
<div class="flex items-center mb-4">
<span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">Для всех</span>
<span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">15-17 мая</span>
</div>
<p class="text-lg leading-relaxed mb-4">
Проверь свою готовность к труду и обороне! На фестивале ты можешь сдать нормативы ГТО и получить заветный значок. В программе: бег, прыжки, подтягивания, отжимания и другие испытания.
</p>
<div class="mb-4">
<h4 class="font-bold text-lg mb-2">Этапы:</h4>
<ul class="list-disc pl-5">
<li>Бег на короткие и длинные дистанции</li>
<li>Прыжки в длину с места</li>
<li>Подтягивания/отжимания</li>
<li>Наклоны вперед</li>
<li>Метание спортивного снаряда</li>
</ul>
</div>
<a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300">
Зарегистрироваться
</a>
</div>
</div>
</div>
<!-- Картинг -->
<div class="mb-20 comic-box p-6 bg-white relative">
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3 mb-6 md:mb-0 md:pr-6">
<img src="https://images.unsplash.com/photo-1585086125000-c6b0f8c113e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Картинг" class="w-full rounded-lg shadow-md">
</div>
<div class="md:w-2/3">
<h3 class="comic-font text-3xl text-blue-600 mb-4">Картинг</h3>
<div class="flex items-center mb-4">
<span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">12+ лет</span>
<span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">16-17 мая</span>
</div>
<p class="text-lg leading-relaxed mb-4">
Почувствуй себя гонщиком Формулы-1! На специально оборудованной трассе ты сможешь попробовать свои силы в картинге. Опытные инструкторы помогут освоить основы управления картом и обеспечат безопасность.
</p>
<div class="mb-4">
<h4 class="font-bold text-lg mb-2">Расписание:</h4>
<ul class="list-disc pl-5">
<li>16 мая: 10:00-12:00 - Обучение и тренировки</li>
<li>16 мая: 13:00-17:00 - Квалификационные заезды</li>
<li>17 мая: 11:00-14:00 - Финальные гонки</li>
<li>17 мая: 15:00-16:00 - Награждение победителей</li>
</ul>
</div>
<a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300">
Зарегистрироваться
</a>
</div>
</div>
</div>
<!-- Кнопка "Показать еще" с анимацией -->
<div class="text-center mt-8">
<button id="show-more" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
<i class="fas fa-chevron-down mr-2"></i> Показать еще активности
</button>
</div>
<!-- Скрытые активности (появятся при нажатии кнопки) -->
<div id="hidden-activities" class="hidden">
<!-- Здесь будут остальные активности -->
</div>
</div>
</section>
<!-- Партнёры -->
<section id="partners" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800">
<span class="text-blue-600">Нас поддерживают</span> <span class="text-orange-500">супергерои</span>
</h2>
<div class="w-24 h-2 bg-green-500 mx-auto mb-6"></div>
<p class="text-xl text-gray-600 max-w-4xl mx-auto">
Благодарим наших партнёров за помощь в организации фестиваля!
</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8">
<div class="flex justify-center items-center h-32">
<img src="https://via.placeholder.com/200x100?text=Департамент+образования" alt="Департамент образования" class="partner-logo max-h-20">
</div>
<div class="flex justify-center items-center h-32">
<img src="https://via.placeholder.com/200x100?text=МЦВП" alt="МЦВП" class="partner-logo max-h-20">
</div>
<div class="flex justify-center items-center h-32">
<img src="https://via.placeholder.com/200x100?text=Спортивный+бренд" alt="Спортивный бренд" class="partner-logo max-h-20">
</div>
<div class="flex justify-center items-center h-32">
<img src="https://via.placeholder.com/200x100?text=Город+Москва" alt="Город Москва" class="partner-logo max-h-20">
</div>
<div class="flex justify-center items-center h-32">
<img src="https://via.placeholder.com/200x100?text=Спортивная+федерация" alt="Спортивная федерация" class="partner-logo max-h-20">
</div>
</div>
</div>
</section>
<!-- Где проходит фестиваль -->
<section id="location" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800">
<span class="text-orange-500">Где проходит</span> <span class="text-blue-600">фестиваль</span>
</h2>
<div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div>
<p class="text-xl text-gray-600 max-w-4xl mx-auto">
Олимпийский комплекс «Лужники», Южное спортивное ядро
</p>
</div>
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<div class="map-container">
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Ae7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3&amp;source=constructor" frameborder="0"></iframe>
</div>
</div>
<div class="md:w-1/2">
<div class="comic-box p-8 bg-blue-50">
<h3 class="comic-font text-3xl text-blue-600 mb-4">Как добраться</h3>
<div class="mb-6">
<h4 class="font-bold text-lg mb-2"><i class="fas fa-subway mr-2 text-orange-500"></i> Метро</h4>
<p class="text-lg">Станция "Спортивная", выход №5. 5 минут пешком до Южного ядра.</p>
</div>
<div class="mb-6">
<h4 class="font-bold text-lg mb-2"><i class="fas fa-bus mr-2 text-green-500"></i> Автобус</h4>
<p class="text-lg">Маршруты 64, 216, 255 до остановки "Лужники".</p>
</div>
<div class="mb-6">
<h4 class="font-bold text-lg mb-2"><i class="fas fa-car mr-2 text-red-500"></i> На машине</h4>
<p class="text-lg">Парковка доступна на территории комплекса. Рекомендуем использовать общественный транспорт в дни фестиваля.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-2"><i class="fas fa-clock mr-2 text-yellow-500"></i> Время работы</h4>
<p class="text-lg">15 мая: 9:00-20:00<br>16 мая: 9:00-20:00<br>17 мая: 9:00-18:00</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Регистрация -->
<section id="register" class="py-16 bg-gradient-to-r from-blue-600 to-green-500 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="comic-font text-4xl md:text-5xl mb-6">
<span class="text-yellow-300">Стань частью</span> <span class="text-white">фестиваля!</span>
</h2>
<div class="w-24 h-2 bg-orange-500 mx-auto mb-6"></div>
<p class="text-xl max-w-4xl mx-auto">
Зарегистрируйся на фестиваль и выбери активности, в которых хочешь участвовать
</p>
</div>
<div class="max-w-3xl mx-auto comic-box p-8 bg-white text-gray-800">
<form id="registration-form">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label for="name" class="block text-gray-700 font-bold mb-2">ФИО</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="email" class="block text-gray-700 font-bold mb-2">Email</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="phone" class="block text-gray-700 font-bold mb-2">Телефон</label>
<input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="age" class="block text-gray-700 font-bold mb-2">Возраст</label>
<input type="number" id="age" name="age" min="7" max="18" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-bold mb-2">Выберите активности</label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
<div class="flex items-center">
<input type="checkbox" id="activity1" name="activities" value="Баскетбол 3x3" class="mr-2">
<label for="activity1">Баскетбол 3x3</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="activity2" name="activities" value="Игры ГТО" class="mr-2">
<label for="activity2">Игры ГТО</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="activity3" name="activities" value="Картинг" class="mr-2">
<label for="activity3">Картинг</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="activity4" name="activities" value="Единоборства" class="mr-2">
<label for="activity4">Единоборства</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="activity5" name="activities" value="Лазертаг" class="mr-2">
<label for="activity5">Лазертаг</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="activity6" name="activities" value="Шахматы" class="mr-2">
<label for="activity6">Шахматы</label>
</div>
</div>
</div>
<div class="mb-6">
<label for="comments" class="block text-gray-700 font-bold mb-2">Дополнительная информация</label>
<textarea id="comments" name="comments" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<div class="flex items-center mb-6">
<input type="checkbox" id="agree" name="agree" required class="mr-2">
<label for="agree">Я согласен на обработку персональных данных</label>
</div>
<div class="text-center">
<button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105">
<i class="fas fa-paper-plane mr-2"></i> Отправить заявку
</button>
</div>
</form>
</div>
</div>
</section>
<!-- Футер -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="comic-font text-2xl text-yellow-400 mb-4">ФШС 2025</h3>
<p class="mb-4">Фестиваль школьного спорта - это масштабное событие для всех, кто любит спорт и активный образ жизни!</p>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-vk fa-lg"></i></a>
<a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-telegram fa-lg"></i></a>
<a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-instagram fa-lg"></i></a>
</div>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Контакты</h4>
<ul class="space-y-2">
<li><i class="fas fa-phone-alt mr-2 text-yellow-400"></i> +7 (495) 123-45-67</li>
<li><i class="fas fa-envelope mr-2 text-yellow-400"></i> info@schoolsportfest.ru</li>
<li><i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> Москва, Лужники</li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Быстрые ссылки</h4>
<ul class="space-y-2">
<li><a href="#about" class="hover:text-yellow-400">О фестивале</a></li>
<li><a href="#activities" class="hover:text-yellow-400">Активности</a></li>
<li><a href="#partners" class="hover:text-yellow-400">Партнёры</a></li>
<li><a href="#location" class="hover:text-yellow-400">Как добраться</a></li>
<li><a href="#register" class="hover:text-yellow-400">Регистрация</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-4">Организаторы</h4>
<p class="mb-2">Департамент образования и науки города Москвы</p>
<p>ГБОУ ДПО МЦВП</p>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-500">
<p>© 2025 Фестиваль школьного спорта. Все права защищены.</p>
</div>
</div>
</footer>
<!-- Кнопка "Наверх" -->
<div id="scroll-top" class="scroll-top hidden">
<i class="fas fa-arrow-up"></i>
</div>
<script>
// Данные для карточек активностей
const activitiesData = [
{
title: "Аэробика-Фест",
description: "Зажигательные танцевальные программы и соревнования по аэробике для всех возрастов.",
icon: "fa-heartbeat",
color: "bg-red-500",
age: "Для всех"
},
{
title: "Баскетбол 3x3",
description: "Динамичная версия классического баскетбола. Собери команду и участвуй в турнире!",
icon: "fa-basketball-ball",
color: "bg-orange-500",
age: "12+ лет"
},
{
title: "Игры ГТО",
description: "Проверь свою готовность к труду и обороне! Сдай нормативы и получи значок ГТО.",
icon: "fa-medal",
color: "bg-yellow-500",
age: "Для всех"
},
{
title: "Картинг",
description: "Почувствуй себя гонщиком Формулы-1 на специально оборудованной трассе.",
icon: "fa-car",
color: "bg-green-500",
age: "12+ лет"
},
{
title: "Единоборства",
description: "Мастер-классы по различным видам единоборств от профессиональных тренеров.",
icon: "fa-user-ninja",
color: "bg-blue-500",
age: "10+ лет"
},
{
title: "Мастер-классы",
description: "Уникальные обучающие программы от ведущих спортсменов и тренеров.",
icon: "fa-chalkboard-teacher",
color: "bg-indigo-500",
age: "Для всех"
},
{
title: "Кибер-кафе",
description: "Соревнования по киберспорту и зона отдыха для любителей видеоигр.",
icon: "fa-gamepad",
color: "bg-purple-500",
age: "10+ лет"
},
{
title: "Лазертаг",
description: "Командные тактические игры с использованием безопасного лазерного оборудования.",
icon: "fa-crosshairs",
color: "bg-pink-500",
age: "10+ лет"
},
{
title: "Тэг-регби",
description: "Бесконтактная версия регби - идеально подходит для начинающих.",
icon: "fa-football-ball",
color: "bg-red-600",
age: "8+ лет"
},
{
title: "Волейбол",
description: "Классический и пляжный волейбол для всех уровней подготовки.",
icon: "fa-volleyball-ball",
color: "bg-orange-600",
age: "Для всех"
},
{
title: "Путь Ниндзя",
description: "Полоса препятствий, вдохновленная известным шоу. Проверь свою ловкость!",
icon: "fa-running",
color: "bg-yellow-600",
age: "8+ лет"
},
{
title: "Шахматы и шашки",
description: "Турниры по классическим настольным играм для всех возрастов.",
icon: "fa-chess",
color: "bg-green-600",
age: "Для всех"
},
{
title: "Городки",
description: "Традиционная русская игра. Попробуй свои силы в этом увлекательном виде спорта!",
icon: "fa-dice",
color: "bg-blue-600",
age: "Для всех"
}
];
// Заполнение карточек активностей
document.addEventListener('DOMContentLoaded', function() {
const activitiesGrid = document.getElementById('activities-grid');
activitiesData.forEach(activity => {
const card = document.createElement('div');
card.className = 'comic-card comic-box p-6 bg-white relative';
card.innerHTML = `
<div class="${activity.color} text-white w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i class="fas ${activity.icon} text-xl"></i>
</div>
<h3 class="comic-font text-2xl text-gray-800 mb-2">${activity.title}</h3>
<p class="text-gray-600 mb-4">${activity.description}</p>
<span class="bg-gray-200 text-gray-800 font-bold py-1 px-3 rounded-full text-sm">${activity.age}</span>
`;
activitiesGrid.appendChild(card);
});
// Показать/скрыть дополнительные активности
const showMoreBtn = document.getElementById('show-more');
const hiddenActivities = document.getElementById('hidden-activities');
showMoreBtn.addEventListener('click', function() {
if (hiddenActivities.classList.contains('hidden')) {
hiddenActivities.classList.remove('hidden');
showMoreBtn.innerHTML = '<i class="fas fa-chevron-up mr-2"></i> Скрыть активности';
} else {
hiddenActivities.classList.add('hidden');
showMoreBtn.innerHTML = '<i class="fas fa-chevron-down mr-2"></i> Показать еще активности';
}
});
// Кнопка "Наверх"
const scrollTopBtn = document.getElementById('scroll-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
scrollTopBtn.classList.remove('hidden');
} else {
scrollTopBtn.classList.add('hidden');
}
});
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Обработка формы регистрации
const registrationForm = document.getElementById('registration-form');
registrationForm.addEventListener('submit', function(e) {
e.preventDefault();
// Здесь можно добавить отправку формы на сервер
alert('Спасибо за регистрацию! Мы свяжемся с вами в ближайшее время.');
registrationForm.reset();
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mDuck/schoolfest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>