cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
  <!-- Background photo was taken by Patrick Dobeson. https://www.flickr.com/photos/pdobeson/ -->
  <div class="container-fluid">
    <h1 class="text-center header">Quotes Worth Your Time</h1>
    <div class="container body-items">
      <div class="quote-box"></div>
      
      <div class="button-box">
        <button class="btn btn-lg center-block">Random Quote</button>
      </div>
      
    </div>
    
  </div>
<script id="quotes-template" type="text/x-handlebars-template">
  {{#each quotes}}
  <p class="italic">{{quote}}</p>
  </p class="text-center">{{author}}</P>
  {{/each}}
</script>
</body>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Vollkorn:200,200italic);

$quote-font: 'Vollkorn';

html {
  font-size: 16px;
}

body {
  background: url(http://matttrifilo.com/img/sunset.jpg) no-repeat center center fixed;
  background-size: cover;
}

.header {
  color: #C88861;
  font-size: 6rem;
  text-shadow: 2px 5px 18px #333;
}

.body-items {  
  width: 80%;
}

.quote-box {
  position: relative;
  margin: 5rem auto;
  padding: 1rem;
  height: 14rem;
  width: 40rem;
  border-radius: .6rem;
  background-color: rgba(80,80,95,0.6);
  font-size: 1.6rem;
  font-family: $quote-font;
  color: #ddd;
  transition: all 0.2s ease;
}

.button-box {
  margin: -2rem auto;
  width: 40rem;
}

$button-color: desaturate(#C88861, 20);
$button-bg-color: rgba(200, 136, 97, 0.51);

.btn,
.btn:active,
.btn:visited {
  font-size: 4rem;
  color: $button-color;
  background: rgba(0,0,0,.8);
  transition: all 0.142s ease;
  border-color: $button-color;
}

.btn:focus {
  outline: 5px;
  color: $button-color;
  font-size: 4rem;
  background: rgba(0,0,0,.8);
  transition: all 0.142s ease;
  border-color: $button-color;
}

.btn:hover
{
  background: $button-bg-color;
  border-color: rgba(0,0,0,.8);
  color: #000;
}

.italic {
  font-style: italic;
}

// ==========================
// Tablets
// ==========================
@media (min-width: 866px) and (max-width: 1100px) {
  html { font-size: 13px; }
  
    .quote-box {
    width: 46rem;
    height: 17rem;
    font-size: 1.8em;
  }
}

@media (min-width: 601px) and (max-width: 865px) {
  html { font-size: 10px };
  
  .quote-box {
    width: 46rem;
    height: 17rem;
    font-size: 1.4em;
  }
  
}

@media (max-width: 600px) {
  html { font-size: 6px; }
  
  .body-items {
    width: 100%;
  }
  
  .quote-box {
    font-size: 1.3em;
    height: 100%;
  }
  
}
            
          
!
            
              "use strict";
$(document).ready(function() {

// Initiates the quote-box with a first quote on page load
setTimeout(function(){
 presentQuote();
}, 100);
  
function presentQuote() {
  getRandomQuote();
  var html = template(context);
  $(".quote-box").html(html)
}
  
$(".btn").on("click", presentQuote);
            
var source = $("#quotes-template").html();
var template = Handlebars.compile(source);

var data =  [ {
			quote: "\"The world is changed by your example, not by your opinion.\"", 
			author: "-Paulo Coelho"
		}, {
			quote: "\"When you have exhaused all possibilities, remember this: you haven\'t.\"",
			author: "-Thomas Edison"
		}, {
			quote: "\"Don\'t fear failure. In great attempts, it is glorious even to fail.\"",
			author: "-Bruce Lee"
		}, {
			quote: "\"Don\'t waste your time chasing butterflies. Mend your garden, and the butterflies will come.\"",
			author: "-Mario Quintana"
		}, {
			quote: "\"Your rights matter because you never know when you\'re going to need them.\"", 
			author: "-Edward Snowden"
		}, {
			quote: "\"I skate to where the puck is going to be, not where it has been.\"",
			author: "-Wayne Gretzky"
		}, {
	    quote: "\"Whether you think you can or think you can't, you're right.\"",
	    author: "-Henry Ford"
	  }, {
      quote: "\"I firmly believe that any man's finest hour, the greatest fulfillment of all that he holds dear, is that moment when he has worked his heart out in a good cause and lies exhausted on the field of battle - victorious.\"",
      author: "-Vince Lombardi"
    }
	];

var context = {
  quotes: []
};

// Keeps track of last random number used to 
// prevent immediate repeats
var number = 0;


function getRandomQuote() {
  // clear context
  context = { quotes: [] };
  // get random number
  var random = Math.floor(Math.random() * data.length);
  // make sure random isn't the same as last time
  while (random === number) {
    random = Math.floor(Math.random() * data.length);
  };
  // rememeber what random is for next time
  number = random;
  
  var result = data[random];
  context.quotes.push(result);

}
  
});

            
          
!
999px
Loading ..................

Console