npm install
npm run serve
npm run build
npm run lint
Тестове завдання Frontend з анімаціями
Макети Шрифти Реалізувати анімації згідно з прикладом Не використовувати готові CSS-фреймворки (Bootstrap тощо) Сторінка має адаптуватися для планшетів та телефонів. Розмістити проект на Git Розмістити проект на хостингу Головний екран Тут у нас розташоване меню. Зліва фото, праворуч заголовок Нero Title, який тут виступає в ролі H1, опис, нижче кнопка. Блок із заголовком та описом тут і на ідентичних екранах вирівнюються по центру фото + 10px нагору.
Кнопка Замовити прибирання протягом всієї сторінки прикріплена до нижнього краю екрана. При ховері “вистрибує” і збільшується у розмірі (до розміру як головному екрані), з'являється додатковий бордер, і вона трохи прилипає до курсора. Анімація взаємодії: https://katchme.fr/
Переваги
При ховер картки змінюють колір, картинка fade-out і з'являється текст. Анімація появи: при скролі картки підтягуються одна за одною.
Як ми прибираємо Фото збільшується при скролі і займає весь екран, ліворуч виїжджає плашка з перемикачами. ВАЖЛИВО: на цьому блоці кругла кнопка ховається зовсім. З'являються "+",
При перемиканні фото змінюється як тут. Фотографії під адаптиви масштабуються, але місце для плюсика/тултіпа завжди залишається тим самим.
https://docs.google.com/document/d/16xWHTywR7CSDJ5xJqfO4Z-HQ4_qX9pcxZRloRYdnZRk/edit#