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. July 1990

   Born



2. September 1994

   Started first school



3. September 1999

   Started middle school



4. September 2003

   Started high school



5. September 2006

   Started 6th Form



6. November 2007

   Registered csswizardry.com



7. July 2008

   Joined Sense Internet as Web Developer



8. March 2009

   Joined Twitter



9. January 2010

   Joined Venturelab as Web Developer



10. January 2011

    Became a member of the Smashing Magazine Experts Panel



11. March 2011

    Joined Sky as Senior UI Developer

<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>

#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;
 }