Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Create Vertical Timeline Using HTML And CSS

Thursday, Sep 28, 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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.