<div class="container">
  <h1>Responsive HTML Timeline</h1>
  
  <p><em>Inspired by the talented <a href="http://daverupert.com/about.html">Dave Rupert</a>.</em></p>
  
  <div class="timeline">
    <h2>2013</h2>
    
    <ul>
      <li>
        <h3>Quit my Job</h3>
        <p>One day, my boss came up to me and asked, "Are you ready, Joe?" Pretty much decided I wasn't ready.</p>
        <time>August 2013</time>
      </li>
      <li>
        <h3>Started New Job</h3>
        <p>Began work at the Button Factory. This was probably the best time of my life. I had a wife, a dog, and a family.</p>
        <time>July 2013</time>
      </li>
      <li>
        <h3>Changed my name to Joe</h3>
        <p>I was just sick of Josh</p>
        <time>June 2013</time>
      </li>
      <li>
        <h3>Moved to Iowa</h3>
        <p>I moved to <a href="#">Ames, Iowa</a> and settled down into my new life.</p>
        <time>February 2013</time>
      </li>
    </ul>
    
    <h2>2012</h2>
    <ul>
      <li>
        <h3>Graduated College</h3>
        <p>It only took, like, two years.</p>
        <time>December 2012</time>
      </li>
      <li>
        <h3>Graduated Community College</h3>
        <p>Studying Aerospace Engineering.</p>
        <time>May 2012</time>
      </li>
    </ul>
  </div>
</div>
@import "compass/css3";

$gray: #dddddd;

h1, h2, h3 {
  font-weight: 300;
}

.container {
  padding: 1em;
}

.timeline {
  position: relative;
  overflow: auto;
  
  &:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 5px;
    background: $gray;
    left: 0;
  }
  
  h2 {
    background: $gray;
    max-width: 6em;
    margin: 0 auto 1em;
    padding: 0.5em;
    text-align: center;
    position: relative;
    clear: both;
  }
  
  ul {
    list-style: none;
    padding: 0 0 0 1em;
    z-index: 1;
  }
  
  li {
    background: $gray;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
    
    &:before {
      content: '';
      width: 0;
      height: 0;
      border-top: 1em solid $gray;
      border-left: 1em solid transparent;
      position: absolute;
      left: -1em;
      top: 0;
    }
  }
  
  h3 {
    margin-top: 0;
  }
  
  time {
    font-style: italic;
  }
}

@media screen and (min-width: 40em) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .timeline {
    &:before {
      left: 50%;
    }
    
    ul {
      padding-left: 0;
      max-width: 700px;
      margin: 0 auto;
    }
    
    li {
      width: 42%;
    }
    
    li:nth-child(even) {
      float: right;
      margin-top: 2em;
    }
    
    li:nth-child(odd) {
      float: left;
      
      &:before {
        border-top: 1em solid $gray;
        border-right: 1em solid transparent;
        right: -1em;
        left: auto;
      }
    }
    
    li:nth-of-type(2n+1) {
      clear: both;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.