redlab

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Тестове завдання Frontend з анімаціями

Макети Шрифти Реалізувати анімації згідно з прикладом Не використовувати готові CSS-фреймворки (Bootstrap тощо) Сторінка має адаптуватися для планшетів та телефонів. Розмістити проект на Git Розмістити проект на хостингу Головний екран Тут у нас розташоване меню. Зліва фото, праворуч заголовок Нero Title, який тут виступає в ролі H1, опис, нижче кнопка. Блок із заголовком та описом тут і на ідентичних екранах вирівнюються по центру фото + 10px нагору.

Кнопка Замовити прибирання протягом всієї сторінки прикріплена до нижнього краю екрана. При ховері “вистрибує” і збільшується у розмірі (до розміру як головному екрані), з'являється додатковий бордер, і вона трохи прилипає до курсора. Анімація взаємодії: https://katchme.fr/

Переваги

При ховер картки змінюють колір, картинка fade-out і з'являється текст. Анімація появи: при скролі картки підтягуються одна за одною.

Як ми прибираємо Фото збільшується при скролі і займає весь екран, ліворуч виїжджає плашка з перемикачами. ВАЖЛИВО: на цьому блоці кругла кнопка ховається зовсім. З'являються "+",

При перемиканні фото змінюється як тут. Фотографії під адаптиви масштабуються, але місце для плюсика/тултіпа завжди залишається тим самим.