12+ CSS Timeline Examples

This post contains a total of 12+ CSS Timeline Examples with Source Code. All these Timelines are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Timeline Examples

1. By Ross Topping

Made by Ross Topping. Simple CSS Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
}
body {
  background: #25303B;
}
section#timeline {
  width: 80%;
  margin: 20px auto;
  position: relative;
}
section#timeline:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 0 0 -1px;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,0.2);
}
section#timeline article {
  width: 100%;
  margin: 0 0 20px 0;
  position: relative;
}
section#timeline article:after {
  content: '';
  display: block;
  clear: both;
}
section#timeline article div.inner {
  width: 40%;
  float: left;
  margin: 5px 0 0 0;
  border-radius: 6px;
}
section#timeline article div.inner span.date {
  display: block;
  width: 60px;
  height: 50px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -32px;
  border-radius: 100%;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: #25303B;
  color: rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 7px #25303B;
}
section#timeline article div.inner span.date span {
  display: block;
  text-align: center;
}
section#timeline article div.inner span.date span.day {
  font-size: 10px;
}
section#timeline article div.inner span.date span.month {
  font-size: 18px;
}
section#timeline article div.inner span.date span.year {
  font-size: 10px;
}
section#timeline article div.inner h2 {
  padding: 15px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -1px;
  border-radius: 6px 6px 0 0;
  position: relative;
}
section#timeline article div.inner h2:after {
  content: '';
  position: absolute;
  top: 20px;
  right: -5px;
  	width: 10px; 
	  height: 10px;
  -webkit-transform: rotate(-45deg);
}
section#timeline article div.inner p {
  padding: 15px;
  margin: 0;
  font-size: 14px;
  background: #fff;
  color: #656565;
  border-radius: 0 0 6px 6px;
}
section#timeline article:nth-child(2n+2) div.inner {
  float: right;
}
section#timeline article:nth-child(2n+2) div.inner h2:after {
  left: -5px;
}
section#timeline article:nth-child(1) div.inner h2 {
  background: #e74c3c;
}
section#timeline article:nth-child(1) div.inner h2:after {
  background: #e74c3c;
}
section#timeline article:nth-child(2) div.inner h2 {
  background: #2ecc71;
}
section#timeline article:nth-child(2) div.inner h2:after {
  background: #2ecc71;
}
section#timeline article:nth-child(3) div.inner h2 {
  background: #e67e22;
}
section#timeline article:nth-child(3) div.inner h2:after {
  background: #e67e22;
}
section#timeline article:nth-child(4) div.inner h2 {
  background: #1abc9c;
}
section#timeline article:nth-child(4) div.inner h2:after {
  background: #1abc9c;
}
section#timeline article:nth-child(5) div.inner h2 {
  background: #9b59b6;
}
section#timeline article:nth-child(5) div.inner h2:after {
  background: #9b59b6;
}
</style>
</head>
<body>
  <section id="timeline">
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">30<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2014</span>
      </span>
      <h2>The Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">26<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2014</span>
      </span>
      <h2>The Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">26<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2014</span>
      </span>
      <h2>The Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">26<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2014</span>
      </span>
      <h2>The Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.</p>
    </div>
  </article>
  <article>
    <div class="inner">
      <span class="date">
        <span class="day">26<sup>th</sup></span>
        <span class="month">Jan</span>
        <span class="year">2014</span>
      </span>
      <h2>The Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis.</p>
    </div>
  </article>
</section>
</body>
</html>

2. By Jones Joseph

Made by Jones Joseph. Responsive Timeline Concept. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.timeline{
  margin-top:20px;
  position:relative;
  
}

