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.

              <div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h2>Katherine Johnson</h2>
          <h3>Brilliant Mathematician, Space Cadet</h3>
        <div class="panel-image">
          <img src="https://s26.postimg.org/h6l18fd2h/Katherine_Johnson.jpg" class="img-responsive center-block">
        <div class="panel-body">
          <p>Little was known about Katherine Johnson in the media when she was selected to receive the nation’s highest civilian honor, the National Medal of Freedom on November 24, 2015. When we think of space explorations, we tend to gravitate towards Astronauts in counting our nation's heroes. Much is to be learned from the mathematicians in the early space era circa the 1930s-1970s. Known as "computers" before actual PCs and electronic gadgets entered the scene in the 1960s, mathematicians had the difficult task of computing the main algorithms that made trajectories efficient.  Today, we tribute mathematician Katherine Johnson.</p>
          <h5>Johnson's Early Education</h5>
          <p>Born in 1918, Johnson became a research mathematician due to her fascination with numbers.   She states, “I counted everything. I counted the steps to the road, the steps up to church, the number of dishes and silverware I washed…anything that could be counted, I did.”</p>
          <p>Considered a child prodigy, Johnson started high school at just 10 years old.  Her parents were highly invested in her education, driving her to school up to 120 miles so she could continue her studies.  She soon completed high school and went on to graduate college at 18.</p>
          <p>Johnson was a wife, mother, and a school teacher when she decided to begin working with the National Advisory Committee for Aeronautics.  NACA was the predecessor to NASA, recruiting women for tedious work such as measuring, calculating, and steering unit tests that many of us today use a computer for.  Due to demand for mathematicians, openings for African Americans at Langley Research Center’s Guidance and Navigation Department were made, where Johnson became employed at in 1953.</p>
          <h5>Johnson's Math Career with NASA</h5>
          <p>Johnson was known for her accuracy in computerized celestial navigation.  She calculated the trajectory for Alan Shepard, who became the first American in space, in the Project Mercury mission.  She also went on to work with John Glen on the Friendship 7 mission.  Johnson’s calculations proved to be a critical part of the 1969 Apollo 11 Moon flight and landing expedition as well as the start of the Space Shuttle program.  Johnson worked with NASA until 1986.</p>
          <h5>Johnson's Achievements</h5>
          <p>Johnson’s achievements also include co-authoring 26 scientific papers, earning honorary doctorates from Old Dominion University, Capitol College, and SUNY Farmingdale, receiving the 1967 Lunar Orbiter Spacecraft and Operations Team award, receiving the 1967 Apollo Group Achievement Award, and earning the NASA Langley Research Center Special Achievement Award  five times over the course of her career.</p>
          <p>To learn more about Katherine Johnson, visit NASA's page on her research and work <a href="http://www.nasa.gov/feature/katherine-johnson-the-girl-who-loved-to-count">here.</a></p>
          <small>Source: NASA.gov</small>
        </div><!-- end of panel body -->
      </div><!-- end of panel -->
    </div><!-- end of column -->
  </div><!-- end of row -->
</div><!-- end of container -->
              .container {
  background-color: #3399ff;
.panel-image img {
  border: 8px solid #3399ff;
  margin-top: 20px;
  padding: 10px;
.panel-info {
  background-color: #cce6ff;
.panel-heading h2, .panel-heading h3 {
  color: #fff;
  text-align: center;
.panel-info > .panel-heading {
  background-color: #3399ff;
.panel-body {
  background-color: #
hr {
  border-top: 1px solid #3399ff;

🕑 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.