A Pen by Barbara Laird.

Einstien-Quotes.markdown

Einstien Quotes

An incomplete implementation of http://dribbble.com/shots/1383332-Author-Quotes-Ui by http://dribbble.com/bluroon

A Pen by Barbara Laird on CodePen.

License.

index.haml

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
/* Font Awesome by Dave Gandy - http://fontawesome.io */

.slider.center
    .counter 
    .lang
    .love.fa.fa-heart-o
    .progress
    .slide
        .quote The difference between stupidy and genius is that genius has its limits.
    .slide 
        .quote Before God we are all equally wise - and equally foolish.
    .slide 
        .quote I never teach my pupils. I only attempt to provide the conditions in which they can learn.
    .slide 
        .quote Perfection of means and confusion of ends seems to characterize our age.
    .slide 
        .quote If you are out to describe the truth, leave elegance to the tailor.
    .slide 
        .quote It is a miracle that curiosity survives formal education.
    .author
        %img{:src=>'https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/einstein_1.png'}
        ALBERT EINSTIEN

script.js

var current = 0,
    max = $(".slider > .slide").length;
$(".slider > .slide:gt(0)").hide();
$('.counter').text('1 of ' + max);

setInterval(function() { 
  $('.slider > .slide:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.slider');
  current++;
  if (current >= max) current = 0;
  $('.progress').width((current+1) * 315 / max);
  $('.counter').text(current+1 + ' of ' + max);
  
},  3000);

style.less

@import url(http://fonts.googleapis.com/css?family=Nunito:400,700);
@shadow: #303234;
@blue: #2ec7bf;
body {
  background-color: #4c4f52;
  font-family: 'Nunito', sans-serif;
  font-size:14pt;

}

.slider {
  color:white;
  width: 315px;
  height: 375px;
  display: block;
  position: relative;
  box-shadow:         0px 0px 6px 3px @shadow, 0 30px 20px -15px @shadow;
  overflow: hidden;
  &::before {
    content: "";
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/albert-einstein.png);
    background-size:cover;
    opacity: 0.10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }

  & > .slide { 
    top:65px;
    position:absolute;
   }
  
  & > .counter {
    display:block;
    position:absolute;
    top:18px;
    left:18px;
    z-index:999;
  }
  & > .progress {
    width:0px;
    height:5px;
    background-color:@blue;
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    z-index:999;
    &::before {
      content:'';
      width:315px;
      height:5px;
      display:block;
      position:absolute;
      bottom:0;
      left:0;
      z-index: 998;
      background-color: @blue;
      opacity:.25;
    }
  }
}

.center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.quote {
  padding:0 20px;
  font-size:18pt;
  text-align:center;
  &::before {
    content:'\f10d  ';
    font-family:FontAwesome;
    color:@blue;
    font-size:18pt;
  }
  &::after {
    content:'  \f10e';
    font-family:FontAwesome;
    color:@blue;
    font-size:18pt;
  }
}

.author {
  width:315px;
  position: absolute;
  left: 0; bottom: 23px; right: 0;
  margin: auto;
  text-align:center;
}
.author img {
  width:62px;
  height:62px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid @blue;
  position: absolute;
  left: 0; bottom:25px; right: 0;
  margin: auto;
}

.love {
  border-radius: 50%;
  border: 2px solid white;
  padding: 4px 4px 2px 4px;
  right:18px;
  top:16px;
  position:absolute;
  content:'\f08a';
  font-family: FontAwesome;
  display: block;
  &:hover:before {
    color:@blue;
    content:'\f004';
  }
}