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.