123

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.

            
              <html>
  <head>
    <title>Awesome Quotes From Star Wars</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:900" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Fondamento" rel="stylesheet">
  </head>

<body>  
<section id="top">
<div class="container-fluid targetBackground">
  
  <div class = "row text-center">
    <h2 class="OrbitronBold">A long time ago in a Galaxy far, <br>far away...</h2>
  
    <button class="button">Use The Code<i class="fa fa-magic"></i></button>
    <div class="quote">
      <span class = "saying"></span><br>
      <span class = "author"></span>
    </div> 
    
    <!-- tweet button -->
    <a class="btn tweet-btn" id="tweetIt" 
href="https://twitter.com/intent/tweet?hashtags=StarWars&related=freecodecamp&text=" title="Tweet this quote!" target="_blank">
      <i class="fa fa-3x fa-twitter"></i>
    </a>
        
    <!-- designed by -->
    
		<h4 class="footer">-Designed by Anjali</h4>
  
  </div>
  
  </div>
</section>
  </body>
</html>
            
          
!
            
              @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");

html, body{
  height: 100%;
	background-size:cover;
  background-attachment: fixed;
	background-repeat: no-repeat;  
}

.targetBackground {
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  -ms-transition: all ease 1s;
  transition: all ease 1s;
}

.OrbitronBold {
  margin: 100px 80px 80px 80px;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  color: #0099ff;
}

.Orbitron {
  font-family: 'Orbitron', sans-serif;
}

h2{
    text-shadow: 4px 1px 2px #99ff99;
    font-size: 2.5em;
    letter-spacing: 3px;
}

.quote {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  background-color: #99ff99;
  opacity: 0.8;
  border-radius: 20px;
  color: #000;
  text-shadow: 1px 2px 3px #666699;
}

.author {
  font-family: 'Russo One', sans-serif;
  font-style: italic;
}

.button {
  font-family: 'Orbitron', sans-serif;
  color: #ffff99;
  border-radius: 10px;
  height: 40px;
  width: auto;
  margin-bottom: 10px;
  background-color: #ff8080;
  text-align: center; 
  font-size: 18px;
  text-shadow: 3px 2px 5px #330080;
  opacity: 0.9;
}

.button:hover{
    background-color:#00cc66;
}

.tweet-btn {
  margin: 0 auto;
  background-color:#fff;
  padding: 4px 3px 3px 4px;  
  border-radius: 5px;
  cursor:pointer;
  opacity: 0.8;
  &:hover {
    opacity:0.9;
  }&#tweetIt {
    float:right;
    padding:0px;
    padding-top:8px;
    text-align:center;
    font-size:1.2em;
    margin-right:5px;
    }
}
.tweet-btn:hover{
    background-color:#99ddff;
}

h4{
  font-family: 'Fondamento', cursive;
  color: #fff;
  text-shadow: 2px 1px 2px #99b3ff;
  letter-spacing: 2px;
 
}

.footer {
  position: absolute;
  right: 80px;
  bottom: 1px;
  left: 0;
  text-align: right;
}






























/***********************/