.timeline:before{
  position:absolute;
  content:'';
  width:4px;
  height:calc(100% + 50px);
background: rgb(138,145,150);
background: -moz-linear-gradient(left, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(98,105,109,1) 100%);
background: -webkit-linear-gradient(left, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
background: linear-gradient(to right, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(98,105,109,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#62696d',GradientType=1 );
  left:14px;
  top:5px;
  border-radius:4px;
}

.timeline-month{
  position:relative;
  padding:4px 15px 4px 35px;
  background-color:#444950;
  display:inline-block;
  width:auto;
  border-radius:40px;
  border:1px solid #17191B;
  border-right-color:black;
  margin-bottom:30px;
}

.timeline-month span{
  position:absolute;
  top:-1px;
  left:calc(100% - 10px);
  z-index:-1;
  white-space:nowrap;
  display:inline-block;
  background-color:#111;
  padding:4px 10px 4px 20px;
  border-top-right-radius:40px;
  border-bottom-right-radius:40px;
  border:1px solid black;
  box-sizing:border-box;
}

.timeline-month:before{
  position:absolute;
  content:'';
  width:20px;
  height:20px;
background: rgb(138,145,150);
background: -moz-linear-gradient(top, rgba(138,145,150,1) 0%, rgba(122,130,136,1) 60%, rgba(112,120,125,1) 100%);
background: -webkit-linear-gradient(top, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
background: linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a9196', endColorstr='#70787d',GradientType=0 );
  border-radius:100%;
  border:1px solid #17191B;
  left:5px;
}

.timeline-section{
  padding-left:35px;
  display:block;
  position:relative;
  margin-bottom:30px;
}

.timeline-date{
  margin-bottom:15px;
  padding:2px 15px;
  background:linear-gradient(#74cae3, #5bc0de 60%, #4ab9db);
  position:relative;
  display:inline-block;
  border-radius:20px;
  border:1px solid #17191B;
  color:#fff;
text-shadow:1px 1px 1px rgba(0,0,0,0.3);
}
.timeline-section:before{
  content:'';
  position:absolute;
  width:30px;
  height:1px;
  background-color:#444950;
  top:12px;
  left:20px;
}

.timeline-section:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:linear-gradient(to bottom, rgba(138,145,150,1) 0%,rgba(122,130,136,1) 60%,rgba(112,120,125,1) 100%);
  top:7px;
  left:11px;
  border:1px solid #17191B;
  border-radius:100%;
}

.timeline-section .col-sm-4{
  margin-bottom:15px;
}

.timeline-box{
  position:relative;
  
 background-color:#444950;
  border-radius:15px;
  border-top-left-radius:0px;
  border-bottom-right-radius:0px;
  border:1px solid #17191B;
  transition:all 0.3s ease;
  overflow:hidden;
}

.box-icon{
  position:absolute;
  right:5px;
  top:0px;
}

.box-title{
  padding:5px 15px;
  border-bottom: 1px solid #17191B;
}

.box-title i{
  margin-right:5px;
}

.box-content{
  padding:5px 15px;
  background-color:#17191B;
}

.box-content strong{
  color:#666;
  font-style:italic;
  margin-right:5px;
}

.box-item{
  margin-bottom:5px;
}

.box-footer{
 padding:5px 15px;
  border-top: 1px solid #17191B;
  background-color:#444950;
  text-align:right;
  font-style:italic;
}
</style>
</head>
<body>
  <div class="container">
  <div class="timeline">
    <div class="timeline-month">
      August, 2018
      <span>3 Entries</span>
    </div>
    <div class="timeline-section">
      <div class="timeline-date">
        21, Tuesday
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-asterisk text-success" aria-hidden="true"></i> Job Created
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Loss Type</strong>: A/C Leak</div>
              <div class="box-item"><strong>Loss Territory</strong>: Texas</div>
              <div class="box-item"><strong>Start Date</strong>: 08/22/2018</div>
            </div>
            <div class="box-footer">- Tyler</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-pencil text-info" aria-hidden="true"></i> Job Edited
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Project Manager</strong>: Marlyn</div>
              <div class="box-item"><strong>Supervisor</strong>: Carol</div>
            </div>
            <div class="box-footer">- Tyler</div>
          </div>
        </div>

      </div>

    </div>

    <div class="timeline-section">
      <div class="timeline-date">
        22, Wednesday
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-pencil text-info" aria-hidden="true"></i> Job Edited
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Extraction Type</strong>: Carpet Heavy</div>
              <div class="box-item"><strong>Water Category</strong>: 4</div>
              <div class="box-item"><strong>No. Of Tech</strong>: 6</div>
              <div class="box-item"><strong>Est. Complation</strong>: 09/01/2018</div>
            </div>
            <div class="box-footer">- Carol</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-tasks text-primary" aria-hidden="true"></i> New Job To Do
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Employee</strong>: Sam</div>
              <div class="box-item"><strong>To Do</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisi nulla, viverra quis felis sit amet, lacinia feugiat odio. Aliquam sed orci elementum, volutpat dolor eget, venenatis nunc</div>
            </div>
            <div class="box-footer">- Marlyn</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-tasks text-primary" aria-hidden="true"></i> New Job To Do
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Employee</strong>: Jones</div>
              <div class="box-item"><strong>To Do</strong>: Proin sit amet aliquet neque, eget sagittis nunc. Proin convallis lectus quis volutpat pharetra. Donec quis ultrices eros. Ut eget mi faucibus.</div>
            </div>
            <div class="box-footer">- Marlyn</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-thermometer-half text-warning" aria-hidden="true"></i> Pschrometrics
            </div>
            <div class="box-content">
              <div class="box-item"><strong>Temp.</strong>: 23 <sup>o</sup>C</div>
              <div class="box-item"><strong>Rh </strong>: 42</div>
              <div class="box-item"><strong>Comments</strong>: Integer nec placerat ipsum. Aliquam id ligula suscipit, ornare dui nec, laoreet tortor.</div>
            </div>
            <div class="box-footer">- Jones</div>
          </div>
        </div>
        
                <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-building-o text-default" aria-hidden="true"></i> Room Created
            </div>
            <div class="box-content">
              <div class="box-item"><strong>Name</strong>: Kitchen</div>
              <div class="box-item"><strong>Floor Level </strong>: 2</div>
              <div class="box-item"><strong>Dimensions</strong>: 26 x 11 x 8</div>
            </div>
            <div class="box-footer">- Sam</div>
          </div>
        </div>
        
      </div>

    </div>
    
    <div class="timeline-section">
      <div class="timeline-date">
        23, Thursday
      </div>
      <div class="row">
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-tasks text-success" aria-hidden="true"></i> Job To Do Completed
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>Employee</strong>: Sam</div>
              <div class="box-item"><strong>Employee Response</strong>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nisi nulla, viverra quis felis sit amet, lacinia feugiat odio. Aliquam sed orci elementum, volutpat dolor eget, venenatis nunc</div>
            </div>
            <div class="box-footer">- Carol</div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="timeline-box">
            <div class="box-title">
              <i class="fa fa-cogs text-info" aria-hidden="true"></i> Equipment Entry
            </div>
            <div class="box-content">
              <a class="btn btn-xs btn-default pull-right">Details</a>
              <div class="box-item"><strong>ID</strong>: TW-3232</div>
              <div class="box-item"><strong>Name</strong>: HEPA 600</div>
                            <div class="box-item"><strong>Date In</strong>: 08/22/2018</div>
            </div>
            <div class="box-footer">- Jones</div>
          </div>
        </div>

      </div>

    </div>

  </div>
</div>
</body>
</html>

3. By Brady Wright

Made by Brady Wright. Simple Responsive Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style>
body {
  color: #768390;
  background: #FFF;
  font-family: "Effra", Helvetica, sans-serif;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: #3D4351;
  margin-top: 0;
}

a {
  color: #FF6B6B;
}
a:hover {
  color: #ff9a9a;
  text-decoration: none;
}

.example-header {
  background: #3D4351;
  color: #FFF;
  font-weight: 300;
  padding: 3em 1em;
  text-align: center;
}
.example-header h1 {
  color: #FFF;
  font-weight: 300;
  margin-bottom: 20px;
}
.example-header p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
}

.container-fluid .row {
  padding: 0 0 4em 0;
}
.container-fluid .row:nth-child(even) {
  background: #F1F4F5;
}

.example-title {
  text-align: center;
  margin-bottom: 60px;
  padding: 3em 0;
  border-bottom: 1px solid #E4EAEC;
}
.example-title p {
  margin: 0 auto;
  font-size: 16px;
  max-width: 400px;
}

/*==================================
    TIMELINE
==================================*/
/*-- GENERAL STYLES
------------------------------*/
.timeline {
  line-height: 1.4em;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
  line-height: inherit;
}

/*----- TIMELINE ITEM -----*/
.timeline-item {
  padding-left: 40px;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}

/*----- TIMELINE INFO -----*/
.timeline-info {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
  white-space: nowrap;
}

/*----- TIMELINE MARKER -----*/
.timeline-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
}
.timeline-marker:before {
  background: #FF6B6B;
  border: 3px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  height: 15px;
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 3px;
  background: #CCD5DB;
  display: block;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 6px;
}
.timeline-item:last-child .timeline-marker:after {
  content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 3px solid #FF6B6B;
}

/*----- TIMELINE CONTENT -----*/
.timeline-content {
  padding-bottom: 40px;
}
.timeline-content p:last-child {
  margin-bottom: 0;
}

/*----- TIMELINE PERIOD -----*/
.period {
  padding: 0;
}
.period .timeline-info {
  display: none;
}
.period .timeline-marker:before {
  background: transparent;
  content: "";
  width: 15px;
  height: auto;
  border: none;
  border-radius: 0;
  top: 0;
  bottom: 30px;
  position: absolute;
  border-top: 3px solid #CCD5DB;
  border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after {
  content: "";
  height: 32px;
  top: auto;
}
.period .timeline-content {
  padding: 40px 0 70px;
}
.period .timeline-title {
  margin: 0;
}

/*----------------------------------------------
    MOD: TIMELINE SPLIT
----------------------------------------------*/
@media (min-width: 768px) {
  .timeline-split .timeline, .timeline-centered .timeline {
    display: table;
  }
  .timeline-split .timeline-item, .timeline-centered .timeline-item {
    display: table-row;
    padding: 0;
  }
  .timeline-split .timeline-info, .timeline-centered .timeline-info,
.timeline-split .timeline-marker,
.timeline-centered .timeline-marker,
.timeline-split .timeline-content,
.timeline-centered .timeline-content,
.timeline-split .period .timeline-info {
    display: table-cell;
    vertical-align: top;
  }
  .timeline-split .timeline-marker, .timeline-centered .timeline-marker {
    position: relative;
  }
  .timeline-split .timeline-content, .timeline-centered .timeline-content {
    padding-left: 30px;
  }
  .timeline-split .timeline-info, .timeline-centered .timeline-info {
    padding-right: 30px;
  }
  .timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
    position: relative;
    left: -45px;
  }
}

/*----------------------------------------------
    MOD: TIMELINE CENTERED
----------------------------------------------*/
@media (min-width: 992px) {
  .timeline-centered,
.timeline-centered .timeline-item,
.timeline-centered .timeline-info,
.timeline-centered .timeline-marker,
.timeline-centered .timeline-content {
    display: block;
    margin: 0;
    padding: 0;
  }
  .timeline-centered .timeline-item {
    padding-bottom: 40px;
    overflow: hidden;
  }
  .timeline-centered .timeline-marker {
    position: absolute;
    left: 50%;
    margin-left: -7.5px;
  }
  .timeline-centered .timeline-info,
.timeline-centered .timeline-content {
    width: 50%;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
  }
  .timeline-centered > .timeline-item.period .timeline-content {
    float: none;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .timeline-centered .timeline-item.period {
    padding: 50px 0 90px;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 30px;
    bottom: 0;
    top: auto;
  }
  .timeline-centered .period .timeline-title {
    left: auto;
  }
}

/*----------------------------------------------
    MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before {
  background: transparent;
  border-color: #FF6B6B;
}
.marker-outline .timeline-item:hover .timeline-marker:before {
  background: #FF6B6B;
}
</style>
</head>
<body>
  <script src="https://use.typekit.net/bkt6ydm.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<header class="example-header">
    <h1 class="text-center">Simple Responsive Timeline</h1>
    <p>Handcrafted by <a href="http://overflowdg.com" target="_blank">Overflow</a></p>
</header>
<div class="container-fluid">
    <div class="row example-basic">
        <div class="col-md-12 example-title">
            <h2>Basic Timeline</h2>
            <p>Extra small devices (phones, less than 768px)</p>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
            <ul class="timeline">
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 12, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque.</p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 23, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item period">
                    <div class="timeline-info"></div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h2 class="timeline-title">April 2016</h2>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 02, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 28, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="row example-split">
        <div class="col-md-12 example-title">
            <h2>Split Timeline</h2>
            <p>Small devices (tablets, 768px and up)</p>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
            <ul class="timeline timeline-split">
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 12, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque.</p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 23, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item period">
                    <div class="timeline-info"></div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h2 class="timeline-title">April 2016</h2>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 02, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 28, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="row example-centered">
        <div class="col-md-12 example-title">
            <h2>Centered Timeline</h2>
            <p>Medium devices (desktops, 992px and up).</p>
        </div>
        <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
            <ul class="timeline timeline-centered">
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 12, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque.</p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>March 23, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item period">
                    <div class="timeline-info"></div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h2 class="timeline-title">April 2016</h2>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 02, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
                <li class="timeline-item">
                    <div class="timeline-info">
                        <span>April 28, 2016</span>
                    </div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <h3 class="timeline-title">Event Title</h3>
                        <p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis
                            eu pede mollis pretium. Pellentesque ut neque. </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

4. By Ratko Solaja

Made by Ratko Solaja. Responsive Vertical Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700,900' rel='stylesheet' type='text/css'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
body {
  background: #e6e6e6;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

/*===== Vertical Timeline =====*/
#conference-timeline {
  position: relative;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
#conference-timeline .timeline-start,
#conference-timeline .timeline-end {
  display: table;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  background: #00b0bd;
  padding: 15px 23px;
  color: #fff;
  max-width: 5%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#conference-timeline .conference-center-line {
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: #00b0bd;
  z-index: -1;
}
#conference-timeline .conference-timeline-content {
  padding-top: 67px;
  padding-bottom: 67px;
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #242424;
  text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 25px;
}
.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  color: #242424;
  font-size: 14px;
  line-height: 24px;
  position: relative;
}
.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 44px;
  top: 10px;
  left: -60px;
  color: #00b0bd;
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
  float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
  position: absolute;
  top: 20px;
  font-size: 23px;
  font-family: "FontAwesome";
  color: #fff;
}
.timeline-article .content-left:before {
  content: "\f0da";
  right: -8px;
}
.timeline-article .content-right:before {
  content: "\f0d9";
  left: -8px;
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  color: #fff;
  border-radius: 100%;
  background: #00b0bd;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  font-weight: 900;
}
.timeline-article .meta-date .date {
  font-size: 30px;
  line-height: 40px;
}
.timeline-article .meta-date .month {
  font-size: 18px;
  line-height: 10px;
}
/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    margin: 0;
  }
  #conference-timeline .conference-center-line {
    margin-left: 0;
    left: 50px;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
  }
  .timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
  }
  .timeline-article .content-right:before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .timeline-article p {
    margin: 0;
  }
  .timeline-article p span.article-number {
    display: none;
  }
  
}
/*===== // Resonsive Vertical Timeline =====*/
</style>
</head>
<body>
  <!-- Vertical Timeline -->
  <section id="conference-timeline">
    <div class="timeline-start">Start</div>
    <div class="conference-center-line"></div>
    <div class="conference-timeline-content">
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. Mankind, let us preserve and increase this beauty, and not destroy it! <span class="article-number">01</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p>When I orbited the Earth in a spaceship, I saw for the first time how beautiful our planet is. <span class="article-number">02</span></p>
          </div>
          <span class="timeline-author">John Doe</span>
        </div>
        <div class="meta-date">
          <span class="date">18</span>
          <span class="month">APR</span>
        </div>
      </div>
      <!-- // Article -->
    </div>
    <div class="timeline-end">End</div>
  </section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

