Dual Timeline Sample


  1. Born


  2. Started first school


  3. Started middle school


  4. Started high school


  5. Started 6th Form


  6. Registered csswizardry.com


  7. Joined Sense Internet as Web Developer


  8. Joined Twitter


  9. Joined Venturelab as Web Developer


  10. Became a member of the Smashing Magazine Experts Panel


  11. Joined Sky as Senior UI Developer



Code:

  1. Born


  2. Started first school


  3. Started middle school


  4. Started high school


  5. Started 6th Form


  6. Registered csswizardry.com


  7. Joined Sense Internet as Web Developer


  8. Joined Twitter


  9. Joined Venturelab as Web Developer


  10. Became a member of the Smashing Magazine Experts Panel


  11. Joined 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;
}