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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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

            
              <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
  
  <h1 id="title">Mariano Rivera: The Greatest of All Time</h1>
  <div id="img-div">
  <img id="image" src="http://2.bp.blogspot.com/-a4PnGWt1Ys0/URg8rFh-27I/AAAAAAAAHhw/d_SQ8FvwMxE/s1600/2-mo.jpg">
  <figcaption id="img-caption">Mariano Rivera pitching in the 2009 World Series</figcaption>
  </div>
    <h3>History of the greatest closer of all:</h3>
    <div id="tribute-info">
      <img
class="symbol"           id="image1" src="https://1000logos.net/wp-content/uploads/2017/05/New-York-Yankees-Logo-500x462.png">
      <ul id="list">
        <li>1990: Mariano signs for the Yankees as a 20 year old unrestricted free agent.</li>
        <li>May 23<sup>rd</sup>, 1995: Rivera makes his major league debut as he starts the game, giving up 5 runs and 8 hits in a 10-0 loss.</li>
        <li>May 17<sup>th</sup>, 1996: Now working out of the bullpen, Mariano pitches a scoreless ninth inning, and earns his first save.</li>
        <li>Oct. 26<sup>th</sup>, 1996: Mariano setups John Witteland to close out Game 6 for his first World Series ring.</li>
        <li>1997: The Yankees decide to promote Rivera to the closer and signs a new four-year contract.</li>
        <li>June 1997: During a game of catch, Rivera accidentally stumbles upon a pitch, which will develop into his signature cutter, renowned for breaking bats.</li>
        <li>Oct. 21<sup>st</sup>, 1998: Rivera helps the Yankees to a franchise record 114-win regular season. He caps off his second World Series championship getting Mark Sweeney to groundout for the final out.</li>
        <li>Oct. 27 <sup>th</sup>, 1999: Rivera leads the Yankees to their second World Series in a row, 3<sup>rd</sup> in 4 years, and helps sweep the Braves, earning 2 saves and a win en route to being named World Series MVP.</li>
        <li>Oct 26<sup>th</sup>, 2000: Rivera and the Yankees return to the World Series again, and helps the Yankees to their third consecutive World Series ring, earning his seventh World Series save, a new record.</li> 
        <li>Nov 4<sup>th</sup>, 2001: Rivera and the Yankees return to the World Series, where they go seven games. Rivera falters in the final game, losing the game, his only postseason loss in 96 appearances.</li>
        <li>May 28<sup>th</sup>, 2004: Rivera pitches a scoreless ninth inning against the Devil Rays, becoming the first Yankee and 17<sup>th</sup> big leaguer to record 300 saves.</li>
        <li>July 16<sup>th</sup>, 2006: Rivera seals a 6-4 victory over the White Sox, earning his 400<sup>th</sup> save, one of 4 pitchers to do so.</li>
        <li>June 28<sup>th</sup>, 2009: In one of his seven career plate appearances, Rivera earns his one and only RBI on a bases load walk against the Mets. He closes them out in the ninth inning to earn the save, the 500<sup>th</sup> of his career, joining Trevor Hoffman as the only players to reach the milestone.</li>
        <li>Nov. 4<sup>th</sup>, 2009: Rivera records the final five outs of the World Series to secure the Yankees 27<sup>th</sup> and most recent championship, the fifth of his career.</li>
        <li>May 25<sup>th</sup>, 2011: Rivera becomes the 15<sup>th</sup> pitcher to pitch in 1,000 games, logging three outs in a 7-3 victory over the Blue Jays.</li>
        <li>Sep. 13<sup>th</sup>, 2011: Rivera records his 600<sup>th</sup> save, closing a 3-2 victory over the Mariners.</li>
        <li>Sep. 17<sup>th</sup>, 2011: Rivera equals Hoffman for the all-time saves record with his 601<sup>st</sup> save, protecting a 7-6 win over the Blue Jays.</li>
        <li>Sep. 19<sup>th</sup>, 2011: Rivera becomes the all-time saves leader with his 602<sup>nd</sup> save, recording the final three outs in a 6-4 win over the Twins at Yankee Stadium.</li>
        <li>Sep. 18<sup>th</sup>, 2013: Rivera records the final save of his career, an all-time record of 652, in a 4-3 win at the Toronto Blue Jays.</li>
        <li>Sep. 26<sup>th</sup>, 2013: Andy Petite and Derek Jeter ceremoniously come out to the mound to retrieve the ball from Mariano Rivera in the final appearance of his career with two outs in the ninth inning. He leaves the mound with a standing ovation from the home crowd at Yankee Stadium.</li>
        <li>Jan. 22<sup>nd</sup>, 2019: Eivera is unanimously elected to the National Baseball Hall of Fame, appearing on all 425 ballots cast by eligible members.</li>
      </ul>    
      <img class="symbol" id="image2" src="https://1000logos.net/wp-content/uploads/2017/05/New-York-Yankees-Logo-500x462.png">  
  </div>
      <p>Learn more about the greatest closer to ever play baseball, go to his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Mariano_Rivera" target="_blank">Wikipedia Page</a> to learn more about him.</p>
      </main>

            
          
!

CSS

            
              main{
  font-family: arial;
  
  margin: 0;
  background: #1c2841;
  color: #FFF;
  text-align: center;
  margin: 0;
}
#main {
  margin: 30px 5px;
  padding: 15px;
  border-radius: 5px;
}
#img-caption {
  margin: 15px 0 15px 0;
}
#image {
  max-width: 60vw;
  display: block;
  margin: 0 auto 0 auto;
  height: auto;
  border-radius: 15px;
}
#img-div {
  background: gray;
  padding: 10px;
  border-radius: 10px;
  
}
ul {
  text-align: left;
  margin: 0 auto 0 auto;
  max-width: 500px;
  min-width:300px;
  line-height: 1.5rem;
}
li {
  margin: 0 auto 15px auto;
}
#tribute-info {
  display: flex;
  justify-content: space-between;
}
.symbol{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  bottom: 0;
  max-height:90vh; 
}
#tribute-link {
  color: #000;
}
#tribute-link:hover {
  color: pink;
}

            
          
!

JS

            
              
            
          
!
999px

Console