313 lines
8.5 KiB
HTML
313 lines
8.5 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Весёлые друзья — Музыкальный городок</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
|
||
|
||
.hero {
|
||
background: linear-gradient(135deg, #ff6b9d, #ffd700, #87ceeb);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: 48px;
|
||
color: white;
|
||
text-shadow: 3px 3px 0 #ff6b9d;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.hero .subtitle {
|
||
font-size: 28px;
|
||
color: #ffd700;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 18px;
|
||
color: white;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 15px 30px;
|
||
background: #ff6b9d;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 30px;
|
||
font-weight: bold;
|
||
border: 3px solid white;
|
||
}
|
||
|
||
.characters-img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 20px;
|
||
margin-top: 30px;
|
||
border: 5px solid white;
|
||
}
|
||
|
||
section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
|
||
|
||
h2 {
|
||
font-size: 36px;
|
||
text-align: center;
|
||
color: #ff6b9d;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.chars-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.char-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 25px;
|
||
text-align: center;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
border: 4px solid #ff6b9d;
|
||
}
|
||
|
||
.char-emoji { font-size: 60px; display: block; margin-bottom: 10px; }
|
||
.char-card h3 { color: #ff6b9d; margin-bottom: 8px; }
|
||
|
||
.video-section {
|
||
background: #e4f5ff;
|
||
border-radius: 30px;
|
||
margin: 40px auto;
|
||
}
|
||
|
||
.video-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.video-card h3 { color: #ff6b9d; margin-bottom: 15px; }
|
||
|
||
.song-box {
|
||
background: #fff5e4;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.song-box p {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #ff6b9d;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.episodes-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
|
||
.episode {
|
||
background: white;
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.episode-num {
|
||
display: inline-block;
|
||
background: #ff6b9d;
|
||
color: white;
|
||
padding: 5px 12px;
|
||
border-radius: 15px;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.episode-emoji { font-size: 40px; margin-top: 10px; }
|
||
|
||
.subscribe {
|
||
background: linear-gradient(135deg, #ff6b9d, #ff8e53);
|
||
border-radius: 30px;
|
||
padding: 50px 30px;
|
||
text-align: center;
|
||
color: white;
|
||
margin: 40px auto;
|
||
}
|
||
|
||
.subscribe h2 { color: white; }
|
||
|
||
.subscribe form {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.subscribe input {
|
||
padding: 15px 25px;
|
||
border-radius: 30px;
|
||
border: none;
|
||
font-size: 16px;
|
||
min-width: 250px;
|
||
}
|
||
|
||
.subscribe button {
|
||
padding: 15px 30px;
|
||
border-radius: 30px;
|
||
border: none;
|
||
background: white;
|
||
color: #ff6b9d;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
footer {
|
||
background: #2d2d44;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 30px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hero">
|
||
<h1>🎵 Весёлые друзья</h1>
|
||
<p class="subtitle">Музыкальный городок</p>
|
||
<p>Детские песни и приключения вместе с Бубой и друзьями!</p>
|
||
<a href="#video" class="btn">▶ Смотреть видео</a>
|
||
<img src="file_00000000b4c0820ab6e62923776881e1.png" alt="Буба и друзья" class="characters-img">
|
||
</header>
|
||
|
||
<section id="characters">
|
||
<h2>🌟 Наши герои</h2>
|
||
<div class="chars-grid">
|
||
<div class="char-card">
|
||
<span class="char-emoji">🐻</span>
|
||
<h3>Буба</h3>
|
||
<p>Добрый медвежонок</p>
|
||
</div>
|
||
<div class="char-card">
|
||
<span class="char-emoji">🐰</span>
|
||
<h3>Лулу</h3>
|
||
<p>Весёлая зайка</p>
|
||
</div>
|
||
<div class="char-card">
|
||
<span class="char-emoji">🐼</span>
|
||
<h3>Панди</h3>
|
||
<p>Смешной и неуклюжий</p>
|
||
</div>
|
||
<div class="char-card">
|
||
<span class="char-emoji">🐥</span>
|
||
<h3>Пипи</h3>
|
||
<p>Маленький цыплёнок</p>
|
||
</div>
|
||
<div class="char-card">
|
||
<span class="char-emoji">🦊</span>
|
||
<h3>Фокси</h3>
|
||
<p>Хитрый лисёнок</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="video" class="video-section">
|
||
<h2>🎬 Первый ролик</h2>
|
||
<div class="video-card">
|
||
<h3>🌈 Буба и друзья учат цвета</h3>
|
||
<p>Буба просыпается и обнаруживает, что в городе исчезли цвета. Вместе с друзьями они ищут красный, жёлтый, зелёный и синий!</p>
|
||
|
||
<div class="song-box">
|
||
<p>🔴 Красный, красный — яблочко!</p>
|
||
<p>🟡 Жёлтый — солнышко!</p>
|
||
<p>🟢 Зелёный — травушка!</p>
|
||
<p>🔵 Синий — речушка!</p>
|
||
</div>
|
||
|
||
<p style="text-align: center; margin-top: 20px;">🎵 В конце все танцуют вместе!</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>🎵 Скоро в эфире</h2>
|
||
<div class="episodes-grid">
|
||
<div class="episode">
|
||
<span class="episode-num">02</span>
|
||
<h4>Учит цифры 1–10</h4>
|
||
<div class="episode-emoji">🔢</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">03</span>
|
||
<h4>Идёт на ферму</h4>
|
||
<div class="episode-emoji">🐮</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">04</span>
|
||
<h4>Моют руки</h4>
|
||
<div class="episode-emoji">🧼</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">05</span>
|
||
<h4>Учит животных</h4>
|
||
<div class="episode-emoji">🐶🐱</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">06</span>
|
||
<h4>Собирается спать</h4>
|
||
<div class="episode-emoji">🌙</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">07</span>
|
||
<h4>Едет на автобусе</h4>
|
||
<div class="episode-emoji">🚌</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">08</span>
|
||
<h4>Убирают игрушки</h4>
|
||
<div class="episode-emoji">🧸</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">09</span>
|
||
<h4>Учится делиться</h4>
|
||
<div class="episode-emoji">🎁</div>
|
||
</div>
|
||
<div class="episode">
|
||
<span class="episode-num">10</span>
|
||
<h4>Музыкальная вечеринка</h4>
|
||
<div class="episode-emoji">🎉</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="subscribe">
|
||
<h2>📢 Подпишитесь!</h2>
|
||
<p>Узнайте первыми о выходе новых роликов</p>
|
||
<form onsubmit="event.preventDefault(); alert('🎉 Спасибо! Мы сообщим о выходе!');">
|
||
<input type="email" placeholder="Ваш email" required>
|
||
<button type="submit">Подписаться</button>
|
||
</form>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2026 Весёлые друзья — Музыкальный городок</p>
|
||
<p>🎵 Детские песни и приключения</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|