PqMZqv

index.html

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<div id="app" class="center-align fluid-container"><h3 class="quote"></h3>
  <button class="waves-effect waves-light btn" id="nquote"><i class="zmdi zmdi-refresh"></i></button></div>

PqMZqv.markdown

PqMZqv

A Pen by Francisco Velasquez on CodePen.

License.

script.js

var quotes = ["\"Lets go invent tomorrow instead of worrying about what happened yesterday.\" - Steve Jobs","\"Technology is best when it brings people together.\" - Matt Mullenweg","\"Stay hungry, stay foolish.\" - Steve Jobs","\"Creativity is not in the technology, technology is the tool to shape our creativity.\" - Francisco Velásquez","\"Real progress is putting technology to everyone.\" - Henry Ford","\"Magic is just science that we do not understand yet.\" - Arthur C. Clarke"];

function index(){
  return parseInt(Math.random() * 6);
}

$( document ).ready(function() {
$('.quote').html(quotes[index()]);
});

$( '#nquote' ).click(function() {
$('.quote').html(quotes[index()]);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
  background-image: url("http://k33.kn3.net/D/4/2/8/7/0/A41.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
#app{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
    margin-left: 40%;
  margin-right: 40%;
}
h3{
  font-size: 4.5vh;
  font-size: 2.5vw;
  font-family: 'Lobster', cursive;
}
button{
  font-size: 2.5vh;
  font-size: 2.5vw;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css" rel="stylesheet" />