- Створи репозиторій
goit-markup-hw-04. - Склонуй створений репозиторій і скопіюй в нього файли попередньої роботи.
- Додай розмітку і оформлення іконок і декоративних ефектів для сторінок з макета домашнього завдання #4.
- Для генерації SVG-спрайту використовуй сервіс Icomoon.
- Для оптимізації створеного SVG-спрайту використовуй сервіс svgomg.
- Налаштуй
GitHub Pagesі додай посилання на живу сторінку в шапку GitHub-репозиторія.
Критерії приймання роботи наставником
Проект
«A1» У корені проекту є папка images з зображеннями.
«A2» Усі векторні зображення (іконки) зібрані в SVG-спрайт icons.svg,
який лежить у папці images.
«A3» Усі векторні зображення оптимізовані.
«A4» У корені проекту є папка css з файлами стилів.
«A5» Всі стилі написані в одному файлі styles.css, який знаходиться в
папці css.
«A6» У назвах файлів відсутні великі літери, пробіли і трансліт, тільки
літери і слова англійської мови.
«A7» Вихідний код відформатований за допомогою Prettier.
«A8» Всі зображення та текстовий контент взяті з макета.
«A9» На всіх HTML-сторінках підключений нормалізатор стилів
modern-normalize.
«A10» Код написаний з дотриманням настанови.
Розмітка
«B1» Для всіх іконок використовується векторна графіка у форматі svg.
«B2» SVG-іконки експортовані правильно. При експорті обрана «група», а не
сам вектор.
«B3» Всі іконки з SVG-спрайту додані в HTML за допомогою тегів <svg> і
<use>
«B4» В секції Переваг додані іконки.
«B5» В секції Команди додані іконки соцмереж.
«B6» В секції Клієнтів додані іконки компаній.
«B7» У футері додані іконки соцмереж.
Оформлення
«C1» Велике зображення з ефектом затемнення (під хедером) виконано як фон.
Для затемнення використовується багатошаровий фон з градієнтом.
«C2» Фонове зображення в блоці під хедером не розтягується ширше свого
оригінального розміру 1440рх.
«C3» У картках секції Наша команда є постійний ефект тіні.
«C4» У картках сторінки Портфоліо є ефект тіні при ховері в будь-якому
місці картки.
«C5» У фільтрі (список кнопок) сторінки Портфоліо є ефект тіні при
ховері або фокусі на кнопки.
«C6» При ховері або фокусі іконки повинні переходити в активний стан -
змінювати колір, якщо це зазначено в макеті.