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

              
                
<div class="container">
  <div class="title text-center">
    <h1>Elon Musk</h1>
    <h2><i>The Man Who's Reshaping Our World</i></h2>   </div>
  <div class="thumbnail"><img     src="http://www.telegraph.co.uk/content/dam/technology/2017/05/24/TELEMMGLPICT000128274534-large_trans_NvBQzQNjv4Bq0yUt6ugM98uus3IXa1PYRdXQjbVb1z_p_gStmbOtpJw.jpeg">
    <div class="caption text-center"> Elon Musk unveils the company's newest products in 2015
    </div>
  </div>


  <div class="content">
    <p>Here's a time line of Elon Musk's life:</p>
    <ul>
    <li><b>1971 </b>- Born in Pretoria, Transvaal, South Africa</li>
    <li><b>1981 </b>- Develops interest in computing using Commodore VIC-20</li>
    <li><b>1983 </b>- Sell video game he created called Blastar for $500</li>
    <li><b>1989 </b>- Moves to Canada</li>
    <li><b>1995 </b>- Start Zip2, a web software company with US$2,000 </li>
    <li><b>1997 </b>- Receives a Bachelor of Science degree in physics from University of Pennsylvania</li>
    <li><b>1998 </b>- Receives a Bachelor of Science degree in economics from University of Pennsylvania</li>
    <li><b>1997 </b>- Receives US$22 million from Zip2 sale</li>
    <li><b>1999 </b>- Co-founds X.com (later called PayPal), online financial services and e-mail payment company with US$10 million</li>
    <li> <b>2002 </b>- Receives US$165 million from PayPal sale</li>
    <li><b>2002 </b>- Founds SpaceX which develops and manufactures space launch vehicles with US$100 million</li>
    <li><b>2004 </b>- Invest in Tesla, Inc.</li>
    <li><b>2006 </b>- SpaceX awarded a contract from NASA</li>
    <li><b>2006 </b>- Helps start SolarCity</li>
    <li><b>2008 </b>- Assumes leadership of the company as CEO and product architect</li>
    <li><b>2013 </b>- Unveils Hyperloop concept</li>
    <li><b>2015 </b>- Falcon rocket succesfully landed at the launch pad</li>
    <li><b>2015 </b>- Announces the creation of OpenAI, a not-for-profit AI research company</li>
    <li><b>2016 </b>- Tweets his idea to make "Boring Company"</li>
    <li><b>2016 </b>- Co-founds Neuralink  neurotechnology startup company, to integrate the human brain with artificial intelligence</li>
    <li><b>2017 </b>- Boring Company begins digging in Los Angeles</li>
    </ul>
  </div>

  <div class="contentBottom">
    <h3 id="quote">"When something is important enough, you do it even if the odds are not in your favor."</h3>
    <p id="quoteName"><i> -Elon Musk</i></p>
    <h4>You can read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Wikipedia entry</a>.</h4>       </div>    
</div>
<footer class="text-center">
  <hr>
  <i>Written and coded by <a href="https://www.freecodecamp.org/fcc4a71db2c" target="_blank">Fajar Putra</a></i>
</footer>
              
            
!

CSS

              
                .title {
  background-color: lightgrey;
  margin-top: 60px;
}

.thumbnail {
  background-color: lightgrey;  
}

.content {
  background-color: lightgrey;  
  margin-top: 20px;
}

.contentBottom {
  background-color: lightgrey;  
  margin-top: 20px;
}


              
            
!

JS

              
                
              
            
!
999px

Console