Author: | Mathunes |
---|---|
Views Total: | 14,620 views |
Official Page: | Go to website |
Last Update: | January 27, 2020 |
License: | MIT |
Preview:

Description:
A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list.
How to use it:
1. Build the HTML structure for the timeline.
<div class="timeline"> <ul> <li> <div class="content"> <h3>Event 1</h3> <p>Event 1 Description</p> </div> <div class="point"></div> <div class="date"> <h4>January 2020</h4> </div> </li> <li> <div class="content"> <h3>Event 2</h3> <p>Event 2 Description</p> </div> <div class="point"></div> <div class="date"> <h4>July 2019</h4> </div> </li> <li> <div class="content"> <h3>Event 3</h3> <p>Event 3 Description</p> </div> <div class="point"></div> <div class="date"> <h4>March 2019</h4> </div> </li> ... </ul> </div>
2. The main CSS styles for the timeline.
.timeline { position: relative; margin: 0 auto; width: 90%; } .timeline ul li { margin-bottom: 50px; list-style-type: none; display: flex; flex-direction: row; align-items: center; } .point { min-width: 20px; height: 20px; background-color: #be9fe1; border-radius: 100%; z-index: 2; border: 3px #333333 solid; position: relative; left: 1px; } .timeline ul li .content { width: 50%; padding: 0 20px; } .timeline ul li:nth-child(odd) .content { padding-left: 0; } .timeline ul li:nth-child(odd) .date { padding-right: 0; } .timeline ul li:nth-child(even) .content { padding-right: 0; } .timeline ul li:nth-child(even) .date { padding-left: 0; } .timeline ul li .date { width: 50%; padding: 0 20px; font-weight: normal; } .timeline ul li .date h4 { background-color: #e1ccec; width: 100px; text-align: center; padding: 5px 10px; border-radius: 10px; } .timeline ul li .content h3 { padding: 10px 20px; background-color: #be9fe1; margin-bottom: 0; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } .timeline ul li .content p { padding: 10px 20px; background-color: #e1d9ec; margin-top: 0; text-align: center; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .timeline ul li:nth-child(even) { flex-direction: row-reverse; } .timeline ul li:nth-child(even) .date h4 { float: right } .timeline::before { content: ""; position: absolute; height: 100%; width: 3px; left: 50%; background-color: #333333; }
3. Make the timeline fully responsive.
@media (max-width: 800px) { .point { min-width: 15px; height: 15px; } html, body { font-size: 15px; } } @media (max-width: 650px) { html, body { font-size: 14px; } .point { min-width: 12px; height: 12px; } } @media (max-width: 450px) { html, body { font-size: 10px; } p { padding: 10px !important; } }