Технічне завдання: Лендинг "NaturePHI"

Ласкаво просимо до практичного завдання з веб-дизайну та фронтенд-розробки!

Золотий перетин ( $1,618$ ) — це не просто математична константа. Це універсальний код гармонії, який ми зустрічаємо всюди: від будови мушлі равлика до спіралей галактик. У цифрову епоху використання цих пропорцій дозволяє створювати інтерфейси, які підсвідомо сприймаються користувачем як "правильні", спокійні та естетичні.

Суть вашого завдання:

Ваша ціль — розробити адаптивний лендинг, де кожен блок і кожна картка розповідають про природний баланс. Проект базується на двох фундаментальних принципах:

Математична точність: Структура сайту суворо підпорядкована пропорції 61,8% (домінуючий контент) та 38,2% (візуальний акцент)
Модульність: Сторінка має виглядати не як суцільний текст, а як набір цілісних карток, що "плавають" на контрастному фоні, створюючи відчуття легкості та глибини.

Це виклик вашим навичкам роботи з Flexbox, адже вам доведеться не просто розмістити елементи, а змусити їх динамічно змінювати свій порядок, зберігаючи гармонію на екрані будь-якого розміру — від широкого монітора до компактного смартфона

1. Загальні параметри сторінки

Контейнер: Весь контент обмежений шириною 1200px.
Сітка: Використання пропорції 61,8% на 38,2%.
Відступи: Між секціями — 40-60px, всередині блоків — 25-40px.
Адаптивність: Обов'язкові бокові padding для мобільних екранів.

2. Шапка та Меню (.header)

Desktop: Логотип зліва, навігація справа. Плавний hover-ефект .

Mobile: Центрування логотипу, вертикальне меню. Шрифт 0.9rem, інтервал 8px.

3. Блок "Що таке Золотий перетин?" (.intro)

Весь блок оформлюється як єдина біла картка.

Схема: Тільки HTML/CSS (div), пропорція 62% на 38%.
Цитата: Курсив, лінія зліва, розташування — під флекс-контейнером схеми та тексту.

Текст для блоку:

Що таке Золотий перетин?

Золотий перетин — це «формула краси», яку вигадала сама природа. Вона допомагає робити речі гармонійними та приємними для ока. Головне число цієї пропорції — 1,6.

Уявіть, що ви ділите лінію або предмет на дві частини. Якщо більша частина буде рівно в 1,6 раза більша за меншу — ви отримаєте ідеальний баланс. Це і є Золотий перетин.

Чарівне число: Число Фі (1,618).
Секрет природи: Зустрічається у мушлях та квітах.
Мистецтво: Використовується для ідеальних композицій.
Веб-дизайн: Пропорція 61.8% на 38.2%.

Золотий перетин — це не просто математика, це мова, якою природа малює свої шедеври.

4. Картки галереї (.gallery)

Секція складається з карток, що чергуються у "шаховому" порядку.

Верстка: Співвідношення фото до тексту всередині картки — 60/40.
Ефект: Перша картка — фото зліва, друга — фото справа (реалізувати через CSS).
Зображення: Мають бути фоном блоку (background-size: cover).
Mobile: Фото завжди зверху, висота — не менше 250px.

5. Підвал сайту (.footer)

Фон #183022, зелена межа зверху 5px.
Три колонки: Логотип | Навігація (список) | Автор конкурсу (ім'я зеленим).
Mobile: Всі блоки стають в одну колонку по центру.

6. Таблиця оцінювання (200 балів)

Блок	Макс. бали	Критерії оцінки[cite: 1]
Шапка та Меню	40 б.	Логотип PHI, меню, hover-ефекти.
Золотий перетин	50 б.	Схема кодом, списки, цитата.
Картки галереї	50 б.	Шаховий порядок 60/40, фото-фон.
Футер	20 б.	Акцентна лінія, дані автора, 3 колонки.
Адаптивність	40 б.	Відсутність прокрутки, чистий Flexbox.

ЗАБОРОНЕНО: Використовувати <img> для схеми Фі.

Зображення для карток:

1. мушля

2. рослина

3. код зображення логотипу

</svg>

Міський конкурс з ІКТ-2026: номінація Web-дизайн