How to create timeline using CSS?

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:
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS