https://github.com/irina-anat/goit-markup-hw-04
https://github.com/irina-anat/goit-markup-hw-04
focus-effects hover-effects shadow svg-icons svg-sprites
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/irina-anat/goit-markup-hw-04
- Owner: Irina-anat
- Created: 2022-12-03T16:14:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-23T07:37:42.000Z (over 1 year ago)
- Last Synced: 2025-01-07T12:22:27.280Z (4 months ago)
- Topics: focus-effects, hover-effects, shadow, svg-icons, svg-sprites
- Language: HTML
- Homepage: https://irina-anat.github.io/goit-markup-hw-04/
- Size: 2.25 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
* Створи репозиторій 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»** Розміри іконок взяті з макета і задані елементу < svg> в HTML-файлі.
**«B5»** У блоці Контактів у шапці додані іконки конверта і телефону.
**«B6»** В секції Переваг додані іконки.
**«B7»** В секції Команди додані іконки соцмереж.
**«B8»** В секції Клієнтів додані іконки компаній.
**«B9»** У футері додані іконки соцмереж.
## Оформлення
**«C1»** Велике зображення з ефектом затемнення (під хедером) виконано як фон. Для затемнення використовується багатошаровий фон з градієнтом.
**«C2»** Фонове зображення в блоці під хедером не розтягується ширше свого оригінального розміру 1600рх.
**«C3»** У картках секції Наша команда є постійний ефект тіні.
**«C4»** У картках сторінки Портфоліо є ефект тіні при ховері в будь-якому місці картки.
**«C5»** У фільтрі (список кнопок) сторінки Портфоліо є ефект тіні при ховері або фокусі на кнопки.
**«C6»** При ховері або фокусі іконки повинні переходити в активний стан - змінювати колір, якщо це зазначено в макеті.