Author: | brunodsgn |
---|---|
Views Total: | 11,422 views |
Official Page: | Go to website |
Last Update: | January 15, 2016 |
License: | MIT |
Preview:

Description:
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