Html: Timeline

Timeline — распространённый приём подачи информации на веб-сайтах. Это одновременно информативный и визуальный инструмент, позволяющий быстро донести важные этапы для пользователя.

Существует множество различных дизайнов для создания временной шкалы и одну из них вы реализуете в этом испытании.

Результатом выполнения задания станет следующий макет:

Вся необходимая вёрстка уже представлена в файле index.html. Допишите стили для нужных классов. Сделайте их без привязки к определённым тегам. Это позволит использовать не только ту структуру, которая дана, но и построить timeline на других тегах.

Базовые стили обёртки timeline

• Внутренние отступы: 30px сверху, 0px справа, 30 пикселей снизу и 50px слева.
• От обёртки строится вертикальная черта. Она должна растягиваться на 100 процентов высоты обёртки. Ширина линии: 2px, цвет: #fff.
• Внешние отступы: 0px

Базовые стили элементов timeline

• Внешний отступ снизу: 100px. У последнего элемента не должно быть отступа.

Базовый стиль круга элемента timeline

• Ширина и высота: 20px
• Цвет: #80fcff
• Отступ сверху от элемента timeline: 15%
• Круг должен быть отцентрован относительно вертикальной линии.

Для закругления используйте свойство border-radius со значением 50%.

Подсказки

• Подумайте, какие значения left имеют вертикальная линия и круг. Исходите из ширины элементов и внутренних отступов обёртки .timeline
• В качестве вертикальной черты вы можете использовать псевдоэлемент или свойство border. В последнем случае необходимо компенсировать внутренние отступы слева и сделать их 48px