css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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>
<html lang="en">
<head>
<title>SavingStar</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- This will keep iOS from hijacking phone # link styles -->
<meta name="format-detection" content="telephone=no">
<!--
    /* Colors:
    Header/Upper Text: Dark Slate: #445268
    Body Text: Light Slate: #848f9e
    */
/* //////////////////////////////////////////////////////////////////////////////////
    RESET STYLES come from the Litmus Salted template and other sources over the
    years.
    Some may no longer be required in targeted email clients, but are not harmful.
    Some have been removed over time. If any are modified or removed, they should be
    retested.
////////////////////////////////////////////////////////////////////////////////// */
-->
<style type="text/css">
    /*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,700i');*/
    body, #bodyTable, #bodyCell { margin: 0; padding: 0; width: 100% !important; }
    body { min-width: 100%; height: 100% !important; }
    table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin-right: auto !important; margin-left: auto !important; }
    table, tr, td { border-collapse: collapse; }
    img, a img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
    h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
    p { margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; }
    img { display: block; }
</style>
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    CLIENT-SPECIFIC STYLES also started with the Litmus Salted template and other
    sources over the years.
    These tend to target specific issues in specific email clients.
////////////////////////////////////////////////////////////////////////////////// */
-->
<style type="text/css">
    .ReadMsgBody { width: 100%; } .ExternalClass{ width: 100%; } /* Force Hotmail/Outlook.com to display emails at full width. */
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } /* Force Hotmail/Outlook.com to display line heights normally. */
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } /* Remove spacing between tables in Outlook 2007 and up. */
    #outlook a { padding: 0; } /* Force Outlook 2007 and up to provide a "view in browser" message. */
    img { -ms-interpolation-mode: bicubic; } /* Force IE to smoothly render resized images. */
    body, table, td, p, a, li, blockquote { -ms-text-size-adjust: 100%; -webkit-text-size-adjust :100%; }  /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
    .appleBody a {color:#2aa3f9; text-decoration: none;} /* iOS BLUE LINKS */
    .appleFooter a {color:#2aa3f9; text-decoration: none;} /* iOS BLUE LINKS */
</style>
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    HERE BEGINS our content styles.
////////////////////////////////////////////////////////////////////////////////// */
-->
<style type="text/css">
    body, table, td, p, a, li, blockquote {
        -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    .outer {
        /*font-family: 'Open Sans', Helvetica, Arial, sans-serif;*/
        font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
    }
</style>
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    This establishes the maximum outer width for a responsive email in modern clients.
    In Outlook clients, this is achieved with wrapper tables in conditional comments.
    This is a generic version. Other modules repeat this where their class is used
    as a hook.
////////////////////////////////////////////////////////////////////////////////// */
-->
<style type="text/css">
    .modern-outer {
        max-width: 650px;
    }
</style>
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    The following Outlook-only styles ensure that Outlook doesn't fail to render text
    with a webfont applied.
    It's *very* important that any element that has webfonts applied also gets
    class="fallback-text" as a class.
/* //////////////////////////////////////////////////////////////////////////////////
-->
<!--[if mso]>
<style type="text/css">
    .outer,
    .fallback-text {
        font-family: Arial, sans-serif !important; /* Without this, Outlook renders serif fonts where Open Sans is applied */
        font-family: Arial, sans-serif;
    }
</style>
<![endif]-->
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    FOOTER appears in all emails.
////////////////////////////////////////////////////////////////////////////////// */
-->
<style type="text/css">
    .footer {
        max-width: 650px;
    }
        .footer-main img.decorative {
            height: auto; width: 100%; /* Make the footer image responsive for small screens. */
        }
        .footer-main a { color: white !important; }
@media screen and (min-width: 650px) {
    .modern-outer {
        width: 650px !important; margin-right: auto !important; margin-left: auto !important;
    }
        .modern-outer > table {
            width: 650px !important; margin-right: auto !important; margin-left: auto !important;
        }
    .footer {
        width: 650px !important; margin-right: auto !important; margin-left: auto !important;
    }
        .footer > table {
            width: 650px !important; margin-right: auto !important; margin-left: auto !important;
        }
            .responsive-65 { padding-right: 65px !important; padding-left: 65px !important; }
            .app-button-left { float: left !important; width: 50% !important; }
            .app-button-right { float: right !important; width: 50% !important; }
            .social-left { float: left !important; width: 50% !important; }
            .social-right { float: right !important; width: 50% !important; }
}
@media screen and (min-width: 750px) { /* Wide-screen breakpoint allows left/right ends of table to display. */
    .modern-outer {
        padding-right: 50px !important; padding-left: 50px !important; width: 750px !important; margin-right: auto !important; margin-left: auto !important;
    }
        .modern-outer > table {
            width: 650px !important; margin-right: auto !important; margin-left: auto !important;
        }
    .footer { max-width: 750px !important; width: 750px !important; }
    .footer > table { max-width: 750px !important; width: 750px !important; }
        .footer > table { width: 750px !important; }
            .footer-main { width: 650px !important; }
            .footer-left,
            .footer-right { display: table-cell !important; width: 50px !important; }
                .footer-left img,
                .footer-right img { display: block !important; width: 100% !important; }
}
</style>
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    The following Outlook-only styles constrain the footer image on larger screens,
    because the collapsed left/right table cells can't be re-enabled.
/* //////////////////////////////////////////////////////////////////////////////////
-->
<!--[if mso]>
<style type="text/css">
@media screen and (min-width: 750px) {
    .outer, .footer { width: 650px !important; }
        .footer-main { width: 650px !important; }
}
</style>
<![endif]-->
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    HERE ENDS our master template styles.
////////////////////////////////////////////////////////////////////////////////// */
-->
<!--
/* //////////////////////////////////////////////////////////////////////////////////
    HERE BEGINS our MODULE-SPECIFIC styles.
////////////////////////////////////////////////////////////////////////////////// */
-->




<style type="text/css">
    .s1-header img {
        width: 100%;
    }
@media screen and (min-width: 650px) {
    .modern-outer > table,
    .s1-header2 {
        margin-right: auto important; margin-left: auto !important;
        width: 650px !important;
    }
    .s1-header-text {
        text-align: left !important;
        padding-top: 30px !important;
        padding-left: 45px !important;
        padding-right: 20px !important;
    }
        .s-header-bullets {
            width: 585px !important;
        }

    .s1-lockup1 { float: left !important; width: 190px !important; }
    .s1-lockup2 { float: right !important; padding-bottom: 40px !important; width: 420px !important; }
        .s1-lockup2 td {
            padding-right: 20px;
            padding-left: 34px;
            text-align: left !important;
        }
    .s1-lockup3 { width: 610px !important; }
}
@media screen and (min-width: 750px) { /* Wide-screen breakpoint allows left/right ends of table to display. */
    .modern-outer {
        padding-right: 50px !important; padding-left: 50px !important; width: 750px !important; margin-right: auto !important; margin-left: auto !important;
    }
}
</style>
<style type="text/css">
    .steps {
        max-width: 650px;
    }
@media screen and (min-width: 650px) {
    .steps,
    .steps > table {
        width: 650px !important;
    }
        .steps .left-icon {
            width: 140px !important;
        }
        .steps .left-icon .small-caps span { display: inline !important; }
        .steps-right {
            width: 509px !important;
        }
        .steps-right table {
            width: 509px !important;
        }
}
@media screen and (min-width: 750px) { /* Wide-screen breakpoint allows left/right ends of table to display. */
    .steps {
        padding-right: 50px !important; padding-left: 50px !important; width: 750px !important; margin-right: auto !important; margin-left: auto !important;
    }
}
</style>

<style type="text/css">
    .stores {
        max-width: 650px;
    }
@media screen and (min-width: 650px) {
    .stores,
    .stores > table {
        width: 650px !important;
    }
        .left-icon {
            width: 140px !important;
        }
        .stores-right {
            width: 509px !important;
        }
        .stores-right table {
            width: 509px !important;
        }
}
@media screen and (min-width: 750px) { /* Wide-screen breakpoint allows left/right ends of table to display. */
    .stores {
        padding-right: 50px !important; padding-left: 50px !important; width: 750px !important; margin-right: auto !important; margin-left: auto !important;
    }
}
</style>



</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
<!-- REGION: OUTER -->
        <!-- This is a bounding box for the outer background color -->
        <td bgcolor="#efebf9" align="center" class="outer">

            <!-- This is hybrid style, with conditional Outlook tables matching the full-screen view that modern clients support. -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650">
            <![endif]-->

            <div class="modern-outer" style="margin-right: auto; margin-left: auto;">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td align="center" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 12px; line-height: 15px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;">Welcome to SavingStar! The smart and simple way to save. <a href="#" style="color: #445268;">View this email&nbsp;online</a></td>
                    </tr>
                </table>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%;">
                    <tr>
                        <td align="center" bgcolor="#ffffff" width="100%" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; padding-top: 30px; padding-bottom: 30px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/new_ss_logo_blue_orange.png" width="270" height="65" alt="SavingStar" style="display: block;" /></td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

<!--
/* //////////////////////////////////////////////////////////////////////////////////
    MODULE S1 - Header
////////////////////////////////////////////////////////////////////////////////// */
-->
<!-- REGION: HEADER -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
<!-- REGION: OUTER -->
        <!-- This is a bounding box for the outer background color -->
        <td bgcolor="#efebf9" align="center" class="outer">

            <!-- This is hybrid style, with conditional Outlook tables matching the full-screen view that modern clients support. -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650">
            <![endif]-->
            <div class="modern-outer" style="margin-right: auto; margin-left: auto;">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;">
                    <tr><td bgcolor="#FFFFFF" class="s4-header" style="border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin-right: auto !important; margin-left: auto !important;">
                            <img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/s1.header.save.2x.png" width="650" height="486" alt="SAVE AUTOMAGICALLY" style="border: 0 !important; display: block; height: auto; margin: 0; padding: 0; -ms-interpolation-mode: bicubic; width: 100%;" />
                        </td>
                    </tr>
                </table>
<!-- REGION: HEADER CONTENT -->
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="s1-header2">
                    <tr>
                        <td align="left" bgcolor="#FFFFFF" class="s1-header-text" style="padding-top: 40px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px;">
                            <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
                            <tr>
                            <td align="left">
                            <![endif]-->
                            <h2 class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; font-weight: 700; color: #02c3a6; font-size: 21px; line-height: 28px; margin-bottom: 20px;">All the savings, no paper hassle.</h2>
                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="s-header-bullets">
                                <tr><td align="left" valign="top" width="20" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #02c3a6; font-size: 16px; line-height: 20px;">&bull;</td><td valign="top" class="fallback-text bullet-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-bottom: 20px;"><a href="http://savingstar.com" style="color: #2aa3f9;">Register</a> your store card or loyalty number easily and quickly, in your SavingStar&nbsp;account</td></tr>
                                <tr><td align="left" valign="top" width="20" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #02c3a6; font-size: 16px; line-height: 20px;">&bull;</td><td valign="top" class="fallback-text bullet-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-bottom: 20px;">Shop and redeem from a growing list of <a href="http://savingstar.com" style="color: #2aa3f9;">participating</a>&nbsp;stores</td></tr>
                                <tr><td align="left" valign="top" width="20" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #02c3a6; font-size: 16px; line-height: 20px;">&bull;</td><td valign="top" class="fallback-text bullet-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-bottom: 20px;">Earn cash&nbsp;automatically</td></tr>
                            </table>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                        </td>
                    </tr>
                    <tr><td bgcolor="#414eb1"
                            style="background: #414eb1;
                            background: -moz-linear-gradient(-45deg, #2aa3f9 0%, #f60040 100%);
                            background: -webkit-linear-gradient(-45deg, #2aa3f9 0%,#f60040 100%);
                            background: linear-gradient(135deg, #2aa3f9 0%,#f60040 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aa3f9', endColorstr='#f60040',GradientType=1 );
                            padding-top: 40px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px;
                            text-align: center;">
                            <!-- This is a multi-column table for Outlook -->
                            <!--[if (gte mso 9)|(IE)]>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" width="610">
                            <tr>
                            <td align="left" valign="top" width="190">
                            <![endif]-->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="s1-lockup1">
                                <tr>
                                    <td align="center" valign="top" class="fallback-text" style="padding-bottom: 20px;">
                                        <!--[if (gte mso 9)|(IE)]>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" style="padding-top: 16px;"><![endif]--><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/s1.cards.stack.2x.png" width="150" height="96" alt="" style="display: block;margin-right:auto;margin-left:auto;" /><!--[if (gte mso 9)|(IE)]></td>
                                            </tr>
                                        </table>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            <td align="right" valign="top" width="420" style="padding-left: 34px;">
                            <![endif]-->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="s1-lockup2">
                                <tr>
                                    <!-- This is the Android 4.4 baseline – Centered -->
                                    <td align="center" class="fallback-text" style="padding-top: 10px;">
                                        <!--[if (gte mso 9)|(IE)]>
                                        <div align="left">
                                        <![endif]-->
                                        <h2 class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; font-weight: 700; color: #FFFFFF; font-size: 21px; line-height: 28px; margin-bottom: 0px;">Finish Registering!</h2>
                                        <p class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #FFFFFF; font-size: 16px; line-height: 20px; margin-bottom: 20px;">Grab your store card or loyalty number and let&rsquo;s go! Just click the link next to your store below and finish registering your card or store loyalty&nbsp;number.</p>
                                        <!--[if (gte mso 9)|(IE)]>
                                        </div>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                            <!--[if (gte mso 9)|(IE)]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="s1-lockup3">
                                <tr>
                                    <td style="padding-top: 20px; padding-right: 20px; padding-bottom: 30px; padding-left: 20px; text-align: center;">
                                        <!-- The following div is a https://buttons.cm/ Bulletproof button -->
                                        <!-- IMPORTANT: BULLETPROOF BUTTONS HAVE 2 INSTANCES OF TEXT + HREFS TO UPDATE -->
                                        <div><!--[if mso]>
                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://savingstar.com" style="height:44px;v-text-anchor:middle;width:156px;" arcsize="10%" stroke="f" fillcolor="#FFFFFF">
                                            <w:anchorlock/>
                                            <center>
                                        <![endif]-->
                                            <a href="http://savingstar.com" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; background-color:#FFFFFF;border-radius:4px;color:#2aa3f9;display:inline-block;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:156px;-webkit-text-size-adjust:none;">Add Stores</a>
                                        <!--[if mso]>
                                            </center>
                                        </v:roundrect>
                                        <![endif]--></div>
                                    </td>
                                </tr>
                            </table>
                            <p class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #FFFFFF; font-size: 12px; line-height: 15px; text-align: center;">Need help finding which number to register? <a href="http://savingstar.com" style="color: #FFFFFF;">Read our&nbsp;FAQ</a>.</p>
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

<!--
/* //////////////////////////////////////////////////////////////////////////////////
    MODULE W3 - Welcome email stores
////////////////////////////////////////////////////////////////////////////////// */
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
<!-- REGION: OUTER -->
        <!-- This is a bounding box for the outer background color -->
        <td bgcolor="#efebf9" align="center" class="outer">
<!-- REGION: STORES -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650" style="">
            <![endif]-->
<!-- IMPLEMENTATION: If you'd like to put this before the footer, with a bottom margin, add
                     padding-bottom to the above TD and the below DIV -->
<!-- REGION: STORES -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650">
            <![endif]-->
            <div class="stores">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td style="padding-top: 50px; padding-bottom: 8px;">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td align="center" width="80" class="left-icon"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/icon.store@2x.png" width="74" height="61" alt="" style="margin-bottom: -22px;" /></td>
                                    <td class="fallback-text list-title" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; font-size: 22px; color: #0330ab; font-weight: bold; line-height: 26px; padding-top: 10px; padding-left: 14px;">Your Stores</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#2aa3f9"
                            style="background: -moz-linear-gradient(-45deg, #2aa3f9 0%, #f60040 100%);
                            background: -webkit-linear-gradient(-45deg, #2aa3f9 0%,#f60040 100%);
                            background: linear-gradient(135deg, #2aa3f9 0%,#f60040 100%);">&#160;</td>
                    </tr>
                </table>
<!-- SUBREGION: CARDS -->
                <table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
<!-- IMPLEMENTATION: TOTAL NUMBER OF CARDS/STORES VARIABLE POPULATES rowspan FOR LEFT TD -->
                        <td rowspan="5" align="center" valign="middle" width="80" class="fallback-text left-icon"  style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; border-right: 1px solid #f1eefa; border-bottom: 1px solid #f1eefa; color: #848f9e; font-size: 14px; line-height: 20px;">
                            <img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/icon.card@2x.png" width="51" height="51" alt="" />
                            <p class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">CARDS</p>
                        </td>
<!-- IMPLEMENTATION: THE FIRST CELL HAS TO BE INSIDE THE FIRST ROW – CONDITIONAL LOGIC FOR 1ST? -->
<!-- STRUCTURE/LOOP: UNREGISTERED CARD -->
                        <td bgcolor="#f1eefa" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.attention@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #848f9e; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="color: #fa003c; font-weight: bold;">Stop &amp; Shop</span> &mdash; <a href="#" style="color: #2aa3f9;">Register</a> this card to earn cash.</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: REGISTERED CARD -->
                    <tr>
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Big Y</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: UNREGISTERED CARD -->
                    <tr>
                        <td bgcolor="#f1eefa" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.attention@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #848f9e; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="color: #fa003c; font-weight: bold;">Stop &amp; Shop</span> &mdash; <a href="#" style="color: #2aa3f9;">Register</a> this card to earn cash.</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: REGISTERED CARD -->
                    <tr>
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Shaw's</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: REGISTERED CARD -->
                    <tr>
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Shop-Rite</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- END STRUCTURE/LOOP -->
                </table>
<!-- END SUBREGION: CARDS -->
<!-- SUBREGION: RECEIPTS -->
                <table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-top: 3px solid #f1eefa;">
                    <tr>
<!-- IMPLEMENTATION: TOTAL NUMBER OF CARDS/STORES VARIABLE POPULATES rowspan FOR LEFT TD -->
                        <td rowspan="3" align="center" valign="middle" width="80" class="fallback-text left-icon"  style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; border-right: 1px solid #f1eefa; border-bottom: 1px solid #f1eefa; color: #848f9e; font-size: 14px; line-height: 20px;">
                            <img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/icon.card@2x.png" width="51" height="51" alt="" />
                            <p class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">CARDS</p>
                        </td>
<!-- IMPLEMENTATION: THE FIRST CELL HAS TO BE INSIDE THE FIRST ROW – CONDITIONAL LOGIC FOR 1ST? -->
<!-- STRUCTURE/LOOP: RECEIPT STORE -->
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Costco</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: RECEIPT STORE -->
                    <tr>
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Target</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: RECEIPT STORE -->
                    <tr>
                        <td bgcolor="#ffffff" style="border-bottom: 1px solid #f1eefa;" class="stores-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" class="stores-store">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/list.check@2x.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Walmart</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- END STRUCTURE/LOOP -->
                </table>
<!-- END SUBREGION: RECEIPTS -->
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

<!--
/* //////////////////////////////////////////////////////////////////////////////////
    MODULE S1 - Steps
////////////////////////////////////////////////////////////////////////////////// */
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
<!-- REGION: OUTER -->
        <!-- This is a bounding box for the outer background color -->
        <td bgcolor="#efebf9" align="center" class="outer">
<!-- REGION: STORES -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650" style="">
            <![endif]-->
<!-- IMPLEMENTATION: If you'd like to put this before the footer, with a bottom margin, add
                     padding-bottom to the above TD and the below DIV -->
<!-- REGION: STORES -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650">
            <![endif]-->
            <div class="steps">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td style="padding-top: 50px; padding-bottom: 4px;">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td align="center" width="80" class="left-icon"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/icon.coin.@2x.png" width="74" height="74" alt="" style="margin-bottom: -18px;" /></td>
                                    <td class="fallback-text list-title" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; font-size: 22px; color: #0330ab; font-weight: bold; line-height: 26px; padding-top: 18px; padding-left: 14px;">Follow these steps for automatic&nbsp;savings!</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#2aa3f9"
                            style="background: -moz-linear-gradient(-45deg, #2aa3f9 0%, #f60040 100%);
                            background: -webkit-linear-gradient(-45deg, #2aa3f9 0%,#f60040 100%);
                            background: linear-gradient(135deg, #2aa3f9 0%,#f60040 100%);">&#160;</td>
                    </tr>
                </table>
<!-- SUBREGION: STEPS -->
                <table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
<!-- IMPLEMENTATION: TOTAL NUMBER OF STEPS VARIABLE POPULATES rowspan FOR LEFT TD -->
                        <td rowspan="3" align="center" valign="middle" width="80" class="fallback-text left-icon"  style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; border-right: 1px solid #f1eefa; border-bottom: 1px solid #f1eefa; color: #848f9e; font-size: 14px; line-height: 20px;">
                            <img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/icon.card.with.number.@2x.png" width="54" height="52" alt="" />
                            <p class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">REGISTER<span style="display: none;"> YOUR LOYALTY&nbsp;CARDS</span></p>
                        </td>
<!-- IMPLEMENTATION: THE FIRST CELL HAS TO BE INSIDE THE FIRST ROW -->
<!-- STRUCTURE/LOOP: STEP -->
                        <td bgcolor="#FFFFFF" style="border-bottom: 1px solid #f1eefa;" class="steps-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/number.1.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="color: #445268; font-weight: bold;">Find your loyalty card or number</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: STEP -->
                    <tr>
                        <td bgcolor="#FFFFFF" style="border-bottom: 1px solid #f1eefa;" class="steps-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/number.2.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="font-weight: bold;">Register it in your SavingStar account</span></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- STRUCTURE/LOOP: STEP -->
                    <tr>
                        <td bgcolor="#FFFFFF" style="border-bottom: 1px solid #f1eefa;" class="steps-right">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td align="center" valign="top" width="50" style=" padding-top: 30px; padding-bottom: 24px;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/number.3.png" width="25" height="25" alt="" /></td>
                                                <td align="left" valign="top" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: #445268; font-size: 16px; line-height: 20px; padding-top: 30px; padding-right: 20px; padding-bottom: 24px;"><span style="color: #445268; font-weight: bold;">Go shopping and use your loyalty card or number at checkout.</span> Savings are typically posted in your account within 2-14 days. It&rsquo;s that easy!</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
<!-- END STRUCTURE/LOOP -->
                </table>
<!-- END SUBREGION: CARDS -->
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
<!-- REGION: OUTER -->
        <!-- This is a bounding box for the outer background color -->
        <td bgcolor="#efebf9" align="center" class="outer" style="padding-bottom: 40px;">
<!-- REGION: FOOTER -->
            <!-- This is a bounding box for Outlook only -->
            <!--[if (gte mso 9)|(IE)]>
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">
            <tr>
            <td align="center" valign="top" width="650">
            <![endif]-->
            <div class="footer" style="margin-right: auto; margin-left: auto;">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                        <td valign="bottom" width="0" class="footer-left" style="display: none; font-size: 0; line-height: 0; width: 0;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/footer.left@2x.png" alt="" style="display: none; width: 0;" /></td>
                        <td bgcolor="#414eb1" valign="bottom" class="footer-main"
                            style="background: #414eb1;
                            background: -moz-linear-gradient(-45deg, #2aa3f9 0%, #87488d 100%);
                            background: -webkit-linear-gradient(-45deg, #2aa3f9 0%,#87488d 100%);
                            background: linear-gradient(135deg, #2aa3f9 0%,#87488d 100%);
                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aa3f9', endColorstr='#87488d',GradientType=1 );
                            padding: 0 !important;
                            border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin-right: auto !important; margin-left: auto !important; line-height: 0; font-size: 0;"><div align="center" style="font-size: 0; line-height: 0;">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="320" style="width: 320px; margin-right: auto !important; margin-left: auto !important;">
                                <tr>
                                    <td width="320" style="padding-top: 40px">
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="295" style="width: 295px; margin-right: auto !important; margin-left: auto !important;">
                                            <tr>
                                                <td align="left" valign="top" width="64"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/ss.appstore.icon@2x.png" width="46" height="46" alt="" /></td>
                                                <td width="231" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: white; font-size: 14px; line-height: 20px;"><p><span class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">GET OUR IPHONE OR ANDROID&nbsp;APP</span><br />Activate grocery offers on the&nbsp;go!</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="responsive-65" style="padding-top: 30px; padding-right: 20px; padding-left: 20px;">
                                        <!--[if (gte mso 9)|(IE)]>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="480">
                                            <tr><td align="center" valign="top" width="480">
                                        <![endif]-->
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                                                        <tr><td style="padding-right: 10px; padding-left: 10px;">
                                                    <![endif]-->
                                                    <!-- IMPORTANT: BULLETPROOF BUTTONS HAVE 2 INSTANCES OF TEXT + HREFS TO UPDATE -->
                                                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="app-button-left">
                                                                <tr>
                                                                    <td class="app-button fallback-text" style="padding-bottom: 20px; text-align: center;">
                                                                        <div><!--[if mso]>
                                                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://savingstar.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#ffffff" fillcolor="#414eb1">
                                                                            <w:anchorlock/>
                                                                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;">Download via App Store</center>
                                                                        </v:roundrect>
                                                                        <![endif]--><a href="http://savingstar.com"
                                                                        style="border:1px solid #ffffff;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/fa.apple@2x.png" width="17" height="19" alt="" style="display: inline; margin: 0; padding: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;" />&#160;&#160;Download via App Store</a></div>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                        </td><td style="padding-right: 10px; padding-left: 10px;">
                                                    <![endif]-->
                                                    <!-- IMPORTANT: BULLETPROOF BUTTONS HAVE 2 INSTANCES OF TEXT + HREFS TO UPDATE -->
                                                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="app-button-right">
                                                                <tr>
                                                                    <td class="app-button fallback-text" style="padding-bottom: 20px; text-align: center;">
                                                                        <div><!--[if mso]>
                                                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://savingstar.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#ffffff" fillcolor="#414eb1">
                                                                            <w:anchorlock/>
                                                                            <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;">Download via Google Play</center>
                                                                        </v:roundrect>
                                                                        <![endif]--><a href="http://savingstar.com"
                                                                        style="border:1px solid #ffffff;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/fa.android@2x.png" width="17" height="19" alt="" style="display: inline; margin: 0; padding: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;" />&#160;&#160;Download via Google Play</a></div>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                        </td></tr>
                                                    </table>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                        <!--[if (gte mso 9)|(IE)]>
                                            </td></tr>
                                        </table>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="responsive-65" style="padding-top: 20px; padding-right: 20px; padding-left: 20px;">
                                        <!--[if (gte mso 9)|(IE)]>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="480">
                                            <tr><td align="center" valign="top" width="480">
                                        <![endif]-->
                                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-bottom: 1px solid white;">
                                            <tr>
                                                <td class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; border-top: 1px solid white; color: white; font-size: 14px; line-height: 20px; text-align: center; padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;">
                                                    <p class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">GET GROCERY OFFERS ON THE GO AND STAY&nbsp;CONNECTED!</p>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                    <table align="center" border="0" cellpadding="0" cellspacing="0">
                                                        <tr><td style="padding-right: 10px; padding-left: 10px;">
                                                    <![endif]-->
                                                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="social-left">
                                                                <tr>
                                                                    <td class="fallback-text" style="text-align: center;">
                                                                    <!-- IMPORTANT: BULLETPROOF BUTTONS HAVE 2 INSTANCES OF TEXT + HREFS TO UPDATE -->
                                                                    <div><!--[if mso]>
                                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://savingstar.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#414eb1" fillcolor="#414eb1">
                                                                        <w:anchorlock/>
                                                                        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;">Follow us on Facebook</center>
                                                                    </v:roundrect>
                                                                    <![endif]--><a href="http://savingstar.com"
                                                                    style="color:#ffffff;display:inline-block;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/fa.facebook@2x.png" width="17" height="19" alt="" style="display: inline; margin: 0; padding: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;" />&#160;&#160;Follow us on Facebook</a></div>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                        </td><td style="padding-right: 10px; padding-left: 10px;">
                                                    <![endif]-->
                                                            <table align="center" border="0" cellpadding="0" cellspacing="0" class="social-right">
                                                                <tr>
                                                                    <td class="fallback-text" style="text-align: center;">
                                                                    <!-- IMPORTANT: BULLETPROOF BUTTONS HAVE 2 INSTANCES OF TEXT + HREFS TO UPDATE -->
                                                                    <div><!--[if mso]>
                                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://savingstar.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#414eb1" fillcolor="#414eb1">
                                                                        <w:anchorlock/>
                                                                        <center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;">Follow us on Twitter</center>
                                                                    </v:roundrect>
                                                                    <![endif]--><a href="http://savingstar.com"
                                                                    style="color:#ffffff;display:inline-block;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/fa.twitter@2x.png" width="17" height="19" alt="" style="display: inline; margin: 0; padding: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;" />&#160;&#160;Follow us on Twitter</a></div>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                    <!--[if (gte mso 9)|(IE)]>
                                                        </td></tr>
                                                    </table>
                                                    <![endif]-->
                                                </td>
                                            </tr>
                                        </table>
                                        <!--[if (gte mso 9)|(IE)]>
                                            </td></tr>
                                        </table>
                                        <![endif]-->
                                    </td>
                                </tr>
                            </table>
                            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td align="center" class="fallback-text" style="font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; color: white; font-size: 14px; line-height: 20px; text-align: center; padding-top: 40px; padding-right: 20px; padding-bottom: 50px; padding-left: 20px;">
                                        <p class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; margin-bottom: 2em; text-transform: uppercase;">HAVE A QUESTION? WE'RE HERE TO&nbsp;HELP.</p>
                                        <p><a href="#" style="color: white; font-weight: bold;">Contact us today</a> or <a href="#" style="color: white; font-weight: bold;">visit our&nbsp;FAQ</a></p>
                                        <p>As a SavingStar member, you can <a href="#" style="color: white; font-weight: bold;">adjust which emails you receive</a> in your SavingStar&nbsp;account.</p>
                                        <p><span class="small-caps" style="font-size: 12px; font-weight: bold; line-height: 15px; text-transform: uppercase;">THIS EMAIL WAS SENT&nbsp;BY:</span><br/>
                                        <b>SavingStar</b>, 400 Totten Pond Rd, Suite 300, Waltham, MA, 02451, United&nbsp;States</p>
                                        <p>You may <a href="#" style="color: white; font-weight: bold;">unsubscribe</a> from SavingStar emails at any&nbsp;time.</p>
                                    </td>
                                </tr>
                            </table><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; line-height: 0; font-size: 0;">
                                <td style="border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin-right: auto !important; margin-left: auto !important; line-height: 0; font-size: 0;"><div align="center" style="font-size: 0; line-height: 0;"><img id=”OWATemporaryImageDivContainer” class="decorative" src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/footer.illo.inner@2x.png" width="650" height="310" alt="" style="border: 0 !important; display: block; font-size: 0; height: auto; line-height: 0; margin: 0; padding: 0; -ms-interpolation-mode: bicubic; width: 100%;" /></div></td>
                            </tr></table></div></td>
                        <td valign="bottom" width="0" class="footer-right" style="display: none; font-size: 0; line-height: 0; width: 0;"><img src="http://saving-star-email.s3-website-us-east-1.amazonaws.com/img/footer.right@2x.png" alt="" style="display: none; width: 0;" /></td>
                    </tr>
                </table>
            </div>

            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>
</body>
</html>
            
          
!
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.
Loading ..................

Console