/* all character's background and btn styling */
/*
.yodaGreen {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/yoda_repmy6.jpg")
}
.yodaGreen-Btn {
  background-color: #008000; 
  color: #fff !important;
}
.yodaGreen-Btn:active , .yodaGreen-Btn:focus, .yodaGreen-Btn:hover {
  background-color: #fff !important;
  color: #008000 !important;
}

.jinnBlue {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/jinn_apbtoi.jpg")
}
.jinnBlue-Btn {
  background-color: #002db3; 
  color: #fff !important;
}
.jinnBlue-Btn:active , .jinnBlue-Btn:focus, .jinnBlue-Btn:hover {
  background-color: #fff !important;
  color: #002db3 !important;
}

.obiBrown {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/obi_imqgyd.jpg")
}
.obiBrown-Btn {
  background-color: #86592d; 
  color: #fff !important;
}
.obiBrown-Btn:active , .obiBrown-Btn:focus, .obiBrown-Btn:hover {
  background-color: #fff !important;
  color: #86592d !important;
}

.lukeSky {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779403/Star%20Wars/luke_lsifgp.jpg")
}
.lukeSky-Btn {
  background-color: #00aaff; 
  color: #fff !important;
}
.lukeSky-Btn:active , .lukeSky-Btn:focus, .lukeSky-Btn:hover {
  background-color: #fff !important;
  color: #00aaff !important;
}

.hanOrange {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484781583/han_frgval.jpg")
}
.hanOrange-Btn {
  background-color: #ff6600; 
  color: #fff !important;
}
.hanOrange-Btn:active , .hanOrange-Btn:focus, .hanOrange-Btn:hover {
  background-color: #fff !important;
  color: #ff6600 !important;
}

.darthBlack {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/vader_vajjzv.jpg")
}
.darthBlack-Btn {
  background-color: #000000; 
  color: #fff !important;
}
.darthBlack-Btn:active , .darthBlack-Btn:focus, .darthBlack-Btn:hover {
  background-color: #fff !important;
  color: #000000 !important;
}

.leiaPink {
  background-img: url("https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/leia_zcoo3x.jpg")
}
.leiaPink-Btn {
  background-color: #ff3399; 
  color: #fff !important;
}
.leiaPink-Btn:active , .leiaPink-Btn:focus, .leiaPink-Btn:hover {
  background-color: #fff !important;
  color: #ff3399 !important;
}
*/
            
          
!
            
              $(document).ready(function() {
    newQuote();
  
  function newQuote(){
    var allQuotes = [
      "Don't underestimate the Force.@- Darth Vader",
      "I find your lack of faith disturbing.@- Darth Vader",
      "When I left you I was but the learner. Now I am the master.@- Darth Vader",
      "I am altering the deal, pray I do not alter it any further….@- Darth Vader",
      "Impressive. Most impressive. Obi-Wan has taught you well. You have controlled your fear. Now, release your anger. Only your hatred can destroy me.@- Darth Vader",
      "Be Careful Not To Choke On Your Convictions.@- Darth Vader",
     
      "Do or do not. There is no try.@- Master Yoda",
      "Truly wonderful, the mind of child is.@- Master Yoda",
      "You must unlearn what you have learned.@- Master Yoda",
      "Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.@- Master Yoda",
      "Named must your fear be before banish it you can.@- Master Yoda",
      "Death is a natural part of life. Rejoice for those around you who transform into the Force.@- Master Yoda",
      "Always in motion is the future.@- Master Yoda",
      "The fear of loss is a path to the Dark Side.@- Master Yoda",
      "May the Force be with you.@- Master Yoda",
      
      "Your focus determines your reality.@- Qui-Gon Jinn",
      "Remember, concentrate on the moment. Feel, don't think. Trust your instincts.@- Qui-Gon Jinn",
      "There's always a bigger fish.@- Qui-Gon Jinn",
      "Greed can be a very powerful ally.@- Qui-Gon Jinn",
      "Keep your concentration here and now, where it belongs.@- Qui-Gon Jinn",
      
      "I felt a great disturbance in the Force, as if millions of voices suddenly cried out in terror and were suddenly silenced.@- Obi-Wan Kenobi", 
      "Who's the more foolish: the fool, or the fool who follows him?@- Obi-Wan Kenobi",
      "Your eyes can deceive you; don't trust them.@- Obi-Wan Kenobi",
      "In my experience there is no such thing as luck.@- Obi-Wan Kenobi",
      "If you strike me down, I shall become more powerful than you could possibly imagine.@- Obi-Wan Kenobi",
      "Use the Force, Luke.@- Obi-Wan Kenobi",
      
      "All right, I'll give it a try.@- Luke Skywalker",
      "I won't fail you. I'm not afraid.@- Luke Skywalker",
      "I'll never join the Dark side.@- Luke Skywalker",
      "You serve your master well. And you will be rewarded.@- Luke Skywalker",
      "The force is strong in my family, my father has it, I have it, and my sister has it.@- Luke Skywalker",
      "May the Force be with you.@- Luke Skywalker",
      "I've got a very bad feeling about this.@- Luke Skywalker",
      "I am a Jedi, like my father before me.@- Luke Skywalker",
      
      "There's no mystical energy field that controls my destiny.@- Han Solo",
      "Look, I ain't in this for your revolution, and I'm not in it for you, princess. I expect to be well paid. I'm in it for the money.@- Han Solo", 
      "Hokey religions and ancient weapons are no match for a good blaster at your side, kid.@- Han Solo",
      "Never tell me the odds!@- Han Solo",
      "You've never heard of the Millennium Falcon?… It’s the ship that made the Kessel run in less than 12 parsecs.@- Han Solo",
      "Women Always Figure Out The Truth. Always.@- Han Solo",

      "The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.@- Princess Leia",
      "Help me Obi-wan Kenobi, you're my only hope.@- Princess Leia",
      "You have your moments. Not many of them, but you do have them.@- Princess Leia",
      "May the Force be with you.@- Princess Leia",
      "You needn't worry about your reward. If money is all that you love, then that's what you'll receive.@- Princess Leia",
      "I hope you know what you're doing.@- Princess Leia",
      "There is a hope.@- Princess Leia"
      
    ];
    
    
    randomQuote = allQuotes[Math.floor(Math.random()*allQuotes.length)];
    quoteAuthor=randomQuote.split("@");
    console.log(quoteAuthor[1]);
		$('.saying').text(quoteAuthor[0]);
    $('.author').text(quoteAuthor[1]);
    
    //set up background imgs with author
    if(quoteAuthor[1] == "- Master Yoda"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485966794/yoda_s1ebbk.jpg)");
    } else if(quoteAuthor[1] == "- Qui-Gon Jinn"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485967025/jinn_pofrax.jpg)");
    } else if(quoteAuthor[1] == "- Obi-Wan Kenobi"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485967215/obi_pndclc.jpg)");
    } else if(quoteAuthor[1] == "- Luke Skywalker"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485966794/luke_wzo4c5.jpg)");
    } else if(quoteAuthor[1] == "- Han Solo"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485966793/han_q0by86.jpg)");
    } else if(quoteAuthor[1] == "- Darth Vader"){
       $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485966794/vader_xwmtll.jpg)");
    } else {
      $("body").css("background-image", "url(https://res.cloudinary.com/starwars/image/upload/v1485966794/princess_vohs5e.jpg)");
    }
    
  }

  $(".button").on("click", function(){
    
    newQuote();
  });
   
});













































