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 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="container-fluid block">
	<div class="row-fluid">
		<div class="col-sm-1"></div>
		<div class="col-sm-10 centerallthethings">
			<h1>Mike's Magical Movie Quote Generator</h1>
		<div class="col-sm-1"></div>
	<div class="row-fluid">
		<div class="col-sm-12 centerallthethings">

			<div id="quoteBox" class="quotebox">
				<div id="quoteText">Oh, no, it wasn't the airplanes. It was Beauty killed the Beast.</div>
				<div id="quoteCharacter">- Carl Denham, King Kong</div>
				<button id="twitter-button" class="btn btn-info btn-lg btn-block button-stuff tweet-btn-tweak">Tweet this quote!</button>

			<button id="quoteButton" class="btn btn-default btn-lg btn-block button-stuff">Thank you sir, may I have another?</button>


              @import url(https://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700);
@import url('https://fonts.googleapis.com/css?family=Condiment');

body {
	font-family: Share, Arial, san-serf;
	background: url(http://mikemorkes.com/codepen/kingkong.jpg) center center;
	padding-bottom: 50px;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-top: 100px;

.block {
	position: absolute;
	bottom: 20px;
	max-width: 600px;
	right: 50%;
	margin-right: -300px;

h1 {
	font-family: 'Cinzel Decorative', Georgia, serif;
	color: #ddbc24;
	font-size: 40px;
	text-shadow: 0 0 6px #000;

.quotebox {
	width: 100%;
	height: auto;
	border: 2px solid #ddbc24;
	padding: 20px 30px;
	font-family: Share, Arial, san-serif;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.6);
	color: #000;
	border-radius: 10px;
	margin: 10px auto 50px;

.quotebox p {
	font-size: 30px;
	line-height: 34px;

#quoteText {
	font-style: normal; 
	font-size: 28px; 
	line-height: 34px;

#quoteCharacter {
	color: #333;
	font-family: 'Condiment', cursive;
	text-align: right;
	font-size: 28px;
	line-height: 48px;	

.centerallthethings {
	text-align: center;

.button-stuff {
	margin-top: 55px;
	max-width: 300px;
	margin: 50px auto;

.tweet-btn-tweak {
	margin: 15px auto !important;

I select:focus,
button:focus {
	outline: none !important;
              // globals	
var displayQuote = "Oh, no, it wasn't the airplanes. It was Beauty killed the Beast.";
var displayCharacter = "Carl Denham, King Kong";

var quoteArray = [{
		quote: "Frankly, my dear, I don't give a damn.",
		character: "Rhett Butler, Gone With The Wind"
	}, {
		quote: "My mama always said life was like a box of chocolates. You never know what you're gonna get.",
		character: "Forrest Gump"
	}, {
		quote: "Gentlemen, you can't fight in here! This is the War Room!",
		character: "Dr. Strangelove"
	}, {
		quote: "Take your stinking paws off me, you damned dirty ape!",
		character: "Taylor, Planet of the Apes"
	}, {
		quote: "Life is a banquet, and most  poor suckers are starving to death!",
		character: "Auntie Mame"
	}, {
		quote: "The Force will be with you, always.",
		character: "Obi-Wan Kenobi, Star Wars: A New Hope"
	}, {
		quote: "What does God need with a starship?",
		character: "James T. Kirk, Star Trek V"
	}, {
		quote: "Dead or alive, you’re coming with me!",
		character: "RoboCop"
	}, {
		quote: "We’re not hosting an intergalactic kegger down here.",
		character: "Zed, Men In Black"
	}, {
		quote: "Six years of college down the drain.",
		character: "Bluto, Animal House"
	}, {
		quote: "Never apologize, mister, it's a sign of weakness.",
		character: "Capt. Nathan Cutting Brittles, She Wore A Yellow Ribbon"
	}, {
		quote: "I'm not locked in here with you. You're locked in here with me!",
		character: "Rorschach, Watchmen"
	}, {
		quote: "Yeah, well, you know, that's just like, your opinion, man.",
		character: "The Dude, The Big Lewbowski"
	}, {
		quote: "Oh, no, it wasn't the airplanes. It was Beauty killed the Beast.",
		character: "Carl Denham, King Kong"


$('#quoteButton').click(function(evt) {


	// generate a random number to pick a quote from the array
	var randomQuote = Math.floor(Math.random() * (quoteArray.length - 1 + 1));

	// drop new quote and character into these variables that we'll use in the quote box and for any tweets
	displayQuote = quoteArray[randomQuote].quote;
	displayCharacter = quoteArray[randomQuote].character;

	// populate the html objects with their corresponding data, then animate them
	document.getElementById("quoteText").innerHTML = displayQuote;
	document.getElementById("quoteCharacter").innerHTML = "- " + displayCharacter;
	$("#quoteBox").addClass("animated zoomIn").one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
		function(e) {
			$(this).removeClass('animated zoomIn');


// tweet this quote
function twitter() {
	window.open('https://twitter.com/intent/tweet?text=' + displayQuote + ' - ' + displayCharacter); // open new twitter window and populate tweet area with current quote and character name

// run twitter function when tweet button is clicked
$("#twitter-button").on("click", twitter); 

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.


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