5. By Charlotte Dann

Made by Charlotte Dann. Horizontal CSS Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
body {
  margin: 0;
  font-family: PT Sans, sans-serif;
  background-color: #fcfcfc;
  color: #000;
}

.container {
  margin: 3rem 0;
  width: 100%;
  position: relative;
  overflow-x: scroll;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.container::-webkit-scrollbar {
  height: 45px;
}
.container::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: content-box;
  border-radius: 100%;
  border: 20px solid transparent;
}

.entries {
  margin-right: -10000px;
  margin-left: 1rem;
}

.timeline {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  height: 0.7rem;
  background-color: beige;
  background-clip: content-box;
  border-width: 0.2rem 0;
  border-style: solid;
  border-color: #fff;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1), inset 0 0 0.4em rgba(0, 0, 0, 0.1);
}

.entry {
  float: left;
  max-width: 170px;
  position: relative;
  text-align: center;
  margin: 0 1rem;
  margin-top: 0.7rem;
}
.entry .dot {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  background-color: powderblue;
  left: 50%;
  margin-left: -0.6rem;
  margin-top: -0.95rem;
  border-radius: 100%;
  box-sizing: border-box;
  background-clip: content-box;
  border-width: 0.16rem;
  border-style: solid;
  border-color: #fff;
  box-shadow: 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.1), inset 0 0 0.4em rgba(255, 255, 255, 0.1), inset 0 0.4rem 0.1rem rgba(255, 255, 255, 0.3);
  -moz-transition: height 0.2s linear, width 0.2s linear, margin 0.2s linear, background-color 0.3s ease-out;
  -o-transition: height 0.2s linear, width 0.2s linear, margin 0.2s linear, background-color 0.3s ease-out;
  -webkit-transition: height 0.2s linear, width 0.2s linear, margin 0.2s linear, background-color 0.3s ease-out;
  transition: height 0.2s linear, width 0.2s linear, margin 0.2s linear, background-color 0.3s ease-out;
}

