Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

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

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH