123

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!-- Latest compiled and minified CSS -->
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Shadows+Into+Light'>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
</head>
 <body>
   <div id="heading">
     <h1> Random Quote Generator</h1>
     <button type="button" class="clickbutton" onclick="newQuote()">Try Another Quote</button>
     <p id="randomQuote"></p>
    </div>
  </body>
   </html>
            
          
!
            
              body {
  background: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/paper_1.png")
}

#heading {
  text-align: center;
  font-family: 'Shadows Into Light', cursive;
}

.clickbutton {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  border-radius: 30px;
  padding: 20px;
  /*border: 2px solid #000000;*/
  
  box-shadow: 10px 10px 20px #888888;
  background: #62b562;
  height: Auto;
  width: Auto;
}

#randomQuote {
  font-family: 'Cardo', serif;
  font-size: 30px;
  text-align: center;
  width: auto;
  height: auto;
  border-radius: 20px;
  box-shadow: 10px 10px 20px rgba(100, 100, 100, .8);
  margin: 25px;
  padding: 20px;
  background-color: #ffffff;
}
            
          
!
            
              var quote = [
      "A good woman to a man is like money in the bank",
      "God loved the birds and invented trees.Man loved the birds and invented cages",
      "The words that enlighten the soul are more precious than jewels",
      "Prepare your mind to receive the best that life has to offer",
      "In order to be walked on, you have to be lying down",
      "Education is the power to think clearly, the power to act well in the world's work, and the power to appreciate life",
      "No one can make you feel inferior without your consent",
      "A person who aims at nothing is sure to hit it",
      "Shoot for the moon. Even if you miss, you'll land among the stars",
"No bird soars too high if he soars with his own wings",
      "You can't build a reputation on what you're going to do",
      "An invasion of armies can be resisted, but not an idea whose time has come",
      "The people who oppose your ideas are inevitably those who represent the established order that your ideas will upset",
      "You don't love a woman because she is beautiful,but she is beautiful because you love her",
      "Love is the immortal flow of energy that nourishes, extends and preserves. Its eternal goal is life",
      "Sometimes the heart sees what is invisible to the eye",
      "Woe to the man whose heart has not learned while young to hope, to love - and to put its trust in life",
      "Learn from yesterday, live for today,hope for tomorrow",
      "Enjoy life. There's plenty of time to be dead",
      "Here is the test to find whether your mission on Earth is finished: if you're alive, it isn't",
      "The question is not whether we will die, but how we will live",
      "Never be bullied into silence. Never allow yourself to be made a victim",
      "Accept no one's definition of your life; define yourself",
      "Believe that life is worth living and your belief will help create the fact",
      "Live every day as if it were your last, because one of these days, it will be",
      "Most people would rather be certain they're miserable, than risk being happy",
      "To live a pure unselfish life, one must count nothing as one's own in the midst of abundance",
      "The grand essentials of happiness are: something to do, something to love, and something to hope for",
      "Nobody really cares if you're miserable, so you might as well be happy",
      "Great ability develops and reveals itself increasingly with every new assignment",
      "If a man deceives me once, shame on him; if he deceives me twice, shame on me",
      "Remember: It is 10 times harder to command the ear than to catch the eye",
"There are many paths to the top of the mountain, but the view is always the same",
      "If you can't win, make the fellow ahead of you break the record",
      "If you really put a small value upon yourself, rest assured that the world will not raise your price",
      "Choose the life that is most useful, and habit will make it the most agreeable",
      "Always behave as if nothing had happened, no matter what has happened",
      "When fate hands us a lemon, let's try to make lemonade",
      "Reflect on your present blessings, of which every man has many, not on your past misfortunes,of which all men have some",
      "Don't be afraid to take a big step when one is indicated. You can't cross a chasm in two small steps",
      "When someone does something good, Applaud! You will make two people happy",
      "Duty is the sublimest word in our language. Do your duty in all things. You cannot do more. You should never do less",
      "Always remember others may hate you but those who hate you don't win unless you hate them. And then you destroy yourself",
      "Do not wait for extrordinary circumstances to do good; try to use ordinary situations",
      "Whenever you are asked if you can do a job, tell 'em, \"Certainly, I can!\" Then get busy and find out how to do it",
"Remember that there is nothing stable in human affairs; therefore avoid undue elation in prosperity, or undue depression in adversity",
"Learn to say 'No'; it will be of more use to you than to be able to read Latin",
"Let us not be too particular; it is better to have old secondhand diamonds than none at all",
"Never believe all you hear. Always believe in what you say",
"Wise men learn more from fools than fools from the wise",
"The heart of a fool is in his mouth, but the mouth of a wise man is in his heart",
"The poor man is not he who is without a cent, but he who is without a dream"
         ];

function getNewQuote(){ return quote[Math.floor(Math.random() * quote.length)] }
function newQuote() { document.getElementById("randomQuote").innerHTML = getNewQuote();}

newQuote();


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console