Pure CSS Timeline

index.html

<b id="click" style='display:block;background:rgb(80,80,80);text-align:center;color:white;padding: 1em 0 1em;cursor:pointer;'>DISCLAIMER (click to view)</b><b id='caring' style='display:none;padding: 10px;border-top: 15px solid #f1bc1a'><u>This piece of CSS magic is free for everyone.</u><br />Use it, steal it, claim it your own. I don't care. <span style="font-size:24px">Actually,</span> I care if it was helpful and you managed to create something new and amazing. If you like this experiment, I would love to hear from you via <a href="https://twitter.com/intent/user?screen_name=christian_fei">Twitter</a> to see how you implemented this in your project :) <br /><br /> <br /> <br /> Credit where credit is due: <br /> I wanted to create my own timeline after seeing Paul Stamatious' one over at <a href="http://paulstamatiou.com/posts"> his website</a></b>

<!-- THE CODE | THE CODE | THE CODE | THE CODE | THE CODE -->

<!-- Each event is wrapper inside an anchor with the class 'event' -->
  <!-- The i-tag inside the anchor creates the little arrow beside an event (see v1.0) -->
  <!-- FORK AWAY AND PLEASE LET ME KNOW IF YOU HAVE SUGGESTIONS AND FEEDBACK :) -->

<a class='ad' href="http://christian-fei.com/tutorials/simple-vertical-timeline-with-css/">Check out this article for more information (open it in a new tab)</a>
<br />
<br />
<span class="padd center">Do I need to tell you to resize your browser window?<br/>*cough* responsive *cough*</span>
<h1 class='padd'>v2.0</h1>
<ul class='timeline'>
  <li class="year first">2013</li>
  <li class='event offset-first'>
    Something amazing happened today, but it's a secret
  </li>
  <li class='event' href="#">
    Timeline.css is <b>dynamic</b>, <b>responsive</b> and optimized to <b>demonstrate events</b> in your life in a <b>simple and clear</b> way
  </li>
  <li class="event">
    <a href="http://christian-fei.com" title="christian fei">
    made with &lt;3 by <img src="https://s3-eu-west-1.amazonaws.com/cf.img/var/face.svg" alt="christian fei"/>
    </a>
  </li>
  <li class="event">
  <a href="https://codepen.io/christian-fei/pen/BJily">
    Open source project on codepen.io
    <img src="http://davidwalsh.name/demo/codepenLogo.png" alt=""/>
  </a>
  </li>
  <li class='event'>
    Look, a sleepy kitten: <br/>
    <img src="http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg"/>
    <a href='http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg'>&copy;</a>
  </li>
  <li class="year">2012</li>
	<li class="event offset-first">
		<p>To infinity  ... </p>
    <img class='centered' src="http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg" alt=""/>
		<a href='http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg'>&copy;</a>
	</li>
	<li class="event">
		<p>... and beyond!</p>
    <img class='centered' src="https://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg" alt=""/>
		<a href='https://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg'>&copy;</a>
	</li>
</ul>

pure-css-timeline.markdown

Pure CSS Timeline

The posts will be shown in a timeline, from the newest to the oldest post. Another cool feature is that it is fully responsive, although with some minor bugs, like the arrows won't show on narrow screens

A Pen by Christian Fei on CodePen.

License.

script.js

/* JUST SOME DISCLAIMER STUFF
REMEMBER: NO JS USED */
var caring = document.querySelector('#caring'),
    click = document.querySelector('#click'),
    vis=false;
click.onclick = function() {
  if(!vis)
    caring.style.display = 'block';
  else
    caring.style.display = 'none';
  vis = !vis;
}

style.scss

@import "compass/css3";

/* v2.0 */
/* v2.0 */
/* v2.0 */
/* v2.0 */
/* v2.0 */
$text-color: rgb(77, 77, 77);
$bg-entry: rgb(80,80,80);

*,*:after,*:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}


.timeline {
  margin: 0px auto;
  max-width: 40em;
  overflow:hidden;
  height: auto;
  position: relative;
  padding:0px;
  list-style-type:none;
  
  /*thanks to
     https://twitter.com/JacoKoster
  */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NMTEz8z8gABAAPKwIlXWq1kgAAAABJRU5ErkJggg==);
  background-repeat:repeat-y;
  background-position:50% 0;
  
  

    .year {
    background: $bg-entry;
    font-size: 3em;
    max-width: 4em; 
    clear: both; 
    margin: 1em auto 2em;
    color: white;
    border-radius: 30% / 100%;
    text-align: center;
    margin-top: 2em;
    
    &:first-of-type {
      margin-top: 0 !important;
    }
  }
  
  /* 
    elements 1,(2),3,(4), etc.
    elements in brackets inherit these properties, some are overridden below (2n)
    beginning at 0
  */
  .event {
    position:relative;
    text-align:center;
    float: right;
    clear: right; 
    width: 45%;
    margin: 1em 2.5%;
    
    border-radius: 5px;
    list-style-type: none;
    display: block;
    padding: .4em;
    background: white;
    z-index: 15;
    
    color: $text-color;
    border: 1px solid lighten($bg-entry,30%);
    text-decoration: none;

    -webkit-transition: background .15s linear;
    -moz-transition: background .15s linear;
    -ms-transition: background .15s linear;
    -o-transition: background .15s linear;
    transition: background .15s linear;
    
    &.featured {
      width: 95% !important;
      background: lighten(#ccc,11%);
      
      &:after, &:before {
        display: none;
      }
    }
    
    @media all and (max-width: 600px) {
      width: 85%;
    }    
    
    &.offset-first {
      margin-top: -1.5em!important;
    }
    
    img {
      margin-top: 10px;
      max-width: 100%;
    }

    &:hover {
      background: lighten($bg-entry,60%);

      &:after {
        background: $bg-entry;
      }
    }
    
    &:nth-of-type(2n) {
      float: left;
      clear: left;
        @media all and(min-width:600px){
          margin-top:2em;
        }
    }
      
    &:after {      
      @media all and (min-width: 650px) {
        display: block;
        content: ' ';
        height: 9px; width: 9px;
        background: lighten($bg-entry,30%);
        border-radius: 50%;
        position:absolute;
        left: -5%;
        top: 1.5em;
        border: 2px solid white;
      }
    }
      
    &:nth-child(2n):after {
      right: -5%;
      /* reset the standard declaration I defined before*/
      left: auto;
    }
  }
}

            
            
            











.padd {
  display:block;padding: 10px;
  &.center {
    text-align:center;
  }
}

.ad {
  display: block;
  background: rgba(50,50,50,0.5);
  color: white;
  text-decoration: none;
  text-align:center;
  padding: 15px;
  font-weight: 800;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}

a{
text-decoration:none;
color:black;
}