Timeline Basic 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=\"timecontainer wrap\">
<div class=\"timeline\">
<ul class=\"intervals\">
<li class=\"first\">2003</li>
<ul class=\"events\"><li>Computer Science & Graphic Design School</li>
<li>Arts & Graphics Web Design School</li></ul>
<li>2004</li>
<ul class=\"events\"><li>Computer Science & Graphic Design School</li>
<li>Arts & Graphics Web Design School</li></ul>
<li>2005 - 2006</li>
<ul class=\"events\"><li>Computer Science & Graphic Design School</li>
<li>3D Modeling & Renderingl</li><li>Object Oriented Programming</li></ul>
<li>2007</li>
<ul class=\"events\"><li>Drawing & Illustration</li></ul>
<li class=\"last\">2008 - Current</li>
<ul class=\"events\"><li>Web Design & Development</li></ul>
</ul> <!-- end .intervals -->
</div> <!-- end .timeline -->
</div>

.timecontainer {
padding-bottom: 45px;
}
 
ul.intervals {
list-style-type: none;
padding: 0;
display: block;
}
 
/* 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: #000;
font-size: 1.2em;
margin: 0;
padding: 15px 0;
text-align: center;
width: 100%;
}
 
ul.intervals li.first {
border-left: 1px solid #ccc;
color: #000;
width: 100%;
}
 
ul.events li { list-style-type: none; border-right: none; width: 100%; }