cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              
<div class="quote-box">
  <div class="quote-text">
    <i class="fa fa-quote-left"> </i><span id="text"></span>
  </div>
  <div class="quote-author">
    - <span id="author"></span>
  </div>
  <div class="buttons">
    <a class="button" id="tweet" title="Tweet this quote!" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
    <button class="button" id="new-quote">New quote</button>
  </div>
</div>

            
          
!
            
              @import url(http://fonts.googleapis.com/css?family=Raleway:400,500);
* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}
div {
  position:relative;
  z-index: 2;
}

body {
  background-color: #333;
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight:400;
}
.footer {
  width:450px;
  text-align:center;
  display:block;
  margin:15px auto 30px auto;
  font-size:0.8em;
  color:#fff;
  a {
    font-weight:500;
    text-decoration:none;
    color:#fff;
  }
}
.quote-box {
  border-radius:3px;
  position:relative;
  margin:8% auto auto auto;
  width:450px;
  padding:40px 50px;
  display:table;
  background-color:#fff;
  .quote-text {
    i{
      font-size:1.0em;
      margin-right: 0.4em;
    }
    text-align:center;
    width:450px;
    height:auto;
    clear:both;
    font-weight:500;
    font-size:1.75em;
  }
  .quote-author {
    width:450px;
    height:auto;
    clear:both;
    padding-top:20px;
    font-size:1em; 
    text-align:right;
  }
  .buttons {
    width:450px;
    margin:auto;
    display:block;
    .button {
      height:38px;
      border:none;
      border-radius:3px;
      color:#fff;
      background-color:#333;
      outline:none;
      font-size:0.85em;
      padding: 8px 18px 6px 18px;
      margin-top:30px;
      opacity:1;
      cursor:pointer;
      &:hover {
        opacity:0.9;
      }
      &#tweet, &#tumblr-quote {
        float:left;
        padding:0px;
        padding-top:8px;
        text-align:center;
        font-size:1.2em;
        margin-right:5px;
        height:30px;
        width:40px;
      }
      &#new-quote {
        float:right;
      }
    }
  }
  
}
            
          
!
            
              var quote;
var author;

var quotes = [
	["You can do anything, but not everything.", "David Allen"],
	["Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.", "Antoine de Saint-Exupéry"],
	["The richest man is not he who has the most, but he who needs the least.",  "Unknown Author"],
	["You miss 100 percent of the shots you never take.", "Wayne Gretzky"],
	["Courage is not the absence of fear, but rather the judgement that something else is more important than fear.", "Ambrose Redmoon"],
	["You must be the change you wish to see in the world.", "Gandhi"],
	["When hungry, eat your rice; when tired, close your eyes. Fools may laugh at me, but wise men will know what I mean.", "Lin-Chi"],
	["The third-rate mind is only happy when it is thinking with the majority. The second-rate mind is only happy when it is thinking with the minority. The first-rate mind is only happy when it is thinking.", "A. A. Milne"],
	["To the man who only has a hammer, everything he encounters begins to look like a nail.", "Abraham Maslow"],
	["We are what we repeatedly do; excellence, then, is not an act but a habit.", "Aristotle"],
	["Don't cry because it's over, smile because it happened.", "Dr. Seuss"],
	["You only live once, but if you do it right, once is enough.", "Mae West"],
	["In three words I can sum up everything I've learned about life: it goes on.", "Robert Frost"],
	["To live is the rarest thing in the world. Most people exist, that is all.", "Oscar Wilde"],
	["There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.", "Albert Einstein"],
	["Good friends, good books, and a sleepy conscience: this is the ideal life.", "Mark Twain"],
	["Everything could have been anything else and it would have had just as much meaning.", "Tennessee Williams"],
	["Sometimes the questions are complicated and the answers are simple.", "Dr. Seuss"],
	["Everything you can imagine is real.", "Pablo Picasso"],
	["I'm not afraid of death; I just don't want to be there when it happens.", "Woody Allen"],
	["Life isn't about finding yourself. Life is about creating yourself.", "George Bernard Shaw"],
	["The only way out of the labyrinth of suffering is to forgive.", "John Green"],
	["But better to get hurt by the truth than comforted with a lie.", "Khaled Hosseini"],
	["Just when you think it can't get any worse, it can. And just when you think it can't get any better, it can.", "Nicholas Sparks"],
	["The fear of death follows from the fear of life. A man who lives fully is prepared to die at any time.", "Mark Twain"],
	["We are what we pretend to be, so we must be careful about what we pretend to be.", "Kurt Vonnegut"],
	["The one you love and the one who loves you are never, ever the same person.", "Chuck Palahniuk"],
	["I speak to everyone in the same way, whether he is the garbage man or the president of the university.", "Albert Einstein"],
	["If you don't know where you're going, any road'll take you there.", "George Harrison"],
	["All God does is watch us and kill us when we get boring. We must never, ever be boring.", "Chuck Palahniuk"],
	["How wonderful it is that nobody need wait a single moment before starting to improve the world.", "Anne Frank"],
	["This life’s hard, but it’s harder if you’re stupid.", "George V. Higgins"],
	["The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.", "Isaac Asimov"],
	["Sometimes I can hear my bones straining under the weight of all the lives I'm not living.", "Jonathan Safran Foer"],
	["Every man has his secret sorrows which the world knows not; and often times we call a man cold when he is only sad.", "Henry Wadsworth Longfellow"],
	["Never doubt that a small group of thoughtful, committed, citizens can change the world. Indeed, it is the only thing that ever has.", "Margaret Mead"],
	["We have to dare to be ourselves, however frightening or strange that self may prove to be.", "May Sarton"],
	["Anyone who lives within their means suffers from a lack of imagination.", "Oscar Wilde"],
	["A life spent making mistakes is not only more honorable, but more useful than a life spent doing nothing.", "George Bernard Shaw"],
	["The best index to a person's character is how he treats people who can't do him any good, and how he treats people who can't fight back.", "Abigail Van Buren"],
	["Remember: the time you feel lonely is the time you most need to be by yourself. Life's cruelest irony.", "Douglas Coupland"],
	["It is said that your life flashes before your eyes just before you die. That is true, it's called Life.", "Terry Pratchett"],
	["It isn't what you have or who you are or where you are or what you are doing that makes you happy or unhappy. It is what you think about it.", "Dale Carnegie"],
	["Nobody realizes that some people expend tremendous energy merely to be normal.", "Albert Camus"],
	["My life amounts to no more than one drop in a limitless ocean. Yet what is any ocean, but a multitude of drops?", "David Mitchell"],
	["A half-read book is a half-finished love affair.", "David Mitchell"],
	["Books don't offer real escape, but they can stop a mind scratching itself raw.", "David Mitchell"],
];



//////////////////////

function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }

var uniqueRandoms = [];
var numRandoms = quotes.length;

var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
var currentQuote = '', currentAuthor = '';
function openURL(url){
  window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

function makeUniqueRandom() {
    // refill the array if needed
    if (!uniqueRandoms.length) {
        for (var i = 0; i < numRandoms; i++) {
            uniqueRandoms.push(i);
        }
    }
    var index = Math.floor(Math.random() * uniqueRandoms.length);
    var val = uniqueRandoms[index];

    // now remove that value from the array
    uniqueRandoms.splice(index, 1);

    return val;
}

function tweet() {
    var text;
    text = encodeURIComponent(quote + " " + author);
    window.open("http://twitter.com/home/?status=" + text, 'newwindow', 'width=600, height=250'); 
    }

function getQuote() {
  var index = makeUniqueRandom();
  quote = quotes[index][0];
  author = quotes[index][1];
      
  $(".quote-text").animate({
      opacity: 0
    }, 500,
    function() {
      $(this).animate({
        opacity: 1
      }, 500);
      $('#text').text(quote);
    });

  $(".quote-author").animate({
      opacity: 0
    }, 500,
    function() {
      $(this).animate({
        opacity: 1
      }, 500);
      $('#author').html(author);
    });

  var color = Math.floor(Math.random() * colors.length);
  $("html body").animate({
    backgroundColor: colors[color],
    color: colors[color]
  }, 1000);
  $(".button").animate({
    backgroundColor: colors[color]
  }, 1000);   
}

$(document).ready(function() {
  getQuote();
  $('#new-quote').on('click', getQuote);
  $('#tweet').click(function(){
    	tweet();
   });
  
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console