<body>
    <div class="wrap-page">
      <div class="quote-block">
        <h1 class="head-font">Startup Quotes</h1>
        <div class="quote">
          Quote Loading ...
        </div>
        <div class="author-block">
          <span class="author"></span>
          <span class="author-company"></span>
          <div class="author-twitter"></div>
        </div>
        <div class="buttons">
          <button class="button" id="nextQuote">Next quote <i class="fa fa-angle-double-right" aria-hidden="true"></i> </button>
          <a class="button share" id="tweetThis" href="#" target="_blank">Share <i class="fa fa-twitter" aria-hidden="true"></i> </a>
        </div>
      </div>
      <div class="copyright">Designed and built by
        <a href="https://twitter.com/fremdev">@fremdev</a> • 2016
      </div>
    </div>
  </body>
body {
  background-color: #A3D5FF;
  min-width: 225px;
  font-family: 'Hind', Helvetica, Verdana, sans-serif;
}

.head-font {
  font-family: 'Libre Baskerville', serif;
}

.wrap-page {
  width: 50%;
  margin: 0 auto;
}

.quote-block {
  margin-top: 100px;
  margin-bottom: 15px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 25px 0px;
}

h1 {
  margin: 0;
  font-size: 32px;
  border: solid 1px #888;
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  background-color: #84B6F4;
  color: #f6f6f6;
}

.quote {
  font-size: 26px;
  padding: 10px;
  text-align: left;
  min-height: 250px;
  display: flex;
  align-items: center;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.button {
  display: inline-block;
  border: 2px solid #888;
  color: #000;
  text-decoration: none;
  padding: 7px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #6F73D2;
  color: #f6f6f6;
  text-align: center;
}

.button:hover {
  background-color: #5F53d2;
}

.share {
  margin-left: 20px;
}

.author-block {
  font-size: 24px;
  text-align: right;
  margin-bottom: 10px;
  font-style: italic;
}

.author-company {

}

.author-twitter {
  font-size: 18px;
}

.copyright {
  text-align: right;
  font-size: 14px;
  margin-right: 15px;
}

@media (max-width: 768px) {
  .wrap-page {
    width: 95%;
  }
  .quote-block {
    text-align: center;
  }
  .quote {
    font-size: 24px;
  }
  .author-block {
    font-size: 20px;
  }

}
$(document).ready(function() {

  function getQuote() {
    $.getJSON("https://wisdomapi.herokuapp.com/v1/random?callback=?", function(json) {
      var quoteText = json.content;
      var authorFullName = json.author.name;
      var authorCompany = json.author.company;
      var authorTwitter = json.author.twitter_username;

      $(".quote").text(quoteText);
      $(".author").text(authorFullName);
      addAuthorTwitter(authorTwitter, authorFullName);
      addAuthorCompany(authorCompany);
      addTweetThis(quoteText);

    });
  }

  function addTweetThis(quoteText){
    $("#tweetThis").attr("href", "https://twitter.com/intent/tweet?&text=" + quoteText + "&url=https://codepen.io/fremdev/full/GqRYrg/");
   }

   function getFirstName(fullName) {
     return fullName.slice(0, fullName.indexOf(" "));
   }

   function addAuthorTwitter(authorTwitter, fullName) {
     var twitterHtml = "";
     var name = getFirstName(fullName);
     if (authorTwitter !== "") {
       twitterHtml = '<span class="author-twitter">(' + name + ' on Twitter: <a href="https://twitter.com/' + authorTwitter + '" target="_blank">@' + authorTwitter + '</a>)</span>';
     }
     $(".author-twitter").html(twitterHtml);
   }

   function addAuthorCompany(authorCompany) {
     if (authorCompany) {
       $(".author-company").text("(" + authorCompany + ")");
     }
     else {
       $(".author-company").text("");
     }
   }

   function showQuote() {
     $(".quote-block").fadeOut(700, function() {
       getQuote();
     });
     $(".quote-block").fadeIn(700);
   }

   showQuote();
   $("#nextQuote").on("click", showQuote);
});

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Baskerville|Hind

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://use.fontawesome.com/962bf3ccc1.js