Línea de tiempo de estilo plano adaptable con Pure CSS/CSS3

Vista prévia

Descripción

Una línea de tiempo adaptable, flexible y con estilo plano creada con transiciones CSS y CSS3 puras & consultas de medios. Funciona perfectamente en PC y dispositivos móviles.

Funcionamiento

Descargue el zip y cargue las imágenes de & CSS en su Hosting Web.

Incluya el archivo base. CSS en el proyecto.

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

Cree la estructura HTML para la línea de tiempo.

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

Registro de cambios

01/15/2016

• Actualice la escala de tiempo para usarla por separado en otros proyectos