Author: | ratul16 |
---|---|
Views Total: | 258 views |
Official Page: | Go to website |
Last Update: | September 25, 2022 |
License: | MIT |
Preview:

Description:
A semantic SEO-friendly vertical timeline built on top of HTML lists and CSS.
How to use it:
1. Add your events as list items to the timeline.
<ul class="timeline"> <li class="timeline-item"> <div class="timeline-card"> <h4>09:00 AM</h4> <p>Event 1</p> </div> </li> <li class="timeline-item"> <div class="timeline-card"> <h4>09:00 AM</h4> <p>Event 2</p> </div> </li> <li class="timeline-item"> <div class="timeline-card"> <h4>09:00 AM</h4> <p>Event 3</p> </div> </li> ... </ul>
2. Convert the HTML list into a vertical timeline.
.timeline { position: relative; padding: 1rem 2rem; border-radius: 12px; } .timeline .timeline-item { position: relative; left: -10px; list-style: none; border-left: 1px solid #fff; margin-left: 10px; padding: 0 0 1.5rem 1.5rem; } .timeline .timeline-item .timeline-card { background: #fff; padding: 0.5rem 1rem; border-radius: 5px; cursor: pointer; transition: all 0.3s ease-in-out; } .timeline .timeline-item .timeline-card h4 { margin: 10px auto; color: #333; } .timeline .timeline-item .timeline-card:hover { box-shadow: 0 5px 5px rgba(23, 20, 29, 0.15); transform: translateX(-5px); } .timeline .timeline-item:last-child { padding-bottom: 0; } .timeline .timeline-item:before { content: ""; width: 15px; height: 15px; background: white; border: 2px solid #278472; border-radius: 50%; position: absolute; left: -10px; top: 0px; }