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=Anton" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">





<div class="container-fluid">
    <h2 class=text-center>Random Quote Machine</h2>
  
  <h3> Below are some of my favorite quotes from Brian Tracy's book, <i>Maximum Achievement: Strategy and Skills that Will Unlock Your Hidden Powers to Succeed</i>. Generate a random quote that may inspire your life!
  <div class = "block text-center">
    
    
  
 
    <div class = "col-xs-12 well randomQuote">
      The quote will go here
    </div>
    <div class="col-xs-12 well authorName">
     --author name here  
    </div>

  <div class = "row">
    <div class="col-md-6">
      <div class="well">
      <button id = "quotebutton" class = "btn btn-primary text-right">
        Get Quote
      </button>
      </div>
  </div>
    
     <div class="col-md-6">
       <div class="well">
    <button id = "tweetButton" class = "btn btn-primary text-right"> <i class="fa fa-twitter fa-lg" id="twittericon" aria-hidden="true"></i>
        Tweet
      </button>
      
       </div>
    </div>
    </div>
  </div>
  
</div>

              
            
!

CSS

              
                h2{
 margin-top: 50px;
 font-family: 'Anton', sans-serif;

  
}

h3{
  margin-top: 40px;
  padding:20px;
  font-size: 1em;

}
.block{
  background-color: #00CED1;
  width: 1000px;
  height: 350px;
  padding-top: 50px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 80px;
  text-align:center;
  font-family: 'El Messiri', sans-serif;
  
}

#quotebutton{
  margin-left: 50px;
  background-color: #FFA07A;
  border: none;
  margin-top: 50px;
}

#tweetButton{
  margin-left: 50px;
  border: none;
  margin-top: 50px;
}



.randomQuote{
  padding-top: 30px;
  font-size: 1.5em;
}

.authorName{
  padding-top: 10px;
  text-align: right;
}


              
            
!

JS

              
                

$(document).ready(function() {
  
  function getQuote() {
  var quotes = ["Whatever you can hold in your mind on a continuing basis, you can have", "Take every opportunity to say and do things that make people feel more valuable.", "The most most successful and happy men and women are those who make other people feel good about themselves when they are with them.", "When you go through life raising the self-esteem of others, opportunities will open up before you, and people will help you in ways you cannot now imagine.", "You can learn to overcome the fear of failure by being absolutely clear about your goals, and by accepting that temporary setbacks and obstacles are the inevitable price you pay to achieve any great success in life.", "If you see yourself new as you wish to be, and you walk, talk, and behave as the very best person you can imagine yourself being, your dominant thoughts and goals will materialize as your reality.", "You will become what you think about most of the time."];
    var author = ["--Brian Tracy"];
    
    var randomNum = Math.floor((Math.random()*quotes.length));
    var quoteText = quotes[randomNum];
    var randomAuthor = author;
    $(".randomQuote").text(quoteText);
    $(".authorName").text(randomAuthor);
  }
  
     $("#quotebutton").on("click", function() {
   getQuote();
}); 
                                               
  });

 

    
    



              
            
!
999px

Console