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.

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

              
                <!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css">
      <link <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="styles.css">
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
      <title>Tribute Page</title>
   </head>
   <body>
      <div id="main">
         <div class="container">
            <h1 id="title">Pelé</h1>
            <div id="img-div">
               <img id="image" src="http://media.liveauctiongroup.net/i/33796/29047414_1.jpg?v=8D55C2E10D97150" class="img-center" alt "Pelé bicycle kick">
               <h4 id="arrow"><marquee  behavior="scroll" direction="down"> V</marquee></h4>

            <div id="img-caption">
               Pelé performing the famous overhead kick against Belgium in 1968.
            </div>
            </div>
         </div>
         <div id="tribute-info">
            <ul style="list-style-type:none">
               <h3 id="headline">Pelé Honours:</h3>
               <li>
                  <strong><font color="#ffdf00">INTERNATIONAL</font></strong> - <strong>Brazil</strong>
                  <ul>
                     <li>FIFA World Cup (3): 1958, 1962, 1970</li>
                  </ul>
               </li>
               </li>
               <p></p>
               <li>
                  <strong><font color="#ffdf00">CLUB</font></strong> - <strong>Santos FC</strong>
                  <ul>
                     <li>Campeonato Brasileiro Série A (6): 1961, 1962, 1963, 1964, 1965, 1968</li>
                     <li>Copa Libertadores (2): 1962, 1963</li>
                     <li>Intercontinental Cup (2): 1962, 1963</li>
                     <li>Intercontinental Supercup: 1968</li>
                     <li>Campeonato Paulista (10): 1958, 1960, 1961, 1962, 1964, 1965, 1967, 1968, 1969, 1973</li>
                     <li>Torneio Rio-São Paulo (4): 1959, 1963, 1964</li>
                  </ul>
               </li>
               <p></p>
               <p class="tab"><strong>New York Cosmos</strong></p>
               <li>
                  <ul>
                     <li>North American Soccer League, Soccer Bowl: 1977</li>
                     <li>North American Soccer League, Atlantic Conference Championship: 1977</li>
                     <p></p>
                  </ul>
               </li>
               <li>
                  <strong><font color="#ffdf00">INDIVIDUAL</font></strong> - <strong>Santos FC</strong>
                  <ul>
                     <li>Copa Libertadores Top Scorer: 1965</li>
                     <li>Campeonato Paulista Top Scorer (11): 1957, 1958, 1959, 1960, 1961, 1962, 1963, 1964, 1965, 1969, 1973</li>
                     <li>Torneio Rio-São Paulo Top Scorer: 1963</li>
                     <li>Bola de Prata: 1970</li>
                  </ul>
               </li>
               <p></p>
               <p class="tab"><strong>Brazil</strong></p>
               <li>
                  <ul>
                     <li>FIFA World Cup Best Young Player: 1958</li>
                     <li>FIFA World Cup Golden Ball (Best Player): 1970</li>
                     <li>Copa America Best Player: 1959</li>
                     <li>Copa América Top Scorer: 1959</li>
                     <p></p>
                  </ul>
                  <p></p>
                  <p class="tab"><strong>Other Awards</strong></p>
               <li>
                  <ul>
                     <li>FIFA Ballon d'Or Prix d'Honneur: 2013</li>
                     <li>Ballon d'Or (7): 1958, 1959, 1960, 1961, 1963, 1964, 1970 - Le nouveau palmarès (the new winners)</li>
                     <li>FIFA Player of the Century: 2000[</li>
                     <li>FIFA Order of Merit: 1984</li>
                     <li>FIFA Centennial Award: 2004</li>
                     <li>FIFA 100 Greatest Living Footballers: 2004</li>
                     <li>BBC Overseas Sports Personality of the Year: 1970</li>
                     <li>BBC Sports Personality of the Year Lifetime Achievement Award: 2005</li>
                     <li>Laureus Lifetime Achievement Award: 2000</li>
                     <li>Greatest football player to have ever played the game, by Golden Foot: 2012</li>
                     <li>Athlete of the Century, by Reuters News Agency: 1999</li>
                     <li>Athlete of the Century, elected by International Olympic Committee: 1999</li>
                     <li>South American Footballer of the Year: 1973</li>
                     <li>Football Player of the Century, elected by France Football's Ballon d'Or Winners: 1999</li>
                     <li>Inducted into the American National Soccer Hall of Fame: 1992</li>
                     <li>World Team of the 20th Century: 1998</li>
                     <li>TIME: One of the 100 Most Important People of the 20th century: 1999</li>
                     <li>World Soccer Greatest XI of All Time: 2013</li>
                     <li>FWA Tribute Award: 2018</li>
                     <p></p>
                  </ul>
               <li>
                  <strong><font color="#ffdf00">PERSONAL RECORDS</font></strong>
                  <ul>
                     <li>Brazil national football team: All-time leading goalscorer: 77 goals (95 goals including unofficial friendlies).</li>
                     <li>Santos: All-time leading goalscorer: 643 goals in 656 competitive games</li>
                     <li>Intercontinental Cup: All-time leading goalscorer: 7 goals</li>
                     <li>Guinness World Records: Most career goals (football): 1283 goals in 1363 games</li>
                     <li>Guinness World Records: Most FIFA World Cup winners' medals: three</li>
                     <li>Guinness World Records: Youngest winner of a FIFA World Cup: 17 years and 249 days in 1958 FIFA World Cup</li>
                     <li>Youngest goalscorer in the FIFA World Cup: 17 years and 239 days (Brazil v Wales 1958)</li>
                     <li>Youngest player to score a hat-trick in the FIFA World Cup: 17 years and 244 days (Brazil v France 1958)</li>
                     <li>Youngest player to play in a FIFA World Cup Final: 17 years and 249 days (Brazil v Sweden 1958)</li>
                     <li>Youngest goalscorer in a FIFA World Cup Final: 17 years and 249 days (Brazil v Sweden 1958)</li>
                  </ul>
               </li>
            </ul>
            <p></p>
            <blockquote>
               <p>
                  <font color="#002776">
                     “My name is Ronald Reagan, I’m the President of the United States of America. But you don’t need to introduce yourself, because everyone knows who Pele is.”
               </p>
               <div><strong>Ronald Reagan</strong></font></div>
            </blockquote>
            <h3 class="tab2">For more amazing records and to findout more about Pele's life <a id="tribute-link" href="https://en.wikipedia.org/wiki/Pel%C3%A9" target="_blank">click here</a>.</h3>
            <p></p>
         </div>
      </div>
   </body>
              
            
!

CSS

              
                body {
  background-color: #009c3b;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  margin: 0;
}

#title {
  font-weight: 700;
  font-size: 200px;
  margin: 0;
  color: #002776;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: solid black;
  border-top: solid black;
}

#arrow {
  font-weight: 700;
  font-size: 50px;
  margin: 0;
  color: white;
  opacity: 0.6;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
  }

#image {
  max-width: 100%; 
  display: block; 
  height: auto;
  width: 1423px;
}

#img-caption {
  text-align: center;
  font-size: 14px;
}


.img-center {
  max-width: 100%; 
  display: block; 
  height: auto;
  margin: auto;
}

#headline {
  font-weight: 700;
  color: #002776;
  font-size: 50px;
  margin: 25px auto 25px auto;
}

li {
  font-weight: 400;
  font-size: 25px;
  color: #002776;
}

.tab { 
  margin-left: 90px;
  font-weight: 400;
  font-size: 25px;
  color: #002776; 
  margin-bottom: 0;
}

.tab2 { 
  margin-left: 90px;
  font-weight: 400;
  font-size: 25px;
  margin-bottom: 0;
}

#tribute-link {
  color: #002776;
}
              
            
!

JS

              
                
              
            
!
999px

Console