Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 or require. We'll also process your JavaScript with Babel.

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

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

            
              <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
  <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport">
  <meta name="viewport" content="width=device-width">
  <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
  <title></title>
  <!--Leave Spaces 1019 characters for iOS Buffering-->
  <!--Leave Spaces 1019 characters for iOS Buffering-->
  <style>
    @font-face {
      font-family: galano_grotesque_black;
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Black-webfont.eot);
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Black-webfont.eot#iefix) format("embedded-opentype"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Black-webfont.woff2) format("woff2"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Black-webfont.woff) format("woff"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Black-webfont.ttf) format("truetype");
      font-weight: 900;
      font-style: normal
    }

    @font-face {
      font-family: galano_grotesque_bold;
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.eot);
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.eot#iefix) format("embedded-opentype"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.woff2) format("woff2"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.woff) format("woff"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.ttf) format("truetype"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Bold-webfont.svg#galano_grotesquebold) format("svg");
      font-weight: 700;
      font-style: normal
    }

    @font-face {
      font-family: galano_grotesque;
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.eot);
      src: url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.eot#iefix) format("embedded-opentype"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.woff2) format("woff2"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.woff) format("woff"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.ttf) format("truetype"), url(https://static.snapkitchen.com/fonts/GalanoGrotesque-Regular-webfont.svg#galano_grotesqueregular) format("svg");
      font-weight: 400;
      font-style: normal
    }
  </style>
  <style type="text/css">
    .ExternalClass {
      width: 100%;
    }

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }

    table td {
      border-collapse: collapse;
      border-spacing: 0;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    body {
      font-family: Arial, sans-serif;
      font-size: 14px;
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      -webkit-font-smoothing: antialiased;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0 !important;
    }

    div[style*="margin: 16px 0"] {
      margin: 0 !important;
    }

    .show {
      display: block !important;
      max-height: none !important;
    }

    .hide {
      display: none;
    }

    input:checked+span .hide {
      display: block !important;
      max-height: none !important;
    }

    input:checked+span .show {
      display: none !important;
    }

    @media screen and (max-width: 480px) {
      .two-column .column,
      .three-column .column {
        max-width: 50% !important;
      }
      .two-column .column_s {
        max-width: 100% !important;
      }
      .padt0 {
        padding-top: 0 !important;
      }
      .padt9m {
        padding-top: 9px !important;
      }
      .padt10m {
        padding-top: 10px !important;
      }
      .padt14m {
        padding-top: 14px !important;
      }
      .padt17m {
        padding-top: 17px !important;
      }
      .padt25m {
        padding-top: 25px !important;
      }
      .padt29m {
        padding-top: 29px !important;
      }
      .padb10 {
        padding-bottom: 10px !important;
      }
      .padb11m {
        padding-bottom: 11px !important;
      }
      .padb12m {
        padding-bottom: 12px !important;
      }
      .pads10m {
        padding-right: 10px !important;
        padding-left: 10px !important;
      }
      .font16m {
        font-size: 16px !important;
        line-height: 22px !important;
      }
      .font16 {
        font-size: 16px !important;
        line-height: 22px !important;
      }
      .font19m {
        font-size: 19px !important;
      }
      .font26m {
        font-size: 26px !important;
        line-height: 30px !important;
      }
      .font26 {
        font-size: 26px !important;
        line-height: 30px !important;
      }
      .two-column .w66 {
        max-width: 66% !important;
        width: 100% !important;
      }
      .two-column .w33 {
        max-width: 33% !important;
        width: 100% !important;
      }
      .w100 {
        width: 100% !important;
        height: auto !important;
      }
      .w61 {
        width: 61% !important;
        height: auto !important;
      }
      .w100m {
        width: 100% !important;
      }
      .two-column .w13 {
        max-width: 13% !important;
        width: 100% !important;
      }
      .two-column .w86 {
        max-width: 86% !important;
        width: 100% !important;
      }
    }

    @media screen and (max-width: 479px) {
      .fmdm {
        padding-top: 27% !important;
        padding-bottom: 25% !important;
      }
      .katie {
        padding-top: 14% !important;
        padding-bottom: 29% !important;
      }
      .katiei {
        padding-top: 220px !important;
      }
      .padt100m {
        padding-top: 100px !important;
      }
      .refer {
        padding-top: 14% !important;
        padding-bottom: 29% !important;
      }
      .hidem {
        display: none !important;
      }
    }

    @media screen and (max-width: 411px) {
      .hidem411 {
        display: none !important;
      }
      .showm411 {
        display: inherit !important;
        line-height: inherit !important;
        font-size: inherit !important;
        overflow: inherit !important;
        max-height: inherit !important;
        width: inherit !important;
      }
      .backgroundm {
        background-image: url('https://media.sailthru.com/5ac/1k1/c/a/5a2d922c32084.png') !important;
      }
      .w90m {
        width: 95% !important;
      }
      .fmdm {
        padding-top: 27% !important;
        padding-bottom: 28% !important;
      }
      .katie {
        padding-top: 11% !important;
        padding-bottom: 22% !important;
      }
      .katiei {
        padding-top: 180px !important;
      }
      .padt100m {
        padding-top: 80px !important;
      }
      .hidem {
        display: none !important;
      }
    }

    @media screen and (max-width: 400px) {
      .font15m {
        font-size: 15px !important;
      }
      #mw32m {
        max-width: 32px !important;
      }
      #mw146m {
        max-width: 86px !important;
      }
      .fmdm {
        padding-top: 28% !important;
        padding-bottom: 25% !important;
      }
      .w90m {
        width: 95% !important;
      }
      .katie {
        padding-top: 8% !important;
        padding-bottom: 16% !important;
      }
      .katiei {
        padding-top: 170px !important;
      }
      .hidem {
        display: none !important;
      }
      .hide320m {
        display: none !important;
      }
    }

    @media screen and (max-width: 375px) {
      .w90m {
        width: 95% !important;
      }
      .katie {
        padding-top: 11% !important;
        padding-bottom: 11% !important;
      }
      .katiei {
        padding-top: 180px !important;
      }
      .katie {
        padding-top: 8% !important;
        padding-bottom: 17% !important;
      }
      .katiei {
        padding-top: 170px !important;
      }
      .padt100m {
        padding-top: 50px !important;
      }
      .refer {
        padding-top: 14% !important;
        padding-bottom: 22% !important;
      }
      .hidem {
        display: none !important;
      }
      .hide320m {
        display: none !important;
      }
    }

    @media screen and (max-width: 368px) {
      .w100mm {
        width: 100% !important;
      }
      .pads3 {
        padding-left: 3px !important;
        padding-right: 3px !important;
      }
      .hide320m {
        display: none !important;
      }
      .katie {
        padding-top: 8% !important;
        padding-bottom: 16% !important;
      }
      .katiei {
        padding-top: 170px !important;
      }
      .hidem {
        display: none !important;
      }
    }

    @media screen and (max-width: 320px) {
      .hide320m {
        display: none !important;
      }
      .hidem {
        display: none !important;
      }
    }

    @media screen and (min-width: 481px) and (max-width: 600px) {
      .three-column .column {
        max-width: 33% !important;
      }
      .two-column .column {
        max-width: 50% !important;
      }
      .two-column .column_s {
        max-width: 50% !important;
      }
      .two-column .w66 {
        max-width: 66% !important;
        width: 100% !important;
      }
      .two-column .w33 {
        max-width: 33% !important;
        width: 100% !important;
      }
      .two-column .w13 {
        max-width: 13% !important;
        width: 100% !important;
      }
      .two-column .w86 {
        max-width: 86% !important;
        width: 100% !important;
      }
      .w61 {
        width: 61% !important;
        height: auto !important;
      }
      .w100 {
        width: 100% !important;
        height: auto !important;
      }
      .pads23 {
        padding-right: 23px !important;
        padding-left: 23px !important;
      }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .bgcolor {
        background-color: #FFFFFF !important;
      }
      .hidewk {
        display: none !important;
      }
      .webkitshow {
        display: flex !important;
        line-height: inherit !important;
        font-size: inherit !important;
        overflow: inherit !important;
        max-height: inherit !important;
        width: inherit !important;
      }
      .everythingelseshow {
        display: none !important;
      }
    }
  </style>
  <!--[if mso]>
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
font-family: Arial, sans-serif !important;
}
table, td, div, p, a, span {
font-family: Arial, sans-serif !important;
line-height: normal;
} 
</style>
<![endif]-->
  <!--[if (gte mso 9)|(IE)]>
<style type="text/css"> 
table {border-collapse: collapse !important;}
.underline {text-decoration: underline !important;}
</style>
<![endif]-->
</head>

<body class="body" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none; margin: 0 !important; padding: 0; background-color: #ffffff;">
  <div style="display: none;line-height: 0; font-size: 0; width: 0; height: 0;">earn free food ‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;</div>
  <center style="width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">
    <div class="gmail" style="max-width: 600px; margin-top: 0; margin-bottom: 0; margin-right: auto; margin-left: auto;">
      <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" style="border: 0; width: 600px;">
<tr>
<td>
<![endif]-->
      <table align="center" cellpadding="0" cellspacing="0" style="margin: 0 auto; width: 100%; max-width: 600px;" role="Presentation">
        <tbody>
          <tr>
            <td>
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width: 100%; background-color: #9d3ca5;">
                <tbody>
                  <tr>
                    <td align="center" class="pads23 pads10m" style="padding-bottom: 0px; text-align: center; padding-top: 0px; padding-right: 10px; padding-left: 10px;">
                      <table class="w100" cellpadding="0" cellspacing="0" border="0" align="center" width="554" style="width: 554px;">
                        <tbody>
                          <tr>
                            <td class="two-column" style="text-align: left; font-size: 0; padding: 0;">
                              <!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation" >
