/
llrr
/
lab9
Обзор
Документация
Войти
/
llrr
/
lab9
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
demo.html
128 строк
5 KB
llrr
Create: index.html, form.html, demo.html, style.css, normalizion.css
15 июн 2026, 00:31
Верифицирован
15 июн 2026, 00:31
9904c93
Код
Авторство
О чём код?
<!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="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body class="demo-page"> <header> <h1>Демонстрация возможностей CSS</h1> <p>Градиенты, 2D/3D преобразования, переходы</p> </header> <nav> <a href="index.html">🏠 На главную</a> <a href="form.html">📝 Регистрация</a> <a href="demo.html">✨ Демо</a> </nav> <main> <!-- ГРАДИЕНТЫ --> <section class="gradients-section"> <h2>🎨 Градиенты</h2> <div class="gradient-container"> <div class="gradient-card linear-gradient"> <h3>Линейный градиент</h3> <p>background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)</p> </div> <div class="gradient-card radial-gradient"> <h3>Радиальный градиент</h3> <p>background: radial-gradient(circle, #f5af19, #f12711)</p> </div> <div class="gradient-card conic-gradient"> <h3>Конический градиент</h3> <p>background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red)</p> </div> </div> </section> <!-- 2D ПРЕОБРАЗОВАНИЯ --> <section class="transforms-2d-section"> <h2>🔄 2D преобразования</h2> <div class="transform-container"> <div class="transform-card transform-2d-1"> <h3>Scale (масштабирование)</h3> <p>transform: scale(1.1)</p> <div class="transform-demo scale-demo">Наведи на меня</div> </div> <div class="transform-card transform-2d-2"> <h3>Rotate + Translate</h3> <p>transform: rotate(10deg) translateX(20px)</p> <div class="transform-demo rotate-demo">Наведи на меня</div> </div> </div> </section> <!-- 3D ПРЕОБРАЗОВАНИЯ --> <section class="transforms-3d-section"> <h2>🎲 3D преобразования</h2> <div class="transform-container"> <div class="transform-card transform-3d-1"> <h3>3D вращение по X</h3> <p>transform: rotateX(30deg)</p> <div class="transform-3d-demo rotate-x-demo">3D X</div> </div> <div class="transform-card transform-3d-2"> <h3>3D вращение по Y</h3> <p>transform: rotateY(30deg)</p> <div class="transform-3d-demo rotate-y-demo">3D Y</div> </div> </div> </section> <!-- ПЕРЕХОДЫ (TRANSITION) --> <section class="transitions-section"> <h2>⏯️ Переходы (transition)</h2> <div class="transition-container"> <div class="transition-card"> <h3>Transition: width + background</h3> <div class="transition-demo transition-1">Наведи на меня</div> <p>transition: all 0.5s ease</p> </div> <div class="transition-card"> <h3>Transition: transform + box-shadow</h3> <div class="transition-demo transition-2">Наведи на меня</div> <p>transition: transform 0.3s ease, box-shadow 0.3s ease</p> </div> </div> </section> </main> <footer class="footer-fixed"> <div class="footer-content"> <div class="footer-section"> <h4>О проекте</h4> <p>Сайт о Санкт-Петербурге</p> <p>Лабораторная работа №9</p> </div> <div class="footer-section"> <h4>Контакты</h4> <p>Email: info@spb.ru</p> <p>Телефон: +7 (812) 123-45-67</p> </div> <div class="footer-section"> <h4>Навигация</h4> <p><a href="index.html" style="color: #f0a500;">Главная</a></p> <p><a href="form.html" style="color: #f0a500;">Регистрация</a></p> <p><a href="demo.html" style="color: #f0a500;">Демо</a></p> </div> </div> <div class="footer-bottom"> <p>© 2024 Санкт-Петербург | Все права защищены</p> </div> </footer> </body> </html>