Фон, градиент, тени, переходы, преобразования, анимации

Цель: изучить свойства css для создания фонов, градиентов, теней, переходов, преобразований и анимаций, овладеть навыками создания на странице анимаций (animation), переходов (transition) и преобразований (transform).

Порядок выполнения лабораторной работы:

Изучить:
- background:
  - background-attachment;
  - background-clip;
  - background-color;
  - background-image;
  - background-position;
  - background-repeat;
  - background-size;
- gradient:
  - linear;
  - radial;
  - conic;
- shadow:
  - text;
  - box;
- transform;
- transition;
- animation и keyframes;
- и примеры их использования.
Для выполнения работы необходимо:
- для элементов, у которых есть фоновые изображения добавить и цвет (background-color) и изображения;
- для элементов, у которых заданы стили с псевдоклассом :hover добавить плавное изменение свойств через transition;
- в макет на главной странице (index.html) в любую секцию с карточками, добавить новую дополнительную карточку. Сначала в карточке должен отображаться анимированный указатель загрузки (loader), который спустя несколько секунд становится прозрачным и после отображается содержимое карточки. Для скрытия элемента с анимацией используйте visibility: hidden; Идеи для лоадеров в видео ниже.
- на странице с формой добавить использование теней;
- создать третью страницу (demo.html) на которую добавить примеры:
  - Линейный, радиальный, конический градиенты (по 1 примеру) для фона в тексте, для границы элемента и фона самого элемента;
  - 2D-преобразования (2 примера);
  - 3D-преобразования (2 примера) с видимым эффектом перспективы;
  - Переходы transition (2 примера).
Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
Загрузить проект на сервер через sftp или используя ssh.

Требования к html и css:

Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
Код отформатирован;
Корректное использование тегов;
Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница, сгенерированная с помощью команды npm run build, на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.