У четвертому домашньому завданні працюємо із:

— фоновими зображеннями — векторною графікою — псевдоелементами — позиціонуванням та анімацією

Фонові зображення

Експортуй фонове зображення для секції hero Оптимізуй фонове зображення та додай у папку images. Вкажи це зображення у якості фону для секції використовуючи властивість background-image Додай градієнт, щоб зробити затемнене зображення, як на макеті

Векторні зображення

Експортуй усі іконки, що є на макеті

При експорті будь-яких іконок переконайся, що експортувалася саме іконка без фону Задай розміри іконок в html Створи спрайт із усіма іконками на сайті icomoon (https://icomoon.io/) Оптимізуй спрайт за допомогою SVGOMG https://jakearchibald.github.io/svgomg/ Оптимізований спрайт перейменуй на icons.svg та додай у папку images Зверни увагу, що у всіх іконок, крім іконок із другої секції, потрібно очистити fill

Додатковий контент

Зверни увагу на макет: на сторінці Studio з'явилася нова секція. Потрібно виконати html-розмітку цієї секції та задати стилі для елементів у цій секції. У футері також з`явився новий блок. З його розміткою та стилями теж потрібно попрацювати.

Важливо! Цей блок потрібно додати у футер не тільки на сторінці Studio, а й на сторінці Portfolio

Псевдоелементи

Згідно з макетом, у посилання на активну сторінку має бути інший колір тексту та псевдоелемент-підкреслення.

Щоб реалізувати ці ефекти:

Створи окремий клас current Задай для цього класу колір, відповідно до макету, а також псевдоелемент У файлі index.html додай цей клас для посилання на сторінку Studio У файлі portfolio.html додай цей клас для посилання на сторінку Portfolio

Позиціонування та CSS-переходи

Пропиши transition для всіх елементів, що змінюються при ховері та фокусі.

Важливо! Властивість transition задається для базового стану елемента, а не для стану ховера/фокуса. Явно вказуємо анімовану властивість (transition-property).

Налаштуй overlay з текстом на картках сторінки Portfolio, який з'являється при ховері та фокусі в будь-якому місці картки.

Створення модального вікна

Створи папку js. Додай у папку файл modal.js Скопіюй js-код із критеріїв приймання домашнього завдання та встав у файл modal.js Підключи файл у файл index.html за допомогою тега script. Для цього перед закриваючим тегом body додай тег script з посиланням на файл скрипту для модально вікна <script src="./js/modal.js"></script> . Виконай розмітку та оформлення модального вікна відповідно до макету. Для того, щоб скрипт спрацював, необхідно додати до розмітки спеціальні атрибути, за якими скрипт шукає елементи, а також клас is-hidden для бекдропа. Для кнопки відкриття модального вікна додай атрибут data-modal-open Для кнопки закриття модального вікна додай атрибут data-modal-close Для бекдропа модального вікна додай атрибут data-modal Переконайся, що при кліку на кнопку Order service відкривається модальне вікно.