viktorsvertoka / goit-markup-hw-04-old

Home work for html and css course📚

Read in other languages: Ukrainian, English.

Домашнє завдання № 4

• Створи репозиторій 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-nomalize.

«A10» Код написаний з дотриманням настанови.

Розмітка

«B1» Для всіх іконок використовується векторна графіка у форматі svg.

«B2» SVG-іконки експортовані правильно. При експорті обрана «група», а не сам вектор.

«B3» Всі іконки з SVG-спрайту додані в HTML за допомогою тегів <svg> і <use>

«B4» Розміри іконок взяті з макета і задані елементу <svg> в HTML-файлі.

«B5» У блоці Контактів у шапці додані іконки конверта і телефону.

«B6» В секції Переваг додані іконки.

«B7» В секції Команди додані іконки соцмереж.

«B8» В секції Клієнтів додані іконки компаній.

«B9» У футері додані іконки соцмереж.

Оформлення

«C1» Велике зображення з ефектом затемнення (під хедером) виконано як фон. Для затемнення використовується багатошаровий фон з градієнтом.

«C2» Фонове зображення в блоці під хедером не розтягується ширше свого оригінального розміру 1600рх.

«C3» У картках секції Наша команда є постійний ефект тіні.

«C4» У картках сторінки Портфоліо є ефект тіні при ховері в будь-якому місці картки.

«C5» У фільтрі (список кнопок) сторінки Портфоліо є ефект тіні при ховері або фокусі на кнопки.

«C6» При ховері або фокусі іконки повинні переходити в активний стан - змінювати колір, якщо це зазначено в макеті.