css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <html lang="en">

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

  <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 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 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 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 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>
              <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>
      <div id="footer"></div>

@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; }
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................