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

              
                <!-- 12/26/17 8:03 p.m.:Currently trying to fix scrollspy. I think it has to do with my custom CSS on the navbar, not sure though-->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

<!-- Scripts needed to be added for navbar dropdown menu functionality to work properly -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<body>
  
  <div class=navWrapper>
  <nav id="navBear" class="navbar navbar-expand-lg bg-light navbar-light fixed-top">
    <a class="navbar-brand" href="#top">Elon Musk</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" href="#earlyLife"> <i class="fas fa-venus-mars"></i> Early Life</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#education">  <i class="fas fa-graduation-cap"></i> Education </a>
      </li> 
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-rocket"></i> Career </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#zip2">Zip2</a>
             <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#paypal">X.com/Paypal</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#spaceX">SpaceX</a>
        </div><!--end dropdown-menu-->
      </li>
    </ul>
    </div>
  </nav><!-- end navbar -->
  </div><!-- end #navWrapper -->
  
  <!-- data spy div-->
  <div data-spy="scroll" data-target="#navBear" class="container">

    <h2 class="unicornFarts" id="top"> Elon Musk</h2>
    <h5 id="omgLemmeMakeItSmall" class="unicornFarts"> A Tribute</h5>

    <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">
      <image class="rounded-circle img-fluid" id="elonPic1" src="https://media.vanityfair.com/photos/58ed4db975dd30329d3c49c4/master/pass/elon-musk-detroit.jpg">
    </a>
      
      
      <div class="container-fluid">
       <div class="groupingDiv"> <!--groupingDiv is for border and padding between sections-->
        <h3 id="earlyLife"> Early Life: </h3>
        <p>
          Musk was born on June 28, 1971, in Pretoria, Transvaal, South Africa,[30] the son of Maye Musk (née Haldeman), a model and dietician from Regina, Saskatchewan, Canada,[31] and Errol Musk, a South African electromechanical engineer, pilot, and sailor. He has a younger brother, Kimbal (born 1972), and a younger sister, Tosca (born 1974).[35] His paternal grandmother was British, and he also has Pennsylvania Dutch ancestry.[36][37] His maternal grandfather was American, from Minnesota.[38] After his parents divorced in 1980, Musk lived mostly with his father in the suburbs of Pretoria,[36] which Musk chose two years after his parents split up, but now says was "not a good idea."[39] As an adult, Musk has severed relations with his father.[39]
          </p>
<p>
  During his childhood he was an avid reader.[40] At age 10, he developed an interest in computing with the Commodore VIC-20.[41] He taught himself computer programming at the age of 12, sold the code for a BASIC-based video game he created called Blastar, to a magazine called PC and Office Technology, for approximately $500.[42][43] A web version of the game is available online.[42][44] His childhood reading included Issac Asimov's Foundation series from which he drew the lesson that "you should try to take the set of actions that are likely to prolong civilization, minimize the probability of a dark age and reduce the length of a dark age if there is one."[39]
  </p>

  <p>
  Musk was severely bullied throughout his childhood,[39] and was once hospitalized when a group of boys threw him down a flight of stairs and then beat him until he lost consciousness.[40]
  </p>
<p>
  Musk was initially educated at private schools, attending the English-speaking Waterkloof House Preparatory School. Musk later graduated from Pretoria Boys High School and moved to Canada in June 1989, just before his 18th birthday,[45] after obtaining Canadian citizenship through his Canadian-born mother.[46][47]
        </p>
        </div> <!-- end of this section's .groupingDiv-->

       <div class="groupingDiv">
        <h3 id="education"> Education:</h3>
          <p>
              At the age of 17, Musk was accepted into Queen's University in Kingston, Ontario, for undergraduate study. In 1992, after spending two years at Queen's University, Musk transferred to the University of Pennsylvania, where in May 1997 he received a Bachelor of Science degree in physics from its College of Arts and Sciences, and a Bachelor of Science degree in economics from its Wharton School of Business. Musk extended his studies for one year to finish the second bachelor's degree.[40][48] While at the University of Pennsylvania, Musk and fellow Penn student Adeo Ressi rented a 10-bedroom fraternity house, using it as an unofficial nightclub.[40]

