✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Vertical Timeline Using HTML And CSS

Last Updated : Jul 1, 2023

IN - HTML CSS | Written & Updated By - Anjali

In this tutorial we will show you how to create vertical timeline using HTML and CSS, vertical timeline is a design to show some block of events or text in vertical manner

You may also like vertical accordion menu using jQuery CSS and HTML.

Create Vertical Timeline Using HTML And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Vertical Timeline It Takes Only Two Steps:-

  1. Make a HTML file and define markup
  2. Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name timeline.html 

<html>
<head>
<link rel="stylesheet" type="text/css" href="timeline_style.css">
</head>
<body>
<div id="wrapper">

<div id="timeline">
<div id="timeline_bar">
</div>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
<li>It has survived not only five centuries, but also the leap into electronic typesetting</li>
<li>Contrary to popular belief, Lorem Ipsum is not simply random text.</li>
<li>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"</li>
</div>

</div>
</body>
</html>

In this step we create a 'timeline' div as a wrapper for 'timeline_bar' and timeline blocks. You may also like animated navigation menu using CSS and HTML.

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name timeline_style.css 

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:silver;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
}
#wrapper p
{
 font-size:16px;
}
#timeline
{
 position:relative;
 width:700px;
 height:400px;
 float:left;
 margin-left:145px;
}
#timeline_bar
{
 padding: 0;
 list-style: none;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 width: 10px;
 background-color:black;
 border-radius:10px;
}
#timeline li
{
 position:relative;
 margin-top:20px;
 margin-bottom:20px;
 width:330px;
 height:70px;
 background-color:black;
 padding:15px;
 box-sizing:border-box;
 border-radius:10px;
 list-style-type:none;
 color:white;
 font-size:15px;
}
#timeline li:nth-child(odd) 
{
 margin-right:10px;
 right:-10px;
}
#timeline li:nth-child(even)
{
 left:370px;
}

In this step we we use position relative in 'timeline' so that we make our block and timeline bar attach to each other to give a nice vertical timeline effect and then we use li:nth-child(odd) and li:nth-child(even) to give different styling to even and odd block of 'li' and that creates a vertical timeline design.

You may also like one page website template using HTML and CSS.

Thats all, this is how to create vertical timeline using HTML and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on vertical timeline html helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →