How to create a Timeline design pages

timeline code

Vertical Timeline

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;}