Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

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

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--<![endif-->
    <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport">
    <meta name="viewport" content="width=device-width">
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">

    <!--[if lte mso 11]>
    <style type="text/css">
      .outlook-group-fix { width:100% !important; }
    </style>
<![endif]-->
    <style type="text/css">
      @font-face {
        font-family: 'SofiaPro';
        font-style: normal;
        font-weight: normal;
        src: url('https://start.forhims.com/wp-content/themes/hims-landing-pages/fonts/sofiaproregular-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'SofiaPro';
        font-style: normal;
        font-weight: 500;
        src: url('https://start.forhims.com/wp-content/themes/hims-landing-pages/fonts/sofiapromedium-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'SofiaPro';
        font-style: normal;
        font-weight: 600;
        src: url('https://start.forhims.com/wp-content/themes/hims-landing-pages/fonts/sofiaprosemibold-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'SofiaPro';
        font-style: normal;
        font-weight: bold;
        src: url('https://start.forhims.com/wp-content/themes/hims-landing-pages/fonts/sofiaprobold-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'IvarText';
        font-style: normal;
        font-weight: 500;
        src: url('https://start.forhers.com/wp-content/themes/hims-inc-landing-page-builder/fonts/ivartextmedium-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'IvarText';
        font-style: normal;
        font-weight: 600;
        src: url('https://start.forhers.com/wp-content/themes/hims-inc-landing-page-builder/fonts/ivartextsemibold-webfont.woff') format('woff');
      }
      @font-face {
        font-family: 'IvarText';
        font-style: normal;
        font-weight: bold;
        src: url('https://start.forhers.com/wp-content/themes/hims-inc-landing-page-builder/fonts/ivartextbold-webfont.woff') format('woff');
      }
      /* FULL WIDTH CLASSES */
      @media (max-width: 1800px) {
        .ow100 {
          width: 100%;
        }
        .ow50 {
          width: 50%;
        }
        .ow70 {
          width: 70%;
        }
        *[class~=opadt] {
          padding-top: 45px !important;
        }
        *[class~=onegmargt] {
          margin-top: -40px;
        }
        *[class~=oheight] {
          height: 135px;
        }
      }
      /* OVERALL STYLYING RESETS */
      /* Ensure tables don’t have any extra spacing*/
      table {
        border-collapse: collapse;
      }
      /* Ensure no unwated margins on all copy*/
      p h1,
      h2,
      h3,
      h4 {
        margin: 0;
        padding: 0;
      }
      /* Ensure that images don’t have borders, text-decoration and unwanted spacing */
      img,
      a img {
        border: 0 !important;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }
      /* Ensure the main body container has correct fallbacks*/
      body,
      #bodyTable {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      /* Allow smoother rendering of resized image in IE */
      img {
        -ms-interpolation-mode: bicubic;
      }
      /* Remove spacing between tables in Outlook 2007 and up */
      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      h1,
      h2,
      h3,
      h4,
      p,
      a,
      li,
      td,
      body,
      table {
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }
      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
      }
      /* FONT STYLING  */
      h1 {
        color: #000001;
        font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 46px;
        font-style: normal;
        font-weight: bold;
        line-height: 52px;
        letter-spacing: normal;
        margin: 0;
      }
      h2 {
        color: #000001;
        font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: normal;
      }
      h3 {
        color: #000001;
        font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 125%;
        letter-spacing: normal;
      }
      h4 {
        color: #000001;
        font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
        letter-spacing: normal;
      }
      p {
        font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 150%;
        word-break: break-word;
      }
      /* HIMS HOVERS  */
      .button-border-black:hover {
        background: #fbf8f5 !important;
        border: 2px solid black !important;
      }
      .button-border-black:hover .buttontext-black {
        color: #000000 !important;
      }
      .footer-hover:hover {
        border-bottom: 2px solid #fff !important;
        padding-bottom: 1px;
      }
      .product-container-hover:hover {
        border: solid 20px white !important;
        background: #ffffff !important;
      }
      .opacity:hover {
        opacity: .9 !important;
      }
      /* TABLET WIDTH AND PADDING */
      @media (max-width: 699px) {
        .w100 {
          width: 100% !important;
        }
        .w95 {
          width: 95% !important;
        }
        .w90 {
          width: 90% !important;
        }
        .w85 {
          width: 85% !important;
        }
        .w80 {
          width: 80% !important;
        }
        .w70 {
          width: 70% !important;
        }
        .w50 {
          width: 60% !important;
        }
        .column33 {
          width: 33% !important;
        }
        .column33a {
          width: 25% !important;
        }
        .column66 {
          width: 66% !important;
        }
        .column50a {
          width: 50% !important;
        }
        .column50 {
          width: 100% !important;
        }
        .padt0 {
          padding-top: 0px !important;
        }
        .padt5 {
          padding-top: 5px !important;
        }
        .padt10 {
          padding-top: 10px !important;
        }
        .padt15 {
          padding-top: 15px !important;
        }
        .padt20 {
          padding-top: 20px !important;
        }
        .padt30 {
          padding-top: 30px !important;
        }
        .padb0 {
          padding-bottom: 0px !important;
        }
        .padb5 {
          padding-bottom: 5px !important;
        }
        .padb10 {
          padding-bottom: 10px !important;
        }
        .padb15 {
          padding-bottom: 15px !important;
        }
        .padb20 {
          padding-bottom: 20px !important;
        }
        .padtp {
          padding-top: 20% !important;
        }
        .padbp {
          padding-bottom: 20% !important;
        }
        .showm {
          display: block !important;
          max-height: 1000px !important;
          width: 100% !important;
          overflow: visible !important;
          align: center !important;
        }
        .showm2 {
          overflow: visible !important;
          align: center !important;
        }
        .mobile-100p {
          width: auto !important;
        }
        .tcenter {
          text-align: center !important;
        }
        tr.mhide {
          display: none !important;
          mso-hide: all;
          font-size: 0px !important;
          max-height: 0px !important;
          height: 0px !important;
          float: left !important;
          overflow: hidden !important;
        }
        .mobile-hide {
          display: none !important;
        }
        .himslogo {
          width: 70px !important;
        }
        .background-color-white {
          background-color: #ffffff !important;
        }
        .footer_mb {
          font-size: 15px !important;
          line-height: 175% !important;
        }
        .underline {
          border-bottom: 2px solid #fff;
          padding-bottom: 1px;
        }
      }
      /* MB WIDTH */
      @media (max-width: 560px) {
        .coulumn50 {
          width: 100% !important;
        }
        .w100m,
        .coulumn50 {
          width: 100% !important;
        }
        u+.body .full-wrap {
          width: 100% !important;
          width: 100vw !important;
        }
      }
      /* Ensure large text on mb stays large if user choose to make large */
      @media only screen and (max-width: 480px) {
        body,
        table,
        td,
        p,
        a,
        li,
        blockquote {
          -webkit-text-size-adjust: none !important;
        }
      }
      @media only screen and (max-width: 699px) {
        h1 {
          font-size: 26px !important;
          line-height: 30px !important;
        }
        h2 {
          font-size: 20px !important;
          line-height: 28px !important;
        }
        h3 {
          font-size: 18px !important;
          line-height: 125% !important;
        }
        h4 {
          font-size: 16px !important;
          line-height: 150% !important;
        }
        p {
          font-size: 16px !important;
          line-height: 25px !important;
        }
      }
    </style>
    <style type="text/css">
      /* CUSTOM MOBILE */
      @media (max-width: 699px) {
        .pad-custom {
          padding-top: 55% !important;
        }
        .background-color-custom {
          background-color: #fbf8f5 !important;
        }
        .img-size-custom {
          width: 75% !important;
        }
      }
      /* CUSTOM BACKGROUND IMG MOBILE */
      @media screen and (max-width:699px) {
        .imageswap {
          background: url("https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0c13f282745150bd15d09/original.jpg?1571864895") no-repeat !important;
          background-size: 102% auto !important;
          max-width: 100% !important;
          background-color: #eee2d6 !important;
          background-position: bottom !important;
        }
      }
    </style>

    <!-- These styles remain as they are-->

    <!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span, h1, h2, h3, h4, p { font-family: Arial, Helvetica, sans-serif !important; }
a {text-decoration: none;}
</style>
<![endif]-->

    <!--[if mso>
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
font-family: Segoe UI, Arial, sans-serif;
}
table, td, div, p {
font-family: Segoe UI, Arial, sans-serif;
line-height: normal;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif-->
  </head>
  <body id="bodyTable" class="body" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none; margin: 0; padding: 0; width: 100%; background-color: #ffffff;">
    <div style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">24/7 chat with our new hims app</div> <span class="hidden" style="display: none !important; mso-hide: all; height: 0; max-height: 0; visibility: hidden; overflow: hidden;">&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp;‌&nbsp; </span>
    <table class="full-wrap" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #eee2d6;  width: 100%;">

      <!-- HEADER START-->
      <tr>
        <td align="center">
          <table class="w100 ow100" align="center" cellpadding="0" cellspacing="0" border="0" width="700" style="background-color: #eee2d6;">

            <!-- Hero Image-->
            <tr>
              <td align="center">
                <table class="w100 ow100" width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #eee2d6;">
                  <tr>

                    <!-- * BACKGROUND-IMAGE 354x200 * -->
                    <td class="imageswap" background="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0c21c282745132ed15caa/original.jpg?1571865116" align="center" style="background: #eee2d6 url(https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0c21c282745132ed15caa/original.jpg?1571865116); background-image: url(https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0c21c282745132ed15caa/original.jpg?1571865116);background-size: 100% auto; background-position:bottom; background-repeat: no-repeat; background-color: #eee2d6; ">

                      <!--[if gte mso 9]>
	<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 700px; height: 768px;"
	src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0a0bc28274528b86833fa/original.jpg?1571856572"
	/>
	<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 700px; height:768px;">
	<v:fill opacity="0%" color="#eee2d6" />
	<v:textbox inset="0,0,0,0">
	<![endif]-->
                      <div>
                        <table align="center" cellpadding="0" cellspacing="0" border="0" width="100%">
                          <tr>
                            <td align="center">
                              <table class="w100" align="center" cellpadding="0" cellspacing="0" border="0" width="100">

                                <!-- image start -->
                                <tr>
                                  <td class="padt15 padb5" align="center" style="padding-top: 25px; padding-bottom: 0px; ">
                                    <a href="https://www.forhims.com" target="_blank" style="font-size: 24px; text-align:center; color: #000; font-family: Georgia, serif; font-weight: 600;">
                                      <img class="himslogo" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5d5dd57b28274536ccd6fa7e/original.png?1566430587" alt="hims" width="80" role="presentation" aria-hidden="true" style="border: none;  width: 80px; max-width: 100%; ">
                                    </a>
                                  </td>
                                </tr>

                                <!-- image end -->
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td align="center">
                              <table class="w90" width="700" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                  <td class="padt0" align="center" style="padding-top: 0px; ">
                                    <table class="w100 " cellpadding="0" cellspacing="0" border="0" width="78%">
                                      <tr>
                                        <td class="padt20" align="left" style=" ">
                                          <table class="w100" align="left" cellpadding="0" cellspacing="0" border="0" width="100%">

                                            <!-- copy start -->
                                            <tr>
                                              <td class="padt0 padb5" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; padding-top: 35px; padding-bottom: 10px ; font-size: 4 6px; line-height: 52px">
                                                <h1 style="font-size: 40px; line-height: 42px">meet the hims app</h1>
                                              </td>
                                            </tr>

                                            <!-- copy end -->

                                            <!-- copy start -->
                                            <tr>
                                              <td class="padt0 padb5" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; padding-top: 3px; padding-bottom: 10px ; font-size: 4 6px; line-height: 52px">
                                                <h4 style="font-size: 22px; line-height: 22px"> Stay in control of your health</h4>
                                              </td>
                                            </tr>

                                            <!-- copy end -->
                                            <tr>
                                              <td align="center">
                                                <table class=" " align="center" cellpadding="0" cellspacing="0" border="0" width="280">

                                                  <!-- image start -->
                                                  <tr>
                                                    <td class="padt15 padb5" align="center" style="padding-top: 15px; padding-bottom: 0px; ">
                                                      <a href="https://apps.apple.com/us/app/hims-hers/id1455690574" target="_blank" style="font-size: 14px; text-align:center; color: #000; font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;">
                                                        <img class="" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0974e282745731c18dc3c/original.png?1571854158" alt="download on the App&nbsp;Store" width="120" role="presentation" aria-hidden="true" style="border: none;  width: 120px; max-width: 100%; ">
                                                      </a>
                                                    </td>
                                                    <td class="padt15 padb5" align="center" style="padding-top: 15px; padding-bottom: 0px; ">
                                                      <a href="https://play.google.com/store/apps/details?id=com.himshers.android" target="_blank" style="font-size: 14px; text-align:center; color: #000; font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;">
                                                        <img class="" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db09737282745725718dc17/original.png?1571854135" alt="get it on Google&nbsp;Play" width="128" role="presentation" aria-hidden="true" style="border: none;  width: 129px; max-width: 100%; ">
                                                      </a>
                                                    </td>
                                                  </tr>

                                                  <!-- image end -->
                                                </table>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td align="center">
                                                <table class="w50" align="center" cellpadding="0" cellspacing="0" border="0" width="280">

                                                  <!-- image start -->
                                                  <tr>
                                                    <td class="padt20 padb5" align="center" style="padding-top: 35px; padding-bottom: 0px; ">
                                                      <a href="https://start.forhims.com/download-app/?utm_source=braze&utm_medium=email&utm_campaign=AppLaunch2kBlast" target="_blank" style="font-size: 22px; text-align:center; color: #000; font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;">
                                                        <img class="" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db097cc4939bf65b32778d6/original.png?1571854284" alt="turn on images to see the hims app" width="230" role="presentation" aria-hidden="true" style="border: none;  width: 230px; max-width: 100%; ">
                                                      </a>
                                                    </td>
                                                  </tr>

                                                  <!-- image end -->
                                                </table>
                                              </td>
                                            </tr>
                                          </table>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <tr>
                            <td class="padt0 " align="center" style="padding-top:1px; background-color:#fbf8f5">
                              <table class="ow100" align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td align="center" style=" font-size: 2px; line-height: 2px;">&nbsp;</td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                        </table>
                      </div>

                      <!--[if gte mso 9]>
	</v:textbox>
	</v:fill>
	</v:rect>
	</v:image>
	<![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- HEADER END-->

      <!-- BODY START-->
      <tr>
        <td align="center">
          <table class="w100 ow100" align="center" cellpadding="0" cellspacing="0" border="0" width="700" style="background-color: #eee2d6;">
            <tr>
              <td align="center" style="padding-bottom: 0px;">
                <table class="w100 ow100" width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: #fbf8f5;">
                  <tr>
                    <td class="" align="center" style="padding-bottom: 0px;">
                      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td align="center">
                            <table class="w100  " align="center" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #fbf8f5;">
                              <tr>
                                <td class="padt5" align="center" style="padding-bottom: 60px;">
                                  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

                                    <!-- 2 pack start -->
                                    <tr>
                                      <td class="padt10" align="center" style="padding-top: 45px;">
                                        <table class="w85" width="78%" border="0" align="center" cellpadding="0" cellspacing="0">
                                          <tr>
                                            <td valign="top" class="padt10">

                                              <!--  tile 1 -->
                                              <table class="column33a" width="75" border="0" align="left" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padb0 padt20">
                                                    <table class="w90" width="100%" border="0" align="left" cellpadding="0" cellspacing="0">

                                                      <!-- image start -->
                                                      <tr>
                                                        <td class="padb10" style="padding-bottom: 0px; padding-top: 7px">
                                                          <a href="#" target="_blank" style="color: blue; font-family: Helvetica, Arial, sans-serif, 'CustomFont'; text-decoration: none;">
                                                            <img class="border" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5d55ef2b2827452236b933ad/original.png?1565912875" alt="" width="70" role="presentation" aria-hidden="true" style="border: none; display: block; width: 100%; ">
                                                          </a>
                                                        </td>
                                                      </tr>

                                                      <!-- image end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>

                                              <!-- tite 1 end -->

                                              <!--[if mso]></td><td valign="top"><![endif]-->

                                              <!--  Prop 2 -->
                                              <table class="w70" width="390" border="0" align="right" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padt0" align="right">
                                                    <table class="w100" width="90%" border="0" align="right" cellpadding="0" cellspacing="0">

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt20" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left; padding-top: 0px; padding-bottom: 5px ; font-size: 22px; line-height: 125%">
                                                          <h3 style="font-size: 22px; line-height: 125%; font-weight: 500 !important;">doc in your pocket </h3>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt5" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; font-size: 15px; line-height: 150%; padding-top: 5px; ">
                                                          <p class="" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 18px;line-height: 26px;text-align: left; margin: 0; ">
                                                            Chat with your licensed physician 24/7 about your treatment or any questions </p>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>

                                    <!-- 2 pack end -->

                                    <!-- 2 pack start -->
                                    <tr>
                                      <td class="padt10" align="center" style="padding-top: 30px;">
                                        <table class="w85" width="78%" border="0" align="center" cellpadding="0" cellspacing="0">
                                          <tr>
                                            <td valign="top" class="padt10">

                                              <!--  tile 1 -->
                                              <table class="column33a" width="75" border="0" align="left" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padb0 padt20">
                                                    <table class="w90" width="100%" border="0" align="left" cellpadding="0" cellspacing="0">

                                                      <!-- image start -->
                                                      <tr>
                                                        <td class="padb10 padt15" style="padding-bottom: 0px; padding-top: 20px">
                                                          <a href="#" target="_blank" style="color: blue; font-family: Helvetica, Arial, sans-serif, 'CustomFont'; text-decoration: none;">
                                                            <img class="border" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5d56c9d14939bf3a06cf4071/original.png?1565968849" alt="" width="70" role="presentation" aria-hidden="true" style="border: none; display: block; width: 100%; ">
                                                          </a>
                                                        </td>
                                                      </tr>

                                                      <!-- image end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>

                                              <!-- tite 1 end -->

                                              <!--[if mso]></td><td valign="top"><![endif]-->

                                              <!--  Prop 2 -->
                                              <table class="w70" width="390" border="0" align="right" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padt0" align="right">
                                                    <table class="w100" width="90%" border="0" align="right" cellpadding="0" cellspacing="0">

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt20" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left; padding-top: 10px; padding-bottom: 5px ; font-size: 22px; line-height: 125%">
                                                          <h3 style="font-size: 22px; line-height: 125%; font-weight: 500 !important;">customize your plan</h3>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt5" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; font-size: 15px; line-height: 150%; padding-top: 5px; ">
                                                          <p class="" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 18px;line-height: 26px;text-align: left; margin: 0; ">
                                                            Want more? Need less? Modify your subscription on your terms </p>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>

                                    <!-- 2 pack end -->

                                    <!-- 2 pack start -->
                                    <tr>
                                      <td class="padt10" align="center" style="padding-top: 30px;">
                                        <table class="w85" width="78%" border="0" align="center" cellpadding="0" cellspacing="0">
                                          <tr>
                                            <td valign="top" class="padt10">

                                              <!--  tile 1 -->
                                              <table class="column33a" width="75" border="0" align="left" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padb0 padt20">
                                                    <table class="w90" width="100%" border="0" align="left" cellpadding="0" cellspacing="0">

                                                      <!-- image start -->
                                                      <tr>
                                                        <td class="padb10 padt10" style="padding-bottom: 0px; padding-top: 15px">
                                                          <a href="#" target="_blank" style="color: blue; font-family: Helvetica, Arial, sans-serif, 'CustomFont'; text-decoration: none;">
                                                            <img class="border" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db1f2ee4939bf2ec1b89ee1/original.png?1571943150" alt="" width="70" role="presentation" aria-hidden="true" style="border: none; display: block; width: 100%; ">
                                                          </a>
                                                        </td>
                                                      </tr>

                                                      <!-- image end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>

                                              <!-- tite 1 end -->

                                              <!--[if mso]></td><td valign="top"><![endif]-->

                                              <!--  Prop 2 -->
                                              <table class="w70" width="390" border="0" align="right" cellpadding="0" cellspacing="0">
                                                <tr>
                                                  <td class="padt0" align="right">
                                                    <table class="w100" width="90%" border="0" align="right" cellpadding="0" cellspacing="0">

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt20" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: left; padding-top: 10px; padding-bottom: 5px ; font-size: 22px; line-height: 125%">
                                                          <h3 style="font-size: 22px; line-height: 125%; font-weight: 500 !important;">stay on top of orders</h3>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->

                                                      <!-- copy start -->
                                                      <tr>
                                                        <td class="padt5" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; font-size: 15px; line-height: 150%; padding-top: 5px; ">
                                                          <p class="" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 18px;line-height: 26px;text-align: left; margin: 0; ">
                                                            Track shipments and get<span class="mobile-hide"><br></span> instant&nbsp;updates
                                                          </p>
                                                        </td>
                                                      </tr>

                                                      <!-- copy end -->
                                                    </table>
                                                  </td>
                                                </tr>
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>

                                    <!-- 2 pack end -->
                                    <tr>
                                      <td class="padb5 padt20" align="center" style="padding-bottom: 40px; padding-top: 50px;">
                                        <table width="78%" border="0" align="center" cellpadding="0" cellspacing="0">

                                          <!-- copy start -->
                                          <tr>
                                            <td class="padt20 padb0" style="color: #000001;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; padding-top: 20px; padding-bottom: 2px ; font-size: 46px; line-height: 52px">
                                              <h2 style="font-size: 24px; line-height: 32px">download the app</h2>
                                            </td>
                                          </tr>

                                          <!-- copy end -->
                                          <tr>
                                            <td align="center">
                                              <table class=" " align="center" cellpadding="0" cellspacing="0" border="0" width="255">

                                                <!-- image start -->
                                                <tr>
                                                  <td class="padt15 padb5" align="center" style="padding-top: 15px; padding-bottom: 0px; ">
                                                    <a href="https://apps.apple.com/us/app/hims-hers/id1455690574" target="_blank" style="font-size: 14px; text-align:center; color: #000; font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;">
                                                      <img class="" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db0974e282745731c18dc3c/original.png?1571854158" alt="download on the App&nbsp;Store" width="110" role="presentation" aria-hidden="true" style="border: none;  width: 115px; max-width: 100%; ">
                                                    </a>
                                                  </td>
                                                  <td class="padt15 padb5" align="center" style="padding-top: 15px; padding-bottom: 0px; ">
                                                    <a href="https://play.google.com/store/apps/details?id=com.himshers.android" target="_blank" style="font-size: 14px; text-align:center; color: #000; font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;">
                                                      <img class="" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5db09737282745725718dc17/original.png?1571854135" alt="get it on Google&nbsp;Play" width="118" role="presentation" aria-hidden="true" style="border: none;  width: 124px; max-width: 100%; ">
                                                    </a>
                                                  </td>
                                                </tr>

                                                <!-- image end -->
                                              </table>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <table class="full-wrap" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #eee2d6; font-family: Helvetica, Arial, sans-serif, 'CustomFont'; width: 100%;">

      <!-- FOOTER START -->
      <tr>
        <td class="" align="center">
          <table class="w100 ow100" cellpadding="0" cellspacing="0" border="0" width="700" style="background-color: #000;">
            <tr>
              <td align="center">
                <table class="w100" align="center" cellpadding="0" cellspacing="0" border="0" width="700">

                  <!-- 2 pack start -->
                  <tr>
                    <td align="center" style="padding-top: 10px; padding-bottom: 40px;">
                      <table class="w100" width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td class="" align="center">
                            <table class="" width="200" border="0" align="center" cellpadding="0" cellspacing="0">
                              <tr>
                                <td class="" align="left" style="padding-top: 50px;">
                                  <table class=" padt0 mobile-100p" width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td class="img-header btn-hover2" style="font-size:6pt; line-height:0pt; text-align:right; color: #000; " width="12">&nbsp;&nbsp;
                                        <a href="https://www.facebook.com/wearehims" target="_blank" style="color: #ffffff;">
                                          <img alt="Facebook" border="0" height="48" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5bb1bb764939bf281575cce6/original.png?1538374518" width="48" start="font-size: 8px !important; color: #ffffff">
                                        </a>
                                      </td>
                                      <td class=" v" style="font-size:0pt; line-height:0pt; text-align:left" width="40"></td>
                                      <td class="img-header btn-hover2" style="font-size:6pt; line-height:0pt; text-align:right" width="12">&nbsp;&nbsp;
                                        <a href="https://twitter.com/wearehims" target="_blank" style="color: #ffffff;">
                                          <img alt="Twitter" border="0" height="48" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5bb1bb762827457b2a2ecbe5/original.png?1538374518" width="48">
                                        </a>
                                      </td>
                                      <td class="btn-hover2" style="font-size:0pt; line-height:0pt; text-align:left" width="40"></td>
                                      <td class="img-header btn-hover2" style="font-size:6pt; line-height:0pt; text-align:right" width="12">&nbsp;&nbsp;
                                        <a href="https://www.instagram.com/hims/" target="_blank" style="color: #ffffff;">
                                          <img alt="Instagram" border="0" height="48" src="https://appboy-images.com/appboy/communication/assets/image_assets/images/5bb1bb762827457b702ecbc2/original.png?1538374518" width="48">
                                        </a>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>

                        <!-- copy start -->
                        <tr>
                          <td class="" style="color: #fff;font-family: 'SofiaPro', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size: 12px; line-height: 175%; padding-top: 30px; font-weight: 500">
                            <center>
                              <table style="width: 100%; text-align: center;">
                                <tbody>
                                  <tr>
                                    <td style="color: #9D9D9D;font-size: 10px;line-height: 12px;padding-bottom: 20px;text-align: center;">© 2019 Hims, Inc.<br>
                                      340 Bryant Street | Suite 300 | San Francisco CA 94107<br>
                                      Hims: <a href="https://www.forhims.com/privacy-policy" style="color: #9D9D9D">privacy policy</a> | <a href="https://www.forhims.com/terms-and-conditions" style="color: #9D9D9D">terms of service</a><br>
                                      Hers: <a href="https://www.forhers.com/privacy-policy" style="color: #9D9D9D">privacy policy</a> | <a href="https://www.forhers.com/terms-and-conditions" style="color: #9D9D9D">terms of service</a><br>
                                      <a href="#" style="color: #9D9D9D">unsubscribe</a>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </center>
                          </td>
                        </tr>

                        <!-- copy end -->
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- FOOTER END-->
    </table>
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console