<tr>
<td width="50%" valign="top">
<![endif]-->
                              <div class="column" style="width: 100%; max-width: 276px; display: inline-block; vertical-align: top;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                  <tbody>
                                    <tr>
                                      <td align="center" class="padt17m padb12m" style="padding-top: 17px; padding-bottom: 12px;font-family: galano_grotesque_bold, Helvetica, Arial, sans-serif; font-size: 14px; line-height: normal; font-weight: 700px; text-align: left;">
                                        <a href="https://www.snapkitchen.com/" target="_blank"><img src="http://www.pompeii79.com/images/snap_logo.png" height="34" width="171" style="border: 0; width: 100%; max-width: 171px; height: auto;" alt="snap kitchen"></a></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                              <!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
                              <div class="column" style="width: 100%; max-width: 276px; display: inline-block; vertical-align: top;">
                                <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                  <tbody>
                                    <tr>
                                      <td class="font16m leftm" style="padding-top: 7px; padding-bottom: 9px; text-align: right; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; color: #FFFFFF; font-size: 20px; font-weight: 900;">
                                        <!-- 
-->
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                              <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width: 100%; background-color: #c54bcf;">
                <tbody>
                  <tr>
                    <td align="center" class="pads23 pads10m" style="padding-bottom: 0px; text-align: center; padding-top: 0px; padding-right: 10px; padding-left: 10px;">
                      <!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation" >
<tr>
<td width="554" valign="middle">
<![endif]-->
                      <table class="w100" cellpadding="0" cellspacing="0" border="0" align="center" width="554" style="width: 554px;">
                        <tbody>
                          <tr>
                            <td align="center" class="font19m padt25m" style="padding-top: 35px; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; color: #FFFFFF; text-align: left; font-size: 24px; line-height: normal; font-weight: 900;">hey, smiles davis!</td>
                          </tr>
                          <tr>
                            <td align="center" class="font26m padt10m padb0m" style="padding-top: 20px; padding-bottom: 34px; text-align: left; font-size: 30px; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; color: #FFFFFF; line-height: normal; font-weight: 900; text-align: left;">healthy eating comes with&nbsp;benefits</td>
                          </tr>
                        </tbody>
                      </table>
                      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td class="bgcolor" style="background-color: #FFFFFF;" align="center" width="100%">
              <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" style="border: 0; width: 600px;" role="Presentation">
<tr>
<td>
<![endif]-->
              <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%; padding: 0; display: table;" role="Presentation">
                <!-- EARNING FREE FOOD -->
                <tbody>
                  <tr>
                    <td align="center" style="background-color: #FFFFFF; padding-top: 0px; padding-bottom: 10px;">
                      <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
                        <tbody>
                          <tr>
                            <td align="center">
                              <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d922f616c8.png" width="100%" style="border: 0; width: 100%; max-width:100%; height:auto;">
                            </td>
                          </tr>
                          <tr>
                          </tr>
                          <tr>
                            <td style="padding-top: 20px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; width: 100%; text-align: center; font-size: 16px; line-height: 22px; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400;">
                              <p style="padding: 0; margin: 0; font-size: 26px; line-height: normal; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">earning free food has never tasted so&nbsp;good</p>
                              <p style="padding: 0; margin-top: 15px; margin-bottom: 0px;">Earn 1 point for every dollar you spend. Check your profile to view your&nbsp;points.</p>
                            </td>
                          </tr>
                          <tr>
                            <td align="center">
                              <table class="pads10m w100m" cellpadding="0" cellspacing="0" width="381" style="width:381px;">
                                <tbody>
                                  <tr>
                                    <td class="w100m" valign="middle" height="44" width="381" style="background-color:#565353; border: 1px solid #e6e5e5; color: #FFFFFF; font-size: 14px; font-weight: 900; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-variant: small-caps; line-height: normal; text-align: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;">
                                      <a href="https://smart.link/5a358ceb8758c" class="display ★" style="display: block; width:100%; padding-top:13px; padding-bottom:13px;  color:#FFFFFF; text-decoration:none;" target="_blank">&nbsp;ORDER NOW&nbsp;</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <!-- EARNING FREE FOOD -->
                  <!-- TOP 40PX SPACER -->
                  <tr>
                    <td class="pads10m" style="padding-top: 40px; padding-bottom: 0px; padding-right: 15px; padding-left: 15px; width: 100%;">&nbsp;</td>
                  </tr>
                  <!-- TOP 40PX SPACER -->
                  <!-- EAT REAL -->
                  <tr>
                    <td align="center" style="background-color: #FFFFFF; padding-top: 0px; padding-bottom: 10px;">
                      <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
                        <tbody>
                          <tr>
                            <td align="center">
                              <img src="https://media.sailthru.com/5ac/1k1/c/b/5a2f0fceb8cd3.png" width="100%" style="border: 0; width: 100%; max-width:100%; height:auto; display: block;">
                            </td>
                          </tr>
                          <tr>
                          </tr>
                          <tr>
                            <td style="padding-top: 0px; padding-bottom: 25px; padding-right: 10px; padding-left: 10px; width: 100%; text-align: center; font-size: 16px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; background-color: #e42e5f;">
                              <p style="padding: 0; margin: 0; font-size: 31px; line-height: normal; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900; ">eat real <br>for every meal</p>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="background-color: #e42e5f;">
                              <table width="93%" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 93%;">
                                <tbody>
                                  <tr>
                                    <td style="text-align: center; line-height: 4px; background-color: #e6436f; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;">&nbsp;</td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center" style="background-color: #e42e5f;">
                              <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                <tbody>
                                  <tr>
                                    <td class="two-column" style="text-align: center; font-size: 0; padding: 0px;">
                                      <!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation" >
