Timeline шаблонизатор на основе CSS3

<div id="ucodes-timeline">  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 2</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 3</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 4</div></li>  
<li><i class="arrow"></i><div id="ucodes-still-block">Контент 5 Полный</div></li>  
</div>

#ucodes-still-block {  
background: #fff;  
border-radius: 3px;  
border: 1px solid #c3cbdf;  
min-height: 60px;  
}  

#ucodes-timeline {  
background: url(http://webo4ka.3dn.ru/_ld/41/45469073.png) repeat-y center;  
}  
#ucodes-timeline > li {  
float: left;  
clear: left;  
width: calc(50% - 14px);  
margin-bottom: 15px;  
position: relative;  
list-style: none;  
}  
#ucodes-timeline > .right {  
float: right;  
clear: right;  
}  
#ucodes-timeline .arrow {  
background: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg) no-repeat;  
width: 20px;  
height: 15px;  
position: absolute;  
top: 20px;  
}  
#ucodes-timeline > .left + .right > .arrow {  
top: 35px;  
}  
#ucodes-timeline .right > .arrow {  
left: calc(0% - 18px);  
right: auto;  
background-position: -60px -28px;  
width: 19px;  
}  
#ucodes-timeline .left > .arrow {  
left: auto;  
right: calc(0% - 19px);  
background-position: -41px -28px;  
}  
#ucodes-timeline .highlight {  
clear: both;  
width: auto;  
float: none;  
}  
#ucodes-timeline .highlight .arrow {  
background-image: url(http://webo4ka.3dn.ru/_ld/41/s75295830.jpg);  
background-position: -26px -28px;  
height: 21px;  
width: 15px;  
left: 50%;  
top: -20px !important;  
margin-left: -7px;  
}

$(function(){  
$('#ucodes-timeline li:even').addClass('left');  
$('#ucodes-timeline li:odd').addClass('right');  
$('#ucodes-timeline li:last').addClass('highlight');  
});