Потрібно зверстати і анімувати сайт для презентації іконок.
Макет і коментарі
https://www.figma.com/file/3INVg72sEGicEI0d2bm5aF/LiveIcons-v3?node-id=0%3A1
Коментарі вмикаються у верхній лівій панелі інструментів)
Анімуємо згідно прикладу один в один (швидкість\плавність анімації):
Відео-приклади тут: https://drive.google.com/drive/folders/1Fn5MmCpg_aRx6aOFjhLyDFw32XWoOKXv?usp=sharing
Ефект WebGL для home page: https://paveldogreat.github.io/WebGL-Fluid-Simulation/
Робимо на рух курсора + додати прозорість або зверху колір накласти згідно макету у фігмі.
Приклад реалізації: https://advanced.team/ Параметри Fluid-Simulation зроблені скріном у фігмі.
Іконки з позначкою "svg animation" зроблені в JSON форматі
Посилання на сорси в коментарях фігми. Анімуються при ховері.
Інструкція для підключення JSON-іконок:
https://github.com/airbnb/lottie-web
(в режимі ховер анімація іконок має відіграти до кінця, навіть якщо курсор був прибраний)
Всі інші іконки зберігаємо в png (2x для ретіни)
Відправку форми на стр. контакти і Newsletter у футері потрібно зробити через amazon aws. Зверніть увагу на валідацію.
Скрипт забираємо тут:
https://drive.google.com/drive/folders/1s2ckq7YLbBDXgfGcMX-hTCw3GkcNlrCD?usp=sharing
Всі елементи потрібно верстати у відносних одиницях (vw\rem)
На вкладці Resolutions у фігмі показано як має адаптуватися шаблон від 1280 до 2450.
Мобільна версія і планшети на вкладці Mobile.
Фрейм FScreen (у фігмі) має займати 100% екрану на розширеннях від 1280 до 2450.
Картинка, заголовок і текст для SEO на вкладці Meta tag у фігмі.
Gogle pagespeed - в зеленій зоні.
Шрифт: https://drive.google.com/drive/folders/14eo_1S8wzBFSr_RQ5YgkGMn6ODzR3ViN?usp=sharing
ВАЖЛИВО(!) Верстайте будь-ласка Pixel Perfect.
- При перегляді фінального результату буду звертати увагу на всі дрібниці (шрифти, відступи, і т.д)
- Шрифт в бразуері може відрізнятися від макету. Тому на готову верстку потрібно накласти jpeg макету
і відрегулювати розміри при потребі.
