/
LoLoRo
/
stage3-beginners
Обзор
Документация
Войти
/
LoLoRo
/
stage3-beginners
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
develop
index.html
159 строк
8 KB
LoLoRo
добавила index.html в корень репозитория
18 апр 2026, 21:00
18 апр 2026, 21:00
84d655a
Код
Авторство
О чём код?
<!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="cosmo_site/css/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="cosmo_site/shared/icons/sputnik.svg" class="sputnik" alt="Спутник"> <!-- Создадим контейнер wrapper для центрирования --> <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="cosmo_site/shared/icons/rocket.svg" class="rocket-svg" alt="Ракета"> </div> </div> </div> </section> <!-- Разметка для секции с поздравлением --> <section class="section"> <h2 class="section-title">Поздравление</h2> <div class="greeting"> Дорогие покорители мечты, с <strong>Днем космонавтики</strong>! 12 апреля — день, когда мечта стала реальностью! В этот день в 1961 году Юрий Гагарин, облетев Землю на корабле «Восток», не просто открыл эру космических полётов, но и доказал: для человеческой мысли нет границ. Пусть ваша жизнь будет такой же яркой и стремительной, как полёт кометы! Желаю, чтобы мечты взлетали выше орбиты, а успех был таким же необъятным, как Вселенная. Пусть каждый день дарит новые открытия, а вдохновение ведёт к самым смелым вершинам. И пусть в вашем сердце всегда горит звезда, указывающая путь к счастью и новым горизонтам! Смелее — к звёздам! </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="cosmo_site/shared/pictures/gagarin.jpeg" alt="Юрий Гагарин"> <div class="photo-label"> <h3>Юрий Гагарин</h3> <p>Первый человек в космосе — символ отваги, улыбки и великого начала космической эры.</p> </div> </article> <article class="photo-card"> <img src="cosmo_site/shared/pictures/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> <!-- Добавление разметки для футера перед main --> <div class="footer">★ С праздником, земляне! Пусть путь к звездам начинается с мечты ★</div> </main> <!-- Закрываем контейнер wrapper для центрирования --> <!-- Создание разметки для модального окна победы --> <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> <!-- Подключение JavaScript к HTML перед body --> <script src="cosmo_site/js/script.js"></script> <!-- окончание --> </body> </html>