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

Auto Save

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

              
                <!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, initial-scale=1">
  <title>Email</title>
  <style type="text/css">
    body{
      			margin:0;
      			padding:0;
      		}
      		table td{
      			border-collapse:collapse;
      		}
      		a:visited{
      			color:inherit;
      			text-decoration:none;
      		}
      		a:focus{
      			color:inherit;
      			text-decoration:underline;
      		}
      		a:hover{
      			color:inherit;
      			text-decoration:underline;
      		}
      		.p a{
      			color:#000000;
      			text-decoration:none;
      		}
      		img{
      			max-width:640px !important;
      			outline:none;
      			text-decoration:none;
      			-ms-interpolation-mode:bicubic;
      		}
      		a img{
      			border:none;
      		}
      		.ExternalClass{
      			width:100%;
      		}
      		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
      			line-height:100%;
      		}
      		.applefix a{
      			color:#000000;
      			text-decoration:none;
      		}
      		span[class=preheader]{
      			display:none;
      		}
      		span.yshortcuts{
      			border:none;
      			background-color:none;
      			color:#000000;
      		}
      		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
      			border:none;
      			background-color:none;
      			color:#000000;
      		}
      		body,#body_style{
      			background:#ffffff;
      			color:#000000;
      			font-family:Georgia, Times, Times New Roman, serif;
      			font-size:14px;
      		}
      	@media only screen and (max-width: 640px){
      		img[class=img-responsive]{
      			width:100% !important;
      			max-width:480px !important;
      			height:auto !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		img[class=img-hidden]{
      			width:auto !important;
      			max-height:none !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=img-resp-wrap] img{
      			width:100% !important;
      			height:auto !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		table[id=email-container]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		table[class=col-m-container]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=col-m-12]{
      			display:block !important;
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		#col3__bigbox{
      			height:auto !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=col-m-hidden]{
      			display:none !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=col-m-visible]{
      			display:block !important;
      			max-height:none !important;
      			font-size:12px !important;
      			line-height:1.5 !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		table[class=btn-default]{
      			width:100% !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		table[class=btn-footer-info] a{
      			height:auto !important;
      			line-height:normal !important;
      			padding:10px;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=header-logo] img{
      			width:130px !important;
      			height:auto !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		td[class=header-promo] img{
      			width:80px !important;
      			height:80px !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		a[class=header-nav__link]{
      			font-size:13px !important;
      		}
      
      }	@media only screen and (max-width: 640px){
      		br[class=br-hidden-mob]{
      			display:none !important;
      		}
      
      }	@media only screen and (max-width: 340px){
      		td[class=col-s-12]{
      			display:block !important;
      			width:100% !important;
      		}
      
      }
  </style>
</head>

<body bgcolor="#FFFFFF" style="-webkit-text-size-adjust: none;background-color: #ffffff;margin: 0;padding: 0;background: #ffffff;color: #000000;font-family: Georgia, Times, Times New Roman, serif;font-size: 14px;">
  <!-- [email container] -->
  <table id="email-container" width="640" align="center" cellpadding="20" cellspacing="0" border="0" style="display: block;max-width: 640px;background-color: #ffffff;">
    <tr>
      <td align="center" valign="top" style="border-collapse: collapse;">
        <div>
          <!-- [header nav] -->
          <table class="col-m-container" id="header" width="600" cellpadding="0" cellspacing="0" border="0" style="border-bottom: 1px dotted #5a5758;">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td class="header-logo" align="left" valign="top" style="border-collapse: collapse;">
                      <a href="http://www.theschooloflife.com/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" target="_blank" style="font-family: Georgia, Times, Times New Roman, serif;color: #FFF008;text-decoration: none;font-size: 30px;text-transform: uppercase;font-weight: bold;">
                        <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/492f734e-f4be-46d0-b8e9-3ae28c149bfb.png" width="178" height="131" alt="The School of Life" style="display: block;margin: 0;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td class="col-m-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end header nav] -->
          <!-- [spacer] -->
          <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td align="center" valign="top" style="border-collapse: collapse;">
                      <img class="spacer-img" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end spacer] -->
        </div>
        <div>
          <!-- [col3] -->
          <table class="col-m-container" width="600" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <!-- [col1] -->
              <td class="col-m-12" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td class="col-m-12" width="100%" align="center" valign="middle" style="border-collapse: collapse;">
                      <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-m-12" id="col3__bigbox" width="254" height="254" align="center" valign="middle" style="background: #FFF002;border-collapse: collapse;">
                            <table class="col-m-container" width="100%" cellpadding="40" cellspacing="0" border="0">
                              <tr>
                                <td style="padding-bottom: 0;border-collapse: collapse;">
                                  <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 18px;font-family: Georgia, Times, Times New Roman, serif;"><span style="font-size:14px">Welcome to The School of Life. We are devoted to developing emotional intelligence through the help of culture. For&nbsp;10% off your next &nbsp;Core Curriculum Class or purchase from our UK shop, use code <strong>GOODNEWS.</strong></span>
                                  </div>
                                  <br>
                                </td>
                              </tr>
                              <tr>
                                <td align="center" style="padding: 0;padding-bottom: 20px;border-collapse: collapse;">
                                  <a href="http://www.theschooloflife.com/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" target="_blank" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;">
                                    <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/ef3b1685-a1cb-4069-94bc-5b29c9cf9668.png" width="62" height="22" alt="" style="display: block;margin: 0;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                                  </a>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td class="col-m-12" width="2%" height="20" align="center" valign="top" style="border-collapse: collapse;">
                <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="1" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
              </td>
              <!-- [cols] -->
              <td class="col-m-12" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <!-- [col2] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-classroom" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/6d3f6183-e3ae-4977-88ec-7cd3fb9f3aff.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #FFF002;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">We teach classes in everything from careers to creativity.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="http://www.theschooloflife.com/london/shop/classroom/core-curriculum/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e"
                                style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;" target="_blank">MORE &gt;&gt;</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="" width="2%" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="1" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                    <!-- [col3] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-shop" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/5ac644c7-dc1c-4e5d-aab4-71d92c89cc4b.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #ECA4CD;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">Find thoughtful gifts designed to make modern life better.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="http://www.theschooloflife.com/shop/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;"
                                target="_blank">MORE &gt;&gt;</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end col3] -->
          <!-- [spacer] -->
          <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td align="center" valign="top" style="border-collapse: collapse;">
                      <img class="spacer-img" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end spacer] -->
        </div>
        <div>
          <!-- [col3] -->
          <table class="col-m-container" width="600" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <!-- [cols] -->
              <td class="col-m-12" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <!-- [col2] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-therapy" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/a2a6ce86-672f-45ec-baa5-6f29575ab5c8.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #78d7ea;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">Find direction, with in-depth support from a trained therapist.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="http://www.theschooloflife.com/london/shop/therapy/therapy/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e"
                                style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;" target="_blank">MORE &gt;&gt;</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="" width="2%" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="1" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                    <!-- [col3] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-business" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/6f1e1cd8-25e2-4745-b1c1-1471fe3dd783.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #759b55;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">Our bespoke solutions can help your staff and business thrive.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="http://www.theschooloflife.com/london/business/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;"
                                target="_blank">MORE &gt;&gt;</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td class="col-m-12" width="2%" height="20" align="center" valign="top" style="border-collapse: collapse;">
                <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="1" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
              </td>
              <!-- [cols] -->
              <td class="col-m-12" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <!-- [col2] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-youtube" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/06357952-1f04-4dae-81fd-413306996e49.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #67b6c8;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">Watch three new films every week: life lessons to inspire and educate.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="https://www.youtube.com/user/schooloflifechannel/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e"
                                style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;" target="_blank">MORE &gt;&gt;</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="" width="2%" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="1" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                    <!-- [col3] -->
                    <td class="" width="49%" align="center" valign="top" style="border-collapse: collapse;">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="col-s-12" width="100%" align="center" valign="top" style="border-collapse: collapse;">
                            <img class="img-responsive" id="img-the-book-of-life" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/4e161f97-edc0-41cd-b7fa-815545d9810e.png" width="144" height="144" alt="" style="display: block;margin: 0;padding: 0;border: 0;background: #ee7869;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                        <tr>
                          <td class="col-s-12" width="100%" align="left" valign="top" style="border-collapse: collapse;">
                            <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">Read our thoughts on relationships, careers, culture and self.</div>
                            <br>
                            <div class="btn" style="text-align: center;">
                              <a href="#" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: uppercase;" target="_blank">Mor<strong>e</strong>
                                </a><strong>&nbsp;&gt;&gt;</strong>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end col3] -->
          <!-- [spacer] -->
          <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td align="center" valign="top" style="border-collapse: collapse;">
                      <img class="spacer-img" src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end spacer] -->
        </div>
        <div>
          <!-- [footer] -->
          <table class="col-m-container" id="footer-info" width="600" cellpadding="0" cellspacing="0" border="0" style="border-top: 1px dotted #5a5758;border-bottom: 1px dotted #5a5758;">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td class="col-m-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                  <tr>
                    <td class="col-m-12" width="305" align="left" valign="top" style="border-collapse: collapse;">
                      <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">The School of Life &copy;2016
                        <br>70 Marchmont St, London, WC1N 1AB
                        <br>
                        <a href="http://www.theschooloflife.com?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;"
                          target="_blank">www.theschooloflife.com</a>
                      </div>
                    </td>
                    <td class="col-m-12" align="center" valign="top" width="20" height="20" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                    <td class="col-m-12" width="295" align="left" valign="top" style="border-collapse: collapse;">
                      <table class="col-m-container" width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="footer-info__socials" align="center" valign="top" style="border-collapse: collapse;">
                            <a href="https://www.facebook.com/theschooloflifelondon?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" target="_blank"
                              style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;text-align: center;">
                              <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/5d92aab5-7b59-4ff2-aab6-3e1240154048.png" alt="" style="display: block;margin: 0 auto;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                            </a>
                          </td>
                          <td class="footer-info__socials" align="center" valign="top" style="border-collapse: collapse;">
                            <a href="https://twitter.com/theschooloflife?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" target="_blank"
                              style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;text-align: center;">
                              <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/d12396ea-7c0f-4b54-80dd-8014351c76c1.png" alt="" style="display: block;margin: 0 auto;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                            </a>
                          </td>
                          <td class="footer-info__socials" align="center" valign="top" style="border-collapse: collapse;">
                            <a href="https://www.pinterest.com/theschooloflife/?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e" target="_blank"
                              style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;text-align: center;">
                              <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/e79e234a-ca33-4b34-b449-84be59ea2217.png" alt="" style="display: block;margin: 0 auto;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                            </a>
                          </td>
                          <td class="footer-info__socials" align="center" valign="top" style="border-collapse: collapse;">
                            <a href="https://www.linkedin.com/company/the-school-of-life?utm_source=The+School+of+Life+Mailing+List&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_term=0_ee13007971-759b87cfa9-21232297&mc_cid=759b87cfa9&mc_eid=de18790f1e"
                              target="_blank" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;text-align: center;">
                              <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/765802ec-47d8-42c1-82c1-a3a281956fb4.png" alt="" style="display: block;margin: 0 auto;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                            </a>
                          </td>
                          <td class="footer-info__socials" align="center" valign="top" style="border-collapse: collapse;">
                            <a href="https://www.instagram.com/theschooloflifelondon/?mc_cid=759b87cfa9&mc_eid=de18790f1e&utm_campaign=759b87cfa9-Welcome+to+The+School+of+Life&utm_medium=email&utm_source=The+School+of+Life+Mailing+List&utm_term=0_ee13007971-759b87cfa9-21232297"
                              target="_blank" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: none;text-align: center;">
                              <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/ae91bbd5-cd9c-4767-a53e-80985ffae8b1.png" alt="" style="display: block;margin: 0 auto;padding: 0;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                            </a>
                          </td>
                        </tr>
                        <tr>
                          <td colspan="5" class="col-m-12" align="center" valign="top" width="20" height="12" style="border-collapse: collapse;">
                            <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="12" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td class="col-m-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end footer] -->
        </div>
        <div>
          <!-- [footer copy] -->
          <table class="col-m-container" id="footer-copy" width="600" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td align="center" valign="top" style="border-collapse: collapse;">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td class="col-m-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                  <tr>
                    <td class="col-m-12" width="305" align="center" valign="top" style="border-collapse: collapse;">
                      <div class="p" style="margin: 0;padding: 0;color: #000000;font-size: 14px;font-family: Georgia, Times, Times New Roman, serif;">
                        <a href="#" style="font-family: Georgia, Times, Times New Roman, serif;color: #000000;text-decoration: underline;">Unsubscribe</a> XXXX@XXXXXXX.com
                        from this list.</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="col-m-12" width="20" height="20" align="center" valign="top" style="border-collapse: collapse;">
                      <img src="https://gallery.mailchimp.com/ac2881538168a724cf44bca81/images/79561b96-f6cb-44ef-a909-c354d99430f1.png" width="20" height="20" alt="" style="display: block;margin: 0;padding: 0;border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;max-width: 640px !important;">
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!-- [/end footer copy] -->
        </div>
      </td>
    </tr>
  </table>
  <!-- [/end email container] -->
  
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console