Check Out The Latest Themes And Exclusive Deals And Offers On Themes
In Our Deals For Web Developers Section


Join Today And Get All The 87 Themes In Just $69! Join Today

Create Vertical Timeline Using HTML And CSS

Tuesday, Jan 24, 2017

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