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!

  • 2003
    • Computer Science & Graphic Design School
    • Arts & Graphics Web Design School
  • 2004
    • Computer Science & Graphic Design School
    • Arts & Graphics Web Design School
  • 2005 - 2006
    • Computer Science & Graphic Design School
    • 3D Modeling & Renderingl
    • Object Oriented Programming
  • 2007
    • Drawing & Illustration
  • 2008 - Current
    • Web Design & Development

Code:
<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>
CSS:
.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%; }