Верстка лендінгу з Figma

До цього моменту ти верстав за текстовими описами. Але в реальній роботі фронтенд-розробник отримує макет від дизайнера — і його потрібно перетворити на код. Саме цим ми зараз і займемося.

Твоє завдання — зверстати фітнес-лендінг treine.me за готовим макетом у Figma. Це твій перший досвід роботи з дизайн-інструментом — і дуже важливий навик для будь-якого верстальника.

Макет у Figma: Layout to study HTML & CSS (Community)

Як працювати з Figma

Завдання

Файлова структура

figma-landing/
├── index.html
├── style.css
└── images/
    └── hero-illustration.png   ← експорт з Figma або placeholder

Структура сторінки

┌──────────────────── header ─────────────────────┐
│  treine.me                Home   About  Training│
├─────────────────────────────────────────────────┤
│                   hero section                   │
│  ┌─── text ────────────┐ ┌─── image ──────────┐ │
│  │ WORKOUTS MADE       │ │                     │ │
│  │ EXCLUSIVE FOR YOU!  │ │  [illustration]     │ │
│  │                     │ │                     │ │
│  │ We create exclusive │ │                     │ │
│  │ and unique workouts │ │                     │ │
│  │                     │ │                     │ │
│  │ [🟢 Start now]      │ │                     │ │
│  └─────────────────────┘ └─────────────────────┘ │
├──────────────────── footer ─────────────────────┤
│          send us a message @treine.me           │
└─────────────────────────────────────────────────┘

Вимоги

1. Семантичний HTML

• Використовуй теги <header>, <main>, <section>, <footer>
• <nav> для навігації з посиланнями
• Заголовок у <h1>, опис у <p>

2. Header (Flexbox)

• Логотип "treine.me" зліва, навігація справа
• display: flex з justify-content: space-between та align-items: center
• Навігаційні посилання через <ul> + display: flex + gap
• Активний пункт ("Home") виділений жирним шрифтом

3. Hero-секція (Flexbox — головна частина)

• Два блоки поруч: текстовий контент зліва, ілюстрація справа
• display: flex на секції, кожен блок займає приблизно половину ширини
• Текстовий блок: display: flex + flex-direction: column для вертикального розташування заголовка, опису та кнопки
• Вертикальне центрування контенту через justify-content: center

4. Заголовок із акцентом

• Текст: "WORKOUTS MADE EXCLUSIVE FOR YOU!"
• Слово "EXCLUSIVE" виділене кольором акценту (бірюзовий/зелений з макету)
• Загорни це слово у <span> з окремим класом

5. CTA-кнопка

• Зелена кнопка "Start now" з іконкою (WhatsApp або телефон)
• display: inline-flex + align-items: center + gap для іконки та тексту
• Округлені кути (border-radius), padding, колір тексту білий

6. Кольори та типографіка

• Витягни кольори з Figma і збережи їх у CSS-змінних:

  :root {
    --color-primary: /* твій колір з макету */;
    --color-text: /* темний текст */;
    --color-text-light: /* світліший текст опису */;
    --color-bg: #FFFFFF;
  }

• Підключи шрифт з Google Fonts (перевір який шрифт у Figma)
• Дотримуйся розмірів тексту з макету (font-size, font-weight)

7. Відступи та розміри

• Контейнер з max-width: 1280px та margin: 0 auto
• Відступи (padding) витягни з Figma через Inspect або Alt-наведення
• Використовуй rem для розмірів

Бонусні завдання

Декоративні елементи (+10 балів)

• Патерн з точок на фоні (як у правому нижньому куті макету)
• Геометричні фігури (кола, прямокутники) через ::before / ::after з position: absolute

Hover-ефекти (+10 балів)

• Навігаційні посилання: зміна кольору з transition
• CTA-кнопка: зміна background-color або transform: scale(1.05) на hover
• Плавні переходи через transition: all 0.3s ease

Responsive (+10 балів)

• На мобільних (до 768px): hero-секція стає вертикальною (текст зверху, картинка знизу)
• flex-direction: column в media query
• Заголовок зменшується, кнопка на всю ширину

Підказки

• Для двох колонок у hero: display: flex на батьківському елементі, кожен дочірній — flex: 1
• Для кольорового слова: <span class="accent">EXCLUSIVE</span> + .accent { color: var(--color-primary); }
• Для кнопки з іконкою: display: inline-flex; align-items: center; gap: 8px;
• Для іконки WhatsApp: Unicode-символ ☎ або SVG-іконка
• Для контейнера: .container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
• Для патерну точок (бонус): background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 20px 20px;

Критерії оцінки