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

              
                <link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display:400,400i,700" rel="stylesheet">

<div class="container-fluid page">
  <div class="row">
    <div class="col-md-5">
      <img class="img-responsive" src="https://media.vanityfair.com/photos/57bb1434d13c35693b7749b1/master/w_768,c_limit/katherine-johnson.jpg" alt="Portraid of Katherine Johnson by Annie Leibovitz"></div>
    <div class="col-md-7">
      <h1 class="text-center title">
        Katherine G. Johnson
      </h1>
      <h2 class="text-center">
        <em>The Nasa Mathematician Who Advanced Human Rights</em>
      </h2><br />
      <p>
        Born in 1918, Johnson demonstrated an aptitude for mathematics at an early age. She attended High School at the age of 10 and graduated from West Virginia State College (now West Virginia State University) <em>summa cum laude</em> at the age of
        18.
      </p>
      <p>
        Johnson was the first female African American, out of only three black students selected to desegregate West Virginia University's graduate school following the 1938 Supreme Court ruling <em>Missouri ex rel. Gaines v. Canada</em>, though she later
        left the program.
      </p>
      <p>
        In 1953 she accepted a position with NASA (then called NACA, the National Advisory Committee for Aeronautics) at the Langely Research Center. There she coauthored 26 scientific papers, calculating flight and landing trajectories for several landmark NASA
        missions from Mercury through to the Shuttle, until retiring in 1986.
      </p>
    </div>
  </div>
  <div class="row">
    <div class="subsection">
      <div class="link">
        <button id="target1" class="btn">read more</button>
      </div>
      <div id="target2" class="noshow">
        <h2 class="text-center"><em>A Brief Summary of Johnson's Accomplishments</em></h2>
        <table class="list-items">
          <tr>
            <td class="list-year">
              1937
            </td>
            <td class="deets">
              <p>With the guidance of W.W. Schiefflin Claytor, the third African American to receive a PhD in math, Johnson took every math course available, including some classes created just for her. She graduated in 1937 with degrees in Mathematics and
                French. </p>
            </td>
          </tr>
          <tr>
            <td class="list-year">1953</td>
            <td class="deets">
              <p>After 7 years of teaching, Johnson accepted a position at NACA's Langely Research Center in Hampton, Virginia; Within two weeks she was transferred to Langely's flight research division, and she spent the next four years analyzing data from
                flight tests.</p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1957</td>
            <td class="deets">
              <p>Contributed some of the material for a 1958 document “Notes on Space Technology,” a series of lectures given to staff by engineers from the flight research division.</p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1958</td>
            <td class="deets">
              <p>Johnson becomes an aerospace technologist, working with the Space Task Group (STG) after NACA became NASA and was desegregated.</p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1960</td>
            <td class="deets">
              <p>Coauthored "Determination of Azimuth Angle at Burnout for Placing a Satellite Over a Selected Earth Position,” with engineer Ted Skopinski. It was the first time a woman was allowed to receive credit as an author of a research report in
                the division.</p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1961</td>
            <td class="deets">
              <p>Performed trajectory analysis for the Mercury capsule Freedom-7's suborbital flight, the first manned mission into space.</p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1962</td>
            <td class="deets">
              <p>Johnson coauthored a report on the orbital behavior of the first communications satellite, Echo-1, the first satellite whose orbit was influenced by solar pressure. In the same year, John Glenn famously asked for Johnson to double check
                the calculations made by NASA computers for the historic flight into orbit aboard Mercury capsule Friendship-2. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1967</td>
            <td class="deets">
              <p>Received the NASA Lunar Orbiter Spacecraft and Operations team award.</p>
            </td>
          </tr>
          <tr>
            <td class=" list-year">1969</td>
            <td class="deets">
              <p>Following Project Mercury, Johnson worked with the Space Mechanics Division, calculating the trajectory of the Apollo 11 flight to the moon. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">1970</td>
            <td class="deets">
              <p>Her work calculating backup navigation charts for Apollo 11 astronauts, (in case of electronic failure) contributed to the safe return of the Apollo 13 crew. </p>
            </td>
          </tr>

          <tr>
            <td class=" list-year">1997</td>
            <td class="deets">
              <p>Named <em>Mathematician of the Year</em> by the National Technical Association. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">2000</td>
            <td class="deets">
              <p>Inducted into the National Black College Alumni Hall of Fame in Georgia. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">2015</td>
            <td class="deets">
              <p>President Obama presented Johnson with the Presidential Medal of Freedom. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">2016</td>
            <td class="deets">
              <p>Johnson received the Astronomical Society of the Pacific’s Arthur B.C. Walker II Award, and NASA's Silver Snoopy award. Her story was recounted in Margot Lee Shetterly's book Hidden Figures, and portrayed by Taraji P. Hensen in the oscar-nominated
                movie by the same name. </p>
            </td>
          </tr>

          <tr>
            <td class="list-year">2017</td>
            <td class="deets">
              <p>Nasa dedicated a new research facility in her honor -- the Katherine G. Johnson Computational Research Facility at the Langley Research Center in Hampton, Virginia. </p>
            </td>
          </tr>
          <tr>
            <td class="list-year">2018</td>
            <td class="deets">
              <p>
                Johnson holds honorary degrees at SUNY Farmingdale, Capitol College, Old Dominion University, and John Hopkins University. She still mentors students, encouraging girls to pursue careers in STEM through Black Girls Code. Johnson will be 100 years old
                this August.
              </p>
            </td>
          </tr>
        </table>
        <div class="link">
          <button id="target3" class="btn"><a href="https://en.wikipedia.org/wiki/Katherine_Johnson" target="_blank">visit her wikipedia page</a></button>
        </div>
      </div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  background-color: #cccccc;
}
.page {
  margin: 0 5%;
}
p {
  font-family: Lato;
}
h1,
h2,
.list-year {
  font-family: Playfair Display;
  color: black;
}
.title {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 80%;
}
.noshow {
  display: none;
}
.subsection {
  padding: 10px;
  background-color: #ffffff;
  margin: 0px 15px;
}
.link,
#target1,
#target3 {
  margin: auto;
  width: 200px;
}
#target3 a {
  text-decoration: none;
}
.list-items {
  max-width: 800px;
  margin: 15px auto;
}
td {
  padding: 0px 10px;
}
.list-year {
  text-align: right;
  vertical-align: top;
  font-weight: bold;
}
.deets {
  text-align: left;
  border-left: 1px solid #cccccc;
}

@media only screen and (max-width: 768px) {
  .page {
    margin: 0px;
  }
}
@media only screen and (min-width: 800px) {
  .list-year {
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
  }
  .deets {
    padding: 3px 10px;
  }
}

              
            
!

JS

              
                $("#target1").click(function() {
  $(this).slideUp();
  $("#target2").removeClass("noshow");
});

              
            
!
999px

Console