/
iraperepelova
/
stage3-beginners
Обзор
Документация
Войти
/
iraperepelova
/
stage3-beginners
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
develop
index.html
143 строки
7 KB
iraperepelova
create: .cm_token, index.html, script.js, styles.css, space-puzzle.jpeg, gagarin.jpeg, rocket-launch.jpeg
19 апр 2026, 13:22
Верифицирован
19 апр 2026, 13:22
e1ac82e
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>С Днем космонавтики!</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="orbit"></div> <div class="orbit-two"></div> <div class="orbit-three"></div> <div class="comet"></div> <div class="planet"></div> <img src="sputnik.svg" class="sputnik" alt="Спутник"> <main class="wrapper"> <section class="hero"> <div class="ribbon-section"> <div class="ribbon-left"> <span class="star">★</span> 12 апреля· праздник мечты, мужества и звезд <span class="star">★</span> </div> <div class="ribbon-right"> <span class="star">★</span> Цифровой марафон 2026 <span class="star">★</span> </div> </div> <div class="hero-grid"> <div> <h1 class="title">С <span class="gold">Днем</span><br>космонавтики!</h1> <p class="subtitle"> Пусть сердце смело стремится вперед, идеи взлетают выше облаков, а каждый новый день открывает собственную орбиту вдохновения, открытий и побед. </p> <div class="hero-badges"> <div class="badge">Время первых</div> <div class="badge">Мечтай масштабно</div> <div class="badge">Держи курс к звездам</div> </div> </div> <div class="poster-art" aria-hidden="true"> <div class="sunburst"></div> <div class="rocket-wrap"> <div class="rocket-trail"></div> <img src="rocket.svg" class="rocket-svg" alt="Ракета"> </div> </div> </div> </section> <section class="section"> <h2 class="section-title">Поздравление</h2> <div class="greeting"> Дорогие покорители мечты, с <strong>Днем космонавтики</strong>! Путь к звёздам начинается с одного шага — сделай его сегодня! 12 апреля — день, когда человек впервые покорил космос. Знаете ли вы, что Юрий Гагарин во время полёта пел песню «Родина слышит, родина знает»? Его голос стал первой земной мелодией, прозвучавшей на орбите. Пусть и в вашей жизни всегда звучит вдохновляющая музыка мечты, а каждый новый виток судьбы приближает к самым смелым целям. Желаю, чтобы ваши идеи взлетали выше орбитальных станций, а успех был ярче любой кометы. Пусть даже в трудные моменты внутренний компас указывает на счастье, а неиссякаемая энергия помогает преодолевать любые перегрузки. И пусть ваша личная вселенная будет наполнена светом, теплом и удивительными открытиями! </div> <div class="ticker" aria-label="Бегущая строка"> <div class="ticker-track"> <span>★ Поехали! ★</span> <span>Слава покорителям космоса ★</span> <span>Мечтай. Дерзай. Взлетай. ★</span> <span>12 апреля — День космонавтики ★</span> <span>Поехали! ★</span> <span>Слава покорителям космоса ★</span> <span>Мечтай. Дерзай. Взлетай. ★</span> <span>12 апреля — День космонавтики ★</span> </div> </div> </section> <section class="section"> <h2 class="section-title">Лица эпохи и полет мечты</h2> <div class="gallery"> <article class="photo-card"> <img src="gagarin.jpeg" alt="Юрий Гагарин"> <div class="photo-label"> <h3>Юрий Гагарин</h3> <p>Первый человек в космосе — символ отваги, улыбки и великого начала космической эры.</p> </div> </article> <article class="photo-card"> <img src="rocket-launch.jpeg" alt="Ракета на старте"> <div class="photo-label"> <h3>Ракета на старте</h3> <p>Мгновение, когда земля остается внизу, а впереди — только свет, высота и звездный путь.</p> </div> </article> </div> </section> <section class="section"> <h2 class="section-title">Космические пятнашки</h2> <div class="game-grid"> <div class="game-panel"> <div id="puzzle" class="puzzle-board" aria-label="Игра пятнашки"></div> <div class="hint">Нажимай на плитку рядом с пустой клеткой, чтобы собрать космическую картинку.</div> </div> <div class="game-info"> <p> В этой версии классической игры тебя ждет <strong>космическая мозаика</strong>. Собери изображение, переставляя фрагменты по одному, и открой праздничное сообщение. </p> <p> Игра начинается с перемешанной, но решаемой комбинации. Для большего настроения здесь много сияния, движения и легкой атмосферы ретро-футуризма. </p> <div class="controls"> <button id="shuffleBtn">Перемешать</button> <button id="solveBtn" class="secondary">Помочь собрать</button> </div> <div class="stats"> <div class="stat"><span>Ходы</span><strong id="moves">0</strong></div> <div class="stat"><span>Побед</span><strong id="wins">0</strong></div> </div> <div class="preview" aria-hidden="true"></div> </div> </div> </section> <div class="footer">★ С праздником, земляне! Пусть путь к звездам начинается с мечты ★</div> </main> <div class="success" id="successModal" role="dialog" aria-modal="true" aria-labelledby="successTitle"> <div class="success-card"> <h3 id="successTitle">Поехали!</h3> <p> Космическая картинка собрана! Пусть каждый твой день будет похож на удачный старт: яркий, вдохновляющий и устремленный к новым высотам. </p> <button id="closeModal">Продолжить праздник</button> </div> </div> <script src="script.js"></script> </body> </html>