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

              
                <a href="http://www.wish.org" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/en/2/29/Make-A-Wish-Foundation-logo.png"></a>
<br />
<hr>
<p> The Make-A-Wish Foundation is a non-profit organization founded in the United States that arranges experiences described as "wishes" to children with life-threatening medical conditions. In order to qualify for a wish, the child must be between the ages of 3 to 17 at the time of referral. It is the child's physician that ultimately decides if a child is eligible.
</p>
<p>This particular organization is near to my heart because my youngest son is a Wish child, and I can not think of a more deserving company for a tribute.
</p>
<hr>
<p>Here is some information about the <a href="http://www.wish.org" target="_blank">Make-A-Wish Foundation</a> that I hope you will find interesting:
<ul>
  <li>In the spring of 1980, 7-year-old Christopher James Greicius (August 13, 1972 – May 3, 1980) was being treated for leukemia. He aspired to be a police officer. U.S. Customs Officer Tommy Austin befriended Chris and worked with officers at the Arizona Department of Public Safety to plan an experience to lift Greicius' spirits. Chris spent the day as a police officer, rode in a police helicopter, received a custom-tailored police uniform, and was sworn in as the first honorary Public Safety patrolman in state history. Greicius died soon after, but his wish became inspiration for the Make-A-Wish wish-granting organization.
  </li>
  <li>Professional wrestler John Cena holds the title for the most wishes granted by a single individual, with over 500 wishes.
  </li>
  <li>Singer Justin Bieber has volunteered in over 250 wishes.
  </li>
  <li>National Women's Collegiate Fraternity Chi Omega has raised over $14 million for Make-A-Wish since 2001.
  </li>
</ul>
<hr>
<p>On average, it costs roughly $9,000 for a child's wish to be granted. This cost is not just for the wish kid, but for the entire family. A child with a life threatening illness affects the whole family and the <a href="http://www.wish.org" target="_blank">Make-A-Wish Foundation</a> helps the family by letting them "forget" about doctor visits, pain management, and everyday struggles with the illness, and lets them enjoy something that they may never get to experience otherwise.
</p>
<p>Please consider the <a href="http://www.wish.org" target="_blank">Make-A-Wish Foundation</a> if you are looking for an organization to make a donation to. Your donation does not have to be monetary in nature either, they accept airline miles towards flights and gifts that they give to the wish kids. Even volunteering at your local chapter goes a long way in these childrens lives!
</p>
              
            
!

CSS

              
                body{
  width: 1000px;
  margin: 20px auto;
}

img {
  float: right;
  margin-bottom: 8px;
}

hr {
  clear: both;
}
              
            
!

JS

              
                
              
            
!
999px

Console