alexanderdmitriev/goit-markup-hw-04

Домашнее задание №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» При ховере или фокусе, иконки должны переходить в активное состояние - изменять цвет, если это указано в макете.