cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!DOCTYPE html>
<html lang="en">

<head>
  <title>Contributor Invitation from XXXXXXXXX XXXX | Squarespace</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <style type="text/css">
    #outlook a {
        padding: 0;
      }
  
      
      .ReadMsgBody {
        width: 100%;
      }
  
      .ExternalClass {
        width: 100%;
      }
  
      
      .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
        line-height: 100%;
      }
  
      
      blockquote .original-only, .WordSection1 .original-only {
        display: none !important;
      }
  
      
      .appleLinkIgnore a {
        color: #222222;
        text-decoration: none;
      }
  
      .appleFooter a {
        color: #797979;
        text-decoration: none;
      }
  
      
      @media screen and (max-width: 630px) {
  
        
        table[class="wrapper"] {
          width: 100% !important;
        }
  
        
        td[class="logo"] {
          text-align: left !important;
          padding: 0 !important;
        }
  
        td[class="logo"] img {
          margin: 0 auto !important;
          text-align: center !important;
          display: block !important;
        }
  
        
        .mobile-hide {
          display: none !important;
          overflow: hidden !important;
          float: left !important;
          font-size: 1px !important;
          line-height: 1px !important;
          max-width: 0 !important;
          opacity: 0 !important;
          color: #ffffff !important;
        }
  
        
        .responsive-table {
          width: 100% !important;
        }
  
        
        .text-padding-left {
          padding-left: 5% !important;
        }
  
        .text-padding-right {
          padding-right: 5% !important;;
        }
  
        .standard-line {
          padding: 10px 0 14px 0 !important;
          line-height: 24px !important;
  
        }
        .list {
          padding: 5px 22px 16px 0;
          line-height: 24px;
        }
  
        .mobile-no-padding {
          padding: 0 0 0 0 !important;
        }
  
        
       
        .header {
          height: 120px !important;
        }
  
        td[class="heading"] {
          padding: 35px 0 9px 0 !important;
          font-size: 36px !important;
          line-height: 48px !important;
          text-align: left !important;
        }
  
        .sub-heading {
          font-size: 21px !important;
          line-height: 24px !important;
          padding: 32px 0 16px 0 !important;
        }
  
        .sub-heading {
          font-size: 21px !important;
          line-height: 24px !important;
          padding: 32px 0 16px 0 !important;
        }
  
        .label {
          font-size: 12px !important;
          line-height: 12px !important;
          padding: 7px 0 5px 0 !important;
        }
  
        .body-text-small {
          color: #222222 !important;
        }
  
        .body-text {
          color: #222222 !important;
          text-align: left !important;
          font-size: 16px !important;
        }
  
  
        .footer-links {
          letter-spacing: 0 !important;
          font-weight: 600 !important;
          padding: 34px 55px 0 55px !important;
        }
  
        .footer-unsubscribe {
          font-size: 11px !important;
          padding-top: 7px !important;
          padding-bottom: 22px !important;
        }
  
        .footer img {
          padding: 5px 0 44px 0 !important;
  
        }
        
        td[class="mobile-wrapper"] {
          padding: 10px 5% 15px 5% !important;
        }
  
        table[class="mobile-button-container"] {
          margin: 0 auto !important;
          width: 100% !important;
        }
  
        .button a {
          font-size: 12px !important;
        }
  
        .black-button {
          border-top: 12px solid #3e3e3e !important;
          border-bottom: 12px solid #3e3e3e !important;
        }
        
        .button {
          width: 70% !important;
          padding: 5px 0 19px 0 !important;
          line-height: 24px !important;
          border: 0 !important;
          font-size: 12px !important;
          text-align: center !important;
          max-width: 400px !important;
          font-weight: 400 !important;
        }
  
        .large-padding-bottom {
          padding-bottom: 29px !important;
        }
        .header {
          height: 120px !important;
        }
        .full-width img {
          width: 100% !important;
          height: auto !important;
        }
        .image-heading {
          padding-left: 22px !important;
        }
        .two-column img {
          width: 100% !important;
          height: auto !important;
        }
        .list {
          padding: 5px 22px 16px 0 !important;
          line-height: 24px !important;
        }
        .mobile-show {
          display: table-cell !important;
          width: 100% !important;
          height: auto !important;
          line-height: 22px !important;
          max-height: 616px !important;
          max-width: 616px  !important;
          opacity: 1 !important;
          overflow: visible;
        }
        .mobile-show img {
          display: block !important;
          width: 100% !important;
          height: auto !important;
          line-height: 22px !important;
          max-height: 616px !important;
          max-width: 616px  !important;
          opacity: 1 !important;
          overflow: visible;
        }
        .left-column-text {
          padding: 22px 5% !important;
        }
        .right-column-text {
          padding: 22px 5% !important;
        }
      }
      table {
        border-collapse: collapse;
      }
  </style>
