/
Orpheus
/
laba2
Обзор
Документация
Войти
/
Orpheus
/
laba2
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
86 строк
5 KB
Orpheus
2 лаба
09 июн 2025, 05:45
09 июн 2025, 05:45
d076200
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Лабораторная работа №2 - Продвинутый CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <div class="container"> <h1>Лабораторная работа №2</h1> <nav class="nav"> <ul class="menu"> <li class="menu-item"><a href="#">Главная</a></li> <li class="menu-item dropdown"> <a href="#">Услуги</a> <ul class="submenu"> <li><a href="#">Веб-разработка</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Маркетинг</a></li> </ul> </li> <li class="menu-item"><a href="#">О нас</a></li> <li class="menu-item"><a href="#">Портфолио</a></li> <li class="menu-item"><a href="#">Контакты</a></li> </ul> <div class="burger-menu"> <div class="burger-line"></div> <div class="burger-line"></div> <div class="burger-line"></div> </div> </nav> </div> </header> <div class="content-wrapper"> <main class="main-content"> <div class="main-text"> <p>CSS (Cascading Style Sheets) — это язык стилей, определяющий отображение HTML-документов. С его помощью можно управлять цветом, шрифтами, отступами, позиционированием и многими другими аспектами веб-страниц.</p> <p>Flexbox — это технология, которая позволяет создавать гибкие макеты, распределяя пространство между элементами в контейнере. Основные свойства Flexbox включают justify-content, align-items, flex-direction и flex-wrap.</p> <p>Медиа-запросы позволяют адаптировать стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация и разрешение. Это основа адаптивного веб-дизайна, который обеспечивает корректное отображение сайта на любых устройствах.</p> </div> <button class="modal-btn" id="modalBtn">Открыть модальное окно</button> </main> <aside class="sidebar"> <h3>Дополнительная информация</h3> <ul class="sidebar-list"> <li>Позиционирование элементов</li> <li>Псевдоклассы и псевдоэлементы</li> <li>Flexbox layout</li> <li>Медиа-запросы</li> <li>Адаптивный дизайн</li> </ul> </aside> </div> <footer class="footer"> <div class="container"> <p>© 2023 Лабораторная работа №2. Продвинутый CSS.</p> </div> </footer> <!-- Модальное окно --> <div class="modal-overlay" id="modalOverlay"> <div class="modal"> <div class="modal-header"> <h2>Модальное окно</h2> <button class="close-btn" id="closeBtn">×</button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p> </div> <div class="modal-footer"> <button class="ok-btn">Ок</button> </div> </div> </div> <script src="script.js"></script> </body> </html>