Данный таймлайн является адаптивным, и на узких экранах он складывается, показывая события друг под другом.

Пример:

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.

Заголовок

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo.

Для иконок в данном примере используется шрифт Font Awesome, но при желании можно использовать другой шрифт, символ, графику или svg-иконку.

HTML:

Все блоки событий timeline-item идентичны и показываются по разные стороны с помощью псевдокласса :nth-child

CSS:

Для просмотра мобильного варианта, когда блоки находятся друг под другом, сузьте окно браузера.


За основу взят код, найденный на codepen.io у пользователя Bruno Rodrigues

Смотрите также:

Мобильный Tab Bar с переключающимися вкладками

Красивая замена блока на фотографию при наведении и движении курсора мыши

Падающий снег для шапки, секций или фотографий

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Рушан:

    Все отлично. Правда заголовки я реализовал, через тег <P>. И на андроиде юраузера все нормально отрабатывают, а Опера, просто в виде <UL> маркированного списка

    Ответить