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

              
                <style>
 .fluid-container {
  background-color: #000000;
}
  
.jumbotron {
  background: #000000 url(https://i.imgur.com/aVAPj3M.jpg) no-repeat;
  background-size: cover;
  height: 375px;
}
  
.jumbotron h1 {
  color: #FFFFFF;
  padding-top: 150px;
}
  
  .dob{
  color: #FFFFFF;
  margin:15px auto;
  align: center;
  padding: 30px 0 2px 0;
  }
  
  .quote {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 100;
  padding: 20px 0 15px 0;
  width: 75%;
  margin: auto;
  }
  
  .timeline {
  color: #FFFFFF;
  width: 50%;
  margin:15px auto;
  align: center;
  }
 
  .dod{
  color: #FFFFFF;
  margin:15px auto;
  align: center;
  }
  
  .link {
  color: #FFFFFF;
  padding: 50px 0 30px 0;
  }
  a {
  color: #965225;
  }
</style>
<body class="fluid-container">
  <div class="jumbotron">
    <h1 class="text-center">Nelle Harper Lee</h1>
  </div>
  <div class="dob">
    <p class="text-center">Born April 28, 1926</p>
    <hr width="40%">
  </div>
  <div class="timeline text-center">
    <p>Nelle Harper Lee is born in Monroeville, Alabama, the youngest of four children of lawyer Amasa Coleman Lee and Frances Cunningham Finch Lee..</p>
    <p>.1930.</p>
    <p>Truman Streckfus Persons moves in next door to live with his elderly cousins, the Faulks. Truman and Nelle become fast friends.</p>
    <p>.1944.</p>
    <p>Lee enters Huntingdon College, a Methodist liberal arts college.</p>
    <p>.1945.</p>
    <p>Lee transfers to the University of Alabama to study law, but leaves in 1949 before completing her degree. While in college, she edits a humor magazine, Rammer-Jammer, and writes for the college newspaper, the Crimson-White.</p>
    <p>.1949.</p>
    <p>She moves to New York, works as an airlines reservations clerk and pursues a writing career.</p>
    <p>.1957.</p>
    <p>Lee submits her manuscript for To Kill a Mockingbird to J.B. Lippincott Company in 1957. She is asked to rewrite the manuscript.</p>
    <p>.1959.</p>
    <p>Lee travels with her childhood friend Truman Capote to Holcomb, Kansas, to help research a story he is writing about the murder of a wealthy farming family, the Clutters. Capote eventually turns the work into a non-fiction narrative book, <b>In Cold Blood</b>.</p>
    <p>.1960.</p>
    <p><b>To Kill a Mockingbird</b> is published by J.B. Lippincott Company. The book is an instant critical and commercial success, and the local bookseller in Monroeville quickly sells out her stock. Her book jacket photo is by her childhood friend Truman Capote.</p>
  </div>
  <div class="quote text-center">
    <p>"I never expected any sort of success with Mockingbird. I was hoping for a quick and merciful death at the hands of the reviewers but, at the same time, I sort of hoped someone would like it enough to give me encouragement. Public encouragement. I hoped for a little, as I said, but I got rather a whole lot, and in some ways this was just about as frightening as the quick, merciful death I'd expected."
    </p>
    <p>— Harper Lee, quoted in Newquist, 1964
    </p>
  </div>
  <div  class="timeline text-center">
    <p>.1961.</p>
    <p>Lee wins the Pulitzer Prize for fiction.</p>
    <p>.1962.</p>
    <p>The film adaptation of the novel, with Mary Badham as Scout, opens. The film is an instant hit. “I have nothing but gratitude for the people who made the film. … I was delighted, touched, happy, and exceedingly grateful,” Lee told Roy Newquist in a 1964 interview.</p>
    <p>.2001.</p>
    <p>Chicago launches a campaign to get every adult in the city to read To Kill a Mockingbird at the same time in an effort to get people to read books (and talk to each other). Participants in this “One Book, One Chicago” project are given pins emblazoned with mockingbirds to help spot fellow readers around town. To Kill a Mockingbird continues to be a top pick with “One Book” reads in cities and towns across the nation.</p>
    <p>.2007.</p>
    <p>President George W. Bush presents Harper Lee with the Presidential Medal of Freedom. The White House press release explains, “At a critical moment in our history, her beautiful book, To Kill a Mockingbird, helped focus the nation on the turbulent struggle for equality.”</p>
    <p>.2011.</p>
    <p>President Barack Obama awards Lee with the 2010 National Medal of Arts at the White house.</p>
  </div>
  <div class="dod">
    <hr width="40%">
    <p class="text-center">Death February 19, 2016</p>
  </div>
  <div class="link">
    <p class="text-center">To learn more about Harper Lee's life, please visit the <a href="http://www.monroecountymuseum.org/#!harper-lee-timeline/cgc" target="_blank">Monroe County Museum</a>.</p>
  </div>
</body>
              
            
!

CSS

              
                

              
            
!

JS

              
                
              
            
!
999px

Console