Решение: Времева линия

Как се изгражда времева линия с HTML и CSS

Времевата линия може да се реализира изцяло с HTML и CSS, без изображения за самата линия. Основната идея е проста: използваме border-left като визуална линия, а датите и точките позиционираме с margin и псевдоелементи. Иконките към заглавията се управляват чрез спрайт и различни класове за всяка секция.

Стъпка по стъпка: изграждане на таймлайн

1. Добавете секция main, която отделя хедъра от основното съдържание.
2. Създайте definition list (dl) за секция Experience и втори за Education.
3. Във всеки dl:
   • В dt поставете датите.
   • В dd добавете h3, параграф за позиция и (при нужда) допълнителен текст.
4. На dl задайте margin за отстояние и border-left: 1px solid black; – това е самата вертикална линия.
5. Изместете dt вляво от линията чрез margin, добавете цвят и създайте точка с псевдоелемента ::after.
6. Оформете h3 и p с подходящи цветове, размер на шрифта и разстояние между отделните записи.
7. За иконките към h2 използвайте отделни класове (profile, experience, education) и различни background-position стойности от спрайта чрез селектор с ::after.

Използвани CSS техники

• border-left – създава визуалната линия на таймлайна
• margin – контролира отстоянията и позиционирането на датите
• ::after – добавя декоративната точка към всяка дата
• background и background-position – показват правилната иконка от спрайта
• Селектор от тип h2.class::after – таргетира конкретно заглавие с клас и псевдоелемент