Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

              
                <table class="entire-page">

  <tr>

    <td>

      <table class="email-body">

        <tr>
          <td class="email-header">
            <a href="https://codepen.io">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/email-news-header.png" alt="CodePen News">
            </a>
          </td>
        </tr>

        <tr>

          <td class="news-section">

            <h2>Inline JavaScript Error Messaging</h2>

            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-inlinejs.png" alt="" />

            <p>The Editor now <a href="https://blog.codepen.io/2014/11/03/javascript-syntax-errors-now-shown-editor/">warns you of errors in your JavaScript</a> as you write it! It also won't execute that JavaScript until the error is fixed, just as a convenience, so you don't execute anything that wouldn't work anyway. The errors right on the line the error is in your code, but only if you click the error icon to reveal it, so it's not too obnoxious.</p>

            <p>The underlying technology opens up the doors for some more fancy things we got cooking, so stay tuned!</p>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2 style="text-align: center; margin: 0;">--- ♥ <span style="color: red;">❤</span> ♥ ---</h2>
            <p style="margin: 0; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 20px;">Some of the most popular content this month.</p>

            <table class="best-of-table">
              <tr>
                <td class="best-of-thumb">
                  <a href="https://codepen.io/vennsoh/pen/lckri"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-blackout.png" alt="" /></a>
                </td>
                <td class="best-of-about">
                  <a href="https://codepen.io/vennsoh/pen/lckri">A beautiful demo</a> by Ee Venn Soh:
                  <blockquote>
                    "Blackout is a cinematic experience done purely in CSS that explores the phenomenon caused by extinction of lights"
                  </blockquote>
                </td>
              </tr>
              <tr>
                <td class="best-of-thumb">
                  <a href="https://codepen.io/CyrilLevallois/pen/JbrfI/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-running.png" alt="" /></a>
                </td>
                <td class="best-of-about">
                  An impressive SMIL &lt;animate> <a href="https://codepen.io/CyrilLevallois/pen/JbrfI/">demo</a> by  Cyril Levallois, with a multi-jointed running figure. Try turning on the different weapons!
                </td>
              </tr>
              <tr>
                <td class="best-of-thumb">
                  <a href="https://codepen.io/Yuschick/pen/tbiHp"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-earth.png" alt="" /></a>
                </td>
                <td class="best-of-about">
                  Polygon art is beautiful anyway, but even more-so when applied three dimensionally like on <a href="https://codepen.io/Yuschick/pen/tbiHp">this globe demo</a> by Daniel Yuschick using the <a href="http://matthew.wagerfield.com/flat-surface-shader/">Flat Surface Shader</a> by <a href="https://codepen.io/wagerfield/">Matthew Wagerfield</a>.
                </td>
              </tr>
              <tr>
                <td class="best-of-thumb">
                  <a href="https://codepen.io/werme/pen/xbbvpP/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-sphere.png" alt="" /></a>
                </td>
                <td class="best-of-about">
                  <p>Gorgeous little <a href="https://codepen.io/werme/pen/xbbvpP/">sphere of spheres</a> by  Olle Werme, based on <a href="https://dribbble.com/shots/1819006-Dots-20-0">a Dribbble shot</a> by Mark Pearson.</p>

                  <p>Speaking of Dribbble crossovers, <a href="http://give-n-go.co/">Give 'n' Go</a> is a wonderful site to find those.</p>
                </td>
              </tr>
            </table>

            <p>There has been some great writing lately introducing some technologies and ushering out others:</p>

            <ul>
              <li><a href="https://codepen.io/adamaoc/blog/introduction-to-firebase">Introduction to Firebase</a> by Adam Moore</li>
              <li><a href="https://codepen.io/davidkizler/blog/greensock-for-designers">Greensock for Designers</a> by David Kizler</li>
              <li><a href="https://codepen.io/ImagineProgramming/storydump/class-inheritance-in-javascript">"Class"-inheritance in JavaScript</a> by Bas Groothedde</li>
              <li><a href="https://codepen.io/stowball/blog/cut-out-the-jquery-middle-man">Cut out the jQuery middle man</a> by Matt Stow</li>
            </ul>

            <p style="margin: 0; border-bottom: 1px solid #ddd; padding-bottom: 20px;">And don't miss Rachel Smith's <a href="https://codepen.io/rachsmith/blog/last-year-i-joined-codepen-what-happened-next-will-blow-you-away">heartwarming story</a> about her year since joining CodePen.</p>

            <p style="border-bottom: 1px solid #ddd; padding-bottom: 20px;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-collection.jpg" alt="" />
            Interested in material design? We've put together <a href="https://codepen.io/collection/amheq/">a collection of Pens</a> that demonstrate the patterns and principals of it.
            </p>



          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2>CodePen Meetups!</h2>

            <p>After our super-fun <a href="https://blog.codepen.io/2014/11/07/austin-meetup-fun/">kickoff</a> CodePen <a href="https://codepen.io/meetups">Meetup</a> in Austin, Texas, we've encouraged folks around the world to start their own.</p>

            <p>There are three coming up:</p>

            <ul>
              <li>Manchester, New Hampshire - December 4, 2014 - <a href="https://nvite.com/CodePenMeetups/c39">RSVP</a></li>
              <li>Austin, Texas - December 11, 2014 - <a href="https://nvite.com/CodePenMeetupAustin/c55">RSVP</a></li>
              <li>Istanbul, Turkey - December 15, 2014 - <a href="https://nvite.com/CodePenMeetupIstanbul/c99">RSVP</a></li>
            </ul>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2>Settings Panels: Now with less cutting-off</h2>

            <p>If you have the Editor layout in the mode with the code editors along the left or right, now that we have resizeable editors, there was the risk that the settings panels might have opened below the browser window. We've fixed that - thanks <a href="https://blog.codepen.io/2014/11/20/collision-detection-settings-panels/">collision detection!</a></p>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2>Thanks to our wonderful sponsors</h2>

            <a href="https://www.campaignmonitor.com/email-templates/?utm_source=codepen&utm_medium=newsletter&utm_campaign=canvas" style="display: block;"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-campaignmonitor.png" alt="" class="block-ad" /></a>

            <table class="advertiser-row">
              <tr>
                <td><a href="http://ding.io/"><img src="https://ads.buysellads.com/1299665/246093-1415721508.png" alt="" /></a></td>
                <td><a href="http://www.getstack.io/?utm_source=CodePen&utm_medium=CPM&utm_term=&utm_content=Flexible&utm_campaign=nov2014"><img src="https://ads.buysellads.com/1299665/246783-1416186450.jpeg" alt="" /></a></td>
                <td><a href="http://www.hackreactor.com/remote-beta/?utm_source=bsa_codepen&utm_medium=remotebeta_theoriginal&utm_campaign=300x250"><img src="https://ads.buysellads.com/1299665/247432-1416495803.png" alt="" /></a></td>
              </tr>
            </table>

            <p style="font-size: 10px; text-align: center;">Interested in adverting on CodePen? <a href="https://blog.codepen.io/documentation/brand-assets/advertising-codepen/">Get in touch.</a></p>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2>Behind the Scenes: Speed!</h2>

            <ul>

              <li>We've been working on <strong>speed</strong> on CodePen. After a variety of tweaks and fixes, we're rocking a respectable 92/100 on WebPage Test. Our worst marks are for not using a true CDN yet, but we have a solid plan for making that happen sooner than later.</li>

              <li>We've moved to using <a href="https://blog.codepen.io/2014/11/14/hash-ids-ls/">Hashids</a> for URL slugs. Our old technique was clever, but this saves us a server trip.</li>

              <li>We moved to a <a href="https://blog.codepen.io/2014/10/30/database-upgrades/">much more badass database</a> and have a gameplan to improve that even more.</li>

              <li>We've worked with Sergey Chikuyonok, the creator of the beloved <a href="http://emmet.io/">Emmet</a>, to make Emmet more efficient in the browser. We've already rolled out a version that reduces the size of it by 80% while keeping all the important features, with more optimizations to come.</li>

              <li>We improved <a href="https://blog.codepen.io/2014/11/05/improvements-mobile-detection-stuff/">how we detect for mobile devices</a> and it went from kinda janky to nice and fast.</li>
            </ul>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <div style="border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0;">
              <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-floor.png" alt="" />
              <p style="text-align: center;"><a href="https://codepen.io/noeldelgado/pen/QwWRwg">Three.js + TweenMax (Experiment)</a> by Noel Delgado</p>
            </div>

            <div style="border-bottom: 1px solid #eee; padding: 20px 0;">
              <table class="feature-row">
                <tr>
                  <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-solar.png" alt="" /></td>
                  <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/nov2014-torch.png" alt="" /></td>
                </tr>
                <tr>
                  <td><a href="https://codepen.io/kowlor/pen/ZYYQoy">Solar System</a> by Malik Dellidj</td>
                  <td><a href="https://codepen.io/sol0mka/pen/myyOWe">Jelly Torch</a> by LegoMushroom</td>
                </tr>
              </table>
            </div>

          </td>

        </tr>

        <tr>

          <td class="news-section">

            <h2>Unlock the full power of CodePen</h2>

            <p>Remember that <a href="https://codepen.io/pro/">PRO</a> offers tons features that make CodePen more awesome. <a href="https://codepen.io/signup/plans/">Upgrade now!</a> Or, try a <a href="https://codepen.io/promo/free-trial">free trial</a> for 14 days.</p>

            <br><br>

            <p style="font-weight: bold">
              ooxxooXoXXx,
            </p>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/sigs.png">

            <p style="text-align: center; font-size: 11px; margin: 0 40px;">The three of us do a podcast called <a href="https://blog.codepen.io/radio/">CodePen Radio</a> where chat about all things (you guessed it) CodePen.</p>

          </td>

        </tr>

        <tr>
          <td class="footer">
            You're receiving this email because you are member of CodePen. You can <a href="*|UNSUB:https://codepen.io/admin/unsubscribed|*">instantly opt out</a> any time.
          </td>
        </tr>

      </table>

    </td>

  </tr>

