How to create timeline using CSS?
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.
- 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.
Steps:
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 h 3 { 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: