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.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource


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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div class="main">
  <div class="container">
    <div class="content">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h4 class="quote"></h4>
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h3 class="source"></h3>
      <div class="row">
        <div class="col-xs-12 col-md-12 links">
          <a target="_blank"
       class="twitter-share-button pull-left tweet"
            <i class="fa fa-twitter fa-3x"></i>
          <a target="_blank" href="" class="twitter-share-button tweet-text tweet">Tweet the quote</a>
          <button type="button" class="btn btn-default pull-right">New quote</button>



$header-image: ''

  font-family: 'Cardo', serif
  color: rgb(53,35,31)
  font-size: 4.236em
  font-size: 2.787em
  font-size: 2.618em
  font-size: 1.722em
  font-size: 1.618em
h6, a, button 
  font-size: 1.064em
  font-size: 1em

    image: url($header-image)
    size: cover
    repeat: no-repeat
    position: 50% 50%
  @media (max-width: 600px)
    height: 42em
    background-position: 15% 40%
  @media (min-width: 601px) and (max-width: 1024px)
    height: 60em
    background-position: 15% 40%
    background-color: white
    padding-top: 2em
    padding-bottom: 2em
    margin-right: auto
    margin-left: auto
    margin-top: 10em
    margin-bottom: 5em
    border-radius: 2%
    height: 25em
    max-width: 40em
    @media only screen and (max-width: 600px)
      margin-top: 6em
      margin-left: 1em
      margin-right: 1em
    animation-name: fadein
    animation-duration: 300ms
    animation-delay: 0s
    animation-iteration-count: 1
    animation-direction: normal
    animation-fill-mode: forwards
    padding-left: 1em
    padding-right: 1em
    height: 4em
    margin-bottom: 1em
    float: right
    margin-top: 1.6em
    padding-right: 0.4em
    color: rgb(97,54,21)
    @media only screen and (max-width: 750px)
      font-size: 1.722em
      margin-top: 3em
    margin-top: 1.5em
      padding-left: 0.4em
      margin-top: -0.2em
      color: rgb(95,109,180)
        color: rgb(157,204,212)
      padding-left: 0.2em    

      float: right
      font-weight: 600
      color: white
      margin-right: 1em
      background-color: rgb(95,109,180)
        color: black
        background-color: rgb(157,204,212)
        outline: none
        color: white
        box-shadow: 0 0 10px rgb(157,204,212)
        border: 2px solid rgb(157,204,212)
        background-color: rgb(95,109,180)
@keyframes fadein
    opacity: 0
    opacity: 1


                var quotes = [
{"content":"Focus on being productive instead of busy.","source":"Tim Ferriss"},
{"content":"What we fear doing most is usually what we most need to do.","source":"Tim Ferriss"},
{"content":"Luck is what happens when preparation meets opportunity.","source":"Seneca"},
{"content":"Difficulties strengthen the mind, as labor does the body.","source":"Seneca"}, 
{"content":"Focus on the moment, not the monsters that may or may not be up ahead.","source":"Ryan Holiday"},
{"content":"It’s okay to be discouraged. It’s not okay to quit.","source":"Ryan Holiday"},
{"content":"You have power over your mind - not outside events. Realize this, and you will find strength.","source":"Marcus Aurelius"},
{"content":"Waste no more time arguing about what a good man should be. Be one.","source":"Marcus Aurelius"},
{"content":"The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane.","source":"Marcus Aurelius"},
{"content":"Fairy tales are more than true: not because they tell us that dragons exist, but because they tell us that dragons can be beaten.","source":"Neil Gaiman"},
{"content":"I hope that in this year to come, you make mistakes. Because if you are making mistakes... you're Doing Something.","source":"Neil Gaiman"},
{"content":"If you ever find that you're the most talented person in the room, you need to find another room.","source": "Austin Kleon"},
{"content":"Creative people need time to just sit around and do nothing.","source":"Austin Kleon"},
{"content":"Start copying what you love. Copy copy copy copy. At the end of the copy you will find your self.","source":"Austin Kleon"},
{"content":"Almost all good writing begins with terrible first efforts. You need to start somewhere.","source":"Anne Lamott"},
{"content":"We all know we're going to die; what's important is the kind of men and women we are in the face of this.","source":"Anne Lamott"},
{"content":"Don’t do what you can’t undo, until you’ve considered what you can’t do once you’ve done it.","source":"Chade Fallstar"},
{"content":"Stop longing.You poison today’s ease, reaching always for tomorrow." ,"source":"Nighteyes"},
{"content":"Very little worth knowing is taught by fear.","source":"Burrich"},
{"content":"Don’t do what you can’t undo, until you’ve considered what you can’t do once you’ve done it.","source":"Chade Fallstar"},
{"content":"Design cannot rescue failed content.","source":"Edward Tufte"},
{"content":"There are only two industries that refer to their customers as 'users","source":"Edward Tufte"},
{"content":"There are universes of things out there — ideas, philosophies, songs, subtleties, facts, emotions — that exist but of which I am totally and thoroughly unaware. ","source":"Debbie Millman"},
{"content":"If you're not prepared to be wrong, you'll never come up with anything original.","source": "Ken Robinson"},
{"content":"Human communities depend upon a diversity of talent not a singular conception of ability","source":"Ken Robinson"}];

var usedNumbers = []

  // load up first quote
$(document).ready( function () {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $(".quote").html("&ldquo;" + quotes[randomNumber].content + "&rdquo;");
  $(".source").html("— " + quotes[randomNumber].source);
    $(".tweet").attr("href", "" + '"' + quotes[randomNumber].content + '"' + " – " + quotes[randomNumber].source);
  //what happens on click
  $(document).on("click", "button", function () {
  var randomNumber = Math.floor(Math.random() * quotes.length);
  $(".quote").html("&ldquo;" + quotes[randomNumber].content  + "&rdquo;");
  $(".source").html("— " + quotes[randomNumber].source);
  setTimeout(function() {
}, 300);
  $(".tweet").attr("href", "" + '"' + quotes[randomNumber].content + '"' + " – " + quotes[randomNumber].source);