Стилі для таймлайну

До завдання

1. Стилі для таймлайну (хронології подій)

.timeline - Основний контейнер для хронологічної шкали. 
                
CSS

                
/* Стилі для таймлайну (хронології подій) */
.timeline {
    margin: 40px 0; /* Відступи зверху та знизу */
    padding: 25px; /* Відступи всередині */
    border-left: 4px solid #0057b7; /* Лінія зліва */
    background-color: #ffffff; /* Білий фон */
    border-radius: 8px; /* Закруглені кути */
    box-shadow: 0 4px 15px rgba(0, 87, 183, 0.1); /* Тінь */
    position: relative; /* Відносне позиціонування */
}

/* Псевдоелемент для градієнтної лінії таймлайну */
.timeline:before {
    content: ""; /* Обов'язковий атрибут */
    position: absolute; /* Абсолютне позиціонування */
    top: 0; /* Прив'язка до верху */
    left: -4px; /* Позиція зліва */
    height: 100%; /* На всю висоту */
    width: 4px; /* Ширина лінії */
    background: linear-gradient(to bottom, #0057b7, #00a1ff); /* Градієнт */
    border-radius: 4px; /* Закруглені кути */
}
Використовується для оформлення біографічного розділу з хронологією подій.
Приклад використання:
                
HTML

                
<div class="timeline">
    <div class="timeline-item">
        <span class="date">1935</span>
        <h3>Народився</h3>
        <p>8 січня в селі Біївці на Черкащині</p>
    </div>
</div>
.timeline-item - Окрема подія у хронології. 
                
CSS

                
.timeline-item {
    margin-bottom: 30px; /* Відступ знизу */
    position: relative; /* Відносне позиціонування */
    padding: 20px; /* Відступи всередині */
    background-color: #f8faff; /* Колір фону */
    border-radius: 6px; /* Закруглені кути */
    transition: all 0.3s ease; /* Плавні анімації */
    border: 1px solid #e0e9ff; /* Рамка */
}

/* Ефект при наведенні на елемент таймлайну */
.timeline-item:hover {
    transform: translateX(5px); /* Зсув вправо */
    box-shadow: 2px 5px 10px rgba(0, 87, 183, 0.1); /* Тінь */
    background-color: #fff; /* Білий фон */
}

/* Маркери для елементів таймлайну */
.timeline-item:before {
    content: ""; /* Обов'язковий атрибут */
    position: absolute; /* Абсолютне позиціонування */
    left: -32px; /* Позиція зліва */
    top: 24px; /* Позиція зверху */
    width: 16px; /* Ширина */
    height: 16px; /* Висота */
    border-radius: 50%; /* Кругла форма */
    background: #0057b7; /* Колір */
    border: 3px solid #ffffff; /* Біла рамка */
    box-shadow: 0 0 0 2px #0057b7; /* Тінь */
    transition: all 0.3s ease; /* Плавні анімації */
}

/* Ефект при наведенні на маркер */
.timeline-item:hover:before {
    background: #00a1ff; /* Зміна кольору */
    box-shadow: 0 0 0 2px #00a1ff; /* Зміна тіні */
    transform: scale(1.2); /* Збільшення */
}

/* Видалення відступу для останнього елемента */
.timeline-item:last-child {
    margin-bottom: 0;
}

/* Стилі для заголовків у таймлайні */
.timeline-item h3 {
    color: #0057b7; /* Колір тексту */
    margin-top: 0; /* Відступ зверху */
    margin-bottom: 10px; /* Відступ знизу */
}

/* Стилі для абзаців у таймлайні */
.timeline-item p {
    color: #4a5568; /* Колір тексту */
    margin: 0; /* Відступи */
    line-height: 1.6; /* Міжрядковий інтервал */
}

/* Стилі для дат у таймлайні */
.timeline-item .date {
    display: inline-block; /* Блоково-рядковий елемент */
    padding: 3px 8px; /* Відступи всередині */
    background-color: #e0e9ff; /* Колір фону */
    color: #0057b7; /* Колір тексту */
    border-radius: 12px; /* Закруглені кути */
    font-size: 0.85em; /* Розмір шрифту */
    margin-bottom: 10px; /* Відступ знизу */
}