Author: | flouthoc |
---|---|
Views Total: | 2,087 views |
Official Page: | Go to website |
Last Update: | March 20, 2017 |
License: | MIT |
Preview:

Description:
Timenil.css is a very small CSS library used to generate a responsive, pretty nice timeline using plain HTML & CSS.
How to use it:
Load the Timenil.css in the document and we’re ready to go.
<link rel="stylesheet" href="timenil.css">
The example HTML to create a basic timeline on the webpage.
<div id="timenil"> <div class="timenil-vertical-line"></div> <div class="timenil-node"> <div class="timenil-node-child-left timenil-node-child-left-theme"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p>Garnishing with a bit of JS for fade-in animation , you can ignore JS part if you dont want that. </div> </div> </div> <div class="timenil-node-center"></div> <div class="timenil-node-trace"></div> <div class="timenil-node-child-right"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p><h1>Right</h1></p> <p>Some text about heading</p> </div> </div> </div> </div> <div class="timenil-node"> <div class="timenil-node-child-left"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p><h1>Left</h1></p> <p>Some text about heading</p> </div> </div> </div> <div class="timenil-node-center"></div> <div class="timenil-node-trace"></div> <div class="timenil-node-child-right timenil-node-child-right-theme"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p>And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.</p> <button style="background-color:#2ecc71; color:white; border:1px solid #2ecc71;">Submit</button> </div> </div> </div> </div> <div class="timenil-node"> <div class="timenil-node-separator"> 2017 </div> </div> <div class="timenil-node"> <div class="timenil-node-child-left timenil-node-child-left-theme"> <div class="timenil-content-box"> <img src="assets/img2.jpg" style="width:100%; height:100%;"/> </div> </div> <div class="timenil-node-center"></div> <div class="timenil-node-trace"></div> <div class="timenil-node-child-right"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p><h1>Right</h1></p> <p>Some text about heading</p> </div> </div> </div> </div> <div class="timenil-node"> <div class="timenil-node-child-left"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p><h1>Left</h1></p> <p>Some text about heading</p> </div> </div> </div> <div class="timenil-node-center"></div> <div class="timenil-node-trace"></div> <div class="timenil-node-child-right timenil-node-child-right-theme"> <div class="timenil-content-box"> <div class="timenil-content-text"> <p>And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.</p> <button>Submit</button> </div> </div> </div> </div> </div>