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

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

<header>
  <div id="img">
    <div id="img-div">
      <img id="image" src="https://metrouk2.files.wordpress.com/2017/08/8272826701.jpg?w=748&h=498&crop=1" alt="An image of Romelu Lukaku">
      <div id="img-caption">
      <p>Romelu Lukaku, Manchester United Striker
      </p>
    </div>
  </div>
  </div>
</header>
 
<div id="title">
  
  <body id="main">
    <div id="tribute-info">
      <h3 class="life">The Life of Romelu Lukaku</h3>
      <p>Romelu Lukaku was born in Antwerp, a city in northern Belgium to Congolese parents in 1993. His father, Roger Lukaku, played professional football and was capped at international level by Zaire.
      </p>
      <p>Romelu Lukaku was the subject of a television documentary series called <em>De School Van Lukaku</em> (Lukaku's School) shown on the Dutch-speaking Een network.
      </p>
      <p>Romelu Lukaku has had an illustrious football career and is still such a delight to watch on the football field.
      </p>
      </div>
    </div>
     
      <h3>Romelu Lukaku's Soccer Career</h3>
      <ul>
        <li><em>2008 to 2012:</em> FC Andelecht playing in the Belgian First Division and Belgian Pro League.</li>
        <li><em>2011 to 2014:</em> FC Chelsea playing in the English Premier League.</li>
        <li><em>2012 to 2013:</em> On loan to West Bromwich Albion FC from Chelsea FC playing in the English Premier League.</li>
        <li><em>2013 to 2014:</em> On loan to Everton FC from Chelsea FC playing in the English Premier League.</li>
        <li><em>2014 to 2017:</em> Everton FC playing in the English Premier League.</li>
        <li><em>2017 to 2018:</em> Manchester United FC playing in the English Premier League.</li>
      </ul>
   
      <div id="achievement">
      <h3>Romelu Lukaku's Achievements</h3>
      <p>Romelu Lukaku has shown so much promise on the football field and has won numerous awards to that effect;
        </p>
      <ul>
      <li>Lukaku is the first premier league player to join Jay-Z's management agency <em>Roc Nation Sports.</em>
      </li>
      <li>In 2018, Lukaku signed a record sponsorship deal with German sportswear company <em>PUMA</em>, the company's largest endorsement deal ever.</li>
        <li>In 2009, he won the <em>Belgian Sportsman Promising Talent of the Year.</em></li>
        <li><em>Belgian Bronze Shoe Award 2009</em></li>
        <li><em>2010 Belgian Pro League Top Scorer</em></li>
        <li><em>2010 Belgian Silver Shoe Award</em></li>
        <li><em>2011 Belgian Ebony Shoe Award</em></li>
        <li><em>2015 UEFA Europa League Top Scorer</em></li>
        <li><em>2016 Everton Young Player of the Season</em></li>
        <li><em>2016 Everton Goal of the Season</em></li>
        <li><em>2017 Everton Player of the Season</em></li>
        <li><em>2017 FIFA Pro World XI 4th Team Award</em></li>
        <li><em>2018 FIFA World Cup Bronze Boot Award</em></li>
      </ul>
    </div>
      
    </div> <!--"tableRow"-->
    </div> <!--"tableContainer"-->
      
    <div id="quote">
        <blockquote>
          <p>"I'm Romelu Lukaku - At the end of the day, I want to create my own history."</p>
          <div>--Romelu Lukaku</div>
      </blockquote>
      </div>
      <div id="video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/AiXC1fWCMxg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
      </body>
    <footer>
      <div id="moreInfo">
        <p>For more indepth information about Romelu Lukaku, please see his <a id="tribute-link" href="https://en.wikipedia.or/wiki/Romelu_Lukaku" target="_blank">his wikipedia page</a>.</p>
      </div>
    </footer>
      
     
      
    
    
  
              
            
!

CSS

              
                body {
  font-family: Trebuchet, Comic Sans MS, sans-serif;
  font-size: small;
  font-weight: bold;
  background-color: #ddd;
  margin: 0px;
  line-height: 1.6em;
  
}

h3 {
  font-size: 120%;
  text-align: center;
}

blockquote {
  font-style: italic;
   text-align: center;
}


#video {
  text-align: center;
}
#moreInfo {
  text-align: center;
  background-color: #d3d3d3;
  padding: 15px;
  margin: 10px;
}
#tribute-info {
  display: table-cell;
  padding: 15px;
  margin: 0px 10px 10px 10px;
  
  
}
#achievement {
  display: table-cell;
  padding: 15px;
  margin: 0px 10px 10px 10px;
  
}
#image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}
#img-caption {
  text-align: center;
  font-style: italic;
}

}


              
            
!

JS

              
                
              
            
!
999px

Console