Create a clean, modern timeline using html and css

Whether you want to show a purchasing process, the highlights of your career on your portfolio, or anything else, learn how to create a sleek, modern timeline to show it off!

LLLouis-Nicolas Leuillet

Updated on December 9, 2024

Whether you're out of inspiration or trying to recreate a website like Twitter, this article will help you reproduce a profile highly inspired by those offered by Twitter.

You can find the entire tutorial on our Instagram account.

Step 1

Let's start by creating the HTML structure of our timeline.

HTML

<div class="timeline">
        <div class="timeline-object complete">
          <div class="timeline-status"></div>
          <div class="timeline-content">
            <h3>Start of Training</h3>
            <span>19.06.2020</span>
          </div>
        </div>
        
        <div class="timeline-object complete">
          <div class="timeline-status"></div>
          <div class="timeline-content">
            <h3>Final Project</h3>
            <span>05.07.2020</span>
          </div>
        </div>
        
        <div class="timeline-object">
          <div class="timeline-status"></div>
          <div class="timeline-content">
            <h3>Diploma Awarding</h3>
            <span>17.09.2020</span>
          </div>
        </div>
      </div>

Each timeline element has its own timeline-object.

Step 2

Let's avoid padding issues.

CSS

* {
      box-sizing: border-box;
    }

This little trick allows us to specify that all elements on the site (*) should include their padding in their size.

Step 3

Now let's style each timeline object.

CSS

.timeline-object {
      display: flex;
      align-items: center;
      margin-top: 50px;
      position: relative;
    }

Nothing very special to add: we use flexbox to center the elements together.

Step 4

Now let's tackle the display of objects when they are completed.

CSS

.timeline-object.complete::after {
      content: '';
      display: block;
      position: absolute;
      
      width: 4px;
      height: 100px;
      background-color: #1DBF73;
      
      left: 23px;
      top: 50px;
      transform: translateX(-50%);
    }

Step 5

Let's handle the status of the elements.

CSS

.timeline-status {
      height: 46px;
      width: 46px;
      border-radius: 50%;
      background-color: #1DBF73;
    }

Each element will be represented by a small circular icon.

Step 6

Now we need to handle the status of the incomplete elements.

CSS

.timeline-object:not(.complete) .timeline-status {
      background: #ffffff;
      border: 4px solid #C5C5C5;
    }

Incomplete elements are now represented by a circle with gray borders.

Step 7

Now let's style the content of each object: the title and the span tag.

CSS

.timeline-content {
      margin-left: 15px;
    }
    
    .timeline-content h3 {
      color: #1DBF73;
      background: #CFF6CF;
      padding: 5px 10px;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    
    .timeline-content span {
      color: #103B27;
      font-size: .9em;
      font-weight: bold;
    }

Step 8

Now we just need to handle the case of an incomplete title to finish our timeline.

CSS

.timeline-object:not(.complete) .timeline-content h3 {
      color: #8A8A8A;
      background: #E1E1DF;
    }

Incomplete elements finally have a gray title.

Category: Development