Timeline Years Sample

  • Design & Typography (2007 - 2009)
  • Photography (2006 - 2009)
  • Object Oriented Programming (2005 - 2009)
  • Web Development (2004 - 2009)
  • 3D Modeling and Rendering (2003 - 2006)
  • Drawing & Illustration (2003 - 2009)

  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009

Code:
  • Design & Typography (2007 - 2009)
  • Photography (2006 - 2009)
  • Object Oriented Programming (2005 - 2009)
  • Web Development (2004 - 2009)
  • 3D Modeling and Rendering (2003 - 2006)
  • Drawing & Illustration (2003 - 2009)

  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009
CSS:
.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;
}