/*
//declare vars. of characters' quotes 
var starWarsQuote = "A long time ago in a Galaxy far, \nfar away...";

var yodaQuotes = ['"Do or do not. There is no try."'.@Master Yoda,
   '"Truly wonderful, the mind of child is."'.@Master Yoda,
   '"You must unlearn what you have learned."'.@Master Yoda,
   '"Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering."'.@Master Yoda,
   '"Named must your fear be before banish it you can."'.@Master Yoda,
   '"Death is a natural part of life. Rejoice for those around you who transform into the Force."'.@Master Yoda,
   '"Always in motion is the future."'.@Master Yoda,
   '"The fear of loss is a path to the Dark Side."'.@Master Yoda,
   '"May the Force be with you"'.@Master Yoda];

var jinQuotes = [
  '"Your focus determines your reality."',
  '"Remember, concentrate on the moment. Feel, don\'t think. Trust your instincts."',
  '"There\'s always a bigger fish"',
  '"Greed can be a very powerful ally."',
  '"Keep your concentration here and now, where it belongs."' ];

var ObiQuotes = ['"I felt a great disturbance in the Force, as if millions of voices suddenly cried out in terror and were suddenly silenced."', 
  '"Who\'s the more foolish: the fool, or the fool who follows him?"',
  '"Your eyes can deceive you; don\’t trust them."',
  '"In my experience there is no such thing as luck."',
  '"If you strike me down, I shall become more powerful than you could possibly imagine."',
  '"Use the Force, Luke"',
  '"That\'s no moon. It\'s a space station"'];

var lukeQuotes = ['"All right, I\'ll give it a try."',
   '"I won\'t fail you. I\'m not afraid."',
   '"I\'ll never join the Dark side."',
   '"You serve your master well. And you will be rewarded."',
   '"The force is strong in my family, my father has it, I have it, and my sister has it"',
   '"May the Force be with you"',
   '"I\'ve got a very bad feeling about this."',
   '"I am a Jedi, like my father before me."'];

var hanQuotes = ['"There\'s no mystical energy field that controls my destiny."',
  '"Look, I ain\'t in this for your revolution, and I\'m not in it for you, princess. I expect to be well paid. I\'m in it for the money"', 
  '"Hokey religions and ancient weapons are no match for a good blaster at your side, kid."',
  '"Never tell me the odds!"',
  '"You\'ve never heard of the Millennium Falcon?… It’s the ship that made the Kessel run in less than 12 parsecs."',
  '"Women Always Figure Out The Truth. Always."'];

var vaderQuotes = ['"Don\'t underestimate the Force."',
  '"I find your lack of faith disturbing."',
  '"When I left you I was but the learner. Now I am the master."',
  '"I am altering the deal, pray I do not alter it any further…"',
  '"Impressive. Most impressive. Obi-Wan has taught you well. You have controlled your fear. Now, release your anger. Only your hatred can destroy me."',
  '"Be Careful Not To Choke On Your Convictions."'];

var leiaQuotes = ['"The more you tighten your grip, Tarkin, the more star systems will slip through your fingers."',
   '"Help me Obi-wan Kenobi, you\'re my only hope "',
   '"You have your moments. Not many of them, but you do have them."',
   '"May the Force be with you"',
   '"You needn\'t worry about your reward. If money is all that you love, then that\'s what you\'ll receive."',
   '"I hope you know what you\'re doing."',
   '"There is a hope."'];


var randomChars = [
  ['yodaGreen', 'yodaGreen-Btn', yodaQuotes, '- Master Yoda' ],
  ['jinnBlue', 'jinnBlue-Btn', jinQuotes, '- Qui-Gon Jinn'],
  ['obiBrown', 'obiBrown-Btn', obiQuotes, '- Obi-Wan Kenobi'],
  ['lukeSky', 'lukeSky-Btn', lukeQuotes, '- Luke Skywalker'],
  ['hanOrange', 'hanOrange-Btn', hanQuotes, '- Han Solo'],
  ['darthBlack', 'darthBlack-Btn', vaderQuotes, '- Darth Vader'],
  ['leiaPink', 'leiaPink-Btn', leiaQuotes, '- Princess Leia']
]; 
*/

