## Завдання
На корпоративному вебсайті контактна інформація розміщена у верхньому колонтитулі. Необхідно реалізувати зміну кольору при наведенні курсору на посилання у цьому розділі.

Кроки:
1. Вибрати всі елементи `a` з класом `header-link`.
2. Використати відповідний псевдоклас для ефекту наведення.
3. Застосувати властивість `color` зі значенням `blue` під час наведення на посилання.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoZWFkZXI+CiAgICAgIDxhIGNsYXNzPSJoZWFkZXItbGluayIgaHJlZj0ibWFpbHRvOnN1cHBvcnRAZGV2LmlvIj5zdXBwb3J0QGRldi5pbzwvYT4KICAgICAgPGEgY2xhc3M9ImhlYWRlci1saW5rIiBocmVmPSJ0ZWw6KzQxMjcyMDM0MTMiPjQxMi03MjAtMzQxMzwvYT4KICAgIDwvaGVhZGVyPgogICAgPHNlY3Rpb24+CiAgICAgIDxwPgogICAgICAgIEF0IFN1cHBvcnREZXYsIG91ciBtaXNzaW9uIGlzIHRvIGVtcG93ZXIgaW5kaXZpZHVhbHMgYW5kIGJ1c2luZXNzZXMgYnkKICAgICAgICBwcm92aWRpbmcgdG9wLW5vdGNoIHRlY2huaWNhbCBzdXBwb3J0LiBXZSB1bmRlcnN0YW5kIHRoZSBjaGFsbGVuZ2VzIHRoYXQKICAgICAgICBjb21lIHdpdGggbmF2aWdhdGluZyB0aGUgY29tcGxleCB3b3JsZCBvZiB0ZWNobm9sb2d5LCBhbmQgd2UgYXJlIGhlcmUgdG8KICAgICAgICBzaW1wbGlmeSBpdCBmb3IgeW91LiBXaGV0aGVyIHlvdSdyZSBhIHN0YXJ0dXAsIGEgc21hbGwgYnVzaW5lc3MsIG9yIGFuCiAgICAgICAgaW5kaXZpZHVhbCBzZWVraW5nIGFzc2lzdGFuY2UsIFN1cHBvcnREZXYgaXMgeW91ciB0cnVzdGVkIHBhcnRuZXIgaW4KICAgICAgICB0ZWNobm9sb2d5LgogICAgICA8L3A+CiAgICA8L3NlY3Rpb24+CiAgICA8Zm9vdGVyPgogICAgICA8YSBjbGFzcz0iZm9vdGVyLWxpbmsiIGhyZWY9Im1haWx0bzpzdXBwb3J0QGRldi5pbyI+c3VwcG9ydEBkZXYuaW88L2E+CiAgICAgIDxhIGNsYXNzPSJmb290ZXItbGluayIgaHJlZj0idGVsOis0MTI3MjAzNDEzIj40MTItNzIwLTM0MTM8L2E+CiAgICA8L2Zvb3Rlcj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogU2V0IHRoZSBzdHlsZXMgaGVyZSAqLwoKYSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIG1hcmdpbjogMzBweDsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDUwMDsKfQoKLmhlYWRlci1saW5rIHsKICBjb2xvcjogZGFya2dyZWVuOwp9CgovKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCl9fXzogX19fIHsKICBjb2xvcjogX19fOwp9Ci8qIENoYW5nZSB0aGUgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KCi5mb290ZXItbGluayB7CiAgY29sb3I6IHNhbG1vbjsKfQ==

- Для вибору елемента за класом використовуйте `.` та назву класу.
- Для реакції на наведення курсору миші використовуйте псевдоклас `:hover`.

LyogU2V0IHRoZSBzdHlsZXMgaGVyZSAqLwoKYSB7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIG1hcmdpbjogMzBweDsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDUwMDsKfQoKLmhlYWRlci1saW5rIHsKICBjb2xvcjogZGFya2dyZWVuOwp9CgouaGVhZGVyLWxpbms6aG92ZXIgewogIGNvbG9yOiBibHVlOwp9CgouZm9vdGVyLWxpbmsgewogIGNvbG9yOiBzYWxtb247Cn0=

Опануйте основи CSS (Cascading Style Sheets) — мови стилізації, що визначає зовнішній вигляд вебсторінок. Досліджуйте ключові поняття, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Формуйте навички створення візуально привабливих і структурованих вебсторінок. Ідеально підходить для початківців, які прагнуть закласти міцну базу в CSS.

Дізнайтеся, що таке CSS, як підключити його до HTML і як стилізувати елементи HTML за допомогою селекторів. Ознайомтеся з базовими поняттями, такими як кольори тексту, псевдокласи дій користувача та змінні в CSS.

Дізнайтеся, як стилізувати та форматувати текст на вебсторінках. Ознайомтеся із застосуванням користувацьких шрифтів і різноманітних властивостей шрифтів для покращення вигляду тексту.

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

Ознайомлення з Flexbox — потужним методом розміщення елементів у CSS для організації рядків і стовпців. Вивчення керування напрямком, вирівнюванням і відстанями між елементами по горизонталі та вертикалі, а також налаштування окремих flex-елементів для точного макетування.

Дізнайтеся, як підвищити візуальну привабливість веб-сторінок за допомогою CSS. Ознайомтеся з техніками застосування кольорів і зображень фону, стилізації зображень, використання декоративних псевдоелементів і додавання тіней для створення ефектних дизайнів.

Завдання: Застосування Псевдокласів Дій Користувача

Завдання

Awesome!

Завдання: Застосування Псевдокласів Дій Користувача

Завдання