Завдання: Створення сторінки про сучасного українського поета (за варіантом)

Загальні вимоги:

Створити HTML-сторінку, присвячену життю та творчості українського поета. Сторінка повинна містити біографічні дані, вибрані вірші та навігацію по розділам.

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

1. Заголовок сторінки

Використати елемент <header> з:

• Заголовком h1 з ім'ям поета
• Навігаційним меню (клас .page-menu) з посиланнями на розділи
• Зображенням поета (клас .figure з підписом)
• Цитатою (клас .quote)

2. Біографічний розділ

Використати елемент <section> з класом .bio та id #bio:

• Хронологічна шкала (клас .timeline) з основними подіями життя
• Кожна подія оформлена у .timeline-item з датою та описом
• Загальний опис життя та творчості
• Посилання "До гори" в кінці розділу

3. Розділ з віршами

Три окремі підрозділи для кожного вірша з id #poem1, #poem2, #poem3:

• Кожен вірш у контейнері з класом .poem
• Заголовок вірша з класом .poem-title
• Строфи вірша у .poem-stanza
• Рядки вірша у .poem-line
• Ім'я автора у .poem-author
• Посилання "До гори" після кожного вірша

4. Футер сторінки

Використати елемент <footer> з:

• Інформацією про авторські права
• Цитатою (клас .quote)
• Посиланням на головну сторінку зі стилями для кнопки

Стилі оформлення:

1. Основні стилі:

• .page-menu - стилі для навігаційного меню
• .figure - оформлення зображення з підписом
• .figure-img - Стилі для зображень у блоках
• .figure-caption -Стилі для підписів до зображень
• .quote - виділення цитат курсивом та іншим кольором
• Рекомендації по використанню.

2. Стилі для біографії:

• .timeline - оформлення хронологічної шкали
• .timeline-item - стиль для кожної події на шкалі
• .date - виділення дати жирним шрифтом
• дізнатись більше.Рекомендації по використанню.

3. Стилі для віршів:

• .poem - загальне оформлення вірша
• .poem-title - стиль заголовка вірша
• .poem-stanza - відступи між строфами
• .poem-line - оформлення рядків вірша
• .poem-author - вирівнювання імені автора праворуч
• дізнатись більше.Рекомендації по використанню.

4. Стилі для навігації:

• .frame-hover - ефект при наведенні на зображення
• Стилі для посилань "До гори"
• Стилі для кнопки "На головну" у футері
• .page-menu -сучасний варіант оформлення меню.
• дізнатись більше.Рекомендації по використанню.

Додаткові вимоги:

• Сторінка повинна бути адаптивною для різних пристроїв
• Використати семантичні HTML5 теги

Семантичні елементи

<header>

Визначає заголовок для документа або розділу.

<header> <h1>Заголовок сайту</h1> <p>Підзаголовок або слоган</p> </header>

<nav>

Визначає набір навігаційних посилань.

<nav> <a href="/">Головна</a> <a href="/about">Про нас</a> <a href="/contact">Контакти</a> </nav>

<section>

Визначає розділ в документі.

<section> <h2>Заголовок розділу</h2> <p>Зміст розділу...</p> </section>

<article>

Визначає незалежний, самодостатній вміст.

<article> <h2>Назва статті</h2> <p>Текст статті...</p> </article>

<footer>

Визначає нижній колонтитул для документа або розділу.

<footer> <p>© 2025 Мій сайт. Всі права захищені.</p> </footer>
• Забезпечити коректне відображення українських символів
• Додати плавну прокрутку до якорних посилань