What is it?

Create beautiful and simple timelines with the Responsive CSS Timeline. It works on all screen sizes and adapts to browser font size settings. It is easy to integrate and will not conflict with existing CSS and HTML. Check out the demo and download now. Feel free to leave a comment if anything is unclear.

Timeline Header

The header holds two simple headings at the beginning of your timeline.

<header class="tl-header">
    <h1>History of The internet</h1>
    <h2>A Chronological Timeline</h2>

Timeline Wrapper

This is where all the timeline rows, milestones etc. is wrapped.

<div class="timeline">Timeline contents...</div>

Timeline Row

Each row has three columns: content, date and empty. The date must always be in the middle while the content can be on the left side OR the right side of the timeline.

<div class="tl-row">

    <div class="tl-content">
    <div class="tl-date">
        <span class="tl-icon">1966</span>
    <div class="tl-empty"></div>



Use milestones to highlight important years or dates. Simply place them between rows.

<div class="tl-milestone">
    <h2><span style="color: brown">1991</span> <br> World Wide Web (WWW)</h2>
    <img src="img/tim.jpg">