.entry:hover .dot {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: -0.8rem;
  margin-top: -1.15rem;
  background-color: thistle;
}
.entry:hover .label {
  margin-top: 2.5rem;
  background-color: #d0e8e4;
  border-bottom: 0.5rem solid transparent;
}

.label {
  display: inline-block;
  position: relative;
  background-color: #E1F0EE;
  background-clip: padding-box;
  margin-top: 3rem;
  padding: 0.4rem 0.8rem 0.8rem;
  border-radius: 0.2rem;
  -moz-transition: margin-top 0.2s linear, background-color 0.2s linear, border-bottom 0.2s linear;
  -o-transition: margin-top 0.2s linear, background-color 0.2s linear, border-bottom 0.2s linear;
  -webkit-transition: margin-top 0.2s linear, background-color 0.2s linear, border-bottom 0.2s linear;
  transition: margin-top 0.2s linear, background-color 0.2s linear, border-bottom 0.2s linear;
  border-bottom: 0 solid transparent;
}
.label .time {
  text-transform: uppercase;
  font-size: 0.7rem;
  margin: 0 0 0.4rem;
  padding: 0 0.3rem 0.3rem;
  letter-spacing: 1px;
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
.label .detail {
  font-size: 0.8rem;
}
.label:before {
  content: '';
  display: block;
  position: absolute;
  background-color: inherit;
  background-clip: content-box;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  left: 50%;
  margin-top: -0.9rem;
  margin-left: -0.5rem;
  transform-origin: center;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: -1;
}
.label a {
  color: #000;
  text-decoration: none;
}
.label a:before {
  content: '[';
}
.label a:after {
  content: ']';
}

.entry.life .label {
  background-color: #e1f0e4;
}

.entry.life:hover .label {
  background-color: #d0e8d5;
}

.entry.study .label {
  background-color: #e1e8f0;
}

.entry.study:hover .label {
  background-color: #d0dbe8;
}
</style>
</head>
<body>
  <div class='container'>
  <div class='timeline'>
    <div class='start'></div>
  </div>
  <div class='entries'>
    <div class='entry project'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          April 2013
        </div>
        <div class='detail'>
          Launched <a href="https://youtube.com/charbytes">Charbytes</a>
        </div>
      </div>
    </div>
    <div class='entry study'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          September 2012
        </div>
        <div class='detail'>
          Began Silversmithing degree @ London Met
        </div>
      </div>
    </div>
    <div class='entry project'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          July 2012
        </div>
        <div class='detail'>
          Launched <a href="http://pentatopejewellery.com">Pentatope</a> Jewellery
        </div>
      </div>
    </div>
    <div class='entry study'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          September 2011
        </div>
        <div class='detail'>
          Started Foundation degree @ Central Saint Martins
        </div>
      </div>
    </div>
    <div class='entry life'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          June 2011
        </div>
        <div class='detail'>
          Left School
        </div>
      </div>
    </div>
    <div class='entry project'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          May 2010
        </div>
        <div class='detail'>
          Released first tumblr theme <a href="http://pouretrebelle.com/post/563994536/ive-made-my-first-real-theme" title="no this is really bad don't click on it">Belle</a>
        </div>
      </div>
    </div>
    <div class='entry project'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          September 2009
        </div>
        <div class='detail'>
          Started <a href="http://pouretrebelle.com">Pour &Ecirc;tre Belle</a>
        </div>
      </div>
    </div>
    <div class='entry life'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          November 2005
        </div>
        <div class='detail'>
          Moved To Bath
        </div>
      </div>
    </div>
    <div class='entry life'>
      <div class='dot'></div>
      <div class='label'>
        <div class='time'>
          July 1993
        </div>
        <div class='detail'>
          Born In Buckinghamshire
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

6. By Michaela

Made by Michaela. Timeline with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Variables */
/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* Layout */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Styling */
.timeline {
  margin: 4em auto;
  position: relative;
  max-width: 46em;
}
.timeline:before {
  background-color: black;
  content: '';
  margin-left: -1px;
  position: absolute;
  top: 0;
  left: 2em;
  width: 2px;
  height: 100%;
}

.timeline-event {
  position: relative;
}
.timeline-event:hover .timeline-event-icon {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #a83279;
}
.timeline-event:hover .timeline-event-thumbnail {
  -moz-box-shadow: inset 40em 0 0 0 #a83279;
  -webkit-box-shadow: inset 40em 0 0 0 #a83279;
  box-shadow: inset 40em 0 0 0 #a83279;
}

.timeline-event-copy {
  padding: 2em;
  position: relative;
  top: -1.875em;
  left: 4em;
  width: 80%;
}
.timeline-event-copy h3 {
  font-size: 1.75em;
}
.timeline-event-copy h4 {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}
.timeline-event-copy strong {
  font-weight: 700;
}
.timeline-event-copy p:not(.timeline-event-thumbnail) {
  padding-bottom: 1.2em;
}

.timeline-event-icon {
  -moz-transition: -moz-transform 0.2s ease-in;
  -o-transition: -o-transform 0.2s ease-in;
  -webkit-transition: -webkit-transform 0.2s ease-in;
  transition: transform 0.2s ease-in;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: black;
  outline: 10px solid white;
  display: block;
  margin: 0.5em 0.5em 0.5em -0.5em;
  position: absolute;
  top: 0;
  left: 2em;
  width: 1em;
  height: 1em;
}

.timeline-event-thumbnail {
  -moz-transition: box-shadow 0.5s ease-in 0.1s;
  -o-transition: box-shadow 0.5s ease-in 0.1s;
  -webkit-transition: box-shadow 0.5s ease-in;
  -webkit-transition-delay: 0.1s;
  transition: box-shadow 0.5s ease-in 0.1s;
  color: white;
  font-size: 0.75em;
  background-color: black;
  -moz-box-shadow: inset 0 0 0 0em #ef795a;
  -webkit-box-shadow: inset 0 0 0 0em #ef795a;
  box-shadow: inset 0 0 0 0em #ef795a;
  display: inline-block;
  margin-bottom: 1.2em;
  padding: 0.25em 1em 0.2em 1em;
}
</style>
</head>
<body>
  <ul class="timeline">
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - heute</p>
      <h3>Geil,Danke! GmbH</h3>
      <h4>GeschΓ€ftsfΓΌhrerin eines Web-Studios</h4>
      <p><strong>Schwerpunkt: Frontend-Entwicklung</strong><br>Entwickeln von anspruchsvollen, animierten, responsive und adaptive Webseiten mit HTML5, SCSS, jQuery; für alle Browser, optimiert für Desktop, Notebook, Smartphones und Tablets (iOS, Android, Windows).</p>
      <p><strong>Projektmanagement mit Scrum</strong><br>StΓ€ndiges Verbessern des agilen Entwicklungsprozesses beispielsweise durch Grunt, Yeoman, GIT, JIRA und BrowserStack.</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">November 2009 - MΓ€rz 2011</p>
      <h3>Freelancer</h3>
      <h4>Designer und Autor</h4>
      <p>Konzeption, Design und Produktion von Digitalen Magazinen mit InDesign, der Adobe Digital Publishing Suite und HTML5. Co-Autorin der Fachbücher "Digitales Publizieren für Tablets" und "Adobe Digital Publishing Suite" erschienen im dpunkt.verlag.</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - heute</p>
      <h3>konplan gmbh</h3>
      <h4>IT-Consultant</h4>
      <p><strong>Systemarchitektur, Consulting</strong><br>Konzeption und Modellierung von Systemen und APIs für Digital Publishing und Entitlement nach SOA</p>
    </div>
  </li>
</ul>
</body>
</html>

7. By CP Lepage

Made by CP Lepage. Vertical Left and Right Timeline. Source

CSS Timeline by CP Lepage
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<style>
html,
body {
  font: 100% "Lato", sans-serif;
  font-weight: 300;
  height: 100%;
  background-color: #4D4545;
}

.blue-bg {
  background-color: #4D4545;
  color: #ED8D8D;
  height: 100%;
}

.circle {
  font-weight: bold;
  padding: 15px 20px;
  border-radius: 50%;
  background-color: #ED8D8D;
  color: #4D4545;
  max-height: 50px;
  z-index: 2;
}

.how-it-works.row {
  display: flex;
}
.how-it-works.row .col-2 {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #ED8D8D;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}

.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #ED8D8D;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #ED8D8D;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}
</style>
</head>
<body>
  <div class="container-fluid blue-bg">
  <div class="container">
    <h2 class="pb-3 pt-2">Vertical Left-Right Timeline</h2>
    <!--first section-->
    <div class="row align-items-center how-it-works">
      <div class="col-2 text-center bottom">
        <div class="circle">1</div>
      </div>
      <div class="col-6">
        <h5>Fully Responsive</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
      </div>
    </div>
    <!--path between 1-2-->
    <div class="row timeline">
      <div class="col-2">
        <div class="corner top-right"></div>
      </div>
      <div class="col-8">
        <hr/>
      </div>
      <div class="col-2">
        <div class="corner left-bottom"></div>
      </div>
    </div>
    <!--second section-->
    <div class="row align-items-center justify-content-end how-it-works">
      <div class="col-6 text-right">
        <h5>Using Bootstrap</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
      </div>
      <div class="col-2 text-center full">
        <div class="circle">2</div>
      </div>
    </div>
    <!--path between 2-3-->
    <div class="row timeline">
      <div class="col-2">
        <div class="corner right-bottom"></div>
      </div>
      <div class="col-8">
        <hr/>
      </div>
      <div class="col-2">
        <div class="corner top-left"></div>
      </div>
    </div>
    <!--third section-->
    <div class="row align-items-center how-it-works">
      <div class="col-2 text-center top">
        <div class="circle">3</div>
      </div>
      <div class="col-6">
        <h5>Now with Pug and Sass</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 

8. By Yago Gonzalez

Made by Yago Gonzalez. YGC V2 Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bungee+Hairline|Open+Sans'> 
<style>
html, body {
  background-color: #222C32;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

.cd-container {
  width: 90%;
  max-width: 1080px;
  margin: 0 auto;
  background: #2B343A;
  padding: 0 10%;
  border-radius: 2px;
}

.cd-container::after {
  content: "";
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */
#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-top: 2em;
  margin-bottom: 2em;
}

#cd-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  height: 100%;
  width: 4px;
  background: #7E57C2;
}

@media only screen and (min-width: 1170px) {
  #cd-timeline {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  #cd-timeline::before {
    left: 50%;
    margin-left: -2px;
  }
}
.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-block:first-child {
  margin-top: 0;
}

.cd-timeline-block:last-child {
  margin-bottom: 0;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
    margin: 4em 0;
  }

  .cd-timeline-block:first-child {
    margin-top: 0;
  }

  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }
}
.cd-timeline-img {
  position: absolute;
  top: 8px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #7E57C2, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}

.cd-timeline-img {
  background: #673AB7;
}

@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
    width: 30px;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    margin-top: 15px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  margin-right: 30px;
  background: #333C42;
  border-radius: 2px;
  padding: 1em;
}
.cd-timeline-content .timeline-content-info {
  background: #2B343A;
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}
.cd-timeline-content .timeline-content-info i {
  margin-right: 5px;
}
.cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date {
  width: calc(50% - 2px);
  display: inline-block;
}
@media (max-width: 500px) {
  .cd-timeline-content .timeline-content-info .timeline-content-info-title, .cd-timeline-content .timeline-content-info .timeline-content-info-date {
    display: block;
    width: 100%;
  }
}
.cd-timeline-content .content-skills {
  font-size: 12px;
  padding: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cd-timeline-content .content-skills li {
  background: #40484D;
  border-radius: 2px;
  display: inline-block;
  padding: 2px 10px;
  color: rgba(255, 255, 255, 0.7);
  margin: 3px 2px;
  text-align: center;
  flex-grow: 1;
}

.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-content h2 {
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0;
  margin-bottom: 5px;
}

.cd-timeline-content p, .cd-timeline-content .cd-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-size: 0.8125rem;
}

