Pen Settings

HTML

CSS

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

JavaScript

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

Packages

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.

Behavior

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.

HTML

              
                <!--<script src="https://i.imgur.com/cgNdZvs.jpg"></script>-->

<div id="background">

<header>
  <p id="pre-title">The Elder Quotes V</p>
  <h1 id="title">SKYRIM <img id="skyrim-logo" src="https://i.imgur.com/4SAsNfj.png" title="source: imgur.com" /></h1>
  <p id="subtitle">Wisdom that Pierces You Like an Arrow in the Knee</p>
</header>
<main>
<div id='root'></div>
</main>
<footer>
  <p class="footer-element">Made by Arnau Gómez, the Argonian</p>
  <p class="footer-element">Fus-Ro-shoutout to <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp</a> for teaching me React</p>
  <p class="footer-element" id="heart"><i class="fa fa-heart"></i></p>
</footer>
              
            
!

CSS

              
                /*IMPORT*/
@import url('https://fonts.googleapis.com/css2?family=Cardo&family=Cormorant+Infant:ital,wght@0,500;0,600;1,600&family=Cormorant+Unicase:wght@500&display=swap');
/*COM UTILITZAR ELS ESTILS:
font-family: 'Cardo', serif;
font-family: 'Cormorant Infant', serif;
font-family: 'Cormorant Unicase', serif;
*/
#background {
  position: absolute;
  background: url(https://i.imgur.com/cgNdZvs.jpg) center / cover;
  z-index: -1;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}
/*Capçalera*/

body {
  background-color: black;
}

    /*url("http://img.gawkerassets.com/img/185tv35a5xh1ojpg/original.jpg");
  background-position: center;
  background-size: 1500px auto;
  background-attachment: fixed;
  animation: background-change 80s infinite both;*/

/*@keyframes background-change {
  0% {
    background-image: url("https://staticdelivery.nexusmods.com/images/110/2082630-1367749962.jpg");
  }
  20% {
    background-image: url("https://staticdelivery.nexusmods.com/images/110/2082630-1367749962.jpg");
  }
  20% {
    background-image: url("http://img.gawkerassets.com/img/185tv35a5xh1ojpg/original.jpg");
  }
  40% {
    background-image: url("http://wallpapercave.com/wp/Zrspn4W.jpg");
  }
  60% {
    background-image: url("http://wallpapercave.com/wp/Zrspn4W.jpg");
  }
  60% {
    background-image: url("https://staticdelivery.nexusmods.com/mods/110/images/72950-0-1489778576.png");
  }
  80% {
    background-image: url("https://staticdelivery.nexusmods.com/mods/110/images/72950-0-1489778576.png");
  }
  80%{
    background-image: url("https://staticdelivery.nexusmods.com/mods/110/images/55164-1-1403433418.jpg");
  }
  100%{
    background-image: url("https://staticdelivery.nexusmods.com/images/110/2082630-1367749962.jpg");
  }
}*/


header {
  color: white;
  font-family: 'Cormorant Unicase', serif;
  font-size: 25px;
  text-align: center;
  text-shadow: 0px 0px 15px black;
  margin-top: 20px;
}
h1{
  margin: -0.3em auto -0.2em auto;
  font-family: 'Cardo', serif;
  font-size: 100px;
}

#skyrim-logo{
  max-height: 0.8em;
  position: relative;
  bottom: 0.1em;
  shadow: 0px 0px 15px black;
}
/*Peu*/
footer {
  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: black;
  color: gray;
  text-align: center;
  box-shadow: 0px -5px 10px black;
  font-family: 'Cormorant Unicase', serif;
  font-size: 18px
}
.footer-element{
  margin: 3px;
}


/*Part principal de la pàgina*/

#quote-box {
  width: 500px;
  position: relative;
  margin: 50px auto 200px auto;
  display: flex;
  flex-direction: column;
  background-image: url("https://images.unsplash.com/photo-1541140134513-85a161dc4a00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
  padding: 20px;
  border-radius: 15px;
  border-width:7px;  
  border-style:outset;
  font-family: 'Cormorant Infant', serif;
  font-size: 23px;
  color: #333;
  box-shadow: 2px 1px 20px;

}
@media (max-width: 900px){
  #quote-box {
  width: 50vw;
  min-width: 350px;
  }
}
#text{
  text-align: justify;
}
#author{
  text-align: right;
  font-style: italic;
}
#quote-interactive{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#social-media-buttons{
  display: flex;
  align-items: center;
}
.social-media-button{
  margin: 0px 10px 0px 10px;
}

