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

+ add another resource

JavaScript

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

Packages

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.

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

              
                <div><header>
    <h1>Just a random thought:</h1>
    </header></div>
<div class="quote-box container-fluid">
  <div class ="quote-text">
    <span id="text"></span>
  </div>
  <div class="quote-author"><span id="author">
    </span>
  </div>

  <div class="buttonPlace" id="newQuote">
    <button class = "btn buttonStyle">New quote</button>
  </div>
</div>
  

    
              
            
!

CSS

              
                <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Arsenal|Courgette|Dancing+Script" rel="stylesheet"> 
div{
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.quote-box {
  margin: 2% 20% 10% 20%;
  border-radius: 15%;
  border-width: 5px;
  border-style: solid;
  background-color: blue;
  width: 60%;
  position: relative;
  display: flex;
  min-height: 20em;
  justify-content: center;
  align-self: center;
  flex-wrap: wrap;
}

.quote-text{
  font-size: 30px;
  font-family: 'Courgette', cursive;
  color: white;
  margin: 20px 5px 5px 20px;
}
h1 {
  text-align: center;
  font-size: 40px;
  font-family: 'Dancing Script', cursive;
  align-self: center;
  color: blue;
}
.quote-author{
  text-align: right;
  font-size: 20px;
  font-family: 'Dancing Script', cursive;
  align-self: center;
  color: white;
}

<!-- font-family: 'Courgette', cursive;
 font-family: 'Arsenal', sans-serif;
 font-family: 'Dancing Script', cursive;
-->
.buttonPlace{
  position: relative;
  display: flex;
  align-self: flex-end;
  justify-content: flex-end;
  margin: auto;
}

.buttonStyle {
  font-family: 'Arsenal', sans-serif;
  font-size: 20px;
  background-color: green;
  border: 3px;
  border-radius: 50%;
  padding: 10px 20px 10px 20px;
  margin-top: 100%;
  cursor: pointer
    
}
              
            
!

JS

              
                
var quotes= [
  ["My theory is that the hardest work anyone does in life is to appear normal.", "-From the movie ED tv"],
["Never put off till tomorrow that which you can put off until the day after tomorrow.", "-Mark Twain"],
  ["Clothes make the man. Naked people have little or no influence in society.", "-Mark Twain"],
  ["If you think you are too small to make a difference, try sleeping with a mosquito.", "-Dalai Lama"],
  ["Go through life like a duck: Majestic on top, kicking like hell underneath.", "-Anonymous"],
  ["Before you diagnose yourself with depression or low self esteem, first make sure you are not, in fact, just surrounded by a**holes.", "-William Gibson"],
  ["Nobody dies a virgin life f***s us all.", "-Kurt Cobain"],
  ["An intellectual is someone who has found something more interesting than sex.", "-Unknown"],
  ["My way of joking is to tell the truth. It’s the funniest joke in the world.", "-George Bernard Shaw"],
  ["The two most common elements in the world are hydrogen and stupidity.", "-Arthur Miller"],
  ["Many people die at 25 and aren't buried until they are 75.", "-Benjamin Franklin"],
  ["Life is beautiful, as long as it consumes you. When it is rushing through you, destroying you, life is gorgeous, glorious. It’s when you burn a slow fire and save fuel, that life’s not worth having.", "-D. H. Lawrence"],
  ["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"],
  ["Life is a spell so exquisite that everything conspires to break it.", "-Emily Dickinson"],
  ["Instead of wondering when your next vacation is, you ought to set up a life you don’t need to escape from.", "-Seth Godin"],
  ["If you are depressed you are living in the past. If you are anxious you are living in the future. If you are at peace you are living in the present.", "-Lao Tzu"],
  ["Life is not always a matter of holding good cards, but sometimes, playing a poor hand well.", "-Jack London"],
  ["Opportunity is missed by most people because it is dressed in overalls and looks like work.", "-Thomas A. Edison"],
  ["To be nobody but yourself in a world which is doing its best, night and day, to make you everybody else means to fight the hardest battle which any human being can fight; and never stop fighting.", "-E. E. Cummings"],
  ["Be yourself. Everyone else is taken.", "-Oscar Wilde"],
  ["Let us endeavor so to live that when we come to die even the undertaker will be sorry.", "-Mark Twain"],
  ["The unexamined life is not worth living.", "-Socrates"],
  ["If you want to live a happy life, tie it to a goal, not to people or things.", "-Albert Einstein"],
  ["The fear of death follows from the fear of life. A man who lives fully is prepared to die at any time.", "-Mark Twain"],
  ["The purpose of life is to be defeated by greater and greater things.", "-Rilke"],
  ["When I was 5 years old my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when i grew up. I wrote down “Happy”. They told me i didn’t understand the assignment, and I told them they didn’t understand life.", "-John Lennon"],
  ["Your time is limited, so don’t waste it living someone else’s life.", "-Steve Jobs"],
  ["Have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.", "-Steve Jobs"],
  ["Life shrinks or expands in proportion to one’s courage.", "-Anais Nin"],
  ["Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.", "-Albert Einstein"],
  ["The great pleasure in life is doing what people say you cannot do.", "-Walter Bagehot"],
  ["People are illogical, unreasonable, and self-centered. Love them anyway. If you do good, people will accuse you of selfish ulterior motives. Do good anyway. If you are successful, you win false friends and true enemies. Succeed anyway. The good you do today will be forgotten tomorrow. Do good anyway. Honesty and frankness make you vulnerable. Be honest and frank anyway. The biggest men and women with the biggest ideas can be shot down by the smallest men and women with the smallest minds. Think big anyway. People favor underdogs but follow only top dogs. Fight for a few underdogs anyway. What you spend years building may be destroyed overnight. Build anyway. People really need help but may attack you if you do help them. Help people anyway. Give the world the best you have and you’ll get kicked in the teeth. Give the world the best you have anyway.", "-Mother Theresa"],
  ["You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.", "-Steve Jobs"],
  ["…getting fired from Apple was the best thing that could have ever happened to me. The heaviness of being successful was replaced by the lightness of being a beginner again, less sure about everything. It freed me to enter one of the most creative periods of my life.", "-Steve Jobs"],
  ["Every man's happiness is his own responsibility.", "-Abraham Lincoln"],
  ["To ease another’s heartache is to forget one’s own.", "-Abraham Lincoln"],
  ["Success is going from failure to failure without losing your enthusiasm.", "-Abraham Lincoln"],
  ["My best friend is a person who will give me a book I have not read.", "-Abraham Lincoln"],
  ["Nearly all men can stand adversity, but if you want to test a man’s character, give him power.", "-Abraham Lincoln"],
  ["When I do good, I feel good. When I do bad, I feel bad. That’s my religion.", "-Abraham Lincoln"],
  ["Those who deny freedom to others deserve it not for themselves.", "-Abraham Lincoln"],
  ["I don’t like that man. I must get to know him better.", "-Abraham Lincoln"],
  ["No man is good enough to govern another man without the other’s consent.", "-Abraham Lincoln"],
  ["Character is like a tree and reputation its shadow. The shadow is what we think it is and the tree is the real thing.", "-Abraham Lincoln"],
  ["Tact: the ability to describe others as they see themselves.", "-Abraham Lincoln"],
  ["I would rather be a little nobody, then to be a evil somebody.", "-Abraham Lincoln"],
  ["It has been my experience that folks who have no vices have very few virtues.", "-Abraham Lincoln"],
  ["He has a right to criticize, who has a heart to help.", "-Abraham Lincoln"],
  ["America will never be destroyed from the outside. If we falter and lose our freedoms, it will be because we destroyed ourselves.", "-Abraham Lincoln"],
  ["There are many ways to be free. One of them is to transcend reality by imagination, as I try to do.", "-Anais Nin"],
  ["We are going to the moon—that is not very far. Man has so much farther to go within himself.", "-Anais Nin"],
  ["When you possess light within, you see it externally.", "-Anais Nin"],
  ["I, with a deeper instinct, choose a man who compels my strength, who makes enormous demands on me, who does not doubt my courage or my toughness, who does not believe me naive or innocent, who has the courage to treat me like a woman.", "-Anais Nin"],
  ["How wrong it is for a woman to expect the man to build the world she wants, rather than to create it herself.", "-Anais Nin"],
  ["Shame is the lie someone told you about yourself.", "-Anais Nin"],
  ["How wonderful it is that nobody need wait a single moment before starting to improve the world.", "-Anne Frank"],
  ["It’s really a wonder that I haven’t dropped all my ideals, because they seem so absurd and impossible to carry out. Yet I keep them, because in spite of everything, I still believe that people are really good at heart.", "-Anne Frank"],
  ["You can always, always give something, even if it is only kindness!", "-Anne Frank"],
  ["In the long run, the sharpest weapon of all is a kind and gentle spirit.", "-Anne Frank"],
  ["To be honest, I can’t imagine how anyone could say “I’m weak” and then stay that way. If you know that about yourself, why not fight it, why not develop your character?", "-Anne Frank"],
  ["Before any great things are accomplished, a memorable change must be made in the system of education… to raise the lower ranks of society nearer to the higher.", "-John Adams"],
  ["Education breeds confidence. Confidence breeds hope. Hope breeds peace.", "-Confucius"],
  ["Every child deserves a champion – an adult who will never give up on them, who understands the power of connection and insists that they become the best that they can possibly be.", "-Rita Pierson"],
  ["The mediocre teacher tells. The good teacher explains. The superior teacher demonstrates. The great teacher inspires.", "-William A. Ward"],
  ["Education is not filling of a pail but the lighting of a fire.", "-William Butler Yeats"],
  ["The function of education is to teach one to think intensively and to think critically. Intelligence plus character – that is the goal of true education.", "-Martin Luther King, Jr."],
  ["The principal goal of education in the schools should be creating men and women who are capable of doing new things, not simply repeating what other generations have done.", "-Jean Piaget"],
  ["The secret in education lies in respecting the student.", "-Ralph Waldo Emerson"],
  ["Don’t just teach your kids to read, teach them to question what they read. Teach them to question everything!", "-George Carlin"],
  ["Logic will get you from A to B. Imagination will take you everywhere.", "-Albert Einstein"],
]

function getQuote() {
  var x = Math.floor(Math.random() * quotes.length);
  var quoteText = quotes[x][0];
  var quoteAuthor = quotes[x][1]; 
  $("#text").html(quoteText);
  $("#author").html(quoteAuthor);
}
  $(document).ready(function() {
  getQuote();
  $("#newQuote").click(function() {
   getQuote();
  });
});

              
            
!
999px

Console