/*
 //Characters with background image  
    var backgroundChars = {
      yodaGreen: "https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/yoda_repmy6.jpg",
      jinnBlue: "https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/jinn_apbtoi.jpg",
      obiBrown: "https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/obi_imqgyd.jpg",
      lukeSky: "https://res.cloudinary.com/starwars/image/upload/v1484779403/Star%20Wars/luke_lsifgp.jpg",
      hanOrange: "https://res.cloudinary.com/starwars/image/upload/v1484781583/han_frgval.jpg",
      darthBlack: "https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/vader_vajjzv.jpg",
      leiaPink: "https://res.cloudinary.com/starwars/image/upload/v1484779404/Star%20Wars/leia_zcoo3x.jpg"
    }
    
    //Change the background according to the author
function backgroundChange(a){
  var bg;
  if(a.quoteAuthor == "- Master Yoda"){
    bg = background.yodaGreen;
  }
  else if(w.temp <= 10){
    bg = background.tenDegrees;;
  }
  else if(w.temp <= 20){
    bg = background.twentyDegrees;;
  }
  else if(w.temp <= 30){
    bg = background.thirtyDegrees;;
  }
  else{
    bg = background.moreDegrees;;
  }
  $("body").css("background", "url(" + bg + ") no-repeat center center fixed");
}
  
*/
            
          
!
999px
🕑 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.

Console