In 1995, at age 24, Musk moved to California to begin a PhD in applied physics and materials science at Stanford University, but left the program after two days to pursue his entrepreneurial aspirations in the areas of the internet, renewable energy and outer space.[43][49] In 2002, he became a U.S. citizen.[50][51]
          </p>
        </div><!-- end of this section's .groupingDiv-->
        
       <div class="groupingDiv">
        <h3 id="career"> Career: </h3>
        <br>
         
        <h4 id="zip2">Zip2</h4>
        <p>
          In 1995, Musk and his brother, Kimbal, started Zip2, a web software company, with money raised from a small group of angel investors.[39] The company developed and marketed an Internet "city guide" for the newspaper publishing industry.[52] Musk obtained contracts with The New York Times and the Chicago Tribune[53] and persuaded the board of directors to abandon plans for a merger with CitySearch.[54] While at Zip2, Musk wanted to become CEO; however, none of the board members would allow it.[40] Compaq acquired Zip2 for US$307 million in cash and US$34 million in stock options in February 1999.[55] Musk received US$22 million for his 7% share from the sale.[53]
        </p>
         
         <h4 id="paypal">X.com and PayPal</h4>
         <p>
           n 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.[45][52][54] One year later, the company merged with Confinity,[53][56] which had a money transfer service called PayPal. The merged company focused on the PayPal service and was renamed PayPal in 2001. PayPal's early growth was driven mainly by a viral marketing campaign where new customers were recruited when they received money through the service.[57] 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.[58] In October 2002, PayPal was acquired by eBay for US$1.5 billion in stock, of which Musk received US$165 million.[59] Before its sale, Musk, who was the company's largest shareholder, owned 11.7% of PayPal's shares.[60]

In July 2017, Musk purchased the domain x.com from PayPal for an undisclosed amount stating that it has "great sentimental value" to him.[61]
         </p>
         <h4 id="spaceX">SpaceX</h4>
         <p>
           In 2001, Musk conceptualized "Mars Oasis"; a project to land a miniature experimental greenhouse on Mars, containing food crops growing on Martian regolith, in an attempt to regain public interest in space exploration.[62][63] In October 2001, Musk travelled to Moscow with Jim Cantrell (an aerospace supplies fixer), and Adeo Ressi (his best friend from college), to buy refurbished Dnepr Intercontinental ballistic missiles (ICBMs) that could send the envisioned payloads into space. The group met with companies such as NPO Lavochkin and Kosmotras; however, according to Cantrell, Musk was seen as a novice and was consequently spat on by one of the Russian chief designers,[64] and the group returned to the United States empty-handed. In February 2002, the group returned to Russia to look for three ICBMs, bringing along Mike Griffin. Griffin had worked for the CIA's venture capital arm, In-Q-Tel, as well as NASA's Jet Propulsion Laboratory, and was just leaving Orbital Sciences, a maker of satellites and spacecraft. The group met again with Kosmotras, and were offered one rocket for US$8 million, however, this was seen by Musk as too expensive; Musk consequently stormed out of the meeting. On the flight back from Moscow, Musk realized that he could start a company that could build the affordable rockets he needed.[64] According to early Tesla and SpaceX investor Steve Jurvetson,[65] Musk calculated that the raw materials for building a rocket actually were only 3 percent of the sales price of a rocket at the time. It was concluded that theoretically, by applying vertical integration and the modular approach from software engineering, SpaceX could cut launch price by a factor of ten and still enjoy a 70-percent gross margin.[66] Ultimately, Musk ended up founding SpaceX with the long-term goal of creating a "true spacefaring civilization".[67] With US$100 million of his early fortune,[68] Musk founded Space Exploration Technologies, or SpaceX, in May 2002.[69] Musk is chief executive officer (CEO) and chief technology officer (CTO) of the Hawthorne, California-based company. SpaceX develops and manufactures space launch vehicles with a focus on advancing the state of rocket technology. The company's first two launch vehicles are the Falcon 1 and Falcon 9 rockets (a nod to Star Wars' Millennium Falcon), and its first spacecraft is the Dragon (a nod to Puff the Magic Dragon).[70] In seven years, SpaceX designed the family of Falcon launch vehicles and the Dragon multipurpose spacecraft. In September 2008, SpaceX's Falcon 1 rocket became the first privately funded liquid-fueled vehicle to put a satellite into Earth orbit.[40] On May 25, 2012, 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.[71]
</p>
<p>
In 2006, SpaceX was awarded a contract from NASA to continue the development and test of the SpaceX Falcon 9 launch vehicle and Dragon spacecraft in order to transport cargo to the International Space Station,[72][not in citation given] followed by a US$1.6 billion NASA Commercial Resupply Services program contract on December 23, 2008, for 12 flights of its Falcon 9 rocket and Dragon spacecraft to the Space Station, replacing the US Space Shuttle after it retired in 2011.[73] Astronaut transport to the ISS is currently handled solely by the Soyuz, but SpaceX is one of two companies awarded a contract by NASA as part of the Commercial Crew Development program, which is intended to develop a US astronaut transport capability by 2018.[74] On December 22, 2015, SpaceX successfully landed the first stage of its Falcon rocket back at the launch pad. This was the first time in history such a feat had been achieved by an orbital rocket and is a significant step towards rocket reusability lowering the costs of access to space.[75] This first stage recovery was replicated several times in 2016 by landing on an Autonomous spaceport drone ship, an ocean based recovery platform,[76] and by the end of 2017, SpaceX had landed and recovered the first stage on 16 missions in a row where a landing and recovery were attempted, including all 14 attempts in 2017. 20 out of 42 first stage Falcon 9 boosters have been recovered overall since the Falcon 9 maiden flight in 2010.[77] In the most recent full year—2017—SpaceX launched 18 successful Falcon 9 flights, more than doubling their highest previous year of 8.[78]
      </p>
