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

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

              
                <script src="https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js"></script>

<div class="container-fluid">

<h1 id="title" class="mt-4 text-primary display-1 text-center">Helen Keller</h1>

<h2 class="pb-2 text-center">A Life of Truimph and Perseverance</h2>
<figure class="figure d-block mx-auto">
 <div id="img-div">
   <img id="image"class="img-fluid rounded-circle border d-block mx-auto border-info" src="https://media1.britannica.com/eb-media/90/75590-004-F2C9CB0A.jpg" alt="A young Helen Keller touching the face of her teacher, Anne Sullivan.">
  <figcaption id="img-caption" class="pt-2 figure-caption text-center">Helen Keller touching the face of her teacher, Anne Sullivan</figcaption>
</figure>
  </div>
<hr/>
<div id="tribute-info" class="container">
<h3>Early Life</h3>
    <div class="row">
	<p class="col-sm-2 text-right float-left"><strong>June 27, 1880 -</strong></p>
	<p class="col-sm-10">Born Helen Adams Keller in Tuscumbia, Alabama. The first of two daughters born to Arthur H. Keller and Katherine Adams Keller.</p>
	</div>
    <div class="row">
	<p class="col-sm-2 text-right float-left"><strong>1882 -</strong></p>
	<p class="col-sm-10">At 19 months, Keller is left deaf and blind after being stricken with an illness the family doctor calls "brain fever". She becomes a very wild and unruly child. Kicking and screaming when angry; uncontrollably laughing when happy.  She'd torment Martha (the family maid) and act out in violent tantrums against her parents.</p>
	</div>
    <div class="row">
	<p class="col-sm-2 text-right float-left"><strong>1886 -</strong></p>
	<p class="col-sm-10">After reading about the education of another deaf and blind child, Laura Bridgman, in <cite>Charles Dickens, American Notes</cite>, Katherine takes the family to meet with Michael Anaganos, school director of the Perkins Institute for the Blind in Boston, Massachusetts. Director Anaganos decides to start Helen education with one of their recent graduates, Anne Sullivan.</p>
	</div>
 </div>
  
 <div id="main" class="container">
  <h3>Early Education</h3>
     <div class="row">
	 <p class="col-sm-2 text-right float-left"><strong>March 3, 1887 -</strong></p>
	
	<p class="col-sm-10">Is the day Anne Sullivan enters the Keller home.  Anne starts the lessons by writing the word <em>"doll"</em> with her finger on Helen's hand. In the beginning Helen's tantrums increased. Sullivan's repsonse was to demand that she and Helen be isolated from the family so she could focus solely on her training. Once isolated, Helen has a major break through when Anne teaches her how to spell the word <em>"water"</em>. She flushes water over Keller's hand and spells <em>w-a-t-e-r</em> in her other hand. Helen then spelled the word in  Sullivan's hand.  In this manner, Helen was taught 30 words in a day. It would be through sheer determination, 25 years later, that Helen Keller was able to communicate with other effectively.</p>
	</div>
	
   <div class="row">
   <p class="col-sm-2 text-right float-left"><strong>1890 -</strong></p>
	<p class="col-sm-10">Keller attended the Horace Mann School for the Deaf in Boston.</p>
	</div>
	
	<div class="row">
	   <p class="col-sm-2 text-right float-left"><strong>1894 thru 1896 -</strong></p>
	   <p class="col-sm-10">Keller attended the Wright-Humason School for the Deaf in New York City.</p>
	</div>
 </div>
 
    <div class="container">
	<h3>Formal Education and Advocacy</h3>
	<div class="row">
	 <p class="col-sm-2 text-right float-left"><strong>1896 -</strong> 
	 <p class="col-sm-10">Attends the Cambridge School for Young Ladies.</p>
	 </div> 
	 
	 <div class="row">
	 <p class="col-sm-2 text-right float-left"><strong>1903 -</strong></p>
	 <p class="col-sm-10">Publishes first book, <cite>Story of My Life</cite>, which was written with the help of Sullivan’s future husband, John Macy.</p>
	 </div>
	
      <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1904 -</strong></p>
	   <p class="col-sm-10">At the age of 24, Helen graduated from Radcliffe, cum laude.</p>
	   </div>
	  
	  <div class="row">
	  <div class="col-sm-2 text-right float-left"></div>
	  <p class="col-sm-10">As the story of Helen’s life began to become known she met the writer Mark Twain.  Twain introduced her to his friend Henry H. Rogers, a Standard Oil executive.  Having master touch-lip reading, Braille, speech, typing and finger spelling, Keller impressed Mr. Rogers so much he agreed to pay for her to attend Radcliffe College.   Anne Sullivan attended Radcliffe with Helen to assist her in interpreting the lectures and texts.</p>
	  </div>
      
	  <div class="row">
	  <div class="col-sm-2 text-right float-left"></div>
	  <p class="col-sm-10">As her celebrity grew, she became a lecturer, advocate for the disabled and spoke before Congress.  In the years following her graduation she became a Socialist.</p>
	  </div>
	  
	 <div class="row">
	 <p class="col-sm-2 text-right float-left"><strong>1915 -</strong></p>
	  <p class="col-sm-10">Co-founded Helen Keller International with George Kessler to combat the causes and consequences of blindness and malnutrition.</p>
	  </div>

	  <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1920 -</strong></p>
	  <p class="col-sm-10">Keller helps found the <abbr title="American Civil Liberties Union">ACLU</abbr>.</p>
	  </div>
	  
	  <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1924 -</strong></p>
	  <p class="col-sm-10">Becames a member of the American Federation for the Blind.</p>
	  </div>
	  
	  <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1936 -</strong></p>
	  <p class="col-sm-10">After 49 years together, Anne Sullivan, dies. Helen receives the Theodore Roosevelt Distinguished Service Medal.</p>
	  </div>

	  <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1946 -</strong></p>
	  <p class="col-sm-10">Becomes counselor of international relations for the American Foundation of Overseas Blind.</p> 
	  </div>
	  
	  <div class="row">
	  <p class="col-sm-2 text-right float-left"><strong>1945 thru 1957 -</strong></p>
	  <p class="col-sm-10">Travels to over 35 countries on five continents. 1955 saw Keller embarking on her longest and most grueling trip.  She was 75 years old and spent 5 months traversing over 40,000-miles throughout Asia.</p>
	  </div>

	  <div class="row">
	  <div class="col-sm-2 text-right float-left"></div>
	  <p class="col-sm-10">During her lifetime, Helen Keller received honorary doctoral degrees from Temple and Harvard Universities, as well as from the universities of Glasgow, Scotland; Berlin, Germany; Delhi, India; and Witwatersrand in Johannesburg, South Africa.  In addition, she was named an Honorary Fellow of the Educational Institute of Scotland.</p>
	  </div>
	</div>
