A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list.
01. How to use it:
<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>
02. 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; }
03. 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; } }
Demo: Link
Download: Link
Excellent web site. Lots of helpful information here. I am sending it to several buddies ans also sharing in delicious. And obviously, thank you to your effort!