LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
DISCLAIMER (click to view)




  
  

Check out this article for more information (open it in a new tab)


Do I need to tell you to resize your browser window?
*cough* responsive *cough*

v2.0

CSS
/* v2.0 */
/* v2.0 */
/* v2.0 */
/* v2.0 */
/* v2.0 */
*, *: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;
  /* 
    elements 1,(2),3,(4), etc.
    elements in brackets inherit these properties, some are overridden below (2n)
    beginning at 0
  */
}
.timeline .year {
  background: #505050;
  font-size: 3em;
  max-width: 4em;
  clear: both;
  margin: 1em auto 2em;
  color: white;
  border-radius: 30% / 100%;
  text-align: center;
  margin-top: 2em;
}
.timeline .year:first-of-type {
  margin-top: 0 !important;
}
.timeline .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: #4d4d4d;
  border: 1px solid #9d9d9d;
  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;
}
.timeline .event.featured {
  width: 95% !important;
  background: #e8e8e8;
}
.timeline .event.featured:after, .timeline .event.featured:before {
  display: none;
}
@media all and (max-width: 600px) {
  .timeline .event {
    width: 85%;
  }
}
.timeline .event.offset-first {
  margin-top: -1.5em !important;
}
.timeline .event img {
  margin-top: 10px;
  max-width: 100%;
}
.timeline .event:hover {
  background: #e9e9e9;
}
.timeline .event:hover:after {
  background: #505050;
}
.timeline .event:nth-of-type(2n) {
  float: left;
  clear: left;
}
@media all and (min-width: 600px) {
  .timeline .event:nth-of-type(2n) {
    margin-top: 2em;
  }
}
@media all and (min-width: 650px) {
  .timeline .event:after {
    display: block;
    content: ' ';
    height: 9px;
    width: 9px;
    background: #9d9d9d;
    border-radius: 50%;
    position: absolute;
    left: -5%;
    top: 1.5em;
    border: 2px solid white;
  }
}
.timeline .event:nth-child(2n):after {
  right: -5%;
  /* reset the standard declaration I defined before*/
  left: auto;
}

.padd {
  display: block;
  padding: 10px;
}
.padd.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;
}
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;
}
Host Instantly Drag and Drop Website Builder

 

Description

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
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID