An incomplete implementation of http://dribbble.com/shots/1383332-Author-Quotes-Ui by http://dribbble.com/bluroon
A Pen by Barbara Laird on CodePen.
An incomplete implementation of http://dribbble.com/shots/1383332-Author-Quotes-Ui by http://dribbble.com/bluroon
A Pen by Barbara Laird on CodePen.
<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 |
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); |
@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'; | |
} | |
} |