- Створи репозиторій
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»
При ховері або фокусі іконки повинні переходити в активний стан -
змінювати колір, якщо це зазначено в макеті.