Верстка магазина рандомных ключей KeysDrop

Данный макет был создан в графическом редакторе Adobe XD. С такими макетами я ранее не работал и с самим редактором не был знаком. Я решил работать в avocode, чтобы не тратить время на изучения нового для меня редактора, но в конце оказалось, что avocode меня подвел. На самом деле ничего серьезного, но пара иконок в avacode сильно отличались от оригинала. Когда верстка уже была готова, я занялся оптимизацией, дизайнер мне немного рассказал о то как работать с Adobe XD и я быстро освоился.

Не могу сказать, что были какие-то сложные нерешаемые задачи для меня. Качественный макет, конкретное ТЗ, этого достаточно для комфортной работы. В данной работе много внимания я уделил всплывающим окнам. Ранее я использовал свой плагин, который позволял делать красивую анимацию появления и исчезания адаптивного модального окна, но он был написан довольно давно и со временем у меня накопились идеи о его усовершенствованию, а тут и по времени успеваю, да и с обновлением будет проще реализовать все задачи. Результат:
Адаптация окна:

Окон другого размера:

Анимация при наведении на пункт меню:

При прокрутке вниз навигационная панель прилипает к верху окна браузера и возвращается обратно при прокрутке вверх:

Анимация размытия при наведении на карточку товара: