Основи Web UI розробки(Front-End) ргр - верстка сайта

Нужно сделать задание из файлов. Как можно быстрее.

В папці з цим файлом є папка в якій 12 варіантів макетів і один з цих макетів вам потрібно буде реалізувати. Що стосується самого виконання. Не забуваємо про форматування коду. Як результат я хочу побачити верстку макету відповідно до вашого варіанту також потрібно реалізувати адаптив (адаптивна верстка — підхід, що передбачає зміну дизайну залежно від поведінки користувача, розміру екрана, платформи і орієнтації пристроя). CSS стилі повинні бути розбиті на компоненти. Що стосується шрифтів їх можна знайти на наступних сервісах https://fonts.google.com/ https://www.fontsquirrel.com/ https://transfonter.org/ - сервіс для конвертації в WOFF та WOFF2. Даний сервіс обовязково вам знадобиться, так як більш за все що Ви скачаєте шрифт в розширенні OTF або TTF. Easiest Way To Work With Web Fonts - YouTube - на цьому відео показано як користуватись даним сервісом (обовязково до перегляду). Стосовно картинок які потрібно експортувати з фігми. Ось відео як це можна зробити Figma tutorial - How To Export Images In Figma - YouTube Також фігма надає можливість переглядати css стилі які застосовані для елемента. Як це можна зробити можна побачити на відео 07 Intro to CSS Inspection | Figma for Developers - YouTube Вимоги до пояснювальної записки Пояснювальна записка має містити щонайменше 10 сторінок та бути оформленою відповідно до актуальних стандартів. Записка повинна мати наступні розділи. Титульний лист - має містити назву університету, назву дисципліни, тему домашнього завдання, повне ім'я та групу студента, повне ім'ята посаду викладача, рік. Зміст має містити перелік розділів пояснювальної записки із вказанням сторінок. Вступ - даний розділ присвячений загальному опису теми домашнього завдання. Аналіз макета. Перед початком верстки завжди потрібно проводити первинний аналіз макету тому в цьому розділі потрібно описати результат аналізу вашого макету, наприклад шрифти, кольори, обмежуючий контейнер та елементи які мають однаковий дизайн (даний пункт допомогає на ранньому етапі виділити елементи які ми можемо винисти в компоненти). Також було не погано якби ви трішки розповіли про технології з якими ви будите працювати (CSS, HTML, JS) Опис структури проекту - в даному розділі потрібно описати структуру проекту. Найбільше мене цікавить те як ви розбили елементи на компонети, тому потрібно розписати які саме компоненти ви створили та чому. І якщо Ви додавали який JS код то потрібно розписати й про це. Ну і звісно прикріпити скріни з готовим макетом. Врсновок - коротко описати, що було розроблено та чому навчились в ході виконання