Квалификационное задания для разработчиков HTML/CSS

grigruss f21aeb8906 Обновить 'README.md' 2 years ago
Exo2.0-Thin.otf cc132337dc first commit 2 years ago
README.md f21aeb8906 Обновить 'README.md' 2 years ago
big-pattern.png cc132337dc first commit 2 years ago
cat.png cc132337dc first commit 2 years ago
index.html cc132337dc first commit 2 years ago
pattern.png cc132337dc first commit 2 years ago
preview.png cc132337dc first commit 2 years ago
qt-htmlcss-grigruss.pdf 1db8ea598e add pdf 2 years ago

README.md

Квалификационное задания для разработчиков HTML/CSS

Посмотреть на сайте

Task Requirements

  • Фон занимает всю площадь экрана, блок находится по центру вертикально и горизонтально.

  • На планшетах упаковки располагаются треугольником, на смартфонах друг под другом.

  • Информация о продукте может меняться.

  • Каждая из упаковок может быть выбрана или недоступна для выбора. Выбор осуществляется нажатием на упаковку или на текст «купи» в описании.

  • Можно выбрать одновременно несколько упаковок, а также отменить свой выбор повторным нажатием на упаковку.

  • Состояние наведения применяется к выбранной упаковке не сразу, а после того, как курсор ушел с нее после первоначального выбора.

Нюансы

Если выбирать и отменять выбор упаковки, срабатывает счётчик. Когда счётчик равен 0, упаковка блокируется.

Посмотреть показатели счётчика можно в консоли браузера. При каждом выборе упаковки, в консоль выводится текущее количество по всем трём упаковкам.