<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">
          
            <h1>  Introducing PRO Teams</h1>
            
            <a href="https://blog.codepen.io/documentation/pro-features/pro-teams/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/codepen-team.130433.png"></a>
            
            <p>You asked for it, we built it! <a href="https://blog.codepen.io/documentation/pro-features/pro-teams/">PRO Teams</a> makes it much easier to work with a group of people on CodePen. Everyone on that Team can create and edit Team-owned Pens, create Collections as a team, and more. Every person on that Team gets PRO-level access on CodePen - and billing is consolidated to just the Team Owner.</p>
            
            <p><a href="https://codepen.io/signup/plans/">Upgrade Now &rarr;</a></p>
            
          </td>
          
        </tr>
        
        <tr>
          
          <td class="news-section">
          
            <h2>  Easier Embedding with oEmbed</h2>
            
            <a href="https://blog.codepen.io/documentation/features/oembed/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/email-oembed.131633.png"></a>
            
            <p>CodePen now supports oEmbed, which makes embedding Pens as easy as pasting a link into content. WordPress supports it, and there is a tiny plugin to enable it for you. This is particularly useful for allowing embeds in places that wouldn't normally allow someone to post JavaScript, like user comment areas. <a href="https://blog.codepen.io/documentation/features/oembed/">Learn more about CodePen oEmbed</a>.</p>
            
          </td>
          
        </tr>
        
        <tr>
          
          <td class="news-section">
          
            <h2>Better and better and better</h2>
            
            <p>We're always striving to make the CodePen editor better. More useful features, speed, and behind-the-scenes stuff to make things work more as-expected. Here's some things we've done recently:</p>
            
            <ul>
              <li>
                Autoprefixer <a href="https://blog.codepen.io/2014/03/28/new-feature-autoprefixer/">now available</a>.</li>
              <li>
                <a href="https://blog.codepen.io/2014/02/21/vim-key-bindings/">Vim</a> and <a href="https://blog.codepen.io/2014/03/25/spring-editor-upgrades/">Sublime Text</a> key bindings now available.</li>
              <li>
                In-editor Search and Find &amp; Replace.</li>
              <li>
                Bracket matching everywhere.</li>
              <li>
                target="_blank" links <a href="https://blog.codepen.io/2014/02/06/opening-links-pens/">work</a>.</li>
            </ul>
            
          </td>
          
        </tr>
        
        <tr>
          
          <td class="news-section">
          
            <h2>  CodePen Radio</h2>
            
            <p> What is it like to run a web software business these days? It's pretty complicated, but damn rewarding. Chris, Alex, and Tim talk about it each week on the new <a href="https://blog.codepen.io/radio/">CodePen Radio</a> podcast (on <a href="https://itunes.apple.com/us/podcast/codepen-radio/id824437159">iTunes</a>).</p>
            
          </td>
          
        </tr>
        
        <tr>
          
          <td class="news-section">
          
            <h2>  Go PRO</h2>
            
            <p>Remember that <a href="https://codepen.io/pro/">PRO</a> offers loads of features that really unlock the full power of CodePen. <a href="https://codepen.io/signup/plans/">Upgrade now!</a></p>
            
            <br><br>
            
            <p style="font-weight: bold">
              <span style="color: red;">L</span>
              <span style="color: pink;">O</span>
              <span style="color: red;">V</span>
              <span style="color: pink;">E</span>
              <span style="color: red;">S</span>
              ,
            </p>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/sigs.png">
            
          </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>
body {
  margin: 0;
}

td, p {
  font-size: 13px;
  color: #878787;
}
ul {
  margin: 0 0 10px 25px;
  padding: 0;
}
li {
  margin: 0 0 3px 0;
}
h1, h2 {
  color: black;
}
h1 {
  font-size: 25px;
}
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;
  img {
    max-width: 100%;
  }
}

.email-header {
  background: black; 
  padding: 30px;
}

.news-section {
  padding: 20px 30px;
}

.footer {
  background: #eee;
  padding: 10px;
  font-size: 10px;
  text-align: center;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.