Стилізуй HTML-сайт за допомогою CSS

Час перетворити твій HTML-сайт з Block 2 на щось красиве! У цьому завданні ти застосуєш все, що вивчив про CSS: селектори, кольори, Box Model та типографіку.

Завдання

Візьми свій багатосторінковий сайт з ДЗ #1 (або створи новий HTML з 2-3 сторінок) та стилізуй його зовнішнім CSS-файлом.

Вимоги

1. Файлова структура:

my-styled-site/
├── index.html
├── about.html
├── contacts.html
└── style.css          ← один файл стилів для всіх сторінок

2. Підключення CSS:

• Один зовнішній файл style.css, підключений до всіх сторінок через <link>
• Жодного inline-стилю (style="...")

3. Box Model:

• box-sizing: border-box на всіх елементах (*, *::before, *::after)
• Правильні padding та margin (немає тексту, що "прилипає" до країв)
• Хоча б один елемент з border та border-radius
• margin: 0 auto для центрування основного контейнера

4. Типографіка:

• Підключи шрифт з Google Fonts (наприклад, Inter або Roboto)
• Базовий font-size: 16px на body
• line-height: 1.6 для основного тексту
• Ієрархія заголовків (h1 більший за h2 більший за h3)

5. Кольори:

• Обрана кольорова палітра (2-3 основні кольори)
• Достатній контраст тексту на фоні
• Різний колір для посилань та hover-ефект на них

6. Селектори:

• Використай селектори елементів, класів та хоча б один id-селектор
• Використай хоча б один вкладений селектор (наприклад, nav a)
• Використай хоча б один псевдоклас (:hover, :first-child, або інший)

Приклад результату

Сторінка повинна мати:

• Стилізований хедер з навігацією
• Основний контент з правильними відступами та типографікою
• Стилізований футер
• Посилання з hover-ефектом (зміна кольору або підкреслення)
• Приємну кольорову палітру

Підказки

• Почни з "CSS Reset": box-sizing: border-box + margin: 0 на body
• Обери палітру на Coolors або Color Hunt
• Шрифт обери на Google Fonts (рекомендую Inter або Roboto)
• Перевіряй контраст на WebAIM Contrast Checker
• Використовуй Chrome DevTools (F12) для налагодження стилів

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