Responsive Timeline

Vertical timeline which i created for a personal project. Created using Gulp and Sass.

To free edit install all dependencies:

$ npm install

Use the default task from Gulp for run all tasks:

$ gulp

And for watch changes in project use:

$ gulp watch

How to use

Style

If you can use timeline in your project, first add the timeline stylesheet or import via Sass

HTML - you can see the compiled file here

<linkrel="stylesheet" href="styles-path/timeline.css">

SCSS - import the scss file into your base file: timeline.scss. if you use this way, copy _mixins.scss to same folder.

@import'styles-path/timeline';

Markup

Each timeline box content is used within timeline-item, to create ilimited boxes, copy and paste all content from timeline-item.

Paste the following markup in your main file.

<!-- Timeline --><divid="timeline"><!-- Timeline Item, copy from here to create various boxes --><divclass="timeline-item"><!--Icon inside the circle--><divclass="timeline-icon"><imgsrc="assets/images/star.svg" width="25px" alt=""></div><!-- Content from timeline box and position (right or left)--><divclass="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.
</p><ahref="#" class="btn">button</a></div></div></div>

License

MIT License © Bruno Rodrigues