<tr>
<td width="50%" valign="top">
<![endif]-->
                                      <div class="column" style="width: 100%; max-width: 285px; display: inline-block; vertical-align: top;">
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                          <tbody>
                                            <tr>
                                              <td style="padding: 0; padding-top: 40px; font-size: 14px; line-height: normal; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d92244c004.png" width="50" alt="healthy made easy" style="border-width: 0; width: 100%; max-width: 50px; height: auto;">
                                              </td>
                                            </tr>
                                            <tr>
                                              <td class="pads3" style="padding-top: 20px; padding-right: 10px; padding-left: 10px; font-size: 16px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <p style="padding: 0; Margin:0px; font-size: 18px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">healthy made easy</p>
                                                <p style="padding: 0; Margin:0px; margin-top: 8px;">Designed for your lifestyle.</p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                      <!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
                                      <div class="column" style="width: 100%; max-width: 284px; display: inline-block; vertical-align: top;">
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                          <tbody>
                                            <tr>
                                              <td style="padding-top: 40px; font-size: 14px; line-height: normal; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d9223bce58.png" width="50" alt="real food" style="border-width: 0; width: 100%; max-width: 50px; height: auto;">
                                              </td>
                                            </tr>
                                            <tr>
                                              <td class="pads3" style="padding-top: 20px; padding-right: 10px; padding-left: 10px; font-size: 16px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <p style="padding: 0; Margin:0px; font-size: 18px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">real food</p>
                                                <p style="padding: 0; Margin: 0px; margin-top: 8px;">Enjoy food that makes you feel awesome.</p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="two-column" style="text-align: center; font-size: 0; padding: 0px;">
                                      <!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation" >
