Last Updated: September 09, 2019
·
6.104K
· christian-fei

Responsive vertical Timeline with CSS

<a href="http://christian-fei.com/tutorials/simple-vertical-timeline-with-css/">For more info check out this tutorial</a>

With Timeline.css you can create beautiful timeline with minimal effort, and did I mention that it is responsive too?

A quick demo:
Picture

The structure is easy as pie.
Elements and classes used by Timeline.css :

  • an element to wrap the timeline (CSS class .timeline)
  • an element just to create the line in the center of the timeline (CSS class .line) to display a delimiter for a new year, create an element exactly where you want it to appear with the CSS class .year
  • and finally your events, entries etc. are identified by the CSS class .entry or .event, as you prefer

<a href="http://christian-fei.com/tutorials/simple-vertical-timeline-with-css/">For more info check out this tutorial</a>

3 Responses
Add your response

Like it a lot. Thanks for sharing.

over 1 year ago ·

Thank you! :)

over 1 year ago ·

Nice

over 1 year ago ·