</div>

<div class="container">
<h3>Awards, Influence and Legacy</h3>
<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1957 -</strong></p>
<p class="col-sm-10">Keller's autobiography, <cite>The Story of My Life</cite>, was used as the basis for the television drama <cite>The Miracle Worker</cite>.</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1959 -</strong></p>
<p class="col-sm-10"><cite>The Miracle Worker</cite> was produced as a Broadway play, starring Patty Duke as Keller and Anne Bancroft as Sullivan.</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1961 -</strong></p>
<p class="col-sm-10">Suffers a series of strokes.</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1962 -</strong></p>
<p class="col-sm-10">Patty Duke and Anne Bancroft, reprising their roles, star in the award-winning film version of the play.</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1964 -</strong></p>
<p class="col-sm-10">Recceives the Presidential Medal of Freedom.</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>1965 -</strong></p>
<P class="col-sm-10">Elected to the Women's Hall of Fame .</p>
</div>

<div class="row">
<p class="col-sm-2 text-right float-left"><strong>June 1, 1968 -</strong></p>
<p class="col-sm-10">A few weeks shy of her 88<sup>th</sup> birthday, Helen Keller passes away in her sleep.</p>
</div>
</div>

<div class="container">
<h4><blockquote class="blockquote font-weight-bold text-center" cite="https://www.brainyquote.com/search_results?q=helen+keller" author="Helen Keller" target="_blank">
"The only thing worse than being blind is having sight but no vision."
<footer class="blockquote-footer">Helen Keller</footer></blockquote>
</h4>


<p class="text-center font-weight-bold">Read more at: <a href="https://www.brainyquote.com/quotes/helen_keller_383771" title="Link to Brainy Quotes" target="_blank">Brainy Quotes</a></p>

<p class="text-center font-weight-bold">Find out more about Helen Keller<a id="tribute-link" href="https://www.biography.com/people/helen-keller-9361967" title="Helen Keller Page at Biography" target="_blank"> here</a>.</p>
	
</div>	
</div><!-- flex container end -->



<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

              
            
!

CSS

              
                hr {
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:90%;
 border-top:2px solid #a8a8a8;
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console