123

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.

            
              <head>
    <!-- NAME: 1 COLUMN -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,">
  <style>body {
background-color: #f6f6f6; height: 100% !important; margin: 0; padding: 50px 0px;
}
img {
border: 0; outline: none; text-decoration: none;
}
img {
display: block;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass {
line-height: 100%;
}
img {
-ms-interpolation-mode: bicubic;
}
body {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 480px) {
  .hinge-image {
    width: 75px; height: 30px;
  }
  .to-text {
    height: 0px !important;
  }
  .gray-line {
    padding: 0px 24px !important;
  }
  .header-title {
    font-size: 24px !important;
  }
  .hinge-header {
    padding: 32px 0px 16px 24px !important;
  }
  .width-mobile {
    width: 280px;
  }
  .header-text {
    padding: 48px 57px 0px 32px !important;
  }
  .mobile-body {
    font-size: 18px !important; padding: 24px 32px 48px 32px !important; line-height: 26px;
  }
  .td-mobile-padding {
    padding: 16px 0px 16px 0px;
  }
  .td-mobile-padding-bottom {
    padding-bottom: 16px;
  }
  .hinge-button {
    padding: 0px 81px 64px 81px !important;
  }
  .footer-padding {
    padding: 0px 32px 0px 32px !important;
  }
  .mobile-padding {
    padding: 0px 64px 0px 64px !important;
  }
  .mobile-width {
    width: 280px !important;
  }
  .insta-img {
    padding: 0px 0px 2px 32px !important;
  }
  .sub-title-container {
    padding: 0px !important;
  }
  .sub-title-text {
    padding: 0px 32px !important;
  }
  .u-up-parent-container {
    padding: 8px 0px 16px 32px !important;
  }
  .meet-parents-parent-container {
    padding: 8px 8px 16px 8px !important;
  }
  .up {
    width: 55px !important;
  }
  .meet-parents {
    width: 186px !important;
  }
  .templateColumnContainer {
    display: block !important; width: 100% !important; padding-bottom: 0 !important;
  }
  body {
    -webkit-text-size-adjust: none !important;
  }
  table {
    -webkit-text-size-adjust: none !important;
  }
  td {
    -webkit-text-size-adjust: none !important;
  }
  p {
    -webkit-text-size-adjust: none !important;
  }
  a {
    -webkit-text-size-adjust: none !important;
  }
  li {
    -webkit-text-size-adjust: none !important;
  }
  blockquote {
    -webkit-text-size-adjust: none !important;
  }
  body {
    width: 100% !important; min-width: 100% !important;
  }
  table[class=mcnTextContentContainer] {
    width: 100% !important;
  }
  table[class=mcnBoxedTextContentContainer] {
    width: 100% !important;
  }
  table[class=mcpreview-image-uploader] {
    width: 100% !important; display: none !important;
  }
  img[class=mcnImage] {
    width: 100% !important; align-content: center !important;
  }
  table[class=mcnImageGroupContentContainer] {
    width: 100% !important;
  }
  td[class=mcnImageGroupContent] {
    padding: 9px !important;
  }
  td[class=mcnImageGroupBlockInner] {
    padding-bottom: 0 !important; padding-top: 0 !important;
  }
  tbody[class=mcnImageGroupBlockOuter] {
    padding-bottom: 9px !important; padding-top: 9px !important;
  }
  table[class=mcnCaptionTopContent] {
    width: 100% !important;
  }
  table[class=mcnCaptionBottomContent] {
    width: 100% !important;
  }
  table[class=mcnCaptionLeftTextContentContainer] {
    width: 100% !important;
  }
  table[class=mcnCaptionRightTextContentContainer] {
    width: 100% !important;
  }
  table[class=mcnCaptionLeftImageContentContainer] {
    width: 100% !important;
  }
  table[class=mcnCaptionRightImageContentContainer] {
    width: 100% !important;
  }
  table[class=mcnImageCardLeftTextContentContainer] {
    width: 100% !important;
  }
  table[class=mcnImageCardRightTextContentContainer] {
    width: 100% !important;
  }
  td[class=mcnImageCardLeftImageContent] {
    padding-right: 18px !important; padding-left: 18px !important; padding-bottom: 0 !important;
  }
  td[class=mcnImageCardRightImageContent] {
    padding-right: 18px !important; padding-left: 18px !important; padding-bottom: 0 !important;
  }
  td[class=mcnImageCardBottomImageContent] {
    padding-bottom: 9px !important;
  }
  td[class=mcnImageCardTopImageContent] {
    padding-top: 18px !important;
  }
  td[class=mcnImageCardLeftImageContent] {
    padding-right: 18px !important; padding-left: 18px !important; padding-bottom: 0 !important;
  }
  td[class=mcnImageCardRightImageContent] {
    padding-right: 18px !important; padding-left: 18px !important; padding-bottom: 0 !important;
  }
  td[class=mcnImageCardBottomImageContent] {
    padding-bottom: 9px !important;
  }
  td[class=mcnBoxedTextContentColumn] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  td[class=columnsContainer] {
    display: block !important; max-width: 600px !important; width: 100% !important;
  }
  td[class=mcnImageCardTopImageContent] {
    padding-top: 18px !important;
  }
  table[class=mcnCaptionLeftContentOuter] td[class=mcnTextContent] {
    padding-top: 9px !important;
  }
  table[class=mcnCaptionRightContentOuter] td[class=mcnTextContent] {
    padding-top: 9px !important;
  }
  td[class=mcnCaptionBlockInner] table[class=mcnCaptionTopContent]:last-child td[class=mcnTextContent] {
    padding-top: 18px !important;
  }
  td[class=mcnBoxedTextContentColumn] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  td[class=mcnTextContent] {
    padding-right: 0 !important; padding-left: 0 !important;
  }
  table[id=templateContainer] {
    max-width: 600px !important; width: 344px !important;
  }
  table[id=templatePreheader] {
    max-width: 600px !important; width: 344px !important;
  }
  table[id=templateHeader] {
    max-width: 600px !important; width: 344px !important;
  }
  table[id=templateColumns] {
    max-width: 600px !important; width: 344px !important;
  }
  table[class=templateColumn] {
    max-width: 600px !important; width: 344px !important;
  }
  table[id=templateBody] {
    max-width: 600px !important; width: 344px !important;
  }
  table[id=templateFooter] {
    max-width: 600px !important; width: 344px !important;
  }
  h1 {
    font-size: 32px !important; line-height: 110% !important;
  }
  h2 {
    font-size: 20px !important; line-height: 150% !important;
  }
  h3 {
    font-size: 18px !important; line-height: 110% !important;
  }
  h4 {
    font-size: 16px !important; line-height: 110% !important;
  }
  table[class=mcnBoxedTextContentContainer] td[class=mcnTextContent] {
    font-size: 18px !important; line-height: 125% !important;
  }
  td[class=mcnBoxedTextContentContainer] td[class=mcnTextContent] p {
    font-size: 18px !important; line-height: 125% !important;
  }
  table[id=templatePreheader] {
    display: none !important;
  }
  td[class=preheaderContainer] td[class=mcnTextContent] {
    font-size: 14px !important; line-height: 115% !important;
  }
  td[class=preheaderContainer] td[class=mcnTextContent] p {
    font-size: 14px !important; line-height: 115% !important;
  }
  td[class=headerContainer] td[class=mcnTextContent] {
    font-size: 18px !important; line-height: 125% !important;
  }
  td[class=headerContainer] td[class=mcnTextContent] p {
    font-size: 18px !important; line-height: 125% !important;
  }
  td[class=partnerTextBlock] p {
    font-size: 12px !important;
  }
  td[class=footerContainer] td[class=mcnTextContent] {
    font-size: 14px !important; line-height: 115% !important;
  }
  td[class=footerContainer] td[class=mcnTextContent] p {
    font-size: 14px !important; line-height: 115% !important;
  }
  td[class=footerContainer] a[class=utilityLink] {
    display: block !important;
  }
  table[class=mcnFollowBlock] {
    min-width: 0 !important;
  }
}
</style></head>
  <body class="gwfw" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="height: 100% !important; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 50px 0px;" bgcolor="#f6f6f6">
    <center>
      <table id="bodyTable" style="height: 100% !important; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 50px 0px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="center" bgcolor="#f6f6f6">
        <tbody>
          <tr>
            <td id="bodyCell" style="height: 100% !important; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-top-width: 0; margin: 0; padding: 0;" align="center" valign="top" bgcolor="#f6f6f6">
              <!-- BEGIN TEMPLATE // -->
              <table id="templateContainer" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border: 0;" border="0" width="600" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6">
                <tbody>
                  <tr>
                    <td align="center" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                      <!-- BEGIN PREHEADER // -->
                      <table id="templatePreheader" border="0" width="600" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-top-width: 0; border-bottom-width: 0;">
                        <tbody>
                          <tr>
                            <td class="preheaderContainer" style="padding-top: 9px; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top">
                              <table class="mcnTextBlock" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="font-family: Helvetica; color: #AAAAAA; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 12px; line-height: 125%; padding: 9px 0px 9px 18px;" valign="top" align="right">The party can officially start now.</td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <!-- // END PREHEADER -->
                    </td>
                  </tr>
                  <tr>
                    <td align="center" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                      <!-- BEGIN HEADER // -->
                    <div style="overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important;" class="shadow">
                      <table id="templateHeader" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-top-width: 0; border-bottom-width: 0;" border="0" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                        <tbody>
                          <tr>
                            <td class="headerContainer" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                              <table class="mcnImageBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnImageBlockOuter" style="background-color: #ffffff;">
                                  <tr>
                                    <td class="shadow mcnImageBlockInner hinge-header" style="border-bottom-width: 1px; border-bottom-color: rgba(226, 226, 226, 0.7); border-bottom-style: solid; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; padding: 32px 0px 16px 64px;" valign="top">
                                      <table class="mcnImageContentContainer" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" align="left" bgcolor="#ffffff">
                                        <tbody>
                                          <tr>
                                            <!-- LOGO -->
                                            <td class="mcnImageContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px;" valign="top" width="100%" bgcolor="#ffffff">
                                              <a title="" clicktracking="off" href="/" target="_blank" style="word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img class="mcnImage hinge-image" style="max-width: 88px; display: inline !important; vertical-align: bottom; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/862df15a-a309-4ee0-894d-547caabb55c5.png" alt="Hinge" width="88"></a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                      <!-- // END HEADER -->
                    </td>
                  </tr>
                  <tr>
                    <td align="center" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                      <!-- BEGIN BODY // -->
                      <table class="shadow" id="templateBody" style="overflow: hidden; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; -webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !important; border-top-width: 0; border-bottom-width: 0;" border="0" width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                        <tbody>
                          <tr>
                            <td class="bodyContainer" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                              <!--Begin Image Block 1-->
                              <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                <tbody>
                                  <tr>
                                    <td class="headerContainer" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnImageBlock" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody class="mcnImageBlockOuter">
                                          <tr>
                                            <td class="mcnImageBlockInner" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px;" valign="top">
                                              <table class="mcnImageContentContainer" border="0" width="100%" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                                <tbody>
                                                  <tr>
                                                    <td class="mcnImageContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px;" valign="top" align="center">
                                                      <img class="mcnImage" style="max-width: 600px; padding-bottom: 0px; padding-top: 0px; display: inline !important; vertical-align: bottom; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/b7d615e7-98ec-48be-8b12-96a31f1a03de.png" alt="Hinge" width="600">
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End Image Block 1-->
                              <!--Begin Text Block 3-->
                              <table class="mcnTextBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" width="600" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                              <h1 class="header-text" style="color: #2e2e2e !important; font-size: 37px; font-family: Times; line-height: 40px; letter-spacing: -0.6px; -webkit-font-smoothing: antialiased; display: block; font-style: normal; font-weight: normal; margin: 0; padding: 48px 220px 24px 64px;" valign="top" align="left">
                                                Welcome to the friends of friends app.
                                              </h1>
                                            </td>
                                            </tr><tr>
                                              <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                                <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300; margin: 0; padding: 0px 0px 64px 64px;" class="desktop-padding mobile-body" align="left">We're pumped to have you. Here’s how to get started with Hinge.
                                                
                                                
                                                </p>
                                              </td>
                                            </tr>

                                            <tr>
                                              <td class="mcnImageContent gray-line" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px 0px 0px 64px;" valign="top">
                                                <img class="mcnImage" style="padding-bottom: 0px; padding-top: 0px; display: inline !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/43bc5298-d89e-489e-b1c7-d989329ace25.png" alt="" width="472">
                                              </td>
                                            </tr>
                                          
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End Text Block 3-->
                              
                               <!-- First Section  -->
                              <table class="mcnImageBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnImageBlockOuter" style="background-color: #ffffff;">
                                  <tr>
                                    <td style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage" style="width: 88px !important; outline: none; text-decoration: none; display: block; -ms-interpolation-mode: bicubic; vertical-align: bottom; padding: 48px 0px 0px; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/f35d9ab1-622f-4a87-b860-cd0566f82f16.png" alt="" width="88">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table class="mcnTextBlock mobile-width mobile-body" valign="top" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px 0px 0px 64px;" border="0" width="250" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" width="250" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left"><h1 style="color: #2e2e2e !important; font-size: 40px; font-family: Times; line-height: 42px; display: block; font-style: normal; font-weight: normal; letter-spacing: 0; margin: 0; padding: 0;" valign="top" align="left">
                                            Make your profile totally ‘’</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <table class="mcnTextContentContainer" border="0" width="250" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                              <h1 style="color: #2e2e2e !important; font-size: 18px !important; font-family: Helvetica; line-height: 26px !important; font-weight: lighter; display: block; font-style: normal; letter-spacing: 0; margin: 0; padding: 16px 0px 0px;" valign="top" align="left">
                                            Pick prompts that reveal who you are and what you're into.</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table class="mcnImageBlock" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="200" cellspacing="0" cellpadding="0">
                                <tbody class="mcnImageBlockOuter">
                                  <tr>
                                    <td class="mcnImageContent" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage mobile-padding" style="padding-bottom: 0px; padding-top: 0px; padding-left: 40px; display: inline !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom; border: 0;" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5a296689d5b68207147d2464/original.gif?1512662664" alt="james iphone" width="200">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End of First Section-->

                               <!-- Second Section  -->
                              <table class="mcnImageBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnImageBlockOuter" style="background-color: #ffffff;">
                                  <tr>
                                    <td style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage" style="width: 88px !important; outline: none; text-decoration: none; display: block; -ms-interpolation-mode: bicubic; vertical-align: bottom; padding: 48px 0px 0px; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/ea75a00d-139a-4e45-aec3-273f193c7dca.png" alt="" width="88">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>

                              <table class="mcnTextBlock mobile-width mobile-body" valign="top" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px 0px 0px 64px;" border="0" width="250" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" width="250" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left"><h1 style="color: #2e2e2e !important; font-size: 40px; font-family: Times; line-height: 42px; display: block; font-style: normal; font-weight: normal; letter-spacing: 0; margin: 0; padding: 0;" valign="top" align="left">
                                            Send likes to friends of friends you’re interested in.</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <table class="mcnTextContentContainer" border="0" width="250" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                              <h1 style="color: #2e2e2e !important; font-size: 18px !important; font-family: Helvetica; line-height: 26px !important; font-weight: lighter; display: block; font-style: normal; letter-spacing: 0; margin: 0; padding: 16px 0px 0px;" valign="top" align="left">
                                            

RIP, swiping. Get the ball rolling by liking or commenting on pictures and prompts.</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <table class="mcnImageBlock" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="200" cellspacing="0" cellpadding="0">
                                <tbody class="mcnImageBlockOuter">
                                  <tr>
                                    <td class="mcnImageContent" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage mobile-padding" style="padding-bottom: 0px; padding-left: 40px; padding-top: 0px; display: inline !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom; border: 0;" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5a2967567dea0d10935a5267/original.gif?1512662870" alt="jeannie iphone" width="200">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End of Second Section-->

                              <!-- Third Section  -->
                              <table class="mcnImageBlock" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnImageBlockOuter" style="background-color: #ffffff;">
                                  <tr>
                                    <td style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage" style="width: 88px !important; outline: none; text-decoration: none; display: block; -ms-interpolation-mode: bicubic; vertical-align: bottom; padding: 48px 0px 0px; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/f704c383-2929-424e-9a8f-376a88f843cc.png" alt="" width="88">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>

                              <table class="mcnTextBlock mobile-width mobile-body" valign="top" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px 0px 0px 64px;" border="0" width="250" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" width="264" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left"><h1 style="color: #2e2e2e !important; font-size: 38px; font-family: Times; line-height: 42px; display: block; font-style: normal; font-weight: normal; letter-spacing: 0; margin: 0; padding: 0;" valign="top" align="left">
                                            Match to start the conversation.</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      <table class="mcnTextContentContainer" border="0" width="264" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                              <h1 style="color: #2e2e2e !important; font-size: 18px !important; font-family: Helvetica; line-height: 26px !important; font-weight: lighter; display: block; font-style: normal; letter-spacing: 0; margin: 0; padding: 16px 0px 0px;" valign="top" align="left">
                                                
No more convos about how Monday is treating you. Members who have liked something on your profile will appear in the 'Likes You' section. Tap ‘Match’ to start chatting.</h1>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>

                              <table class="mcnImageBlock" style="display: inline-block; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 0px 0px 48px;" border="0" width="200" cellspacing="0" cellpadding="0">
                                <tbody class="mcnImageBlockOuter">
                                  <tr>
                                    <td class="mcnImageContent" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <img class="mcnImage mobile-padding" style="padding-bottom: 0px; padding-left: 40px; padding-top: 0px; display: inline !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom; border: 0;" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5a68c1717dea0d6ee46cde89/original.gif?1516814705" alt="lily iphone" width="200">
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End of Third Section-->
                              <!--Begin Button Block-->
                              <table class="mcnButtonBlock" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnButtonBlockOuter">
                                  <tr>
                                    <td class="hinge-button mcnButtonBlockInner" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 16px 0px 64px 64px;" align="left" valign="top">
                                      <table class="mcnButtonContentContainer" style="border-collapse: separate !important; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                        <tbody>
                                          <tr>
                                            <td class="mcnButtonContent" style="color: #2e2e2e; font-family: Helvetica; font-size: 10px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; width: 182px; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; padding: 16px 0px;" align="center" valign="middle" bgcolor="#A5EFD3">
                                              <a class="mcnButton" clicktracking="off" style="font-weight: bold; letter-spacing: 1.5px; line-height: 100%; text-decoration: none; color: #2e2e2e; word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" href="/" target="_blank">LET'S GET STARTED</a>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!--End Button Block-->
                                                            <!-- Begin Common Footer -->
                              <table class="mcnTextBlock" style="border-top-width: 1px; border-top-color: #e2e2e2; border-top-style: solid; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
                                <tbody class="mcnTextBlockOuter">
                                  <tr>
                                    <td class="mcnTextBlockInner" valign="top" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                      <table class="mcnTextContentContainer" border="0" width="600" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
                                        <tbody>
                                          <tr>
                                            <td valign="bottom" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300; padding: 18px 0px 8px;" class="mcnTextContent" align="left">
                                              <a href="https://www.instagram.com/hinge/?hl=en" style="word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #25acd7; font-weight: normal; text-decoration: none;" target="_blank"><img class="mcnImage insta-img" style="max-width: 19px; display: inline !important; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom; height: auto !important; padding: 0px 0px 2px 64px; border: 0;" src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/075742af-ca5c-4ad5-85e8-7e758c01a063.png" alt="Instagram" width="19"></a>
                                              <p style="display: inline !important; color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 0;" align="left">Follow us <a href="https://www.instagram.com/hinge/?hl=en" style="word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #25acd7; font-weight: normal; text-decoration: none;" target="_blank"><span style="color: #7ADFB9; font-weight: bold;">@hinge</span></a></p>
                                            </td>
                                          </tr>
                                          <tr>
                                            <td valign="bottom" style="border-bottom-width: 1px; border-bottom-color: #e3e2e2; border-bottom-style: solid; mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300; padding: 0px 0px 16px;" class="mcnTextContent" align="left">
                                              <p class="footer-padding" style="display: inline !important; color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 0px 0px 2px 64px;" align="left">Get profile inspiration &amp; meet Most Eligibles</p>
                                            </td>
                                          </tr>
                                            <tr>
                                              <td width="600px" class="td-mobile-padding mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                                <p class="footer-padding" style="color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 32px 140px 0px 64px;" align="left">Please hit us up with any questions at <a style="color: #aaaaaa; text-decoration: underline; word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-weight: normal;" href="mailto:hello@hinge.co" target="_blank">hello@hinge.co</a> or check out our <a class="" style="text-decoration: underline; color: #AAAAAA; word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-weight: normal;" href="https://hingeapp.zendesk.com/hc/en-us" target="_blank">FAQ</a>.</p>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td width="600px" class="td-mobile-padding mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                                <p class="footer-padding" style="color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 16px 0px 0px 64px;" align="left">137 5th Avenue, 6th floor New York, NY 10010</p>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td width="600px" class="mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                                <p class="footer-padding" style="color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 16px 0px 0px 64px;" align="left">© 2017 Hinge Inc. All Rights Reserved.</p>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td width="600px" class="td-mobile-padding-bottom mcnTextContent" style="mso-table-lspace: 0; mso-table-rspace: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #666666; font-family: Helvetica !important; font-size: 16px; line-height: 150%; font-weight: 300;" align="left">
                                                <p class="footer-padding" style="color: #AAAAAA; font-family: Helvetica !important; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 150%; font-weight: 300; margin: 0; padding: 0px 0px 32px 64px;" align="left">If you prefer not to receive these emails, you may <a class="unsub" style="text-decoration: underline; color: #AAAAAA; word-wrap: break-word; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-weight: normal;" href="#" target="_blank">unsubscribe</a></p>
                                              </td>
                                            </tr>
                                          
                                        </tbody>
                                      </table>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                              <!-- End Common Footer -->
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <img src="https://gallery.mailchimp.com/5faf5d27e5fcaf92b83e15ee5/images/efd0394c-bb1f-46ae-afdb-356659a8e466.gif" width="50" style="outline: none; text-decoration: none; display: block; -ms-interpolation-mode: bicubic; border: 0;">
                      <!-- // END BODY -->
                    </td>
                  </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </center>




</body>
            
          
!
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