Born
Started first school
Started middle school
Started high school
Started 6th Form
Registered csswizardry.com
Joined Sense Internet as Web Developer
Joined Twitter
Joined Venturelab as Web Developer
Became a member of the Smashing Magazine Experts Panel
Joined Sky as Senior UI Developer
Code:
Born
Started first school
Started middle school
Started high school
Started 6th Form
Registered csswizardry.com
Joined Sense Internet as Web Developer
Joined Twitter
Joined Venturelab as Web Developer
Became a member of the Smashing Magazine Experts Panel
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;
}