Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Create Vertical Timeline Using HTML And CSS

Thursday, Aug 11, 2016

Tags:- HTML CSS


Vertical timeline is a design to show some block of events or text in vertical manner so, in this tutorial we will show you how to create vertical timeline using HTML and CSS.You may also like vertical accordion menu using jQuery CSS and HTML.


See Demo
Create Vertical Timeline Using HTML and CSS


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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email