1. Создайте папку проекта со следующей структурой:
AGON
CSS
FONTS
JS
IMAGES
2. Откройте макет в figma, перейдя по ссылке https://www.figma.com/file/xaTLaagX5PCYm6nkke729h/agon?node-id=0-1&t=bzPgeqb7d7NaQk6b-0
3. Сохраните изображения в папку images.
a. Откройте в кладку INSPECT
Перейдите на сайт google.com и скачайте семейство искомого шрифта:
d. Скаченный архив разархивируйте в папку fonts:
5. Создайте файл main.html. Создайте структуру документа
В папке css создайте файл style.css. В первую очередь в данном файле осуществим подключение шрифтов.
Подключите файл стилей в файле main.html.
9. В папку css скопируйте библиотеку bootstrap.css или bootstrap.min.css. В папку js скопируйте библиотеку bootstrap.js и библиотеку jquery-3.6.3.min. Осуществите подключение добавленных библиотек в файле main.html:
11. Начните верстку в шапки:
Кнопка гамбургер будет появляться при экране меньше 768px за это отвечает класс:
Шапка будет зафиксирована за это отвечает класс:
12. Добавьте свои классы для того чтобы разместить элементы шапки как в макете:
13. Сверстайте заголовок и меню фильтра: