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. 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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <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');
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.