Pen Settings



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


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


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.


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.


                <link href='' rel='stylesheet' type='text/css'>

<link href='' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="">

  <title>Random Quote Generator</title>
    <h2 align="center"><font color = "white"><strong>Random Quotes From  Game of Thrones</strong></h2>
<!--  <h3 align="center"><font color = "white"><strong>Random Quote Generator</strong></h3> -->

<!--- The first paragraph on page -->
      <div class="top-buffer"></div>
      <div class ="text1"> -->
 <!-- <p id="intro"><font color="white" style="text-align:center"><strong><em>These are some motivational quotes that I found inspiring and which I wanted to share. More quotes will be added in the near future. I hope you enjoy them!</font></strong></em></p> -->

<!-- First paragraph ends here -->

<!-- Below comes the magic button -->
<div class="top-buffer"></div> 
    <button id="thebutton" class ="btn center-block"><strong> Click me for a new Quote</stong> </button>

<!-- End of magic button -->

<!-- Here comes the quote display window -->
  <div class="container-fluid">
    <div class="top-buffer2"></div>
    <div class="center-block text2">
          <p id="zaquote" style="text-align:center">"Kill the boy Jon Snow, winter is almost upon us. Kill the boy and let the man be born."  <br><br>
          – Maester Aemon</p>

  </div> <!--end of container --->  
      <div style="margin-top: 35px; text-align: center">
            <a id="twitter-button" class="twitter-share-button"{count} 

<!-- <h2 align="right"><p id="r">by Robert Uivarosi</p></h2>      -->



                body { 
  background: url( no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

h3 {
  font-family: sans-serif, Arial, Helvetica;

.text1 { 
    margin: auto;
    width: 60%;
    padding: 30px;
    color: black;

p {
  font-family: cardo;
  font-size: medium;
  color: black;

.btn {
    border-radius: 20px;
    background: #4d0013;
    color: white;

    border-radius: 20px;
    background: #722f37;
    color: black;

.btn:hover {
	background: rgba(F,F,F,F);
	color: white;
	box-shadow: inset 0 0 0 2px white;

.top-buffer { margin-top:20%; }
.top-buffer2 {margin-top:35px; }

.text2 { 
    margin: auto;
    width: 40%;
    padding: 15px;
    background: #DCDCDC;
    color: black;
    border:3px solid #4d0013 ;
    border-radius: 2em;

h2 {
  font: 400 50px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px black; 

  font: 400 30px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px black; 

  font: 400 30px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: black;
  /*text-shadow: 4px 4px 3px gray; */

/*#r {
  color: white;
  position: fixed;
  right: 0;
  font: 400 40px/1.5 'Pacifico', Helvetica, sans-serif;
  font-size: 15px;
  text-shadow: 3px 3px 0px black, 7px 7px 0px rgba(0,0,0,0.05);
  z-index: -1;



                function createCallback(i){
  $("#thebutton").css("color", "white");
  return function(){

var quotes = ["\"Any man who must say, \"I am the king\" is no true king. I'll make sure you understand that when I've won your war for you. \"",
              "\"The king is tired. See him to his chambers.\"", 
              "\"You're blessed with abilities that few men possess. You're blessed to belong to one of the most powerful families in the kingdoms, and you're still blessed with youth. What have you done with these blessings, eh? You served as a glorified bodyguard for two kings - one a mad man, the other a drunk.\"",
              "\"A lion doesn't concern himself with the opinion of a sheep. \"",
              "\"Your mother's dead. Before long I'll be dead, and you and your brother and your sister and all of her children, all of us dead, all of us rotting underground. It's the family name that lives on. It's all that lives on. Not your personal glory, not your honor... but family. You understand? \"", 
              "\"Chaos isn't a pit. Chaos is a ladder. Many who try to climb it fail and never get to try again. The fall breaks them. And some, are given a chance to climb. They refuse, they cling to the realm or the gods or love. Illusions. Only the ladder is real. The climb is all there is. \"", 
              "\"So many men, they risk so little. They spend their whole lives avoiding danger, and then they die. I'd risk everything to get what I want. \"",
              "\"Always keep your foes confused, if they are never certain of what you want, they can't know what you plan to do next.\"", 
              "\"A bag of dragons buys a man's silence for a while, but a well-placed quarrel buys it forever.\"",
              "\"The powerful have always preyed on the powerless, that's how they became powerful in the first place.\"",
              "\" Don't fight for a king. Don't fight for his kingdoms. Don't fight for honor, don't fight for glory, don't fight for riches, because you won't get any. This is your city Stannis means to sack. That's your gate he's ramming. If he gets in it will be your house that burns. Your gold he steals, your women he rapes. Those are brave men knocking at our door. Let's go kill them! \"",
              "\"Come, wife. I vomited on a girl once, during the act, not proud of it. But I think honesty is important between a man and his wife, don't you agree? Come, I'll tell you all about it, put you in the mood. \"",
              "\"Let them see that their words can cut you and you'll never be free of the mockery. If they want to give you a name, take it. Make it your own. They can't hurt you with it anymore.\"",
              "\"Though I would treasure your friendship, I'm mainly interested in your facility with murder. And if the day ever comes when you're tempted to sell me out, remember this: whatever their price, I'll beat it. I like living. \"",
               "\"When you play the game of thrones, you win or you die. There is no middle ground.\"",
               "\"The only way to keep your people loyal is to make certain they fear you more than they do the enemy.\"",
               "\"It is a big and beautiful world. Most of us live and die in the same corner where we were born and never get to see any of it. I don't want to be most of us.\"",
               "\"Given the opportunity, what do we do to those who’ve hurt the ones we love?.\"",
              "\"Long sullen silences with the occasional punch in the face. The Mormont way.\""];
  var characters = ["-Tywin Lannister",
                    "-Tywin Lannister",
                    "-Tywin Lannister",
                    "-Tywin Lannister",
                    "-Tywin Lannister",
                    "-Petyr 'Littlefinger' Baelish",
                    "-Petyr 'Littlefinger' Baelish",
                    "-Petyr 'Littlefinger' Baelish",
                    "-Petyr 'Littlefinger' Baelish",
                    "-Tyrion Lannister",
                    "-Tyrion Lannister",
                    "-Tyrion Lannister",
                    "-Tyrion Lannister",
                    "-Tyrion Lannister",
                    "-Cersei Lannister",
                    "-Cersei Lannister",
                    "-Oberyn Martell",
                    "-Petyr 'Littlefinger' Baelish",
                    "-Tyrion Lannister"
  var min = 0;
  var character = "Tywin Lannister";
  var theQuote = "Life is 10% what happens to you and 90% how you react to it."
  //var randomNr = Math.floor(Math.random()*(quotes.length-1-min+1)+min);
  var randomNr = Math.floor(Math.random() * quotes.length);
  theQuote = quotes[randomNr];
  character = characters[randomNr];
  //Creating the tweet button for new content
    function createButton() { 
      //var msg = document.getElementById("zaquote").innerHTML;
      var msg = theQuote+character;
      var tweetDiv = document.querySelector(".twitter-share-button");
      var link = document.createElement("a");

      link.setAttribute("href", "");
      link.setAttribute("class", "twitter-share-button");
      link.setAttribute('id', 'twitter');
      link.setAttribute("data-text", "" + msg + "");
      link.setAttribute("data-size", "large");
      tweetDiv.parentNode.replaceChild(link, tweetDiv);

  var i = 1;


!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');