<tr>
<td width="50%" valign="top">
<![endif]-->
                                      <div class="column" style="width: 100%; max-width: 285px; display: inline-block; vertical-align: top;">
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                          <tbody>
                                            <tr>
                                              <td style="padding: 0; font-size: 14px; padding-top: 30px; line-height: normal; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d9224d2e76.png" width="50" alt="dietitian blessed" style="border-width: 0; width: 100%; max-width: 50px; height: auto;">
                                              </td>
                                            </tr>
                                            <tr>
                                              <td class="pads3" style="padding-top: 20px; padding-right: 10px; padding-left: 10px; font-size: 16px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <p style="padding: 0; Margin:0px; font-size: 18px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">dietitian blessed</p>
                                                <p style="padding: 0; Margin:0px; margin-top: 8px;">High food standards &amp; nothing fake or&nbsp;funky.</p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                      <!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
                                      <div class="column" style="width: 100%; max-width: 285px; display: inline-block; vertical-align: top;">
                                        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0; width: 100%;" role="Presentation">
                                          <tbody>
                                            <tr>
                                              <td style="padding: 0; padding-top: 30px; font-size: 14px; line-height: normal; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d922598986.png" width="50" alt="always fresh" style="border-width: 0; width: 100%; max-width: 50px; height: auto;">
                                              </td>
                                            </tr>
                                            <tr>
                                              <td class="pads3" style="padding-top: 20px; padding-right: 10px; padding-left: 10px; font-size: 16px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400; text-align: center;">
                                                <p style="padding: 0; Margin:0px; font-size: 18px; line-height: normal; color: #FFFFFF; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">always fresh</p>
                                                <p style="padding: 0; Margin: 0px; margin-top: 8px;">Made from scratch daily.</p>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </div>
                                      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
                                    </td>
                                  </tr>
                                  <tr>
                                    <td class="pads10m" style="padding-top: 64px; padding-bottom: 68px;">
                                      <table align="center" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width: 385px">
                                        <tbody>
                                          <tr>
                                            <td class="w100m" width="385" valign="middle" height="44" style="background-color:#FFFFFF; border: 1px solid #e6e5e5; color: #FFFFFF; font-size: 14px; font-weight: 900; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-variant: small-caps; line-height: normal; text-align: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;">
                                              <a href="https://smart.link/5a358dc8dc08d" class="display ★" style="display: block; width:100%; padding-top:11px; padding-bottom:11px; color:#565353; text-decoration:none;" target="_blank">&nbsp;ORDER NOW&nbsp;</a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center">
                              <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d92264d1eb.png" width="100%" style="border: 0; width: 100%; max-width:100%; height:auto;">
                            </td>
                          </tr>
                          <tr>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <!-- EAT REAL -->
                  <!-- TOP 40PX SPACER -->
                  <tr>
                    <td class="pads10m" style="padding-top: 40px; padding-bottom: 0px; padding-right: 15px; padding-left: 15px; width: 100%;">&nbsp;</td>
                  </tr>
                  <!-- TOP 40PX SPACER -->
                  <!-- TOP 40PX SPACER -->
                  <tr>
                    <td class="pads10m" style="padding-top: 40px; padding-bottom: 0px; padding-right: 15px; padding-left: 15px; width: 100%;">&nbsp;</td>
                  </tr>
                  <!-- TOP 40PX SPACER -->
                  <!-- PLANNING AHEAD -->
                  <tr>
                    <td align="center" style="background-color: #FFFFFF; padding-top: 17px; padding-bottom: 10px;">
                      <table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%; text-align: center;">
                        <tbody>
                          <tr>
                            <td align="center">
                              <img src="https://media.sailthru.com/5ac/1k1/c/a/5a2d923667a68.png" width="223" style="border: 0; width: 100%; max-width:223px; height:auto;">
                            </td>
                          </tr>
                          <tr>
                          </tr>
                          <tr>
                            <td style="padding-top: 25px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; width: 100%; text-align: center; font-size: 16px; line-height: 22px; color: #565353; font-family: galano_grotesque, Helvetica, Arial, sans-serif; font-weight: 400;">
                              <p style="padding: 0; margin: 0; font-size: 26px; line-height: normal; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">planning ahead would look so good on&nbsp;you</p>
                              <p style="padding: 0; margin-top: 15px; margin-bottom: 0px;">Did you know that you can order ahead up to 7 days in advance? Lock in your&nbsp;faves.</p>
                            </td>
                          </tr>
                          <tr>
                            <td align="center">
                              <table class="pads10m w100m" cellpadding="0" cellspacing="0" width="381" style="width:381px;">
                                <tbody>
                                  <tr>
                                    <td class="w100m" valign="middle" height="44" width="381" style="background-color:#565353; border: 1px solid #e6e5e5; color: #FFFFFF; font-size: 14px; font-weight: 900; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-variant: small-caps; line-height: normal; text-align: center; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;">
                                      <a href="https://itunes.apple.com/app/apple-store/id1073632755?mt=8" class="display ★" style="display: block; width:100%; padding-top:13px; padding-bottom:13px;  color:#FFFFFF; text-decoration:none;" target="_blank">&nbsp;DOWNLOAD APP&nbsp;</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding-top: 24px; padding-bottom: 0px; padding-right: 10px; padding-left: 10px; width: 100%; text-align: center; font-size: 14px; line-height: normal; color: #565353; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">
                              <p style="padding: 0; Margin: 0px;">
                                <a class="underline" href="https://www.snapkitchen.com/?utm_source=sailthru&amp;utm_medium=email&amp;utm_campaign=welcome%20email%20week%202%20order%20online" style="color: #565353; text-decoration: none; border-bottom: 1px solid #565353;" target="_blank">ORDER ONLINE</a>
                              </p>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                  <!-- PLANNING AHEAD -->
                  <!-- TOP 40PX SPACER -->
                  <tr>
                    <td class="pads10m" style="padding-top: 40px; padding-bottom: 0px; padding-right: 15px; padding-left: 15px; width: 100%;">&nbsp;</td>
                  </tr>
                  <!-- TOP 40PX SPACER -->
                  <!-- FOOTER -->
                </tbody>
              </table>
              <table align="center" cellpadding="0" cellspacing="0" style="Margin: 0 auto; width: 100%; max-width: 600px; background-color: #222222;" role="Presentation">
                <tbody>
                  <tr>
                    <td align="center">
                      <!--[if (gte mso 9)|(IE)]>
