Упрощённая версия сайта - весь CSS внутри HTML
This commit is contained in:
parent
bdb37a0c67
commit
413b64acdf
346
index.html
346
index.html
@ -4,153 +4,309 @@
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<p>Детские песни и приключения вместе с Бубой и друзьями!</p>
|
||||
<a href="#video" class="btn">▶ Смотреть видео</a>
|
||||
<img src="file_00000000b4c0820ab6e62923776881e1.png" alt="Буба и друзья" class="characters-img">
|
||||
</header>
|
||||
|
||||
<section class="characters" id="characters">
|
||||
<section id="characters">
|
||||
<h2>🌟 Наши герои</h2>
|
||||
<div class="characters-grid">
|
||||
<div class="character-card bear">
|
||||
<div class="character-emoji">🐻</div>
|
||||
<div class="chars-grid">
|
||||
<div class="char-card">
|
||||
<span class="char-emoji">🐻</span>
|
||||
<h3>Буба</h3>
|
||||
<p>Добрый медвежонок, главный герой</p>
|
||||
<p>Добрый медвежонок</p>
|
||||
</div>
|
||||
<div class="character-card bunny">
|
||||
<div class="character-emoji">🐰</div>
|
||||
<div class="char-card">
|
||||
<span class="char-emoji">🐰</span>
|
||||
<h3>Лулу</h3>
|
||||
<p>Весёлая зайка</p>
|
||||
</div>
|
||||
<div class="character-card panda">
|
||||
<div class="character-emoji">🐼</div>
|
||||
<div class="char-card">
|
||||
<span class="char-emoji">🐼</span>
|
||||
<h3>Панди</h3>
|
||||
<p>Немного смешной и неуклюжий</p>
|
||||
<p>Смешной и неуклюжий</p>
|
||||
</div>
|
||||
<div class="character-card chick">
|
||||
<div class="character-emoji">🐥</div>
|
||||
<div class="char-card">
|
||||
<span class="char-emoji">🐥</span>
|
||||
<h3>Пипи</h3>
|
||||
<p>Маленький жёлтый цыплёнок</p>
|
||||
<p>Маленький цыплёнок</p>
|
||||
</div>
|
||||
<div class="character-card fox">
|
||||
<div class="character-emoji">🦊</div>
|
||||
<div class="char-card">
|
||||
<span class="char-emoji">🦊</span>
|
||||
<h3>Фокси</h3>
|
||||
<p>Хитрый, но добрый лисёнок</p>
|
||||
<p>Хитрый лисёнок</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="videos" id="videos">
|
||||
<section id="video" class="video-section">
|
||||
<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">
|
||||
<div class="video-card">
|
||||
<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>
|
||||
<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 class="episodes">
|
||||
<section>
|
||||
<h2>🎵 Скоро в эфире</h2>
|
||||
<div class="episodes-grid">
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">02</span>
|
||||
<h4>Буба учит цифры 1–10</h4>
|
||||
<p>🔢</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">02</span>
|
||||
<h4>Учит цифры 1–10</h4>
|
||||
<div class="episode-emoji">🔢</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">03</span>
|
||||
<h4>Буба идёт на ферму</h4>
|
||||
<p>🐮</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">03</span>
|
||||
<h4>Идёт на ферму</h4>
|
||||
<div class="episode-emoji">🐮</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">04</span>
|
||||
<h4>Буба и друзья моют руки</h4>
|
||||
<p>🧼</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">04</span>
|
||||
<h4>Моют руки</h4>
|
||||
<div class="episode-emoji">🧼</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">05</span>
|
||||
<h4>Буба учит животных</h4>
|
||||
<p>🐶🐱</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">05</span>
|
||||
<h4>Учит животных</h4>
|
||||
<div class="episode-emoji">🐶🐱</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">06</span>
|
||||
<h4>Буба собирается спать</h4>
|
||||
<p>🌙</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">06</span>
|
||||
<h4>Собирается спать</h4>
|
||||
<div class="episode-emoji">🌙</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">07</span>
|
||||
<h4>Буба едет на автобусе</h4>
|
||||
<p>🚌</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">07</span>
|
||||
<h4>Едет на автобусе</h4>
|
||||
<div class="episode-emoji">🚌</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">08</span>
|
||||
<h4>Буба и друзья убирают игрушки</h4>
|
||||
<p>🧸</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">08</span>
|
||||
<h4>Убирают игрушки</h4>
|
||||
<div class="episode-emoji">🧸</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">09</span>
|
||||
<h4>Буба учится делиться</h4>
|
||||
<p>🎁</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">09</span>
|
||||
<h4>Учится делиться</h4>
|
||||
<div class="episode-emoji">🎁</div>
|
||||
</div>
|
||||
<div class="episode-card">
|
||||
<span class="episode-number">10</span>
|
||||
<h4>Большая музыкальная вечеринка</h4>
|
||||
<p>🎉</p>
|
||||
<div class="episode">
|
||||
<span class="episode-num">10</span>
|
||||
<h4>Музыкальная вечеринка</h4>
|
||||
<div class="episode-emoji">🎉</div>
|
||||
</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>
|
||||
<h2>📢 Подпишитесь!</h2>
|
||||
<p>Узнайте первыми о выходе новых роликов</p>
|
||||
<form id="subscribe-form" onsubmit="subscribe(event)">
|
||||
<form onsubmit="event.preventDefault(); alert('🎉 Спасибо! Мы сообщим о выходе!');">
|
||||
<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>© 2026 Весёлые друзья — Музыкальный городок</p>
|
||||
<p>🎵 Детские песни и приключения</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user