Pen Settings

HTML

CSS

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

JavaScript

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

Behavior

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.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=Prompt:400,700i,800" rel="stylesheet">
<body onload="newQuote()">
<h1>Ron Swanson Quotes</h1>
  
  <div><img src="https://image.ibb.co/b7bWwV/ron-swanson.png" alt="ron-swanson" class="centerpic"></div>

	<div id="quoteDisplay">
      <!-- Quotes will display here -->
    </div>
    <!-- Center is added for button placement -->
   
      <button onclick="newQuote()">I Know What I'm About, Son!</button>

	<script type="text/javascript" src="ron.js"></script>

              
            
!

CSS

              
                body {
	background-color: #e5ebec;
	font-family: prompt;
}

h1 {
	text-align: center;
	font-size: 50px;
}


div {
	margin: auto;
    width: 60%;
    padding: 10px;
    text-align: center;
    font-size: 20px;
}

.centerpic {
	display: block;
	margin: auto;
	width: 80%;
}



button {
	display: block;
	margin: auto;
	font-family: prompt;
	width: 250px;
	height: 30px;
	font-size: 15px;
}
              
            
!

JS

              
                var quotes = [
  "I'm not interested in caring about people.",
  "Clear alcohols are for rich women on diets.",
  "On my deathbed, my final wish is to have my ex-wives rush to my side so I can use my dying breath to tell them both to go to hell one last time.",
  "I’m a simple man. I like pretty, dark-haired women, and breakfast food.",
  "It’s pointless for a human to paint scenes of nature when they can go outside and stand in it.",
  "There has never been a sadness that can’t been cured by breakfast food.",
  "Strippers do nothing for me…but I will take a free breakfast buffet anytime, anyplace.",
  "So you talked to Tammy? What's it like to stare into the eye of Satan's butthole?",
  "I once worked with a guy for three years and never learned his name. Best friend I ever had. We still never talk sometimes.",
  "When people get too chummy with me I like to call them by the wrong name to let them know I don't really care about them.",
  "The government is a greedy piglet that suckles on a taxpayer’s teat until they have sore, chapped nipples.",
  "Just give me all the bacon and eggs you have. Wait…wait. I worry what you just heard was: Give me a lot of bacon and eggs. What I said was: Give me all the bacon and eggs you have. Do you understand?",
  "History began on July 4, 1776. Everything that happened before that was a mistake.",
  "Fishing relaxes me. It’s like yoga, except I still get to kill something.",
  "America: The only country that matters. If you want to experience other ‘cultures,’ use an atlas or a ham radio.",
  "Sting like a bee. Do not float like a butterfly. That's ridiculous.",
  "When I eat, it is the food that is scared.",
  "Give 100%. 110% is impossible. Only idiots recommend that.",
  "You had me at ‘Meat Tornado.’",
  "Capitalism: God's way of determining who is smart and who is poor.",
  "Fishing is for sport only. Fish meat is practically a vegetable.",
  "There is only one bad word: taxes.",
  "Any dog under fifty pounds is a cat and cats are useless.",
  "Never half-ass two things. Whole-ass one thing.",
  "There's only one thing I hate more than lying: skim milk. Which is water that is lying about being milk.",
  "Dear frozen yogurt, you are the celery of desserts. Be ice cream or be nothing. Zero stars.",
]

function newQuote() {
var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
              
            
!
999px

Console