.cd-timeline-content .cd-date {
  display: inline-block;
}

.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid #333C42;
}

@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }

  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }

  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
    color: white;
    margin-left: 0;
    padding: 1.6em;
    width: 36%;
    margin: 0 5%;
  }

  .cd-timeline-content::before {
    top: 24px;
    left: 100%;
    border-color: transparent;
    border-left-color: #333C42;
  }

  .cd-timeline-content .cd-date {
    position: absolute;
    width: 100%;
    left: 122%;
    top: 6px;
    font-size: 16px;
    font-size: 1rem;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
    top: 24px;
    left: auto;
    right: 100%;
    border-color: transparent;
    border-right-color: #333C42;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
    float: right;
  }

  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }
}
</style>
</head>
<body>
  <section id="cd-timeline" class="cd-container">
		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-picture">
			</div>

			<div class="cd-timeline-content">
				<h2>Penta Consulting</h2>
        <div class="timeline-content-info">
          <span class="timeline-content-info-title">
            <i class="fa fa-certificate" aria-hidden="true"></i>
            Front End Developer
          </span>
          <span class="timeline-content-info-date">
            <i class="fa fa-calendar-o" aria-hidden="true"></i>
            June 2016 - Present
          </span>
        </div>
				<p>Working alongside the designer team implementing the designs, also developing custom solutions to address team necessities.</p>
        <ul class="content-skills">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Wordpress</li>
        </ul>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->

		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-movie">
			</div> <!-- cd-timeline-img -->

			<div class="cd-timeline-content">
				<h2>Title of section 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
				<span class="cd-date">Jan 18</span>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->

		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-picture">
			</div> <!-- cd-timeline-img -->

			<div class="cd-timeline-content">
				<h2>Title of section 3</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
				<span class="cd-date">Jan 24</span>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->

		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-location">
			</div> <!-- cd-timeline-img -->

			<div class="cd-timeline-content">
				<h2>Title of section 4</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
				<span class="cd-date">Feb 14</span>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->

		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-location">
			</div> 

			<div class="cd-timeline-content">
				<h2>Title of section 5</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
				<span class="cd-date">Feb 18</span>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->

		<div class="cd-timeline-block">
			<div class="cd-timeline-img cd-movie">
			</div> <!-- cd-timeline-img -->

			<div class="cd-timeline-content">
				<h2>Final Section</h2>
				<p>This is the content of the last section</p>
				<span class="cd-date">Feb 26</span>
			</div> <!-- cd-timeline-content -->
		</div> <!-- cd-timeline-block -->
	</section> <!-- cd-timeline -->
  
  <script src='https://use.fontawesome.com/4d74086fc6.js'></script>
