<section>
  <div class="container">
    <div class='content'>
      <p id="quote"></p>
      <p id="person"></p>
      <div class="btns">
        <a class='button btn' href="" id="twitter" target="_blank">Share <i class="fa fa-twitter"></i>
        </a>
        <a class='btn button-primary' id="newQuote">Refresh <i class="fa fa-refresh"></i>
        </a>
      </div>
    </div>
  </div>
</section>
<p class='boring'>created by <a href="http://adamsnape.com">adam snape <i class="fa fa-external-link"></i></a></p>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display')

body
  background-color: #333

h1
  text-align: center
  text-transform: uppercase
  font-style: bold
  
#quote
  opacity: 0
  min-height: 100px
  font-family: 'Playfair Display', serif !important
  font-size: 20pt
  text-align: center
  font-family: serif
  font-style: italic
  &::before
    @media screen and (min-width: 600px) 
      font-family: 'Playfair Display'
      content: '“'
      font-size: 200pt
      line-height: 10pt
      position: relative
      top: 130px
      left: -30px
   
#person
  opacity: 0
  height: 15px
  text-align: right
  margin: 0 15% 0 0
  line-height: 1
  font-family: 'Playfair Display', serif
  font-size: 13px
  
section
  width: 100%
  padding: 0 5%
  
.content
  padding: 30px
  
.container
  width: 70%
  margin: 50px 0 0 0
  min-height: 50px
  background: white
  border-radius: 0.5em
  margin: 50px auto
  a
    min-width: 70px
    margin: 10px 0 0 10px
    background: white
    color: #999
    padding: 10px 20px
    border-radius: 5px
    border: 1px #999 solid
    &:hover
      border: 1px #444 solid
      color: #444
      cursor: pointer
      text-decoration: none
    
    
#twitter:hover
  border: 1px #00aced solid 
  color: #00aced
  cursor: pointer

.btns
  padding-top: 30px
  
.boring
  font-size: 9pt
  text-align: center
  color: #333
  a
    color: inherit
    &:hover
      color: blue
    
View Compiled
// function to get the quote via JSON
function getQuote() {
  var colours = [
    "#555c81",
    "#98ccf8",
    "#45cb9f",
    "#d45d8f",
    "#585674",
    "#b63250",
    "#4e55b8",
    "#2f9e20"
  ];

  // change the background colour
  var colour = Math.floor(Math.random() * colours.length);
  $("html body").animate({ backgroundColor: colours[colour] }, 1000);

  var quoteNo = Math.floor(Math.random() * Math.floor(80));
  var quote;
  var author;

  // use JSON to retrieve quote
  $.getJSON(
    "https://random-quote-generator.herokuapp.com/api/quotes/",
    function(json) {
      quote = json[quoteNo].quote;
      author = json[quoteNo].author;
      //end JSON
      // update twitter link with new quote
      $("#twitter").attr(
        "href",
        "https://twitter.com/intent/tweet?hashtags=quotes&related=snapexyz&text=" +
          encodeURIComponent('"' + quote + '" ' + author)
      );

      // change the text
      $("#quote")
        .animate({ opacity: 0 }, 500, function() {
          $(this).html(quote);
        })
        .animate({ opacity: 1 }, 500);

      $("#person")
        .animate({ opacity: 0 }, 500, function() {
          $(this).html("- " + author);
        })
        .delay(200).animate({ opacity: 1 },500
      );
    }); // end json
} //End getQuote function

$(document).ready(function() {
  //run getQuote on webpage load
  getQuote();
  //get new quote on click
  $("#newQuote").on("click", getQuote);
});
Rerun