</head>

<body style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;height: 100% !important;margin: 0;padding: 0;width: 100% !important;"> <span class="hidden remove-from-plain-text" style="display: none;font-size: 1px;line-height: 1px;max-width: 0;max-height: 0;min-width: 0;min-height: 0;height: 0;width: 0;opacity: 0;overflow: hidden;color: #ffffff;"></span>
  <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">&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>
  <table align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;min-width: 100%" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
      <tr>
        <td class="mobile-hide" height="44" bgcolor="#EDEDED" colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;"></td>
      </tr>
      <tr>
        <td class="mobile-hide spacer" width="58" bgcolor="#EDEDED" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;min-width: 10px;width: 1%;"></td>
        <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
            <tbody>
              <tr>
                <td height="115" align="center" class="mobile-no-padding header-wrapper" bgcolor="#EDEDED" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                  <table border="0" cellpadding="0" cellspacing="0" width="616" class="wrapper" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                    <tbody>
                      <tr>
                        <td colspan="2" width="616" bgcolor="#DADADA" class="empty-cell" height="5" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 5px;line-height: 5px;max-height: 5px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td height="110" bgcolor="#ffffff" class="logo" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                          <table class="mobile-no-padding header" border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;height: 110px;">
                            <tbody>
                              <tr>
                                <td class="mobile-no-padding text-padding-left" height="110" width="180" align="left" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-left: 58px;">
                                  <a href="https://www.squarespace.com/" target="_blank" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;">
                                    <img alt="Squarespace" width="161" height="23" border="0" src="http://static.squarespace.com/universal/images-v6/mail-assets/logo-2x.png" style="padding-top: 3px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;"
                                    />
                                  </a>
                                </td>
                                <td class="mobile-hide mobile-no-padding text-padding-right" width="450" height="110" align="right" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-right: 58px;">
                                  <table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                    <tbody>
                                      <tr>
                                        <td align="right" class="category-wrapper" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-bottom: 2px;"> <span class="category-heading" style="color: #3e3e3e;text-decoration: none;text-transform: uppercase;padding: 6px 0 5px 0;letter-spacing: 2px;line-height: 22px;font-weight: 400;font-size: 11px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">account information</span>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
            <tbody>
              <tr>
                <td bgcolor="#EDEDED" align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                  <table border="0" cellpadding="0" cellspacing="0" width="616" class="gmail-spacer responsive-table" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                    <tbody>
                      <tr>
                        <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                            <tbody>
                              <tr>
                                <td bgcolor="#F7F7F7" class="text-padding-left text-padding-right large-padding-bottom" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-left: 58px;padding-bottom: 44px;padding-right: 58px;">
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                    <tbody>
                                      <tr>
                                        <td class="spacer" height="22" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;min-width: 10px;width: 1%;"></td>
                                      </tr>
                                      <tr>
                                        <td class="spacer" height="22" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;min-width: 10px;width: 1%;"></td>
                                      </tr>
                                      <tr>
                                        <td align="left" class="standard-line body-text" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding: 6px 0 16px 0;line-height: 22px;font-weight: 400;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px;letter-spacing: 0.02em;color: #555555;text-align: left;">Hi Really Good Emails,</td>
                                      </tr>
                                      <tr>
                                        <td align="left" class="standard-line body-text" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding: 6px 0 16px 0;line-height: 22px;font-weight: 400;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px;letter-spacing: 0.02em;color: #555555;text-align: left;">XXXX XXXXX has invited you to contribute to
                                          <a href="#" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;">XXXXX XXXXX</a> with Administrator permissions.</td>
                                      </tr>
                                      <tr>
                                        <td align="left" class="standard-line body-text" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding: 6px 0 16px 0;line-height: 22px;font-weight: 400;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px;letter-spacing: 0.02em;color: #555555;text-align: left;">Click the button below to accept the invitation and login. If you’re having trouble, make sure that you’re logged out of the rest of your Squarespace websites.</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                    <tbody>
                                      <tr>
                                        <td align="left" class="button" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding: 0 0 22px 0;line-height: 22px;">
                                          <table border="0" cellspacing="0" cellpadding="0" class="responsive-table" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                            <tbody>
                                              <tr>
                                                <td align="left" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                                  <a class="black-button" href="#" target="_blank" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;font-size: 10px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 500;letter-spacing: 1px;text-decoration: none;display: inline-block;text-transform: uppercase;text-align: left;border-top: 11px solid #3e3e3e;border-bottom: 11px solid #3e3e3e;border-left: 22px solid #3e3e3e;border-right: 22px solid #3e3e3e;background-color: #3e3e3e;color: #ffffff;font-size: 10px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 500;letter-spacing: 1px;text-decoration: none;padding: 0 19px;display: inline-block;text-transform: uppercase;text-align: left;">Accept Invitation</a>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                                    <tbody>
                                      <tr>
                                        <td align="left" class="sub-heading" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 21px;font-weight: 200;color: #222222;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;padding: 26px 0 18px 0;letter-spacing: 0.02em;line-height: 22px;">We’re here to help</td>
                                      </tr>
                                      <tr>
                                        <td align="left" class="standard-line body-text" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding: 6px 0 16px 0;line-height: 22px;font-weight: 400;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 14px;letter-spacing: 0.02em;color: #555555;text-align: left;">Our award-winning Customer Care Team is available <span class="appleLinkIgnore">24/7</span>. If you have any questions, please visit
                                          <a href="https://support.squarespace.com/hc/en-us" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;">support.squarespace.com</a>.</td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td width="58" class="mobile-hide spacer" bgcolor="#EDEDED" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;min-width: 10px;width: 1%;"></td>
      </tr>
      <tr>
        <td class="footer" colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
            <tbody>
              <tr>
                <td class="text-padding-left text-padding-right" height="115" align="center" bgcolor="#EDEDED" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-left: 58px;padding-right: 58px;">
                  <table border="0" cellpadding="0" cellspacing="0" class="wrapper" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;">
                    <tbody>
                      <tr>
                        <td align="center" class="footer-links" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;font-size: 10px;line-height: 18px;font-weight: 600;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;color: #797979;letter-spacing: 1px;padding-top: 31px;text-transform: uppercase;">
                          <a href="http://blog.squarespace.com" class="original-only" style="text-decoration: none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">Blog</a> <span class="original-only">•</span>
                          <a href="https://support.squarespace.com/hc/en-us" class="original-only" style="text-decoration: none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">Help &amp; Support</a> <span class="original-only">•</span>
                          <a href="https://www.squarespace.com/apps/" class="original-only" style="text-decoration: none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">Mobile Apps</a> <span class="original-only mobile-hide">•</span>
                          <a href="https://answers.squarespace.com/" class="original-only" style="text-decoration: none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">Answers</a> <span class="original-only">•</span>
                          <a href="/about/locations" class="original-only" style="text-decoration: none;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">Contact Us</a>
                        </td>
                      </tr>
                      <tr>
                        <td align="center" class="footer-unsubscribe" valign="middle" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #797979;padding: 6px 0 10px 0;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;">
                        <span class="appleFooter">Squarespace, Inc. 225 Varick Street, 12th Floor, New York, NY 10014</span>
                        </td>
                      </tr>
                      <tr>
                        <td class="footer-logo" align="center" valign="middle" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;padding-bottom: 56px;">
                          <a href="https://www.squarespace.com/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #000000;color: #797979;">
                            <img src="http://static.squarespace.com/universal/images-v6/mail-assets/squarespace-icon-2x.png" width="19" height="15" alt="squarespace" style="-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;padding: 11px 0 45px 0;"
                            />
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  
</body>

</html>
            
          
!
999px
Loading ..................

Console