Responsive Vertical Timeline In CSS/SASS

Category: Chart & Graph , CSS & CSS3 , Recommended | January 17, 2023
Author:itbruno
Views Total:449 views
Official Page:Go to website
Last Update:January 17, 2023
License:MIT

Preview:

Responsive Vertical Timeline In CSS/SASS

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>

You Might Be Interested In:


Leave a Reply