Responsive Flat Style Timeline with Pure CSS/CSS3

A responsive, flexible, flat styled timeline built using pure CSS and CSS3 transitions & media queries. Works perfectly on PC and mobile devices.

How to use it:

Download the zip and upload the CSS & images into your web hosting.

Include the base.css file into your project.

<link rel="stylesheet" href="assets/style/base.css">

Create the Html structure for the timeline.

<div id="timeline">
  <div class="timeline-item">
    <div class="timeline-icon"> <img src="assets/images/star.svg" alt=""> </div>
    <div class="timeline-content">
      <h2>LOREM IPSUM DOLOR</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis. </p>
      <a href="#" class="btn">button</a> </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon"> <img src="assets/images/book.svg" alt=""> </div>
    <div class="timeline-content right">
      <h2>LOREM IPSUM DOLOR</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa. </p>
      <a href="#" class="btn">button</a> </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon"> <img src="assets/images/star.svg" alt=""> </div>
    <div class="timeline-content">
      <h2>LOREM IPSUM DOLOR</h2>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa. </p>
      <a href="#" class="btn">button</a> </div>
  </div>
</div>

Changelog:

01/15/2016

• Update timeline to use separately in other projects