Dual Timeline Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!


  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:
<ol id=\"timeline\">

<li>
<time datetime=\"1990-07-04\">July 1990</time>
<p>Born</p>
</li>

<li>
<time>September 1994</time>
<p>Started first school</p>
</li>

<li>
<time>September 1999</time>
<p>Started middle school</p>
</li>

<li>
<time>September 2003</time>
<p>Started high school</p>
</li>

<li>
<time>September 2006</time>
<p>Started 6th Form</p>
</li>

<li>
<time datetime=\"2007-11-19\">November 2007</time>
<p>Registered csswizardry.com</p>
</li>

<li>
<time datetime=\"2008-07-14\">July 2008</time>
<p>Joined Sense Internet as Web Developer</p>
</li>

<li>
<time datetime=\"2009-03-16\">March 2009</time>
<p>Joined Twitter</p>
</li>

<li>
<time datetime=\"2010-01-11\">January 2010</time>
<p>Joined Venturelab as Web Developer</p>
</li>

<li>
<time>January 2011</time>
<p>Became a member of the Smashing Magazine Experts Panel</p>
</li>

<li>
<time datetime=\"2011-03-21\">March 2011</time>
<p>Joined Sky as Senior UI Developer</p>
</li>

</ol>
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;
}