Responsive CSS cronología boilerplate-Timenil. CSS

Vista prévia

Descripción

Timenil. CSS es una librería CSS muy pequeña que se utiliza para generar una línea de tiempo sensible, bastante agradable usando HTML simple & CSS.

Funcionamiento

Cargue el Timenil. CSS en el documento y estamos listos para ir.

<link rel="stylesheet" href="timenil.css">

El HTML de ejemplo para crear una línea de tiempo básica en la Página Web.

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