123

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.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="viewport" content="width=device-width" />
      <title>*|MC:SUBJECT|*</title>

      <style>

  @media only screen and (max-width: 600px){

    /*  Defaults */

    table {
      font-size: 14px !important;
    }

    h1 {
      font-size: 24px !important;
    }

    h2 {
      font-size: 20px !important;
    }

    h3 {
      font-size: 18px !important; }

    h4 {
      font-size: 14px !important; }

    h5 {
      font-size: 14px !important;
    }

    /*  Header */

    .header {
      margin: 0 auto;
      width: 92% !important;
    }

    .logo {
      max-width: 70%;
    }

    .logo-small {
      width: 120px !important;
    }

    /* Content Helpers */

    .content--wrapper {
      margin: 0 auto;
      padding: 0 !important;
      width: 100% !important;
    }

    .content--wrapper img,
    .flex--size img {
      height: auto !important;
      max-width: 100% !important;
    }

    .content--wrapper img.bordered {
      height: auto !important;
      max-width: 98% !important;
    }

    .content--footer {
      text-align: left !important
    }

    .content--footer a {
      color: #fff !important
    }

    /*  Responsive Layout Shifts */

    .flex--size {
      width: 100% !important;
    }

    .flex--content {
      margin: 0 auto !important;
      width: 92% !important;
    }

    .flex--content img {
      height: auto !important;
      max-width: 100% !important;
    }

    .flex--stack {
      display: block !important;
    }

    .flex--title {
      width: 190px !important;
    }

    /*  Responsive Helpers */

    .hide-small {
      display: none;
    }

    .right-to-left {
      text-align: left !important;
    }

    .reduce--size {
      font-size: 13px;
      padding-bottom: 10px;
    }

    .small--type {
      font-size: 10px !important;
    }

    .btn--full {
      text-align: center;
      width: 100% !important;
    }

    .space--bottom {
      padding-bottom: 10px;
    }

    .slantIndent {
      padding-left: 0 !important;
    }

    .stacked-space {
      padding-bottom: 15px;
    }

    .center--img {
      text-align: center;
      width: 320px;
    }

    /*  Footer */
    
    .footer {
      font-size: 12px !important;
      margin: 0 auto;
      width: 92% !important;
    }

    .footer a {
      color: #ffffff !important;
    }

    .link-mask a { color: #696969 !important; font-weight: normal !important; text-decoration: none !important; } .link-mask-b a { color: #636365 !important; font-weight: normal !important; text-decoration: none !important; } .link-mask-c a { color: #ffffff !important; font-weight: normal !important; text-decoration: none !important; }

  }
</style>

  </head>
  
  <body leftmargin="0" marginwidth="0" marginheight="0" offset="0" topmargin="0">
    <center>
      <!-- // BEGIN BODYWRAP -->
        <table bgcolor="#efeddf" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top: 2px solid #efeddf; color: #525254; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;">
          <tr>
            <td>

              <!-- // BEGIN HEADER WRAPPER -->
                <table  bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td align="center" valign="top">

                      <!-- // BEGIN HEADER -->
                        <table border="0" cellpadding="0" cellspacing="0" class="header" style="color: #999999; font-size: 10px; width: 600px;">
                          <tr>  
                            <td width="10"></td>                       
                            <td valign="top"  class="mobile--header" style="padding-bottom: 19px; padding-top: 15px;">
                              
                              <a href="http://codeschool.com" mc:edit='header-logo' style="display: block; width: 150px;"><img src="https://d367zuf2xzw0m3.cloudfront.net/common/codeschool-logo.png" alt="Code School - Learn by doing" class="logo" width="150">
                              </a>
                            
                            </td>
                            <td>
                              <table align="right" border="0" cellpadding="0" cellspacing="0" class="flex--size hide-small" style="color: #999999; font-size: 10px; width: 400px;">
                                <tr>
                                  <td mc:edit="preheader_content">
                                    Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
                                  </td>
                                </tr>
                                <tr>
                                  <td valign="top" mc:edit="preheader_links" style="color: #bbbbbb">
                                      Email not displaying correctly? <a href="*|ARCHIVE|*" target="_blank" style="color: #bbbbbb;">View it in your browser</a>.
                                  </td>
                                </tr>
                              </table>
                            </td>
                            <td width="10"></td>                
                          </tr>
                        </table>
                      <!-- // END HEADER -->

                    </td>
                  </tr>
                </table>
              <!-- // END HEADER WRAPPER  -->

              <!-- // BEGIN CONTENT WRAPPER  -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td align="center" valign="top">

                      <style>
  @media only screen and (max-width: 600px) { .img--custom { width: 200px !important; } }
</style>
<!-- / Discover Drive Wrapper -->
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' class='flex--size' width='100%'>
  <tr bgcolor='#ffffff'>
    <td align='center'>
      <!-- / Discover Drive Image -->
      <table border='0' cellpadding='0' cellspacing='0' class='content--wrapper' style='color: #656565;' width='600'>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='center'>
            <img alt='Discover Drive animation' src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/Discover_Google_Drive_jw.gif' style='display: block;' width='580' />
          </td>
          <td width='10'></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align='center'>
      <!-- / Discover Drive Copy -->
      <table border='0' cellpadding='0' cellspacing='0' class='content--wrapper' style='color: #656565;' width='600'>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <h3 style='color: #656565; font-size: 22px; margin: 0; padding-bottom: 5px;'>Launched - Discover Drive</h3>
            Learn to build applications with the Google Drive API in order to organize, backup, and share photos, videos, and other documents in the cloud. In this free course, you’ll be using the Google Drive API to build your own photo-sharing site where users can upload and share photos. Give it a try and up your app game.
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <!-- / Discover Drive Button -->
            <table align='center' border='0' cellpadding='0' cellspacing='0' height='100%' style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;" width='260'>
              <tr>
                <td bgcolor='#4285f4' style='border-radius: 3px;' valign='top'>
                  <a href='http://drive.codeschool.com/' style='color: #ffffff; display: block; font-size: 14px; font-weight: bold; line-height: 3; text-align: center; text-decoration: none; text-transform: uppercase;'>Play Now</a>
                </td>
              </tr>
            </table>
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='30'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- / Rails for ZombiesWrapper -->
<table bgcolor='#000000' border='0' cellpadding='0' cellspacing='0' class='flex--size' width='100%'>
  <tr>
    <td>
      <img alt='Rails for Zombies bar' src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/rfz_bar.png' width='100%' />
    </td>
  </tr>
  <tr>
    <td align='center' colspan='3'>
      <img alt='Rails for Zombies Brand' class='img--custom' src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/rfz_brand.png' width='280' />
    </td>
  </tr>
  <tr>
    <td align='center'>
      <!-- / Rails for Zombies Content -->
      <table border='0' cellpadding='0' cellspacing='0' class='content--wrapper' style='color: #eceae7;' width='600'>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <h3 style='color: #d3a131; font-size: 22px; margin: 0; padding-bottom: 5px;'>Rails for Zombies - Updated to Rails 4 and Ruby 2</h3>
            If you haven't started learning Ruby on Rails, now is a great time. We just made some big improvements to our Rails for Zombies course, now using the Ruby 2 recommended hash syntax throughout, as well as a few small syntax updates for Rails 4. Oh, and Gregg also learned how to pronounce the word "attribute," go Gregg!
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <!-- / Rails for Zombies Button -->
            <table align='center' border='0' cellpadding='0' cellspacing='0' height='100%' style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;" width='260'>
              <tr>
                <td background='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/rfz_button.png' bgcolor='#adce00' style="background-image: url('https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/rfz_button.png'); border-radius: 3px; height: 42px;" valign='top'>
                  <a href='http://railsforzombies.org/levels/1/' style='color: #f7ffce; display: block; font-size: 14px; font-weight: bold; line-height: 3; text-align: center; text-decoration: none; text-shadow: 0 0 2px #576800; text-transform: uppercase;'>Play Now</a>
                </td>
              </tr>
            </table>
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='30'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- / Fluent ConfWrapper -->
<table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' class='flex--size' width='100%'>
  <tr>
    <td bgcolor='#00b3b2' colspan='3' height='8'></td>
  </tr>
  <tr>
    <td align='center'>
      <!-- / Fluent Conf Content -->
      <table border='0' cellpadding='0' cellspacing='0' class='content--wrapper' style='color: #333333;' width='600'>
        <tr>
          <td colspan='3' height='25'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='center' colspan='3'>
            <img alt='Fluent Conf Logo' src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/logo_fluent.png' width='150' />
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <h3 style='color: #333333; font-size: 22px; margin: 0; padding-bottom: 5px;'>Join us at Fluent</h3>
            We will be at O'Reilly's
            <a href='http://fluentconf.com/fluent2014' style='color: #00b3b2; font-weight: bold;'>Fluent Conference</a>
            March 11-13 in San Francisco and would love for you to stop by our booth and say hi!
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            If you are interested in going, use code
            <strong>CODESCHOOL25</strong>
            to save 25% on your registration fee. If you aren't familiar with Fluent, it is one the best conferences for staying up-to-date on current tools and technologies through the great speaker lineup that O'Reilly brings together.
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='15'></td>
        </tr>
        <tr>
          <td width='10'></td>
          <td align='left'>
            <!-- / Fluent Conf Button -->
            <table align='center' border='0' cellpadding='0' cellspacing='0' height='100%' style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;" width='260'>
              <tr>
                <td bgcolor='#00b3b2' style='border-radius: 3px;' valign='top'>
                  <a href='https://en.oreilly.com/fluent2014/public/register' style='color: #ffffff; display: block; font-size: 14px; font-weight: bold; line-height: 3; text-align: center; text-decoration: none; text-transform: uppercase;'>Join us at Fluent</a>
                </td>
              </tr>
            </table>
          </td>
          <td width='10'></td>
        </tr>
        <tr>
          <td colspan='3' height='30'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- / Code TV -->
<table bgcolor='#0e1216' border='0' cellpadding='0' cellspacing='0' class='flex--size' width='100%'>
  <tr>
    <td bgcolor='#222222;' height='5'></td>
  </tr>
  <!-- / Spacer -->
  <tr>
    <td height='25'></td>
  </tr>
  <!-- / Code TVs -->
  <tr>
    <td align='center'>
      <table border='0' cellpadding='0' cellspacing='0' class='flex--content' width='100%'>
        <tr>
          <td align='center'>
            <img src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/new_code_tv.png' width='380' />
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- / Spacer -->
  <tr align='center'>
    <td height='10'></td>
  </tr>
  <tr>
    <td align='center'>
      <h2 style=' color: #efebdf; font-size: 42px; margin: 0;'>New Code TV Screencasts</h2>
    </td>
  </tr>
  <!-- / Spacer -->
  <tr>
    <td height='15'></td>
  </tr>
  <!-- / Code TV One Wrapper -->
  <tr>
    <td align='center' valign='top'>
      <table border='0' cellpadding='0' cellspacing='0'></table>
      <!-- / Code TV One -->
      <table align='center' border='0' cellpadding='0' cellspacing='0' class='flex--size' style="color: #636365; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;" width='600'>
        <tr>
          <td width='10'></td>
          <td bgcolor='#efeddf' style='border: 4px solid #b54526; margin: 0; padding: 15px;'>
            <table align='left' border='0' cellpadding='0' cellspacing='0' class='flex--size' style="color: #e2ded2; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; padding-right: 20px; width: 100px;">
              <tr>
                <td align='center' style='padding-bottom: 15px;' valign='top'>
                  <img src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/badge_ruby_codetv.png' width='80' />
                </td>
              </tr>
            </table>
            <table align='left' border='0' cellpadding='0' cellspacing='0' class='flex--size' style='width: 440px;'>
              <tr>
                <td>
                  <table border='0' cellpadding='0' cellspacing='0' class='flex--content' style=" color: #636365; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;">
                    <tr>
                      <td mc:edit='code-tv-1-content'>
                        <h3 style=' color: #3f4944; font-size: 18px; margin: 0; padding-bottom: 5px;'>Soup to Bits: Rails for Zombies</h3>
                        After you take the updated Rails for Zombies course, come watch this screencast where Olivier and Gregg use the skills they taught in Rails for Zombies to build a Rails app from scratch.
                      </td>
                    </tr>
                    <tr>
                      <td height='15'></td>
                    </tr>
                    <tr>
                      <td mc:edit='code-tv-1-content-02'>
                        Soup to Bits is a new video series we're trying out where we take you through the practical steps of building the applications and projects that you've seen in Code School courses. Let us know if you dig it.
                        <table border='0' cellpadding='0' cellspacing='0' class='btn--full' height='100%' style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; padding-bottom: 15px; padding-top: 15px; " width='200px'>
                          <tr>
                            <td align='center' mc:edit='code-tv-1-button' style='background: #b54526; border-radius: 3px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;' valign='top'>
                              <a href='https://www.codeschool.com/code_tv/soup-to-bits-rails-for-zombies/' style='color: #ffffff; display: block; font-size: 16px; font-weight: bold; text-decoration: none; text-transform: uppercase;'>Watch Now</a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width='10'></td>
        </tr>
      </table>
      <table border='0' cellpadding='0' cellspacing='0'>
        <tr>
          <td height='30'></td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- / Code TV Two Wrapper -->
  <tr>
    <td align='center' valign='top'>
      <table border='0' cellpadding='0' cellspacing='0'>
        <tr>
          <td height='15'></td>
        </tr>
      </table>
      <!-- / Code TV Two -->
      <table align='center' border='0' cellpadding='0' cellspacing='0' class='flex--size' style="color: #636365; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;" width='600'>
        <tr>
          <td width='10'></td>
          <td bgcolor='#efeddf' style='border: 4px solid #e67236; margin: 0; padding: 15px;'>
            <table align='left' border='0' cellpadding='0' cellspacing='0' class='flex--size' style="color: #e2ded2; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; padding-right: 20px; width: 100px;">
              <tr>
                <td align='center' style='padding-bottom: 15px;' valign='top'>
                  <img src='https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/badge_electives_codetv.png' width='80' />
                </td>
              </tr>
            </table>
            <table align='left' border='0' cellpadding='0' cellspacing='0' class='flex--size' style='width: 440px;'>
              <tr>
                <td>
                  <table border='0' cellpadding='0' cellspacing='0' class='flex--content' style=" color: #636365; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4;">
                    <tr>
                      <td mc:edit='code-tv-2-content'>
                        <h3 style=' color: #3f4944; font-size: 18px; margin: 0; padding-bottom: 5px;'>Vim and tmux</h3>
                        We take a look at how to use Vim and tmux to supercharge your productivity. Separately, Vim and tmux are great tools; and together they make for a winning combination.
                        <table border='0' cellpadding='0' cellspacing='0' class='btn--full' height='100%' style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; padding-bottom: 15px; padding-top: 15px; " width='200px'>
                          <tr>
                            <td align='center' mc:edit='code-tv-2-button' style='background: #e67236; border-radius: 3px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;' valign='top'>
                              <a href='https://www.codeschool.com/code_tv/vim-and-tmux/' style='color: #ffffff; display: block; font-size: 16px; font-weight: bold; text-decoration: none; text-transform: uppercase;'>Watch Now</a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width='10'></td>
        </tr>
      </table>
      <table border='0' cellpadding='0' cellspacing='0'>
        <tr>
          <td height='30'></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


                    </td>
                  </tr>
                </table>
              <!-- // END CONTENT WRAPPER  -->

              <!-- // BEGIN FOOTER WRAPPER  -->
  <table bgcolor="#3f4944" border="0" cellpadding="0" cellspacing="0" width="100%" style="font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif;">
    <tr>
      <td align="center">

        <table border="0" cellpadding="0" cellspacing="0" class="flex--size footer" style="color: #bfbeb2; padding-bottom: 20px; padding-top: 20px; width: 600px;">
          <tr>    
            <td width="10"></td>      
            <td valign="top">

              <table align="left" border="0" cellpadding="0" cellspacing="0" width="250" class="flex--size" style="color: #bfbeb2; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px !important;">
                <tr>
                  <td valign="top" mc:edit='footer-support'>

                    <a href="https://twitter.com/codeschool"><img src="https://d367zuf2xzw0m3.cloudfront.net/common/social-twitter.png" height="24" width="24" alt="Twitter Icon" /></a>&nbsp;&nbsp;

                    <a href="https://facebook.com/codeschool"><img src="https://d367zuf2xzw0m3.cloudfront.net/common/social-facebook.png" height="24" width="24" alt="Facebook Icon" /></a>&nbsp;&nbsp;

                    <a href="https://www.youtube.com/user/CodeSchoolTV"><img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/email_social_youtube.png" height="24" width="24" alt="Youtube Icon" /></a>&nbsp;&nbsp;

                    <a href="https://plus.google.com/104172014188858296563/posts"><img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/email_social_gplus.png" height="24" width="24" alt="Google+ Icon" /></a>

                    <br /><br />

                    Have questions or need assistance? <a href="http://help.codeschool.com" style="color: #ffffff;">help.codeschool.com</a>

                    <br /><br />
                    
                    <a href="https://www.codeschool.com/account/edit" style="color: #ffffff;">Edit your email settings</a>

                    <br />
                    <br />
                        
                    <a href="*|UNSUB|*" style="color: #ffffff;">Unsubscribe from this list</a><strong></strong>

                  </td>
                </tr>
              </table>

              <table align="left" border="0" cellpadding="0" cellspacing="0" width="80" class="flex--size" style="text-align: center;">
                <tr>
                  <td valign="top" style="padding-bottom: 20px; padding-top: 20px;">

                    <a href="http://codeschool.com" mc:edit='footer-logo'>
                      <img src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/logo_footer.png" alt="Code School" width="53" />
                    </a>

                  </td>
                </tr>
              </table>

              <table align="right" border="0" cellpadding="0" cellspacing="0" width="250" class="flex--size right-to-left" style="color: #6a7c72; font-family: 'Open Sans', AppleSDGothicNeo-Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px !important; text-align: right;">
                <tr>
                  <td mc:edit='footer-company' valign="top">

                    <br />

                    Our mailing address is: <br />                                   
                    618 E South Street • Suite 620<br /> 
                    Orlando, FL 32801 
                    
                    <br /><br />
                    
                    <em>Copyright &copy; Code School LLC,<br />All rights reserved.</em>

                  </td>
                </tr>
              </table>
            
            </td>
            <td width="10"></td>
          </tr>
        </table>
        
      </td>
      
    </tr>

  </table>
<!-- // END FOOTER WRAPPER  -->

        </td>
        </tr>

        </table>
      <!-- // END BODYWRAP -->

    </center>
  </body>
</html>

            
          
!
            
              // I'm working on some posts to share HTML email techniques and thought I'd share the whopping amount of tables that go into the Code School Newsletter.
            
          
!
999px
🕑 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.

Console