Задача «Котограм»

Перед выполнением задания внимательно прочитайте:

• О всех этапах проверки задания
• Как отправить пулл
• Как пройти тесты
• Правила оформления JavaScript, HTML и CSS кода

Zeplin

Zeplin – программа для работы с дизайн-макетами. В нем можно удобно снимать значения отступов, цветов, прозрачности и параметры шрифтов.

Мы создали для вас аккаунт. Он понадобится для доступа к макетам.

Логин: urfu_student
Пароль: markup-task-9

Основное задание

⚠️ Задание необходимо решить без использования JS, на чистой CSS-магии

Благодаря вашей героической помощи все котики нашли себе новых хозяев! Теперь бабуленька коротает долгие зимние вечера, вздыхая и разглядывая кошачьи фоточки. Ей было бы гораздо веселее, если бы их можно было не только смотреть, но и редактировать!

Давайте сделаем для нее Котограм, красивый и бесполезный. Красивый, потому что все котики прекрасны, а фильтры позволяют раскрыть индивидуальность каждого. Бесполезный, потому результат нельзя никуда сохранить, но разве это важно?

Вот такой:

Необходимо сверстать предоставленный макет, соблюдая следующие условия:

• Страница находится посередине экрана и имеет фиксированную ширину
• Иконки контролов нужно реализовать с использованием svg-спрайта, его вы должны сами собрать из иконок в папке icons
• Фоточка котика (любого, можно даже вашего!) должна быть подходящего формата. Главное – не забыть об оптимизации
• Нужно реализовать следующие контролы редактирования изображения:
  • вмещаемость (вписано в квадрат/показано целиком)
  • масштабирование (каждое нажатие циклически изменяет масштаб: 1 - x1 - ... xn - 1 ...)
  • просмотр исходного изображения при нажатии на логотип
  • поворот (циклически, аналогично масштабированию)
  • отражение по горизонтали
• Нужно реализовать фильтры с макета. Фильтры должны применяться с анимацией. Название активного фильтра выделено полужирным

Не забудьте сделать логотипу красивый градиент :)

Подсказка: для циклического переключателя отлично подходит сочетание радиокнопок и z-index ;)

Дополнительное задание (+100500 подписчиков в котограме)

Придумайте и реализуйте еще несколько фильтров для котограма и объедините их в галерею-карусель (хорошо, что вы это уже умеете!):

• Фильтры листаются вправо и влево по клику на соответствующие иконки
• Одновременно видно не более четырех фильтров
• Если листать дальше некуда, иконка с соответствующей стороны становится неактивной