</table>
              
            
!

CSS

              
                body {
  margin: 0;
}

td, p {
  font-size: 13px;
  color: #878787;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
ul {
  margin: 0 0 10px 25px;
  padding: 0;
}
li {
  margin: 0 0 3px 0;
}
blockquote {
  margin: 10px;
  font-style: italic;
}
h1, h2 {
  color: black;
}
h1 {
  font-size: 25px;
  line-height: 1.4;
}
h2 {
  font-size: 20px;
}
a {
  color: #2F82DE;
  font-weight: bold;
  text-decoration: none;
}

.entire-page {
  background: #C7C7C7;
  width: 100%;
  padding: 20px 0;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  line-height: 1.5;
}

.email-body {
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
  background: white;
  border-collapse: collapse;
}

.email-header {
  background: black; 
  padding: 30px;
  img {
    max-width: 100%;
  }
}

.news-section {
  padding: 20px 30px;
  img {
    width: 100%;
  }
}

.best-of-thumb {
  width: 40%;
  img {
    width: 100%;
  }
}
.best-of-about {
  padding-left: 20px;
  vertical-align: top;
}
.best-of-thumb,
.best-of-about {
  border-bottom: 1px solid #ddd;
  padding-top: 20px;
  padding-bottom: 20px;
}

.advertiser-row {
  td {
    border: 10px solid #F7F8F9;
  }
  img {
    width: 100%;
    display: block;
  }
}
.block-ad {
  display: block;
}

.feature-row {
  border-collapse: separate ;
  img {
    width: 100%;
    display: block;
    margin: 0 0 10px 0;
  }
  td {
    text-align: center;
  }
  td:nth-child(1) {
    border-right: 10px solid white;
  }
  td:nth-child(2) {
    border-left: 10px solid white;
  }
}

.footer {
  background: #eee;
  padding: 10px;
  font-size: 10px;
  text-align: center;
}
              
            
!

JS

              
                
              
            
!
999px

Console