Responsive Vertical Timeline In CSS/SASS

Preview:

Description:

Yet another responsive, nice-looking, and vertical timeline UI built on top of pure CSS/SASS.

It provides an easy way to present historical events, milestones, and chronological information in an organized and vertical tree structure manner. The timeline will be able to adapt to different screen sizes, making it accessible across all devices like desktop and mobile.

How to use it:

1. Import the timeline CSS.

@import "timeline";

2. Code the HTML for the vertical timeline.

<div id="timeline">
  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="1.svg" width="25px" alt="">
    </div>
    <div class="timeline-content">
      <h2>Event 1</h2>
      <p>Event Description 1</p>
      <a href="#" target="_blank" class="btn">Link 1</a>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="2.svg" width="25px" alt="">
    </div>
    <div class="timeline-content">
      <h2>Event 2</h2>
      <p>Event Description 2</p>
      <a href="#" target="_blank" class="btn">Link 2</a>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="3.svg" width="25px" alt="">
    </div>
    <div class="timeline-content">
      <h2>Event 3</h2>
      <p>Event Description 3</p>
      <a href="#" target="_blank" class="btn">Link 3</a>
    </div>
  </div>
  ...
</div>