</body>
</html>

9. By Joshua P. Larson

Made by Joshua P. Larson. Responsive HTML Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
h1, h2, h3 {
  font-weight: 300;
}

.container {
  padding: 1em;
}

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

@media screen and (min-width: 40em) {
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .timeline:before {
    left: 50%;
  }
  .timeline ul {
    padding-left: 0;
    max-width: 700px;
    margin: 0 auto;
  }
  .timeline li {
    width: 42%;
  }
  .timeline li:nth-child(even) {
    float: right;
    margin-top: 2em;
  }
  .timeline li:nth-child(odd) {
    float: left;
  }
  .timeline li:nth-child(odd):before {
    border-top: 1em solid #dddddd;
    border-right: 1em solid transparent;
    right: -1em;
    left: auto;
  }
  .timeline li:nth-of-type(2n+1) {
    clear: both;
  }
}
</style>
</head>
<body>
  <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>
</body>
</html>

10. By Dianna Cheng

Made by Dianna Cheng. Responsive Timeline using CSS Grid & Grid Template Areas. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/*- Screen Sizes*/
/*import fonts*/
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Oswald");
/*media queries*/
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background-color: #444444;
  font-family: "Open Sans", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-size: 0.875em;
  color: #212121;
  line-height: 1.5;
}

.wrapper {
  margin: 3.125em auto;
  padding: 1em 5em 1em;
  max-width: 1000px;
}

h1 {
  color: white;
  font-family: "Open Sans", "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  text-align: center;
}

/* - &:nth-child(1) {
			 grid-area: entry1;
		 }
   - useful timesaver if there is a lengthy list
*/
.timeline {
  line-height: 1.5em;
  font-size: 14px;
  transition: all 0.4s ease;
  position: relative;
  counter-reset: section;
}
.timeline:before {
  content: "";
  width: 10px;
  height: 100%;
  background: #87ceeb;
  position: absolute;
  top: 0;
  left: -3.313em;
  border-radius: 40px 40px;
}

.timeline--entry {
  position: relative;
  background-color: #eeeeee;
}
.timeline--entry__title {
  color: white;
  background-color: #ec407a;
  font-family: "Oswald", Georgia, Cambria, "Times New Roman", Times, serif;
  font-weight: 300;
  font-size: 1rem;
  padding: 1em;
}
.timeline--entry__title:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  left: -1em;
  border-right: 10px solid #ec407a;
}
.timeline--entry__detail {
  background-color: #dddddd;
  padding: 1em;
  margin: 0;
}
.timeline--entry:before {
  content: "";
  font-family: "Oswald", Georgia, Cambria, "Times New Roman", Times, serif;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  background-color: #87ceeb;
  border: 0.2em solid white;
  border-radius: 50%;
  position: absolute;
  counter-increment: section;
  content: counter(section);
  text-shadow: 0 1px 0 #424242;
  left: -4.5em;
}

