Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                  <article>
  <header>
    <img src="http://labs.jensimmons.com/2016/examples/images/GraceHopper.jpg">
    <div class="headlines"><div>
      <h1>Grace Hopper</h1>
      <h4>December 9, 1906 – January 1, 1992</h4>
      <h6>invented the first compiler</h6>
      <h6>popularized the idea of programming languages</h6>
      <h6>coined the term "debugging"</h6>
    </div></div>
  </header>
    
  <section> 
    <p>Grace Murray Hopper (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language. She popularized the idea of machine-independent programming languages, which led to the development of COBOL, one of the first modern programming languages. She is credited with popularizing the term "debugging" for fixing computer glitches (inspired by an actual moth removed from the computer). The U.S. Navy destroyer USS Hopper (DDG-70) is named for her, as was the Cray XE6 "Hopper" supercomputer at NERSC.</p>
    
    
<h2>World War II</h2>

<p>In 1943, during World War II, Hopper obtained a leave of absence from Vassar and was sworn into the United States Navy Reserve, one of many women to volunteer to serve in the WAVES. She had to get an exemption to enlist; she was 15 pounds (6.8 kg) below the Navy minimum weight of 120 pounds (54 kg). She reported in December and trained at the Naval Reserve Midshipmen's School at Smith College in Northampton, Massachusetts. Hopper graduated first in her class in 1944, and was assigned to the Bureau of Ships Computation Project at Harvard University as a lieutenant, junior grade. She served on the Mark I computer programming staff headed by Howard H. Aiken. Hopper and Aiken coauthored three papers on the Mark I, also known as the Automatic Sequence Controlled Calculator. Hopper's request to transfer to the regular Navy at the end of the war was declined due to her age (38). She continued to serve in the Navy Reserve. Hopper remained at the Harvard Computation Lab until 1949, turning down a full professorship at Vassar in favor of working as a research fellow under a Navy contract at Harvard.</p>

<h2>UNIVAC</h2>

<p>In 1949, Hopper became an employee of the Eckert–Mauchly Computer Corporation as a senior mathematician and joined the team developing the UNIVAC I. In the early 1950s, the company was taken over by the Remington Rand corporation, and it was while she was working for them that her original compiler work was done. The compiler was known as the A compiler and its first version was A-0.</p>

<p>In 1952 she had an operational compiler. "Nobody believed that," she said. "I had a running compiler and nobody would touch it. They told me computers could only do arithmetic."</p>

<p>In 1954 Hopper was named the company's first director of automatic programming, and her department released some of the first compiler-based programming languages, including MATH-MATIC and FLOW-MATIC.</p>

<aside class="pullquote">“Nobody believed that I had a running compiler, and nobody would touch it. They told me computers could only do arithmetic.”</aside>

<h2>COBOL</h2>

<p>In the spring of 1959, a two-day conference known as the Conference on Data Systems Languages (CODASYL) brought together computer experts from industry and government. Hopper served as a technical consultant to the committee, and many of her former employees served on the short-term committee that defined the new language COBOL (an acronym for COmmon Business-Oriented Language). The new language extended Hopper's FLOW-MATIC language with some ideas from the IBM equivalent, COMTRAN. Hopper's belief that programs should be written in a language that was close to English (rather than in machine code or in languages close to machine code, such as assembly languages) was captured in the new business language, and COBOL went on to be the most ubiquitous business language to date.</p>

<p>From 1967 to 1977, Hopper served as the director of the Navy Programming Languages Group in the Navy's Office of Information Systems Planning and was promoted to the rank of Captain in 1973.[ She developed validation software for COBOL and its compiler as part of a COBOL standardization program for the entire Navy.</p>

<h2>Standards</h2>

<p>In the 1970s, Hopper advocated for the Defense Department to replace large, centralized systems with networks of small, distributed computers. Any user on any computer node could access common databases located on the network.[19]:119 She developed the implementation of standards for testing computer systems and components, most significantly for early programming languages such as FORTRAN and COBOL. The Navy tests for conformance to these standards led to significant convergence among the programming language dialects of the major computer vendors. In the 1980s, these tests (and their official administration) were assumed by the National Bureau of Standards (NBS), known today as the National Institute of Standards and Technology (NIST).</p>
    
    
    </section>
  </article>
              
            
!

CSS

              
                $color: #4b87bc;
html {
  font-family: 'AdobeGaramondW01-Regula', georgia, serif;
  font-size: 17px;
  line-height: 1.5em;
}
htm, body {
  margin: 0;
  padding: 0;
}


//--------------------------------------------------
// Header 
//--------------------------------------------------

header {
  background: rgba(216, 223, 225, 0.8);
  margin: 0;
  color: rgba(0,0,0,0.6);
  text-align: center;
}
img {
  height: 85vh;
  margin: 0;
  padding: 0;
  object-fit: cover;
}
div.headlines {
  padding-bottom: 1.6rem;
}
h1 {
  font-size: 10vw;
  color: darken($color, 12%);
}
h2 {
  margin: 1.4em 0 0.8em;
  color: darken($color, 20%);
}
h4, h6 {
  font-weight: normal;  
}
h4 {
  margin: 1.6em 0;
  font-size: 3.5vw;
}
h6 {
  margin: 0;
  font-size: 2.5vw;
  font-style: italic;
}

@media (min-width: 600px) {
  header {
    height: 100vh;
  }
  img {
    float: left;
    height: 100vh;
    width: 48vw;
  }
  div.headlines {
    float: right;
    width: 45vw;
    height: 100vh;
    padding: 2vh 3vw;
    display: flex;  
    div {
      margin: auto;
    }
  }  
  h1 {
    margin-top: 0;
    font-size: 5vw;
  }
  h4 {
    margin: 1.8em 0 6em;
    font-size: 1.8vw;
  }
  h6 {
    margin: 0.5em 0;
    font-size: 1.3vw;
    font-style: italic;
  }
}

//--------------------------------------------------
// Article Text 
//--------------------------------------------------

section {
  clear: both;
  padding: 2em 8vw 4em 17vw;
  columns: 260px;
  column-gap: 3em;
  background-color: #fff;
}
@media (min-width: 600px) {
  section {
    padding: 4em 6vw 4em 22vw;
  }
}
section { 
  p:first-child {
    margin-top: 0;
  }
  @supports (initial-letter: 4 ) or
    (-webkit-initial-letter: 4 ) {
    p:first-child::first-letter {
      color: $color;
      font-weight: bold;
      margin-right: 0.5em;
      margin-top: 1em; // bug fix
      -webkit-initial-letter: 5;
      initial-letter: 5 4;
    }
  }
  @supports (initial-letter: 2 ) or
    (-webkit-initial-letter: 2 ) {
    h2>p::first-letter {
      color: $color;
      font-weight: bold;
      margin-right: 0.5em;
      -webkit-initial-letter: 2;
      initial-letter: 2 1;
    }
  }
}

.pullquote {
  margin: 2.4rem 0 2.4rem;
  color: $color;
  font-weight: bold;   
  font-size: 2em; 
  line-height: 1.2em;
}

footer {
  text-align: center;
}
              
            
!

JS

              
                
              
            
!
999px

Console