Мобильная версия1.) Это мой файл index.html:
[*] АОС.инит(); Тест
КОМПАНИЯ НАЧАТЬ 2.) Это мой файл style.css:
*{ маржа: 0; дополнение: 0; текстовое оформление: нет; размер коробки: граница-коробка; стиль списка: нет; } тело { семейство шрифтов: без засечек; цвет фона: #F9F8FF; } .контейнер{ максимальная ширина: 100%; маржа: 0 авто; заполнение: 0; фон: URL("background-main.png"); размер фона: обложка; фоновая позиция: центр по центру; клип-путь: многоугольник (0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); высота: 100вх; ширина: 100%; положение: относительное; } навигация { высота: 80 пикселей; ширина: 100%; вес шрифта: 600; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; положение: фиксированное; заполнение: 0; верх: 0; z-индекс: 3; } .navbar { дисплей: гибкий; оправдание-содержание: пространство между; выровнять-элементы: по центру; высота: 80 пикселей; цвет фона: прозрачный; отступ: 0 20 пикселей; } .navbar img { ширина: 50 пикселей; высота: авто; поле внизу: 10 пикселей; } .Название компании { начертание шрифта: жирный; белый цвет; } .nav-ссылки { дисплей: гибкий; выровнять-элементы: по центру; вес шрифта: 500; разрыв: 32 пикселя; белый цвет; } .начать { отображение: встроенный блок; отступ: 10 пикселей 10 пикселей; цвет фона: белый; цвет: светло-морской зеленый; граница: нет; радиус границы: 18 пикселей; выравнивание текста: по центру; текстовое оформление: нет; курсор: указатель; размер шрифта: 12 пикселей; вес шрифта: 700; высота: 50%; поле внизу: 10 пикселей; } .get-started:hover { цвет фона: желто-зеленый; цвет: бирюзовый; } .nav-ссылки а { текстовое оформление: нет; белый цвет; } .меню-значок { дисплей: нет; гибкое направление: столбец; курсор: указатель; } .бар { ширина: 25 пикселей; высота: 3 пикселя; цвет фона: #000; поле: 4 пикселя авто; } @media screen и (максимальная ширина: 768 пикселей) { .меню-значок { дисплей: блок; } навигация ул { дисплей: нет; } навигация ул.активная { дисплей: гибкий; гибкое направление: столбец; позиция: абсолютная; верх: 80 пикселей; слева: 0; цвет фона: #fff; ширина: 100%; z-индекс: 1; } .бар { ширина: 25 пикселей; высота: 3 пикселя; цвет фона: светло-лососевый; поле: 4 пикселя авто; } } 3.) Это мой файл index.js
document.addEventListener('DOMContentLoaded', function() { const MenuIcon = document.querySelector('.menu-icon'); const navLinks = document.querySelector('nav ul'); // Выбираем правильный элемент MenuIcon.addEventListener('click', function() { navLinks.classList.toggle('активный'); }); // Закрываем меню при нажатии навигационной ссылки const navItems = document.querySelectorAll('nav ul li'); // Выбираем правильные элементы navItems.forEach(function(navItem) { navItem.addEventListener('click', function() { navLinks.classList.remove('активный'); }); }); });