157 lines
6.3 KiB
HTML
157 lines
6.3 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="stylesheet" href="style.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<header class="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-content">
|
||
<h1>🎵 Весёлые друзья</h1>
|
||
<p class="subtitle">Музыкальный городок</p>
|
||
<p class="tagline">Детские песни и приключения вместе с Бубой и друзьями!</p>
|
||
<a href="#videos" class="cta-button">Смотреть видео</a>
|
||
</div>
|
||
<div class="hero-characters">
|
||
<img src="file_00000000b4c0820ab6e62923776881e1.png" alt="Буба и друзья" class="characters-image">
|
||
</div>
|
||
</header>
|
||
|
||
<section class="characters" id="characters">
|
||
<h2>🌟 Наши герои</h2>
|
||
<div class="characters-grid">
|
||
<div class="character-card bear">
|
||
<div class="character-emoji">🐻</div>
|
||
<h3>Буба</h3>
|
||
<p>Добрый медвежонок, главный герой</p>
|
||
</div>
|
||
<div class="character-card bunny">
|
||
<div class="character-emoji">🐰</div>
|
||
<h3>Лулу</h3>
|
||
<p>Весёлая зайка</p>
|
||
</div>
|
||
<div class="character-card panda">
|
||
<div class="character-emoji">🐼</div>
|
||
<h3>Панди</h3>
|
||
<p>Немного смешной и неуклюжий</p>
|
||
</div>
|
||
<div class="character-card chick">
|
||
<div class="character-emoji">🐥</div>
|
||
<h3>Пипи</h3>
|
||
<p>Маленький жёлтый цыплёнок</p>
|
||
</div>
|
||
<div class="character-card fox">
|
||
<div class="character-emoji">🦊</div>
|
||
<h3>Фокси</h3>
|
||
<p>Хитрый, но добрый лисёнок</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="videos" id="videos">
|
||
<h2>🎬 Первый ролик</h2>
|
||
<div class="video-featured">
|
||
<div class="video-card featured">
|
||
<div class="video-thumbnail">
|
||
<span class="play-icon">▶</span>
|
||
</div>
|
||
<div class="video-info">
|
||
<h3>🌈 Буба и друзья учат цвета</h3>
|
||
<p>Буба просыпается и обнаруживает, что в городе исчезли цвета. Вместе с друзьями они отправляются искать красный, жёлтый, зелёный и синий цвета!</p>
|
||
<div class="song-preview">
|
||
<p class="song-text">🔴 Красный, красный — яблочко!</p>
|
||
<p class="song-text">🟡 Жёлтый — солнышко!</p>
|
||
<p class="song-text">🟢 Зелёный — травушка!</p>
|
||
<p class="song-text">🔵 Синий — речушка!</p>
|
||
</div>
|
||
<button class="notify-button" onclick="notify()">🔔 Узнать о выходе</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="episodes">
|
||
<h2>🎵 Скоро в эфире</h2>
|
||
<div class="episodes-grid">
|
||
<div class="episode-card">
|
||
<span class="episode-number">02</span>
|
||
<h4>Буба учит цифры 1–10</h4>
|
||
<p>🔢</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">03</span>
|
||
<h4>Буба идёт на ферму</h4>
|
||
<p>🐮</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">04</span>
|
||
<h4>Буба и друзья моют руки</h4>
|
||
<p>🧼</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">05</span>
|
||
<h4>Буба учит животных</h4>
|
||
<p>🐶🐱</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">06</span>
|
||
<h4>Буба собирается спать</h4>
|
||
<p>🌙</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">07</span>
|
||
<h4>Буба едет на автобусе</h4>
|
||
<p>🚌</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">08</span>
|
||
<h4>Буба и друзья убирают игрушки</h4>
|
||
<p>🧸</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">09</span>
|
||
<h4>Буба учится делиться</h4>
|
||
<p>🎁</p>
|
||
</div>
|
||
<div class="episode-card">
|
||
<span class="episode-number">10</span>
|
||
<h4>Большая музыкальная вечеринка</h4>
|
||
<p>🎉</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about">
|
||
<h2>🎨 О проекте</h2>
|
||
<div class="about-content">
|
||
<p>Все персонажи живут в красочном Музыкальном городке, где каждый день происходит маленькое приключение.</p>
|
||
<p>Мы создаём качественную 3D-анимацию с мягкими округлыми персонажами, большими выразительными глазами и ярким, но не раздражающим фоном.</p>
|
||
<p>🎶 Музыка полностью оригинальная — мы создаём свои песни и персонажей!</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="subscribe">
|
||
<h2>📢 Подпишитесь на канал!</h2>
|
||
<p>Узнайте первыми о выходе новых роликов</p>
|
||
<form id="subscribe-form" onsubmit="subscribe(event)">
|
||
<input type="email" placeholder="Ваш email" required>
|
||
<button type="submit">Подписаться</button>
|
||
</form>
|
||
<p id="subscribe-message" class="subscribe-message"></p>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Весёлые друзья — Музыкальный городок</p>
|
||
<p>🎵 Детские песни и приключения</p>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|