Dual Timeline Sample

July 1990
Born

September 1994
Started first school

September 1999
Started middle school

September 2003
Started high school

September 2006
Started 6th Form

November 2007
Registered csswizardry.com

July 2008
Joined Sense Internet as Web Developer

March 2009
Joined Twitter

January 2010
Joined Venturelab as Web Developer

January 2011
Became a member of the Smashing Magazine Experts Panel

March 2011
Joined Sky as Senior UI Developer

Code:


July 1990Born
 
September 1994Started first school
 
September 1999Started middle school
 
September 2003Started high school
 
September 2006Started 6th Form
 
November 2007Registered csswizardry.com
 
July 2008Joined Sense Internet as Web Developer
 
March 2009Joined Twitter
 
January 2010Joined Venturelab as Web Developer
 
January 2011Became a member of the Smashing Magazine Experts Panel
 
March 2011Joined Sky as Senior UI Developer

CSS:

#timeline{
background:url(http://goo.gl/ANrQaS) top center repeat-y;
width:820px;
padding:50px 0;
margin:0 auto 50px auto;
overflow:hidden;
list-style:none;
position:relative;
 }
 
 #timeline:before, /* The dot */
 #timeline:after{ /* The arrow */
content:" ";
width:10px;
height:10px;
display:block;
background:#f43059;
position:absolute;
top:0;
left:50%;
margin-left:-5px;
 
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
 }
 #timeline:after{
margin-left:-7px;
background:none;
border:7px solid transparent;
border-top-color:#f43059;
width:0;
height:0;
top:auto;
bottom:-7px;
 
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
 }
 
 #timeline li:before,
 #timeline li:after{
content:" ";
width:70px;
height:1px;
background:#f43059;
position:absolute;
left:100%;
top:50%;
background:-moz-linear-gradient(0,#d8d566,#f43059);
background:-webkit-gradient(linear,left top,right top,from(#d8d566),to(#f43059));
 }
 
 #timeline li:nth-of-type(even){
float:right;
text-align:left;
 }
 #timeline li:nth-of-type(even):after{ /* Move branches */
background:-moz-linear-gradient(0,#f43059,#d8d566);
background:-webkit-gradient(linear,left top,right top,from(#f43059),to(#d8d566));
left:auto;
right:100%;
 }
 
 #timeline li:nth-of-type(odd),
 #timeline li:nth-of-type(even){
margin:-10px 0 0 0;
 }
 
 #timeline li{
position:relative;
clear:both;
float:left;
width:318px;
padding:10px;
background:#fef8c4;
border:1px solid #d8d566;
text-align:right;
margin:0 0 10px 0;
 
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 1px #fff inset;
-moz-box-shadow:0 1px #fff inset;
box-shadow:0 1px #fff inset;
 }