How to create timeline using CSS?

Last Updated : 15 Sep, 2020

We can easily create a timeline using some basic HTML and CSS. HTML Code is used to create a basic structure of the timeline and CSS code is used to set the style.

HTML Code: In this section, we will create a structure of our timeline. Our structure will include four events.

Steps:

Create a div element with class main-container.
Inside our main container create four more div with class text-wrapper.
Inside each div with class text-wrapper include another div with class content and include one h3 and p tag within it.

Example: HTML code

<!DOCTYPE html> 
<html> 
<body> 
 <!-- container which will contain our timeline -->
    <div class="main-container"> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper left"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>one</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper right"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>two</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper left"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>three</h3> 
                <p>Some Stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper right"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>four</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
    </div> 
</body> 
</html> 

CSS code: We will use CSS to give our timeline some structure and set position of events.

<style> 
  .main-container{ 
    position: relative; 
    width: 500px; 
} 
/*creating line for timeline*/
.main-container::after{ 
    content: ''; 
    position: absolute; 
    width: 10px; 
    background-color: #FFC0CB; 
    top:0; 
    bottom: 0; 
    left: 50%; 
    margin-left: -3px; 
} 
/*Adjusting box of all content*/
.text-wrapper{ 
    padding: 10px 40px; 
    position: relative; 
    width:51%; 
    box-sizing: border-box; 
    margin: 50px 0; 
} 
.text-wrapper::after{ 
    content: ''; 
    position: absolute; 
    width: 30px; 
    height: 25px; 
    right: -10px; 
    background-color:#FF69B4; 
    top:15px; 
    border-radius: 50%; 
    z-index: 1; 
} 
/*for left events*/
.left{ 
    left: 0; 
} 
/*for right events*/
.right{ 
    left:50%; 
} 
.right::after{ 
    left:-10px; 
} 
/*content box colour padding and radius for circular corner*/
.content{ 
    padding: 15px 15px 15px 17px; 
    background-color: #FFC0CB; 
    border-radius: 4px; 
} 
/*setting text property of event heading*/
.content h3{ 
    text-transform: uppercase; 
    font-size: 14px; 
    color: #212121; 
    letter-spacing:1px; 
} 
/*setting text property of event content*/
.content p{ 
    color: #616161; 
    font-weight: 300; 
    font-size: 18px; 
    margin-top: 2px; 
} 
  </style> 

Complete Code:

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
  .main-container{ 
    position: relative; 
    width: 500px; 
} 
/*creating line for timeline*/ 
.main-container::after{ 
    content: ''; 
    position: absolute; 
    width: 10px; 
    background-color: #FFC0CB; 
    top:0; 
    bottom: 0; 
    left: 50%; 
    margin-left: -3px; 
} 
/*Adjusting box of all content*/ 
.text-wrapper{ 
    padding: 10px 40px; 
    position: relative; 
    width:51%; 
    box-sizing: border-box; 
    margin: 50px 0; 
} 
.text-wrapper::after{ 
    content: ''; 
    position: absolute; 
    width: 30px; 
    height: 25px; 
    right: -10px; 
    background-color:#FF69B4; 
    top:15px; 
    border-radius: 50%; 
    z-index: 1; 
} 
/*for left events*/ 
.left{ 
    left: 0; 
} 
/*for right events*/ 
.right{ 
    left:50%; 
} 
.right::after{ 
    left:-10px; 
} 
/*content box colour padding  
and radius for circular corner*/ 
.content{ 
    padding: 15px 15px 15px 17px; 
    background-color: #FFC0CB; 
    border-radius: 4px; 
} 
/*setting text property of event heading*/ 
.content h3{ 
    text-transform: uppercase; 
    font-size: 14px; 
    color: #212121; 
    letter-spacing:1px; 
} 
/*setting text property of event content*/ 
.content p{ 
    color: #616161; 
    font-weight: 300; 
    font-size: 18px; 
    margin-top: 2px; 
} 
  </style> 
</head> 
<body> 
 <!-- container which will contain our timeline -->
    <div class="main-container"> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper left"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>one</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper right"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>two</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper left"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>three</h3> 
                <p>Some Stuff</p> 
            </div> 
        </div> 
        <!-- event 1st of timeline -->
        <div class="text-wrapper right"> 
            <!-- all text content of timeline -->
            <div class="content"> 
                <h3>four</h3> 
                <p>Some stuff</p> 
            </div> 
        </div> 
    </div> 
</body> 
</html> 

Output:

Suggest improvement

How to create a Menu Icon using CSS ?

Share your thoughts in the comments

How to create timeline using CSS?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?