Timeline Basic Sample

  • 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:
  • 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
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%; }