cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
                <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>
            
          
!
            
              $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;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console