Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

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

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><head style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><meta name="viewport" content="width=device-width" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><title style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">email.referral_email.subject</title><style style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">@media only screen {
  html {
    min-height: 100%;
    background: #e7e3e2;
  }
}

@font-face {
    font-family: 'GT America';
    font-style: normal;
    font-weight: 400;
    src: local('GT America'), local('GT-America'), url(https://cdn.shopify.com/s/files/1/1761/2711/files/GTAmerica-Regular.woff?18367929452127687983) format('woff');
}
@font-face {
    font-family: 'GT America';
    font-style: normal;
    font-weight: 400;
    src: local('GT America'), local('GT-America'), url(//cdn.shopify.com/s/files/1/0877/8598/t/106/assets/gt_america_light-webfont.woff2?7499370864483638581) format('woff2');
}
@font-face {
    font-family: 'Calibre';
    font-style: normal;
    font-weight: 400;
    src: local('Calibre'), local('Calibre'), url(https://cdn.shopify.com/s/files/1/1761/2711/files/Calibre-Medium.woff?18367929452127687983) format('woff');
}
@font-face {
    font-family: 'Calibre';
    font-style: normal;
    font-weight: 400;
    src: local('Calibre'), local('Calibre'), url(//cdn.shopify.com/s/files/1/1761/2711/t/32/assets/Calibre-Medium.woff2?4357959320741816387) format('woff2');
}

* {
    font-family: "GT America", Helvetica, Arial, Sans-Serif;
    color: #fff;
    letter-spacing: 0.0125rem;
}

h1,
h2,
h3 {
    font-family: "Calibre", Helvetica, Arial, Sans-Serif;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.035rem;
}

h4,
h5,
h6 {
    font-weight: 400;
    color: #fff;
}

a,
a:hover,
a:active,
a:visited {
    color: #fff;
}

a.btn {
    max-width: 200px;
    color: #484848;
    display: block;
    background: #fff;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    padding: 12px 10px 10px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Calibre", Helvetica, Arial, Sans-Serif;
    letter-spacing: 0.075rem;
    margin: 0 auto;
    font-weight: 500;
    margin-top: 40px;
}

a.button_primary {
    font-family: 'Calibre', Helvetica, Arial, Sans-Serif;color: #484848;letter-spacing: 0.075rem;max-width: 200px;display: block;background: #fff;border-radius: 3px;text-align: center;font-size: 12px;padding: 10px;text-transform: uppercase;text-decoration: none;margin: 0 auto;font-weight: 500;margin-top: 40px;
}

.shop-name__cell {
    margin-bottom: 30px;
}
#bodyText {
    display: block;
    color: #fff;
    font-family: "GT America", "Helvetica Neue", "Helvetica", sans-serif;
    text-align: center;
}
img.header_image {
    max-width: 100%;
}
table.body {
    background-color: #e7e3e2;
    width: 100%;
    margin: 0 auto;
}
table.wrapper {
    background-color: #33362a;
    max-width: 600px;
    width: 100%;
    margin: 0 auto 2.5rem;
}
table.header {
    margin: 20px
}
table, tr {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}
span, p, strong {
    color: #fff !important;
    font-weight: 400;
}
.background-header {
    font-weight: 500; color: #fff !important;
}
.spacer {
    display: block;
    position: relative;
    height: 20%;
    width: 100%:
}
</style>
  <script>
//<![CDATA[
  document.addEventListener('DOMContentLoaded', function () {
    var PostMethodEnabler = {
      init: function () {
        var links = document.querySelectorAll('a[data-method]')
        this.registerEvents(links)
      },

      registerEvents: function (links) {
        var linksArray = [].slice.call(links)
        for (var i = 0; i < linksArray.length; i++) {
          var link = linksArray[i]
          link.addEventListener('click', function(e) {
            e.preventDefault()
            PostMethodEnabler.renderForm(link)
          })
        }
      },

      renderForm: function (link) {
        var form = PostMethodEnabler.createForm(link)
        form.submit()
      },

      createForm: function (link) {
        var form = document.createElement('form')
        PostMethodEnabler.setAttributes(form, {
          method: 'POST',
          action: link.getAttribute('href')
        })

        var contactInput = document.createElement('input')
        PostMethodEnabler.setAttributes(contactInput, {
          type: 'hidden',
          name: 'contact',
          value: link.getAttribute('contact')
        })

        form.appendChild(contactInput)
        document.body.appendChild(form)

        return form
      },

      setAttributes: function (el, attrs) {
        for (var key in attrs) {
          el.setAttribute(key, attrs[key]);
        }
      }
    }

    PostMethodEnabler.init()
  });
//]]>
</script>

</head>
  <body style="-moz-box-sizing: border-box;-ms-text-size-adjust: 100%;-webkit-box-sizing: border-box;-webkit-text-size-adjust: 100%;margin: 0;box-sizing: border-box;color: #0a0a0a;font-size: 16px;font-weight: normal;line-height: 1.3;min-width: 100%;padding: 0;text-align: left;width: 100% !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
      <span class="preheader rc-text" style="color: #e7e3e2;display: none !important;font-size: 1px;line-height: 1px;max-height: 0px;max-width: 0px;mso-hide: all !important;opacity: 0;overflow: hidden;visibility: hidden;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;font-weight: 400;">Simply share your link with your friends.</span>

      <table class="body" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;background-color: #e7e3e2;width: 100%;margin: 0 auto;border-top-color: transparent !important;border-bottom-color: transparent !important;">
          <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
              <td style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                  <table class="logo row" style="max-width: 600px;margin: 0 auto;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                      <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                          <td class="shop-name__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;margin-bottom: 30px;">
                              <img class="header_image" src="https://cdn.shopify.com/s/files/1/1761/2711/files/maude_email_logo.png?8859671351757297199" alt="maude" width="100%" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;max-width: 100%;">
                          </td>
                      </tr>
                  </table>
                  <table class="wrapper" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;background-color: #33362a;max-width: 600px;width: 100%;margin: 0 auto 2.5rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                      <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                          <td style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                              <table class="header row" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;margin: 20px;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                  <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                      <td class="header__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                          <center style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">

                                              <table class="container" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                      <td style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">

                                                          <table class="row" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                              <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                  <td class="shop-name__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;margin-bottom: 30px;">
                                                                    <a href="#" align="center" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                        <img class="header_image" src="https://cdn.shopify.com/s/files/1/1761/2711/files/Maude_ReferralEmail_00447eee-9afd-45e6-802b-6c71004a4341.jpg?14666995592697039283" alt="maude" width="100%" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;max-width: 100%;">
                                                                    </a>
                                                                  </td>
                                                              </tr>
                                                          </table>

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

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

                              <table class="row content" width="100%" style="width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                  <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                      <td class="content__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                          <center style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                              <table class="container" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                      <td style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                          <h1 class="text-header text-center rc-text" style="display: none;font-family: &quot;Calibre&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.035rem;font-weight: 500;">give some, get some. </h1>
                                                          <p id="bodyText" style="margin: 0 auto;max-width: 400px;font-family: &quot;GT America&quot;, &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, sans-serif;color: #fff !important;letter-spacing: 0.0125rem;font-weight: 400;display: block;text-align: center;">
                                                              Give $5 off any kit to your friends. Don't worry, you’ll get $5 off yours when they purchase. Win-win. <br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                          </p>
                                                          <table class="row actions" width="100%" style="width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                              <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                  <td class="actions__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">

                                                                      <table class="button main-action-cell" width="100%" style="width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                          <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                              <td class="button__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                                <a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=get_invite_link_email_click" class="btn button_primary" style="font-family: 'Calibre', Helvetica, Arial, Sans-Serif;color: #484848;letter-spacing: 0.075rem;max-width: 200px;display: block;background: #fff;border-radius: 3px;text-align: center;font-size: 12px;padding: 10px;line-height: 1;text-transform: uppercase;text-decoration: none;margin: 0 auto;font-weight: 500;margin-top: 40px;">Get Invite Link</a><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                              </td>
                                                                          </tr>
                                                                      </table>
                                                                      <table class="button main-action-cell" width="100%" style="width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                          <tr style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                              <td class="button__cell" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                                  <p class="text-subheader text-center rc-text" style="text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff !important;letter-spacing: 0.0125rem;font-weight: 400;">Share on social media<br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">(You'll see a preview before you post)</p>
                                                                              </td>
                                                                          </tr>
                                                                      </table>
                                                                      <div class="hide-for-large-up" style="display: none;font-size: 0;line-height: 0;max-height: 0;mso-hide: all;overflow: hidden;width: 0;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                          <center data-parsed="" style="min-width: 532px;mso-hide: all;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                              <table align="center" class="menu social-share-buttons float-center" style="margin: 0 auto;border-collapse: collapse;border-spacing: 0;float: none;mso-hide: all;padding: 0;text-align: center;vertical-align: top;width: auto !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                  <tr style="mso-hide: all;padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                      <td style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 16px;font-weight: normal;hyphens: auto;line-height: 1.3;mso-hide: all;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                                                                          <table style="border-collapse: collapse;border-spacing: 0;mso-hide: all;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                              <tr style="mso-hide: all;padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                                  <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_facebook_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/facebook-icon@3x.png" alt="Facebook" width="34" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;mso-hide: all;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                                  <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_messenger_mobile_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/messenger-icon@3x.png" alt="Messenger" width="34" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;mso-hide: all;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                                  <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_whatsapp_mobile_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;mso-hide: all;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/whatsapp-icon@3x.png" alt="Whatsapp" width="34" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;mso-hide: all;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                              </tr>
                                                                                            </table>
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>
                                                                            </center>
                                                                      </div>
                                                                      <center class="show-for-large" data-parsed="" style="min-width: 532px;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                                          <table align="center" class="menu social-share-buttons float-center" style="margin: 0 auto;border-collapse: collapse;border-spacing: 0;float: none;padding: 0;text-align: center;vertical-align: top;width: auto !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                              <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                  <td style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 16px;font-weight: normal;hyphens: auto;line-height: 1.3;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                                                                      <table style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                          <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                                              <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_facebook_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/facebook-icon@3x.png" alt="Facebook" width="36" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                              <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_messenger_desktop_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/messenger-icon@3x.png" alt="Messenger" width="36" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                                  <th class="menu-item float-center" style="margin: 0 auto;color: #0a0a0a;float: none;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 16px;padding-right: 16px;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><a href="http://portal.referralcandy.com/JC636GR/share_redirect?location=referral_email&message_id=321610161&type=share_on_whatsapp_desktop_click" style="margin: 0;color: #484848;font-weight: normal;line-height: 1.3;padding: 0;text-align: left;text-decoration: none;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"><img src="https://cdn.referralcandy.com/themes/evergreen-dev/whatsapp-icon@3x.png" alt="Whatsapp" width="36" style="-ms-interpolation-mode: bicubic;border: none;clear: both;display: block;height: auto !important;max-width: 100%;outline: none;text-decoration: none;width: 34px !important;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"></a></th>
                                                                                          </tr>
                                                                                      </table>
                                                                                  </td>
                                                                              </tr>
                                                                          </table>
                                                                      </center>
                                                                  </td>
                                                              </tr>
                                                          </table>
                                                          <div class="spacer" style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;display: block;position: relative;height: 20%;width: 100%:;"></div>
                                                      </td>
                                                  </tr>
                                              </table>
                                          </center>
                                      </td>
                                  </tr>
                              </table>
                              <table align="center" class="container background-block float-center" style="margin: 0 auto;border-collapse: collapse;border-spacing: 0;float: none;padding: 0;text-align: center;vertical-align: top;width: 580px;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                  <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                      <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                          <td style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 16px;font-weight: normal;hyphens: auto;line-height: 1.3;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                              <table class="spacer" style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;display: block;position: relative;height: 20%;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                      <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                          <td height="30px" style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 30px;font-weight: normal;hyphens: auto;line-height: 30px;mso-line-height-rule: exactly;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">&#xA0;</td>
                                                      </tr>
                                                  </tbody>
                                              </table>
                                              <table class="row" style="border-collapse: collapse;border-spacing: 0;display: table;padding: 0;position: relative;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                      <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                          <th class="small-12 large-12 columns first last" style="margin: 0 auto;color: #0a0a0a;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 0;padding-bottom: 0;padding-left: 16px;padding-right: 16px;text-align: left;width: 564px;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                                              <table style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                  <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                                      <th style="margin: 0;color: #0a0a0a;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 0;text-align: left;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                                                          <p class="background-header text-center rc-text" style="margin: 0;margin-bottom: 10px;font-size: 22px;font-weight: 500;color: #fff;line-height: 1.25;padding: 0;text-align: center;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">How it works</p>
                                                                      </th>
                                                                      <th class="expander" style="margin: 0;color: #0a0a0a;font-size: 16px;font-weight: normal;line-height: 1.3;padding: 0 !important;text-align: left;visibility: hidden;width: 0;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;"></th>
                                                                  </tr>
                                                              </table>
                                                          </th>
                                                      </tr>
                                                  </tbody>
                                              </table>
                                              <table class="spacer" style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;display: block;position: relative;height: 20%;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                      <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                          <td height="24px" style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 24px;font-weight: normal;hyphens: auto;line-height: 24px;mso-line-height-rule: exactly;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">&#xA0;</td>
                                                      </tr>
                                                  </tbody>
                                              </table>
                                              <center data-parsed="" style="min-width: 580px;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><img src="https://cdn.shopify.com/s/files/1/1761/2711/files/how-it-works.png?16823555169123903397" alt="Share your link with friends, Your friends buy via your link, You get rewarded" width="243" style="-ms-interpolation-mode: bicubic;margin: 0 auto;clear: both;display: block;float: none;height: auto;max-width: 100%;outline: none;text-align: center;text-decoration: none;width: 243px;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;" align="center" class="float-center"></center>
                                              <table class="spacer" style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;display: block;position: relative;height: 20%;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                  <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                      <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                                          <td height="36px" style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 36px;font-weight: normal;hyphens: auto;line-height: 36px;mso-line-height-rule: exactly;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">&#xA0;</td><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                                      </tr>
                                                  </tbody>
                                              </table>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </td>
                      </tr>
                  </table>
                  <table align="center" class="container footer-block float-center" style="margin: 0 auto;border-collapse: collapse;border-spacing: 0;float: none;padding: 0;text-align: center;vertical-align: top;width: 580px;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                      <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                          <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                              <td style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 16px;font-weight: normal;hyphens: auto;line-height: 1.3;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">
                                  <center data-parsed="" style="min-width: 580px;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><a href="#" class="background-footer-link rc-text float-center" align="center" style="margin: 0;color: #a9a9a9;font-size: 16px;font-weight: normal;line-height: 1.25;padding: 0;text-align: left;text-decoration: underline;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">Preferences</a>                                        <span class="footer-text float-center" align="center" style="color: #a9a9a9 !important;font-size: 16px;line-height: 1.25;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;font-weight: 400;">| </span><a href="#" class="background-footer-link rc-text float-center" align="center" style="margin: 0;color: #a9a9a9;font-size: 16px;font-weight: normal;line-height: 1.25;padding: 0;text-align: left;text-decoration: underline;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">Unsubscribe</a></center>
                                  <table class="spacer" style="border-collapse: collapse;border-spacing: 0;padding: 0;text-align: left;vertical-align: top;width: 100%;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;display: block;position: relative;height: 20%;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                      <tbody style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                          <tr style="padding: 0;text-align: left;vertical-align: top;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;border-top-color: transparent !important;border-bottom-color: transparent !important;">
                                              <td height="36px" style="-moz-hyphens: auto;-webkit-hyphens: auto;margin: 0;border-collapse: collapse !important;color: #0a0a0a;font-size: 36px;font-weight: normal;hyphens: auto;line-height: 36px;mso-line-height-rule: exactly;padding: 0;text-align: left;vertical-align: top;word-wrap: break-word;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;letter-spacing: 0.0125rem;">&#xA0;</td><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;"><br style="font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">
                                          </tr>
                                      </tbody>
                  </table>
                  </td>
                  </tr>
                  </tbody>
                  </table>
              </td>
          </tr>
      </table>
    <!-- prevent Gmail on iOS font size manipulation -->
    <div style="display: none;white-space: nowrap;font: 15px courier;line-height: 0;font-family: &quot;GT America&quot;, Helvetica, Arial, Sans-Serif;color: #fff;letter-spacing: 0.0125rem;">&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>
 
    
</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.

Console