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

              
                        <div class="container-fluid">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-xs-12">

                        <header>
                            <h1 class="text-center">Elon Musk</h1>
                            <h2 class="text-center">The man behind Paypal, SpaceX, Tesla Inc, OpenAI, Starlink, Neuralink, Hyperloop, SolarCity and Halcyon Molecular (and Blastar game <i class="em-svg em-stuck_out_tongue_winking_eye"></i>)</h2>
                        </header>

                        <div class="col-xs-12">
                            <main>
                                <!--figure element does not center the image correctly-->
                                <!-- <figure class="figure" id="figure">
                                    <img class="figure-img img-fluid rounded" src="https://upload.wikimedia.org/wikipedia/commons/4/49/Elon_Musk_2015.jpg" alt="Elon Musk photo from Wikipedia" />
                                    <figcaption class="figure-caption text-center">Elon Musk photo from Wikipedia</figcaption>
                                </figure> -->
                                <div class="thumbnail"><img src="https://upload.wikimedia.org/wikipedia/commons/4/49/Elon_Musk_2015.jpg">
                                    <div class="caption text-center">Elon Musk photo from Wikipedia</div>
                                </div>
                                <h3>A brief timeline of his life:</h3>
                                <ul class="bigger-font">
                                    <li><strong>1983: </strong>He taught himself computer programming at the age of 12 and sold the code of a BASIC video game he created called Blastar, to a magazine for approximately $500.</li>
                                    <li><strong>1995: </strong>Musk and his brother, Kimbal, started Zip2, a web software company</li>
                                    <li><strong>1999: </strong>In March 1999, Musk co-founded X.com, an online financial services and e-mail payment company, with US$10 million from the sale of Zip2, that now is called PayPal</li>
                                    <li><strong>2002: </strong>Musk founded Space Exploration Technologies, or SpaceX, with the background idea of a "Mars Oasis": a project to land a miniature experimental greenhouse on Mars</li>
                                    <li><strong>2006: </strong>SpaceX was awarded a contract from NASA to continue the development and test of the SpaceX Falcon 9 the <em>FIRST</em> reusable rocket to deliver cargo to ISS and satellites in orbit (even if this originally was a Blue Origin idea)</li>
                                    <li><strong>2008: </strong>Musk assumed leadership of Tesla Inc as CEO and product architect after a financial crisis of 2008</li>
                                    <li><strong>2013: </strong>Musk unveiled a concept for a high-speed transportation system</li>
                                    <li><strong>2015: </strong>Musk announced the creation of OpenAI, a not-for-profit artificial intelligence research company. OpenAI aims to develop artificial general intelligence in a way that is safe and beneficial to humanity</li>
                                    <li><strong>2015: </strong>SpaceX successfully landed the first stage of its Falcon rocket back at the launch pad</li>
                                    <li><strong>2016: </strong>Musk co-founded Neuralink, a neurotechnology startup company, to integrate the human brain with artificial intelligence</li>
                                    <li><strong>2018: </strong>SpaceX successfully launched the Falcon Heavy, the fourth-highest capacity rocket ever built and the most powerful rocket in operation as of 2018. The inaugural mission carried a Tesla Roadster belonging to Musk as a dummy payload, <em>how awesome!</em></li>
                                </ul>
                                <blockquote class="blockquote">
                                    <p>An asteroid or a super volcano could destroy us, and we face risks the dinosaurs never saw: an engineered virus, inadvertent creation of a micro black hole, catastrophic global warming or some as-yet-unknown technology could spell the end of us. Humankind evolved over millions of years, but in the last sixty years atomic weaponry created the potential to extinguish ourselves. Sooner or later, we must expand life beyond this green and blue ball... or go extinct.</p>
                                    <footer class="blockquote-footer"><cite>Elon Musk</cite></footer>
                                </blockquote>
                            </main>
                        </div>
                        <footer>
                            <p class="text-center">If you want to know more check the <a href="https://en.wikipedia.org/wiki/Elon_Musk">Wikipedia page</a> about him</p>
                            <hr>
                            <p class="text-center"><small>Written by <a href="https://www.freecodecamp.org/giovannimenzano">Giovanni Menzano</a></small></p>
                        </footer>

                    </div>
                </div>
            </div>
        </div>
              
            
!

CSS

              
                body {
  margin-top: 50px;
}
.bigger-font {
  font-size: 15px;
}
              
            
!

JS

              
                
              
            
!
999px

Console