From 413b64acdf73b06252c041917a189b591e738485 Mon Sep 17 00:00:00 2001
From: Zholdas <sagashov@inbox.ru>
Date: Sun, 6 Sep 2026 05:11:48 +0000
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D1=91=D0=BD?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=8F=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D1=81=D0=B0=D0=B9=D1=82=D0=B0=20-=20=D0=B2=D0=B5=D1=81=D1=8C?=
 =?UTF-8?q?=20CSS=20=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B8=20HTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 352 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 254 insertions(+), 98 deletions(-)

diff --git a/index.html b/index.html
index 5629ba7..b31ccd0 100644
--- a/index.html
+++ b/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>
+    <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 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">
-          <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 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 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>&copy; 2026 Весёлые друзья — Музыкальный городок</p>
+    <p>© 2026 Весёлые друзья — Музыкальный городок</p>
     <p>🎵 Детские песни и приключения</p>
   </footer>
 
-  <script src="script.js"></script>
 </body>
 </html>