diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e6ef059
--- /dev/null
+++ b/index.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Приглашение на День Рождения!</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 600px;
+      width: 100%;
+    }
+
+    .invitation {
+      background: white;
+      border-radius: 30px;
+      padding: 40px 30px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .invitation::before {
+      content: '🎈';
+      position: absolute;
+      top: -20px;
+      left: -20px;
+      font-size: 80px;
+      opacity: 0.1;
+      transform: rotate(-30deg);
+    }
+
+    .invitation::after {
+      content: '🎊';
+      position: absolute;
+      bottom: -20px;
+      right: -20px;
+      font-size: 80px;
+      opacity: 0.1;
+      transform: rotate(30deg);
+    }
+
+    .header {
+      margin-bottom: 30px;
+    }
+
+    .title {
+      font-size: 2.5em;
+      color: #764ba2;
+      margin-bottom: 10px;
+      font-weight: bold;
+    }
+
+    .subtitle {
+      font-size: 1.3em;
+      color: #667eea;
+      font-weight: 500;
+    }
+
+    .emoji-section {
+      font-size: 4em;
+      margin: 30px 0;
+      animation: bounce 2s infinite;
+    }
+
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-20px); }
+    }
+
+    .details {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 20px;
+      padding: 30px;
+      margin: 30px 0;
+      color: white;
+    }
+
+    .detail-item {
+      margin: 20px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+    }
+
+    .detail-icon {
+      font-size: 2em;
+    }
+
+    .detail-text {
+      text-align: left;
+    }
+
+    .detail-label {
+      font-size: 0.9em;
+      opacity: 0.9;
+      margin-bottom: 5px;
+    }
+
+    .detail-value {
+      font-size: 1.3em;
+      font-weight: bold;
+    }
+
+    .message {
+      font-size: 1.2em;
+      line-height: 1.6;
+      color: #333;
+      margin: 30px 0;
+      padding: 0 20px;
+    }
+
+    .cta-button {
+      display: inline-block;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 15px 40px;
+      border-radius: 50px;
+      font-size: 1.2em;
+      font-weight: bold;
+      text-decoration: none;
+      margin-top: 20px;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+    }
+
+    .cta-button:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
+    }
+
+    .footer {
+      margin-top: 30px;
+      color: #999;
+      font-size: 0.9em;
+    }
+
+    .confetti {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      background-color: #f00;
+      animation: fall linear forwards;
+      opacity: 0;
+    }
+
+    @keyframes fall {
+      0% {
+        transform: translateY(-100vh) rotate(0deg);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(100vh) rotate(720deg);
+        opacity: 0;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .title {
+        font-size: 2em;
+      }
+      .subtitle {
+        font-size: 1.1em;
+      }
+      .detail-value {
+        font-size: 1.1em;
+      }
+      .invitation {
+        padding: 30px 20px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="invitation">
+      <div class="header">
+        <div class="title">🎂 Приглашение!</div>
+        <div class="subtitle">На мой День Рождения</div>
+      </div>
+
+      <div class="emoji-section">
+        🎉 🎁 🎈
+      </div>
+
+      <div class="message">
+        Дорогие друзья и близкие!<br><br>
+        Приглашаю вас отпраздновать со мной мой особенный день! 
+        Будет весело, вкусно и незабываемо!
+      </div>
+
+      <div class="details">
+        <div class="detail-item">
+          <span class="detail-icon">📅</span>
+          <div class="detail-text">
+            <div class="detail-label">Дата</div>
+            <div class="detail-value">16 августа 2026</div>
+          </div>
+        </div>
+
+        <div class="detail-item">
+          <span class="detail-icon">🕕</span>
+          <div class="detail-text">
+            <div class="detail-label">Время</div>
+            <div class="detail-value">18:00</div>
+          </div>
+        </div>
+
+        <div class="detail-item">
+          <span class="detail-icon">🍽️</span>
+          <div class="detail-text">
+            <div class="detail-label">Место</div>
+            <div class="detail-value">Ресторан "Самир"</div>
+          </div>
+        </div>
+
+        <div class="detail-item">
+          <span class="detail-icon">📍</span>
+          <div class="detail-text">
+            <div class="detail-label">Адрес</div>
+            <div class="detail-value">ул. Жумалиева, 108</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="message">
+        Очень жду вас на своём празднике!<br>
+        Давайте создадим вместе незабываемые воспоминания! 💫
+      </div>
+
+      <a href="tel:+77771234567" class="cta-button">📞 Подтвердить участие</a>
+
+      <div class="footer">
+        До встречи! 🎊
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Создаём конфетти
+    function createConfetti() {
+      const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe', '#43e97b', '#fa709a', '#fee140'];
+      
+      for (let i = 0; i < 50; i++) {
+        setTimeout(() => {
+          const confetti = document.createElement('div');
+          confetti.className = 'confetti';
+          confetti.style.left = Math.random() * 100 + 'vw';
+          confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+          confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
+          document.body.appendChild(confetti);
+
+          setTimeout(() => confetti.remove(), 5000);
+        }, i * 100);
+      }
+    }
+
+    // Запускаем конфетти при загрузке
+    window.addEventListener('load', createConfetti);
+  </script>
+</body>
+</html>
