CSS Based Timeline
September 16, 2011
Update: the following screenshot belongs to a previous version of www.olivierjaouen.com website.
The timeline on my personal website is only CSS and HTML. I found inspiration on Smashing Magazine. Here is how to deal with the CSS and HTML to easily build your own.
The HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<h1>Here are some <strong>major milestones</strong> along the way.</h1> <div class="timeline"> <div class="timeslot first"> <span>2012</span> <p>I became <strong>Product Markerting Manager</strong> at Dexem, a great company which builds web-based voice applications like IVR, Call Router, Voice Messaging, Analytics.</p> </div> <div class="timeslot even"> <span>2012</span> <p>I created the <strong>FreskPage</strong>web application as a side-project to help marketers & developers to create beautiful web pages for their mobile & web apps.</p> </div> <div class="timeslot"> <span>2012</span> <p>By failing & iterating a lot, I won the <strong>Lean Startup Machine Paris 2012</strong>. And I also attended to Startup Weekend Paris 2012 & Startup Weekend Bretagne 2012.</p> </div> <div class="timeslot even"> <span>2011</span> <p>I got my first permanent job as a <strong>Digital Marketer</strong> at Digitaleo, a great company which provides mobile marketing solutions on the web.</p> </div> <div class="timeslot"> <span>2011</span> <p>I was officialy <strong>graduated</strong> of a Master Degree in Management, specialized in Innovation and Entrepreneurship. Wouhou, Champagne !</p> </div> </div> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* ----- Timeline ----- */ .timeline { margin: 20px auto; width: 500px; /* change timeline width here */ overflow: hidden; } .timeslot { width: 235px; float: left; margin: 0 0 10px; padding: 10px 100px 0 0; border-top: 3px solid #d5d4d5; /* change left border-top size & color here */ position: relative; } .timeslot.first { border-top:none; } .timeslot span { position: absolute; right: 0; top: 20px; font-size: 3em; line-height: 1em; color: #666; /* change right date color here */ } .even { float: right; padding: 10px 0 0 100px; border-color: #244f84; /* change right border-top size & color here */ } .even span { left: 0; color: #244f84; /* change left date color here */ } |
Enjoyed the article?
I'm sharing what I build and learn on SaaS products strategy and SaaS distribution. And I'm learning a lot, so will you! Delivered once a month for free.
I won't spam you or sell your address. Unsubscribe - of course - at any time.