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

              
                <html lang="en">

<head>
  <title>A tribute to Jim Henson</title>
  <meta charset="UTF-8">
  <meta name="description" content="A tribute to Jim Henson">
  <meta name="keywords" content="HTML,CSS">
  <meta name="author" content="Lee Gainer">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Alfa+Slab+One">
</head>

<body>
  <div id="main">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <img class="img-responsive center-block" id="image-top" src="https://www.dropbox.com/s/9oj62tshv3hfr2n/jimWithKermit.jpg?raw=1" alt="Jim Henson and Kermit on set">
          <h1>Jim Henson</h1>
          <h2>a visionary storyteller</h2>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <p><strong>James Maury "Jim" Henson</strong> was an American puppeteer, artist, cartoonist, inventor, screenwriter, songwriter, musician, film director and producer who achieved international fame as the creator of the Muppets.</p>

          <p>Jim was born in Greenville, Mississippi on September 24, 1936, and was raised in Leland, Mississippi, and later, Hyattsville, Maryland. Henson began developing puppets while attending high school. While he was a freshman at the University of
            Maryland, College Park, he created <i>Sam and Friends</i>, a five-minute sketch-comedy puppet show that appeared on television. After graduating from the University of Maryland with a degree in home economics, he produced coffee advertisements and
            developed some experimental films. Feeling the need for more creative output, Henson founded <i>Muppets Inc</i>. in 1958 (which would later become the <i>Jim Henson Company</i>).</p>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <p>Henson became famous in the 1960s when he joined the children's educational television program <i>Sesame Street</i>, and there helped develop characters for the series. He also appeared on the sketch comedy show <i>Saturday Night Live</i>. In 1976, after scrapping plans for a Broadway show, he produced <i>The Muppet Show</i>. He won fame for his creations, particularly Kermit the Frog, Rowlf the Dog, and Ernie, and was involved with Sesame Street for over 20 years. He also had frequent roles in Muppets films such as <i>The Muppet Movie</i>, <i>The Great Muppet Caper</i> and <i>The Muppets Take Manhattan</i>, and created advanced puppets for projects like <i>Fraggle Rock</i>, <i>The Dark Crystal</i>, and <i>Labyrinth</i>. During the later years of his life, he also founded the <i>Jim Henson Foundation</i>, and <i>Jim Henson's Creature Shop</i>. His involvement in two television programs — <i>The Storyteller</i> and <i>The Jim Henson Hour</i> — led to Emmy Award wins.</p>
        </div>

        <div class="col-md-6">
          <img class="img-responsive center-block img-mid" id="img-small" src="https://www.dropbox.com/s/e5c5iqqam264eov/fraggleRock.jpg?raw=1" alt="Jim Henson with the characters from Fraggle Rock">
          <h6 class="text-center">Jim visits Fraggle Rock</h6>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12">
          <p>Henson died suddenly in May 1990, aged 53, from streptococcal toxic shock syndrome—an unexpected event that was widely lamented in the film and television industries. In the weeks after his death, he was celebrated in a wave of tributes. He
            was posthumously inducted into the Hollywood Walk of Fame in 1991, and as a Disney Legend in 2011.</p>

          <p>You can learn more about Jim Henson's muppets, television shows, movies, and much more at these pages.</p>
          <p>
            <ul>
              <li><a href="http://henson.com/" target="_blank">The Jim Henson Company</a></li>
              <li><a href="http://creatureshop.com/" target="_blank">The Jim Henson Creature Shop</a></li>
              <li><a href="http://www.jimhensonlegacy.org/" target="_blank">The Jim Henson Legacy</a></li>
              <li><a href="http://www.hensonfoundation.org/" target="_blank">The Jim Henson Foundation</a></li>
            </ul>
          </p>
        </div>
      </div>
      <div id="footer"></div>
    </div>
  </div>
</body>

</html>
              
            
!

CSS

              
                
@media only screen and (max-width: 500px) {
  #main { width: 85%; }
}
        
#main {
  margin: 0 auto 0 auto;
  width: 75%;
  max-width: 1200px;
}

#image-top { border-bottom-right-radius: 110px; }

h1 {
  font-size: 44px;
  character-spacing: 1.1;
  font-family: Alfa Slab One, sans-serif;
  margin-bottom: -25px;
}

p {
  font-size: 18px;
  line-height: 1.4;
  margin-top: 20px;
}

.img-mid {
  border-radius: 50px;
  max-width: 300px;
  margin-top: 30px;
}

li { font-size: 18px; }

a { color: rgb(34, 106, 15); }

a:hover { color: #000; }

#footer { height: 50px; }
              
            
!

JS

              
                
              
            
!
999px

Console