<div class="container-fluid text-center">
  <h1>Random Quote Generator</h1>
  <p>Some of my favourite quotes of all time!</p>
   <br/>
  <button id="newq" class="btn btn-primary" type="submit">New Quote</button>
 <a href="#" class="btn btn-primary" id="tweet">Tweet Out!</a>
  <div class="quotes">
    <div class="row">
      <div class="col-xl-12 col-ml-6 col-xs-4">
    <span class="quote"></span><br/>
    <span class="author"></span>
      </div>
    </div>
  </div>
</div>

body{
  background-image:url("https://www.xmple.com/wallpaper/black-white-hexagon-purple-glow-gradient-1920x1080-c4-000000-ffffff-483d8b-000000-l2-1-29-a-45-f-6.svg");
    font-family:"Times New Roman";
}
h1{
  color:white; 
  font-family:"Times New Roman";
}
p{
  color:white;
  font-family:"Times New Roman";
    font-style:Italic;
  font-size:20px;
}
img{
  padding:20px;
}
.quotes{
  background-color:black;
  width:auto;
  margin-left:auto;
  margin-right:auto;
  border-color:white;
  border-style:solid;
  border-radius:5px;
  margin-top:20px;
  padding:15px;
  height:auto;
  color:white;
}
.quote{
  font-size:30px;
}
.author{
  font-size:20px;
  font-style:italic;
}

$(document).ready(function(){
  var url="https://api.quotable.io/random";
  getQuote();
  var tweet;
  function getQuote(){
      $.getJSON(url, function(data)
               {
        $(".quote").html('"'+data.content+'"');
        $(".author").html("- "+data.author);
        tweet=$(".quote").text() + " by -" + $(".author").text();
      });
  };
 
   $("#tweet").on("click", function()
                {
    window.open("https://twitter.com/intent/tweet?text="+tweet);
  });
    $("#newq").on("click", function(){
      getQuote();
    });
 
});