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.

Own CSS based Timeline

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.