#tumblr-quote {
  color: #444;
}
#tumblr-quote:hover {
  animation: tumblr-illumine 1.5s linear 0s;
  animation-fill-mode: forwards
}
@keyframes tumblr-illumine {
  100% {
    color: #021935;
  }
}
#tweet-quote{
  color: #444;
}
#tweet-quote:hover {
  animation: twitter-illumine 1.5s linear 0s;
  animation-fill-mode: forwards
}
@keyframes twitter-illumine {
  100% {
    color: #1DA1F2;
  }
}
#new-quote{
  color: white;
  border-radius: 10px;
  border-style: outset;
  background-image: url("https://images.unsplash.com/photo-1550053808-52a75a05955d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  background-position: left;
}
@media (max-width: 500px){
  header{
    font-size: 20px;
    margin: auto 30px auto 30px;
  }
  h1 {
    font-size: 50px;
  }
  #quote-box {
    font-size: 20px;
  }
}
              
            
!

JS

              
                const quotes = [
  {
  author: "Lucien Lachance, the Spectral Assassin",
  quote: "Perhaps we should find a random stranger to murder. Practice does make perfect."
  },
  {
    author: "Downstar Guard",
    quote: "I used to be an adventurer like you. Then I took an arrow in the knee."
  },
   {
    author: "Solitude Guard",
    quote: "Let me guess. Someone stole your sweetroll!"
  },
   {
    author: "Brenuin",
    quote: "Either I'm drunk, or you're naked. Possibly both."
  },
   {
    author: "Paarthurnax",
    quote: "What is better - to be born good, or to overcome your evil nature through great effort?"
  },
   {
    author: "Guard",
    quote: "I used to be the top soldier for the Stormcloaks, then i took a sword to the chest."
  },
   {
    author: "Dragonborn",
    quote: "Fus Ro Dah!"
  },
   {
    author: "Dirge (Thieves Guild Member)",
    quote: "I told they call me Dirge because I'm the last thing you hear before they put you in the ground."
  },
   {
    author: "Guard",
    quote: "My cousin is out fighting dragons. And what do I get? Guard duty."
  },
   {
    author: "Nazir",
    quote: "You stink of death my friend. I salute you."
  },
   {
    author: "Bard",
    quote: "[singing] Oh, there once was a hero named Ragnar the Red, who came riding to Whiterun from ole Rorikstead. And the braggart did swagger and brandish his blade as he told of bold battles and gold he had made. But then he went quiet, did Ragnar the Red when he met the shield-maiden Matilda, who said; \"Oh, you talk and you lie and you drink all our mead; now I think it's high time that you lie down and bleed!\". And so then came clashing and slashing of steel, as the brave lass Matilda charged in, full of zeal. And the braggart named Ragnar was boastful no moooore when his ugly red head rolled around on the floor!"
  }
               ];

// Start of the program
class QuoteBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quoteNumber: Math.floor(Math.random() * quotes.length)
    }
    this.handleChange = this.handleChange.bind(this);
  }
    
  handleChange() {
    let newNumber = Math.floor(Math.random() * quotes.length);
    while (newNumber === this.state.quoteNumber){
      newNumber = Math.floor(Math.random() * quotes.length);
    }
    this.setState({
      quoteNumber: newNumber
    });
  }
  
  render() {
    let random = this.state.quoteNumber;
    return (
      <div id="quote-box">
        <div id="quote-text">
          <p id="text"><i className="fa fa-quote-left"> </i> {quotes[random].quote}</p> {/*Falta fer random el número*/}
          <p id="author">{quotes[random].author}</p> {/*Falta fer random el número*/}
        </div>
        <div id="quote-interactive">
          <Button handleChange={this.handleChange} />
          <TweetQuote quoteText={quotes[random].quote} quoteAuthor={quotes[random].author}/>
        </div>
      </div>
    );
  }
}

class Button extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
  return (
      <button id="new-quote" onClick={this.props.handleChange}>New quote</button>
    );
  }
}
class TweetQuote extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div id="social-media-buttons">
      <a id="tweet-quote" className="social-media-button" href={'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + this.props.quoteText + '" - ' + this.props.quoteAuthor + ". Check out Skyrim quotes at https://codepen.io/Nerdifico/pen/pogVNxz")} target="_blank"><i class="fa fa-twitter"></i></a>
      <a id="tumblr-quote" className="social-media-button" href={
            'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(this.props.quoteAuthor)+'&content=' + encodeURIComponent(this.props.quoteText)+'&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button'
          } target="_blank"><i class="fa fa-tumblr"></i></a>
      <p></p>
      </div>
    )
  }
}



ReactDOM.render(<QuoteBox />, document.getElementById('root'));
              
            
!
999px

Console