Project-CodeWizards

Цей проєкт було створено за допомогою Vite. Проєкт створено відповідно до технічних вимог та макету.

• Файли розмітки компонентів сторінки лежать в папці src/partials та імпортовані до файлу index.html.
• Файли стилів лежать в папці src/css та імпортовані до HTML-файлів сторінок. Наприклад, для index.html файл стилів називається index.css.
• Зображення оптимізовані та додані до папки src/img.

---

HEADER ¹

Файл з розміткою хедера header.html створено у папці partials та імпортовано в index.html. Структура header:

• навігаційне меню з якірними посиланнями, що ведуть до відповідних розділів сторінки (виконане за допомогою списку);
• ;
• кошик.

Так, як сайт адаптований під різні пристрої, то для мобільного в header є тільки логотип та кнопка виклику меню, яке виїжджає праворуч та має якірні посилання.

HERO ²

• анімований заголовок (анімація вмикається при завантаженні сайту)
• короткий опис про компанію;
• яскраві контентні зображення.
• анімаційна кнопка з посиланням, по якій можна потрапити на секцію фрутс.

HOW IT WORKS ³

• заголовок;
• параграф;
• Покрокова інструкція (виконана у вигляді списку з застосуванням стилів);
• gif (дляпривертання уваги клієнтів)

FRUITS ⁴

• заголовок;
• параграф;
• анімовані зображення;
• анімована кнопка 'замовити' при натисканні на неї відкривається модальне вікно для замовлення.

ORDER-MODAL ⁵

• заголовок;
• кнопка закриття;
• список з картками:
  • заголовок;
  • параграф;
  • зображення;
  • чекбокс;
• зображення;
• форма:
  • input (є три, кожен має підказку);
  • textarea;
  • кнопка підтвердження замовлення.

CONTACTS ⁶

• заголовок;
• список з зображеннями;
• параграф;
• форма:
  • label
    • input
  • кнопка 'надіслати' (при натисканні з'являється модальне вікно з подякою).

THANK-YOU-MODAL ⁷

• кнопка закриття;
• зображення;
• заголовок;
• параграф.

FOOTER ⁸

Структура footer:

• зображення;
• логотип з посиланням;
• навігаційне меню з якірними посиланнями, що ведуть до відповідних розділів сторінки (виконане за допомогою списку);
• посилання на соціальні мережі (виконані за допомогою списку);
• контактна інформація компанії (виконана за допомогою списку).

Footnotes

1. Ігор Кантер - Team-lead ↩

2. Олександр​ Меленний​ ↩

3. Роман​ Лінкевич ↩

4. Денис​ Маховський ↩

5. Дарина ​Голікова​, Ігор Гребінчук ↩

6. Андрій Іванов ↩

7. Аліна Лисяна ↩

8. Вікторія Парпалій Scrum master ↩