У четвертому домашньому завданні працюємо із:
— фоновими зображеннями — векторною графікою — псевдоелементами — позиціонуванням та анімацією
Фонові зображення
Експортуй фонове зображення для секції 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 відкривається модальне вікно.