How to create a Timeline design pages

timeline code

Vertical Timeline

In web-design timeline is usually used to display a list of events in order and is usually shown with a bar labeled with dates alongside the event entries.

 timelines provide the users with a useful framework that is a great way to make what can often be a huge range of data much more accessible and approachable. This not only provides a better understanding of the content but also helps stay on track.

we have so many types of timelines to choose from whether it is animated, sliders, cards, progress bars and more, we decided to make it more interesting! We have divided the timelines into two categories, vertical and horizontal. 

Here is the full code you can download and use it to your website/applications. And also I will provide the live demo link you can visit the link. I hope this is very useful, will see another web concept.

HTML

<ul class="vline" style="margin-bottom:-17px;">
<li>
<div class="sec">
This is a paragraph.
</div>
</li>
<li>
<div class="sec">
This is a paragraph. 
</div>
</li>
<li>
<div class="sec">
This is a paragraph. 
</div>
</li>
</ul>

CSS

.vline li{position:relative;padding-left:15px;padding-bottom:10px;display:block;margin-bottom:0px;border:none;background:transparent;}
.vline li:before{content:'';height:100%;position:absolute;width:1px;background:#9f5eff;left:0px;left:-1px;top:0px;}
.vline li:after{content:'';position:absolute;width:5px;height:5px;border-radius:5px;background:#fff;border:1px solid #9f5eff;left:-3px;top:0px;}
.vline li .sec{background:#f1f1f1;border:1px solid #ddd;margin-bottom:15px;padding:10px;background: #f9f7fc;border:1px solid #e6d6ff;color:#734fa8;}

 

Horizontal Timeline

<ul class="hline">
<li>
<div class="sec">
This is a paragraph.
</div>
</li>
<li>
<div class="sec">
This is a paragraph.
</div>
</li>
<li>
<div class="sec">
This is a paragraph.
</div>
</li>
</ul>

CSS

.hline li{float:left;position:relative;padding:0px;border:none;margin:0px;background:transparent;}
.hline li:before{content:'';width:100%;position:absolute;height:1px;background:#9f5eff;left:0px;top:0px;}
.hline li:after{content:'';position:absolute;width:5px;height:5px;border-radius:5px;background:#fff;border:1px solid #9f5eff;left:-3px;top:-2px;}
.hline li:last-child:before{content:'';display:none;}
.hline li .sec{background:#f1f1f1;border:1px solid #ddd;margin-bottom:15px;padding:10px;margin-top:20px;width:80%;margin-left:-40%;    background: #f9f7fc;
border:1px solid #e6d6ff;color:#734fa8;}