<table width="381" align="center" cellpadding="0" cellspacing="0" style="border: 0; width: 381px;">
<tr>
<td>
<![endif]-->
                      <table align="center" cellpadding="0" cellspacing="0" style="Margin: 0 auto; width: 100%; max-width: 381px; background-color: #222222;" role="Presentation">
                        <tbody>
                          <tr>
                            <td style="text-align: center; font-size: 24px; font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; color: #FFFFFF; line-height: 110%; background-color: #222222; padding-top: 40px; padding-right: 10px; padding-left: 10px;">
                              <table cellpadding="0" cellspacing="0" width="212" style="width:212px; margin: 0 auto;">
                                <tbody>
                                  <tr>
                                    <td align="center" style="width: 70px; text-align: left;">
                                      <a href="https://www.instagram.com/snapkitchen/?hl=en" target="_blank"><img src="https://media.sailthru.com/5ac/1k1/b/u/5a20577566544.png" height="44" width="44" border="0"></a>
                                    </td>
                                    <td align="center" style="width: 70px; text-align: center;">
                                      <a href="https://www.facebook.com/snapkitchen/" target="_blank"><img src="https://media.sailthru.com/5ac/1k1/b/u/5a20576a73b07.png" height="44" width="44" border="0"></a>
                                    </td>
                                    <td align="center" style="width: 70px; text-align: right;">
                                      <a href="https://twitter.com/snapkitchen?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank"><img src="https://media.sailthru.com/5ac/1k1/b/u/5a205761464a2.png" height="44" width="44" border="0"></a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td class="w100" style="text-align: center; font-size: 16px; font-family: galano_grotesque, Helvetica, Arial, sans-serif; color: #FFFFFF; line-height: 110%; background-color: #222222; padding-top: 34px;  padding-bottom: 32px; font-weight: 400; padding-right: 10px; padding-left: 10px; border-bottom: 2px solid #424242; width: 381px;">
                              Keep up with Snap. <span style="font-family: galano_grotesque_black, Helvetica, Arial, sans-serif; font-weight: 900;">#snapkitchen</span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
                    </td>
                  </tr>
                  <tr>
                    <td style="text-align: center; font-size: 13px; font-family: galano_grotesque, Helvetica, Arial, sans-serif; color: #FFFFFF; line-height: 20px; background-color: #222222; padding-top: 30px; padding-bottom: 30px; font-weight: 400; padding-right: 10px; padding-left: 10px;">
                      This email was sent by Snap Kitchen, located<br>at <a href="https://www.snapkitchen.com/" style="color: #FFFFFF; text-decoration: none;" target="_blank">9330 United Dr. Ste 100, Austin, TX 78758</a>.<br><br><a href="#" style="color: #FFFFFF; text-decoration: underline;"
                        target="_blank">Unsubscribe</a> from this list.<br><br>Copyright © 2018 Snap Kitchen, All&nbsp;rights&nbsp;reserved.<br><br><a href="https://www.snapkitchen.com/privacy/" style="color: #FFFFFF; text-decoration: underline;" target="_blank">Privacy policy</a>
                    </td>
                  </tr>
                  <tr>
                    <td style="text-align: center; font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #FFFFFF; line-height: 120%; background-color: #222222; padding-top: 0px; padding-bottom: 0px; font-weight: 400; padding-right: 10px; padding-left: 15px;"><a href="https://www.snapkitchen.com/" target="_blank"><img src="http://link.snapkitchen.com/img/5ae0d82dcdb7ec794b0b7af85aea3d1691d15c6e61381105/16c134f0.gif" alt="" border="0"></a></td>
                  </tr>
                </tbody>
              </table>
              <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
      <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
    </div>
  </center>

</body>
            
          
!
999px

Console