<p>
SpaceX is both the largest private producer of rocket engines in the world, and holder of the record for highest thrust-to-weight ratio for a rocket engine.[79] SpaceX has produced more than 100 operational Merlin 1D engines, currently the world's most powerful engine for its weight.[80] The relatively immense power to weight ratio allows each Merlin 1D engine to vertically lift the weight of 40 average family cars. In combination, the 9 Merlin engines in the Falcon 9 first stage produce anywhere from 5.8 to 6.7 MN (1.3 to 1.5 million pounds) of thrust, depending on altitude.[81]
 </p>
<p>
Musk was influenced by Isaac Asimov's Foundation series[82] and views space exploration as an important step in preserving and expanding the consciousness of human life.[83] Musk said that multiplanetary life may serve as a hedge against threats to the survival of the human species.
</p>
<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>
<p>
Musk's goal is to reduce the cost of human spaceflight by a factor of 10.[84] In a 2011 interview, he said he hopes to send humans to Mars' surface within 10–20 years.[85] In Ashlee Vance's biography, Musk stated that he wants to establish a Mars colony by 2040, with a population of 80,000.[41] Musk stated that, since Mars' atmosphere lacks oxygen, all transportation would have to be electric (electric cars, electric trains, Hyperloop, electric aircraft).[86] Musk stated in June 2016 that the first unmanned flight of the larger Mars Colonial Transporter (MCT) spacecraft is aimed for departure to the red planet in 2022, to be followed by the first manned MCT Mars flight departing in 2024.[87] In September 2016, Musk revealed details of his plan to explore and colonize Mars.[88] By 2016, Musk's private trust holds 54% of SpaceX stock, equivalent to 78% of voting shares.[89]
</p>
         
        </div><!-- end of this section's .groupingDiv-->
      </div><!--  end data spy DIV-->

  </div><!-- end data spy and .container-->
  <footer>
    <div class="container-fluid">
      <p class="disclaimer"> All information contained in this website was copied and pasted directly from <a href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Wikipedia</a>. </p>
      <h6 id="footerText"> Designed and coded by <a href="https://codepen.io/Bielskis/" target="_blank">Jonathan Lilly</a></h6>
      <p class="disclaimer"> Last modified on 12/26/2017</p>
    </div>
  </footer>
</body>
              
            
!

CSS

              
                body{
  color:white;
  position:relative;
  background:url(http://www.publicdomainpictures.net/pictures/10000/velka/starry-night-871287410454UmtH.jpg)
}
.navWrapper{
  margin-bottom:100px;
}
nav{
   background: linear-gradient(white, #999);
}
nav ul li a{
  border-bottom:none;
  color: #222;
}
nav ul li a:hover{
  border-bottom:solid 2px black;
  border-color:#666;
  color: #000;
}
.navbar-brand{
  border-right: solid 1px black;
  padding: 0px 20px 0px 20px;
}

/* the following two styles are probably not necessary, but in the event I want to add other h2's or h5's I can select these independently of the rest */
.unicornFarts{
  color:whitesmoke;
  text-align: center;
  font-size: 75px;
  font-family: 'Inconsolata', monospace;
  font-weight:bold;
  text-shadow: 1px 0px lightblue;
}
#omgLemmeMakeItSmall{
  font-size:20px;
}
#elonPic1{
  opacity:.6;
}
#elonPic1:hover{
  opacity:.8;
}
#elonPic1:active{
  opacity:.95;
}
/*the following style is used to help seperate each section of information visually with borders and padding/margin */
.groupingDiv{
  border-bottom:solid 1px silver;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
h3{
  text-decoration:underline;
}
h4{
  font-size: 20px;
  margin: 10px 0px 0px 0px;
  text-decoration:underline;
}
p{
  font-size:20px;
}
.container-fluid{
  margin-top:20px;
  background-color:#111;
  opacity:.8;
}
.disclaimer{
  font-size: 12px;
  text-align:center;
}
#footerText{
  text-align:center;
  opacity:.9;
}

              
            
!

JS

              
                // This is to fix the navbar covering up heading elements when navbar links are clicked. Thanks google! At the time of posting this -12/26/17- I have no idea how it works, it just does. src= https://github.com/twbs/bootstrap/issues/1768
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
              
            
!
999px

Console