@supports (display: grid) {
  @media (min-width: 768px) {
    .timeline {
      display: grid;
      grid-gap: 4.75em;
      grid-template-areas: ".  entry1" "entry2  ." ". entry3" "entry4 ." ". entry5";
    }
    .timeline:before {
      left: 49.5%;
    }

    .timeline--entry:nth-child(1) {
      grid-area: entry1;
    }
    .timeline--entry:nth-child(2) {
      grid-area: entry2;
    }
    .timeline--entry:nth-child(3) {
      grid-area: entry3;
    }
    .timeline--entry:nth-child(4) {
      grid-area: entry4;
    }
    .timeline--entry:nth-child(5) {
      grid-area: entry5;
    }
    .timeline--entry:nth-of-type(odd):before {
      left: -3.8em;
    }
    .timeline--entry:nth-of-type(even):not(:nth-of-type(odd)) .timeline--entry__title:before {
      left: 100%;
      border-left: 10px solid #ec407a;
      border-right: 0;
    }
    .timeline--entry:nth-of-type(even):before {
      left: 103%;
    }
  }
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1>Timeline Created With CSS Grid</h1>
  <div class="timeline">
    <dl class="timeline--entry">
      <dt class="timeline--entry__title">Title A</dt>
      <dd class="timeline--entry__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</dd>
    </dl>
    <dl class="timeline--entry">
      <dt class="timeline--entry__title">Title B</dt>
      <dd class="timeline--entry__detail"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</dd>
    </dl>
    <dl class="timeline--entry">
      <dt class="timeline--entry__title">Title C</dt>
      <dd class="timeline--entry__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</dd>
    </dl>
    <dl class="timeline--entry">
      <dt class="timeline--entry__title">Title D</dt>
      <dd class="timeline--entry__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</dd>
    </dl>
    <dl class="timeline--entry">
      <dt class="timeline--entry__title">Title D</dt>
      <dd class="timeline--entry__detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</dd>
    </dl>
  </div>
</div>
</body>
</html>

11. By Jeff Glenn

Made by Jeff Glenn. 4 Panel CSS Timeline with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
        <link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One|Source+Sans+Pro:400" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
  font-family: "Source Sans Pro", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

#timeline {
  display: flex;
  background-color: #031625;
}
#timeline:hover .tl-item {
  width: 23.3333%;
}

.tl-item {
  transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 100vh;
  min-height: 600px;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s ease;
}
.tl-item:before, .tl-item:after {
  transform: translate3d(0, 0, 0);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tl-item:after {
  background: rgba(3, 22, 37, 0.85);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.tl-item:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 75%);
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0) translateY(50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.tl-item:hover {
  width: 30% !important;
}
.tl-item:hover:after {
  opacity: 0;
}
.tl-item:hover:before {
  opacity: 1;
  transform: translate3d(0, 0, 0) translateY(0);
  transition: opacity 1s ease, transform 1s ease 0.25s;
}
.tl-item:hover .tl-content {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.75s ease 0.5s;
}
.tl-item:hover .tl-bg {
  filter: grayscale(0);
}

.tl-content {
  transform: translate3d(0, 0, 0) translateY(25px);
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 1.618em;
  top: 55%;
  opacity: 0;
}
.tl-content h1 {
  font-family: "Pathway Gothic One", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #1779cf;
  font-size: 1.44rem;
  font-weight: normal;
}

.tl-year {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.tl-year p {
  font-family: "Pathway Gothic One", Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1.728rem;
  line-height: 0;
}

.tl-bg {
  transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center center;
  transition: filter 0.5s ease;
  filter: grayscale(100%);
}
</style>
</head>
<body>
  <section id="timeline">
  
  <div class="tl-item">
    
    <div class="tl-bg" style="background-image: url(https://placeimg.com/801/801/nature)"></div>
    
    <div class="tl-year">
      <p class="f2 heading--sanSerif">2011</p>
    </div>

    <div class="tl-content">
      <h1>Lorem ipsum dolor sit</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
    </div>

  </div>

  <div class="tl-item">
    
    <div class="tl-bg" style="background-image: url(https://placeimg.com/802/802/nature)"></div>
    
    <div class="tl-year">
      <p class="f2 heading--sanSerif">2013</p>
    </div>

    <div class="tl-content">
      <h1 class="f3 text--accent ttu">Vestibulum laoreet lorem</h1>
      <p>Suspendisse potenti. Sed sollicitudin eros lorem, eget accumsan risus dictum id. Maecenas dignissim ipsum vel mi rutrum egestas. Donec mauris nibh, facilisis ut hendrerit vel, fringilla sed felis. Morbi sed nisl et arcu.</p>
    </div>

  </div>

  <div class="tl-item">
    
    <div class="tl-bg" style="background-image: url(https://placeimg.com/803/803/nature)"></div>
    
    <div class="tl-year">
      <p class="f2 heading--sanSerif">2014</p>
    </div>

    <div class="tl-content">
      <h1 class="f3 text--accent ttu">Phasellus mauris elit</h1>
      <p>Mauris cursus magna at libero lobortis tempor. Suspendisse potenti. Aliquam interdum vulputate neque sit amet varius. Maecenas ac pulvinar nisi. Fusce vitae nunc ultrices, tristique dolor at, porttitor dolor. Etiam id cursus arcu, in dapibus nibh. Pellentesque non porta leo. Nulla eros odio, egestas quis efficitur vel, pretium sed.</p>
    </div>

  </div>

  <div class="tl-item">
    
    <div class="tl-bg" style="background-image: url(https://placeimg.com/800/800/nature)"></div>
    
    <div class="tl-year">
      <p class="f2 heading--sanSerif">2016</p>
    </div>

    <div class="tl-content">
      <h1 class="f3 text--accent ttu">Mauris vitae nunc elem</h1>
      <p>Suspendisse ac mi at dolor sodales faucibus. Nunc sagittis ornare purus non euismod. Donec vestibulum efficitur tortor, eget efficitur enim facilisis consequat. Vivamus laoreet laoreet elit. Ut ut varius metus, bibendum imperdiet ex. Curabitur diam quam, blandit at risus nec, pulvinar porttitor lorem. Pellentesque dolor elit.</p>
    </div>

  </div>
</section>
</body>
</html>

12. By Alan Houser

Made by Alan Houser. CSS Timeline for Giggles. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* Import */
@font-face {
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9D4kzIxd1KFrBteUp9gK_uQQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9G4kzIxd1KFrBtceFfkA.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9D4kzIxd1KFrBteVp6gK_uQQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9D4kzIxd1KFrBteWJ4gK_uQQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9F4kzIxd1KFrjDY_Z4sKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9I4kzIxd1KFrBoQeY.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9F4kzIxd1KFrjTZPZ4sKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/chivo/v17/va9F4kzIxd1KFrjrZvZ4sKg.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA71rDks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 200;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA79rCks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA7wTCks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA71rCks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA72jCks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA74TFks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA773Fks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/saira/v14/memWYa2wxmKQyPMrZX79wwYZQMhsyuShhKMjjbU9uXuA79rFks8xkw.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFsOHYr-vcC7h8MklGBkrvmUG9rbpkisrTri3j2_Co.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrJ2nh2wpk.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrQ2rh2wpk.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFiOHYr-vcC7h8MklGBkrvmUG9rbpkisrTj6Ejx.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrG2vh2wpk.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrN2zh2wpk.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrU23h2wpk.ttf) format('truetype');
}
@font-face {
  font-family: 'Saira Extra Condensed';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/sairaextracondensed/v11/-nFvOHYr-vcC7h8MklGBkrvmUG9rbpkisrTrT27h2wpk.ttf) format('truetype');
}
/* Variables */
/* Base */
body {
  background: #252827;
  font-size: 16px;
}
p {
  font-weight: 300;
}
a {
  color: #6c6d6d;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.3em;
  font-size: 0.6em;
  font-weight: 400;
  background: #252727;
  padding: 0.3rem 1rem;
  margin: 1.9rem 0 0 0;
  float: right;
}
a:hover {
  color: white;
  background: #004ffc;
  border-bottom: 0.35em solid black;
}
strong {
  font-weight: 600;
}
h1 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  color: white;
  font-weight: 400;
  font-size: 2.4em;
}
#timeline-content {
  margin-top: 50px;
  text-align: center;
}
/* Timeline */
.timeline {
  border-left: 4px solid #004ffc;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Chivo', sans-serif;
  margin: 50px auto;
  letter-spacing: 0.5px;
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;
  padding: 50px;
  list-style: none;
  text-align: left;
  font-weight: 100;
  max-width: 30%;
}
.timeline h1 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 100;
  font-size: 1.4em;
}
.timeline h2,
.timeline h3 {
  font-family: 'Saira', sans-serif;
  letter-spacing: 1.5px;
  font-weight: 400;
  font-size: 1.4em;
}
.timeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  margin-bottom: 50px;
  position: relative;
}
.timeline .event:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.timeline .event:before,
.timeline .event:after {
  position: absolute;
  display: block;
  top: 0;
}
.timeline .event:before {
  left: -217.5px;
  color: rgba(255, 255, 255, 0.4);
  content: attr(data-date);
  text-align: right;
  font-weight: 100;
  font-size: 0.9em;
  min-width: 120px;
  font-family: 'Saira', sans-serif;
}
.timeline .event:after {
  box-shadow: 0 0 0 4px #004ffc;
  left: -57.85px;
  background: #313534;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}
</style>
</head>
<body>
  <div id="timeline-content">
  <h1>Timeline</h1>

  <ul class="timeline">
    <li class="event" data-date="65Million B.C.">
      <h3>Dinosaurs Roamed the Earth</h3>
      <p>RAWWWWWWRRR πŸ’πŸ¦‚</p>
    </li>
    <li class="event" data-date="2005">
      <h3>Creative Component Launched</h3>
      <p>"We can be all things to all people!" πŸ“£</p>    
    </li>
    <li class="event" id="date" data-date="2009">
      <h3>Squareflair was Born</h3>
      <p></p> <p>"We can be all things to Squarespace users!" πŸ“£</p>    
    </li>
    
    <li class="event" data-date="2021">
      
      <h3>Squareflair Today</h3>
      
      <p>"We design and build from scratch!" πŸ“£<p/> <p>When we say <em><strong>100% custom</strong></em> we mean itβ€” and we build all sites on the Squarespace Developer platform.<p/>
<p>Did you know that all of our pixels are hand-forged from the rarest of subpixels grown and harvested in the <em>Nerd Forest</em>? <br>🀜πŸ’₯πŸ€›</p>
      
      <p><strong>Our success can be measured by lives and brands enhanced by 9+ years of 100% Squarespace-focused service!</strong></p>
      
<p><a href="https://www.squareflair.com">squareflair.com</a></p>
    </li>
  </ul>
</div>
</body>
</html>

13. By Peiwen Lu

Made by Peiwen Lu. CSS3 Timeline. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 100%;
  font-family: "Noto Sans", sans-serif;
  color: #eee9dc;
  background: #48b379;
}

