css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

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 lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Elon Musk Tribute Page</title>

    <!-- Bootstrap v4.0.0-alpha.5 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="well">
              <h1 class="text-center">Elon Musk</h1>
              <h2 class="text-center"><em>Entrepreneur, Engineer, Inventor and Investor</em></h2>
            <figure class="figure">
              <img src="https://d.ibtimes.co.uk/en/full/1416904/elon-musk-spacex-rocket.jpg" class="figure-img img-fluid rounded" alt="Elon Musk speaking for SpaceX">
              <figcaption class="figure-caption text-xs-right">Elon Musk speaking in front of a SpaceX Rocket</figcaption>
              <div class="timeline">
                <blockquote class="blockquote">
                  <p class="mb-0">"If something is important enough, even if the odds are against you, you should still do it."</p>
                  <footer class="blockquote-footer">Elon Musk</footer>
                <h3 class="text-center">Here's a timeline of Elon Musk's Life and Businesses</h3>
                  <li><strong>1971</strong> - Born in Pretoria, Transvaal, South Africa</li>
                  <li><strong>1980</strong> - Parents divorced and Elon lived mostly with his father in South Africa.</li>
                  <li><strong>1981</strong> - Became interested in computing with the Commodore VIC-20</li>
                  <li><strong>1883</strong> - Taught himself to learn code. Made a game in BASIC named <em>Blastar</em> which he sold for $500</li>
                  <li><strong>1989</strong> - Moved to Canada</li>
                  <li><strong>1990</strong> - Attended Queen's University in Kingston, Ontario</li>
                  <li><strong>1995</strong> -  Received a Bachelor of Science degree in physics and a Bachelor of Science degree in economics from  University of Pennsylvania</li>
                  <li><strong>1995</strong> - Started Zip2, a web software company, with $28,000 from his father</li>
                  <li><strong>1999</strong> - Compaq acquired Zip2 for US$307 million in cash and US$34 million in stock options. Musk received 7% or US$22 million from the sale</li>
                  <li><strong>1999</strong> - Musk founded X.com, an online financial services company, with $10 million from the sale of Zip2</li>
                  <li><strong>2000</strong> - X.com merged with Confinity which owned the money transfer service, Paypal</li>

                <blockquote class="blockquote">
                  <p class="mb-0">"Persistence is very important. You should not give up unless you are forced to give up."</p>
                  <footer class="blockquote-footer">Elon Musk</footer>

                  <li><strong>2000</strong> - Musk was ousted in October 2000 from his role as CEO (although he remained on the board) due to disagreements with other company leadership, notably over his desire to move PayPal's Unix-based infrastructure to Microsoft Windows.</li>
                  <li><strong>2001</strong> - Company was renamed to Paypal</li>
                  <li><strong>2002</strong> - Became a US Citizen</li>
                  <li><strong>2002</strong> - With US$100 million of his early fortune, Musk founded Space Exploration Technologies, or SpaceX, in June 2002.</li>
                  <li><strong>2002</strong> - In October 2002, PayPal was acquired by eBay for US$1.5 billion in stock. Musk was the largest shareholder at 11.7% so he received US$165 million.</li>
                  <li><strong>2004</strong> - Musk led a Series A investment into Tesla Motors and joined the board as its chairman.</li>
                  <li><strong>2006</strong> - Musk provided the initial concept and financial capital for SolarCity, which was then co-founded in 2006 by his cousins Lyndon and Peter Rive. Musk remains the largest shareholder. </li>
                  <li><strong>2008</strong> - SpaceX's Falcon 1 rocket became the first privately funded liquid-fueled vehicle to put a satellite into Earth orbit.</li>
                  <li><strong>2008</strong> - Following the 2008 financial crisis, Musk assumed the role of CEO at Tesla Motors</li>
                  <li><strong>2008</strong> - Tesla Motors first built an electric sports car, the Tesla Roadster in 2008, with sales of about 2,500 vehicles to 31 countries. </li>

                <blockquote class="blockquote">
                  <p class="mb-0">"You want to have a future where you're expecting things to be better, not one where you're expecting things to be worse."</p>
                  <footer class="blockquote-footer">Elon Musk</footer>

                  <li><strong>2012</strong> - The SpaceX Dragon vehicle berthed with the ISS, making history as the first commercial company to launch and berth a vehicle to the International Space Station.</li>
                  <li><strong>2012</strong> - Tesla began delivery of its four-door Model S sedan</li>
                  <li><strong>2014</strong> - Musk announced that Tesla Motors will allow its technology patents to be used by anyone in good faith in a bid to entice automobile manufacturers to speed up development of electric cars.</li>
                  <li><strong>2015</strong> - SpaceX successfully landed the first stage of its Falcon rocket back at the launch pad.</li>
                  <li><strong>2015</strong> - Musk announced the creation of OpenAI, a not-for-profit artificial intelligence (AI) research company. OpenAI aims to develop artificial general intelligence in a way that is safe and beneficial to humanity.</li>
                  <li><strong>2016</strong> - Tesla Motors, formally submitted an offer to acquire SolarCity.</li>
                  <li><strong>2016</strong> - Elon has an estimated net worth of US$11.5 billion, making him the 83rd wealthiest person in the world.</li>
                  <li><strong>2022</strong> - Musk's goal year for first unmanned flight of the larger Mars Colonial Transporter (MCT) spacecraft.</li>
                  <li><strong>2024</strong> - Musk's goal year for first manned Mars Colonial Transporter flight departing.</li>

                <blockquote class="blockquote">
                  <p class="mb-0">"I would like to die on Mars. Just not on impact."</p>
                  <footer class="blockquote-footer">Elon Musk</footer>

                <h3>If you have time, you should read more about Elon Musk on his <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Wikipedia page.</a></h3>
              </div> <!-- /timeline -->
          </div> <!-- /well -->
        </div> <!-- /col -->
      </div> <!-- /row -->
    </div> <!-- /container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
              .timeline {
  margin: 0 auto;
  width: 90%
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................