- Create a repository `goit-markup-hw-04`.
- Clone the created repository and copy the files of the previous work into it.
- Add markup and styling for icons and decorative effects for pages from the layout homework #4.
- To generate an SVG sprite, use the service Icomoon.
- To optimize the created SVG sprite, use the service svgomg.
- Set up `GitHub Pages` and add a link to the live page in the header of the GitHub-repository.
«A1» At the root of the project there is a folder images with images.
«A2» All vector images (icons) are collected in the icons.svg SVG sprite, which is located in the images folder.
«A3» All vector images are optimized.
«A4» At the root of the project there is a css folder with style files.
«A5» All styles are written in one styles.css file, which is located in the css folder.
«A6» There are no capital letters, spaces and transliteration in the file names, only letters and words of the English language.
«A7» Source code formatted with Prettier.
«A8» All images and text content are taken from the layout.
«A9» All HTML pages have a style normalizer modern-nomalize.
«A10» The code is written as follows manual.
«B1» All icons use vector graphics in svg format.
«B2» SVG icons exported correctly. When exporting, the "group" is selected, not the vector itself.
«B3» All icons from the SVG sprite are added to the HTML using the <svg> and <use> tags
«B4» The icon sizes are taken from the layout and given to the <svg> element in the HTML file.
«B5» In the Contacts block in the header, envelope and phone icons are added.
«B6» Added icons to the Benefits section.
«B7» Added icons of social networks in the Teams section.
«B8» Company icons have been added to the Clients section.
«B9» Added icons of social networks in the footer.
«C1» A large faded image (below the header) is used as a background. For darkening, a multi-layered background with a gradient is used.
«C2» The background image in the block under the header is not stretched wider than its original size of 1600px.
«C3» There is a permanent shadow effect in the cards of the Our team section.
«C4» In the cards of the Portfolio page there is a shadow effect when hovering anywhere in the card.
«C5» In the filter (list of buttons) of the Portfolio page, there is a shadow effect when hovering or focusing on buttons.
«C6» On hover or focus, the icons should go to the active state - change color if it is specified in the layout.
📚 UK 📚 ⬆ Home ⬆
- Створи репозиторій `goit-markup-hw-04`.
- Схиляй створений репозиторій та скопіюй у нього файли попередньої роботи.
- Додай розмітку та оформлення іконок та декоративних ефектів для сторінок з макету homework #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] (https://github.com/sindresorhus/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» При ховері або фокусі, іконки повинні переходити в активне
стан - змінювати колір, якщо це зазначено у макеті.
📚 RU 📚 ⬆ Home ⬆
- Создай репозиторий `goit-markup-hw-04`.
- Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
- Добавь разметку и оформление иконок и декоративных эффектов для страниц из макета homework #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» При ховере или фокусе, иконки должны переходить в активное
состояние - изменять цвет, если это указано в макете.