Timeline Years Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

<div class=\"demo wrap\">
<div class=\"timeline\">
<ul class=\"events\">
<li style=\"width: 42.48%; left: 57.2%;\">Design & Typography <em>(2007 - 2009)</em></li>
<li style=\"width: 56.68%; left: 43%;\">Photography <em>(2006 - 2009)</em></li>
<li style=\"width: 71.3%; left: 28.4%;\">Object Oriented Programming <em>(2005 - 2009)</em></li>
<li style=\"width: 85.5%; left: 14.2%;\">Web Development <em>(2004 - 2009)</em></li>
<li style=\"width: 42.75%; left: 0;\">3D Modeling and Rendering <em>(2003 - 2006)</em></li>
<li style=\"width: 99.5%; left: 0;\">Drawing & Illustration <em>(2003 - 2009)</em></li>
</ul> <!-- end .events -->
 
<ul class=\"intervals\">
<li class=\"first\">2003</li>
<li>2004</li>
<li>2005</li>
<li>2006</li>
<li>2007</li>
<li>2008</li>
<li class=\"last\">2009</li>
</ul> <!-- end .intervals -->
</div> <!-- end .timeline -->
</div>

.demo {
padding-bottom: 45px;
}
 
ul.events {
list-style-type: none;
margin: 0;
padding: 0 0 20px 0;
}
 
ul.events li {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: #eee;
border: 1px solid #ddd;
color: #707070;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 6px;
padding: 3px 0;
position: relative;
text-align: center;
}
 
ul.events li em {
color: #aaa;
font-weight: normal;
font-size: 0.9em;
}
 
ul.intervals {
list-style-type: none;
padding: 0;
display: block;
width: 110%;
}
 
/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */
ul.intervals li {
background: #fff;
border-right: 1px solid #ccc;
color: #999;
float: left;
font-size: 1.2em;
margin: 0;
padding: 15px 0;
text-align: center;
width: 14.17%;
}
 
ul.intervals li.first {
border-left: 1px solid #ccc;
}