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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

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


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


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="row">
	<div class="col s12 center-align">
		<h1>Oscar Wilde Quote Machine</h1>
	<div class="col s8 m8 l6 offset-s2 offset-m2 offset-l3 main-card">
		<div class="col s12">
			<p class="center-align phrase">“Selfishness is not living as one wishes to live, it is asking others to live as one wishes to live.”</p>
			<p class="right-align">Oscar Wilde</p>
		<div class="row">
			<div class="col s4 m4 l3 xl-3">
				<a target="_blank" class="btn-flat butn-md-2 twitter-share-button" href="“Selfishness is not living as one wishes to live, it is asking others to live as one wishes to live.” - Oscar Wilde">
			<div class="col s8 m8 l9 xl-9">
        <a class="btn-flat butn-md-2 refresh-btn" id="getMessage">Get New Quote</a>
<div class="center-align">
	<a target="_blank" href="">by Joan Subirats</a>


                body {
  font-family: 'Open Sans', sans-serif;
  background-color: #EFEBE9;

h1 {
  font-weight: 300;

.main-card {
  margin-top: 60px;
  border: solid 1px #BDBDBD;
  border-radius: 10px;
  background-color: white;
  font-size: 1.8em;
  font-weight: 300;

.butn-md-2 {
  border: solid 1px #BDBDBD;
  border-radius: 10px;

.butn-md-2:hover {
  background-color: #EFEBE9;
  color: ;

.twitter-share-button:hover {
  background-color: #EFEBE9;
  color: ;

.refresh-btn {
  float: right;


                $(document).ready(function() {

 $("#getMessage").on("click", function() {
  var i = Math.floor(Math.random() * (phrases.length - 1));
  $(".twitter-share-button").attr("href", "" + phrases[i] + "- Oscar Wilde")
   // Only change code above this line.

var phrases = [
 '“Always forgive your enemies; nothing annoys them so much.”',
 '“Be yourself; everyone else is already taken.”',
 '“To live is the rarest thing in the world. Most people exist, that is all.”',
 '“Education is an admirable thing, but it is well to remember from time to time that nothing that is worth knowing can be taught.” ',
 '“The public is wonderfully tolerant. It forgives everything except genius.”',
 '“Some cause happiness wherever they go; others whenever they go.”',
 '“A cynic is a man who knows the price of everything, and the value of nothing.”',
 '“All women become like their mothers. That is their tragedy. No man does, and that is his.”',
 '“With freedom, books, flowers, and the moon, who could not be happy?”',
 '“Quotation is a serviceable substitute for wit.”',
 '“If you want to tell people the truth, make them laugh, otherwise they’ll kill you.”',
 '“It is absurd to divide people into good and bad. People are either charming or tedious.”',
 '“To love oneself is the beginning of a lifelong romance.',
 '“Selfishness is not living as one wishes to live, it is asking others to live as one wishes to live.”',
 '“No good deed goes unpunished.”',
 '“I don’t want to be at the mercy of my emotions. I want to use them, to enjoy them, and to dominate them.”',
 '“Life is far too important a thing ever to talk seriously about.”',
 '“Only dull people are brilliant at breakfast.”',
 '“There is only one thing in the world worse than being talked about, and that is not being talked about.”',
 '“A man’s face is his autobiography. A woman’s face is her work of fiction.”',
 '“To define is to limit.”',
 '“Morality is simply the attitude we adopt towards people we personally dislike.”',
 '“I am so clever that sometimes I don’t understand a single word of what I am saying.”',
 '“We are all in the gutter, but some of us are looking at the stars.”',
 '“If one cannot enjoy reading a book over and over again, there is no use in reading it at all.”',
 '“It is what you read when you don’t have to that determines what you will be when you can’t help it.”',
 '“The truth is rarely pure and never simple.”',
 '“The books that the world calls immoral are books that show the world its own shame.”',
 '“You can never be overdressed or overeducated.”',
 '“I don’t want to go to heaven. None of my friends are there.”',
 '“Women are meant to be loved, not to be understood.”',
 '“Most people are other people. Their thoughts are someone else’s opinions, their lives a mimicry, their passions a quotation.”',
 '“A good friend will always stab you in the front.”',
 '“Anyone who lives within their means suffers from a lack of imagination.”',
 '“Yes: I am a dreamer. For a dreamer is one who can only find his way by moonlight, and his punishment is that he sees the dawn before the rest of the world.”',
 '“I am not young enough to know everything.”',
 '“You will always be fond of me. I represent to you all the sins you never had the courage to commit.”',
 '“Every saint has a past, and every sinner has a future.”',
 '“The heart was made to be broken.”',
 '“A thing is not necessarily true because a man dies for it.”',
 '“Experience is merely the name men gave to their mistakes.”',
 '“I never travel without my diary. One should always have something sensational to read in the train.”',
 '“Man is least himself when he talks in his own person. Give him a mask, and he will tell you the truth.”',
 '“You don’t love someone for their looks, or their clothes, or for their fancy car, but because they sing a song only you can hear.”',
 '“Everything in the world is about sex except sex. Sex is about power.”',
 '“Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault. Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope. They are the elect to whom beautiful things mean only Beauty. There is no such thing as a moral or an immoral book. Books are well written, or badly written. That is all.”',
 '“Never love anyone who treats you like you’re ordinary.”',
 '“The very essence of romance is uncertainty.”',
 '“Anybody can sympathise with the sufferings of a friend, but it requires a very fine nature to sympathise with a friend’s success.”',
 '“The world is a stage and the play is badly cast.”',
 '“I am too fond of reading books to care to write them.”',
 '“We are each our own devil, and we make this world our hell.”',
 '“There are only two kinds of people who are really fascinating: people who know absolutely everything, and people who know absolutely nothing.”',
 '“How can a woman be expected to be happy with a man who insists on treating her as if she were a perfectly normal human being”.',
 '“Nowadays people know the price of everything and the value of nothing.”',
 '“Behind every exquisite thing that existed, there was something tragic.”',
 '“We live in an age when unnecessary things are our only necessities.”',
 '“Society often forgives the criminal; it never forgives the dreamer.”',
 '“Everything in moderation, including moderation.”',
 '“Humanity takes itself too seriously. It is the world’s original sin. If the cave-man had known how to laugh, History would have been different.”',
 '“One should never trust a woman who tells one her real age. A woman who would tell one that would tell one anything.”',
 '“The nicest feeling in the world is to do a good deed anonymously-and have somebody find out.”',
 '“The only good thing to do with good advice is pass it on; it is never of any use to oneself.”',
 '“Live! Live the wonderful life that is in you! Let nothing be lost upon you. Be always searching for new sensations. Be afraid of nothing.”',
 '“Nothing can cure the soul but the senses, just as nothing can cure the senses but the soul.”',
 '“The mystery of love is greater than the mystery of death.”',
 '“It takes great deal of courage to see the world in all its tainted glory, and still to love it.”'