h2 {
  margin: 3em 0 0 0;
  font-size: 1.5em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* -------------------------------------
 * timeline
 * ------------------------------------- */
#timeline {
  list-style: none;
  margin: 50px 0 30px 120px;
  padding-left: 30px;
  border-left: 8px solid #eee9dc;
}
#timeline li {
  margin: 40px 0;
  position: relative;
}
#timeline p {
  margin: 0 0 15px;
}

.date {
  margin-top: -10px;
  top: 50%;
  left: -158px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 50%;
  left: -44px;
  width: 10px;
  height: 10px;
  background: #48b379;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  padding: 50px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 20px;
  top: 50%;
  margin-top: -20px;
}
.content:after {
  border-right-color: #48b379;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}
.content p {
  max-height: 0;
  color: transparent;
  text-align: justify;
  word-break: break-word;
  hyphens: auto;
  overflow: hidden;
}

label {
  font-size: 1.3em;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 20px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}
.radio:checked + .relative .circle {
  background: #f98262;
}
.radio:checked ~ .content {
  max-height: 180px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
  max-height: 200px;
  color: #eee9dc;
  transition: color 0.3s linear 0.3s;
}

/* -------------------------------------
 * mobile phones (vertical version only)
 * ------------------------------------- */
@media screen and (max-width: 767px) {
  #timeline {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
  #timeline li {
    margin: 50px 0;
  }

  label {
    width: 85%;
    font-size: 1.1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }

  .content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }
  .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }
  .content:after {
    border-bottom-color: #48b379;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }
  .content p {
    font-size: 0.9em;
    line-height: 1.4;
  }

  .circle, .date {
    display: none;
  }
}
</style>
</head>
<body>
  <h2>CSS3 Timeline</h2>
<p>Please set the $vertical variable to false to see the horizontal version.</p>
<ul id='timeline'>
  <li class='work'>
    <input class='radio' id='work5' name='works' type='radio' checked>
    <div class="relative">
      <label for='work5'>Lorem ipsum dolor sit amet</label>
      <span class='date'>12 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work4' name='works' type='radio'>
    <div class="relative">
      <label for='work4'>Lorem ipsum dolor sit amet</label>
      <span class='date'>11 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work3' name='works' type='radio'>
    <div class="relative">
      <label for='work3'>Lorem ipsum dolor sit amet</label>
      <span class='date'>10 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work2' name='works' type='radio'>
    <div class="relative">
      <label for='work2'>Lorem ipsum dolor sit amet</label>
      <span class='date'>09 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
  </li>
  <li class='work'>
    <input class='radio' id='work1' name='works' type='radio'>
    <div class="relative">
      <label for='work1'>Lorem ipsum dolor sit amet</label>
      <span class='date'>08 May 2013</span>
      <span class='circle'></span>
    </div>
    <div class='content'>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </p>
    </div>
  </li>
</ul>
</body>
</html>