Skip to content

Instantly share code, notes, and snippets.

@joelmoss

joelmoss/mail_example.html

Created May 30, 2018 10:21
Show Gist options
  • Save joelmoss/2c13041ed824dae86d4f1963d2fd44a8 to your computer and use it in GitHub Desktop.
Save joelmoss/2c13041ed824dae86d4f1963d2fd44a8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joelmoss created this gist May 30, 2018.
    225 changes: 225 additions & 0 deletions mail_example.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,225 @@
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="height: 100% !important; width: 100% !important; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0 auto; padding: 0;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title>You have a new session with %{client_name}</title> <!-- The title tag shows in email notifications, like Android 4.4. -->



    <!-- Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
    <xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <style>body {
    margin: 0 auto !important; padding: 0 !important; height: 100% !important; width: 100% !important;
    }
    img {
    -ms-interpolation-mode: bicubic;
    }
    .button-td:hover {
    background: #555555 !important; border-color: #555555 !important;
    }
    .button-a:hover {
    background: #555555 !important; border-color: #555555 !important;
    }
    body {
    font-family: "MuseoSansRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5; color: #6e6362; background-color: #f5f6fa; margin: 0px; mso-line-height-rule: exactly;
    }
    a:hover {
    color: #533747; text-decoration: none;
    }
    @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
    .email-container {
    min-width: 375px !important;
    }
    }
    @media screen and (max-width: 480px) {
    .fluid {
    width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: auto !important; margin-right: auto !important;
    }
    .stack-column {
    display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important;
    }
    .stack-column-center {
    display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important;
    }
    .stack-column-center {
    text-align: center !important;
    }
    .center-on-narrow {
    text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important;
    }
    table.center-on-narrow {
    display: inline-block !important;
    }
    .email-container p {
    font-size: 17px !important; line-height: 22px !important;
    }
    }
    @media screen {
    @font-face {
    font-family: MuseoSansRounded; src: url("/fonts/museosansrounded-300-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/museosansrounded-300-webfont.woff") format("woff"), url("/fonts/museosansrounded-300-webfont.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
    font-family: MuseoSansRounded; src: url("/fonts/museosansrounded-500-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/museosansrounded-500-webfont.woff") format("woff"), url("/fonts/museosansrounded-500-webfont.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
    font-family: MuseoSansRounded; src: url("/fonts/museosansrounded-100-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/museosansrounded-100-webfont.woff") format("woff"), url("/fonts/museosansrounded-100-webfont.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap;
    }
    }
    </style>
    </head>
    <body width="100%" bgcolor="#F1F1F1" style='height: 100% !important; margin: 0 auto; padding: 0; width: 100% !important; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: "MuseoSansRounded", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5; color: #6e6362; mso-line-height-rule: exactly;'>
    <center class="container" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; width: 100%; text-align: left;">



    <div class="email-container" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; max-width: 680px; margin: auto;">
    <!--[if mso]>
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
    <tr>
    <td>
    <![endif]-->

    <!-- Email Body : BEGIN -->
    <table role="presentation" border="0" align="center" class="email-container table main" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; max-width: 680px;" width="100%" cellpadding="0" cellspacing="0">

    <!-- HEADER : BEGIN -->
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;">
    <table role="presentation" border="0" class="table" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%" cellpadding="0" cellspacing="0">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="logo" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; padding: 30px 40px 15px;">
    <img width="145" height="40" alt="Harley Therapy Platform" border="0" src="https://storage.googleapis.com/ht-assets/logo.png" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-interpolation-mode: bicubic; height: auto; font-size: 15px; line-height: 20px; color: #555555;">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <!-- HEADER : END -->

    <!-- BODY : BEGIN -->
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="card" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; padding-bottom: 20px;">
    <table class="table" border="0" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%" cellpadding="0" cellspacing="0">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="card__inner" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; padding: 40px; border: 1px solid #ddd;" bgcolor="#fff">

    <table role="presentation" class="table" border="0" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%" cellpadding="0" cellspacing="0">

    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;">
    <table class="paragraphs" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; margin: 0px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 300; color: #6e6362; font-size: 16px; padding-bottom: 20px;">
    <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0px;">Hi Maria,</p>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; margin: 0px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 300; color: #6e6362; font-size: 16px; padding-bottom: 20px;">
    <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0px;">We're delighted to let you know that you have just received a new session booking by <strong style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">Sdf Sdf</strong> for <strong style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">Sat Jun 2nd at 12pm BST via Skype</strong>.</p>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; margin: 0px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 300; color: #6e6362; font-size: 16px; padding-bottom: 20px;">
    <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0px;">Before you do anything else, you will need to <a href="http://localhost:3000/account/therapist/clients/465/appointments/13454" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #722a88; text-decoration: none; font-weight: 500; background-color: transparent; -webkit-text-decoration-skip: objects;">confirm this session</a>.</p>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; margin: 0px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 300; color: #6e6362; font-size: 16px; padding-bottom: 20px;">
    <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0px;"><strong style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">Please note</strong> that if this session is not confirmed by the time the session starts or within 7 days of booking, it will be cancelled and payment returned to the client.</p>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; margin: 0px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 300; color: #6e6362; font-size: 16px; padding-bottom: 20px;">
    <p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0px;">The booking reference is #13454.</p>
    </td>
    </tr>
    </table>

    </td>
    </tr>

    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" class="signature" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; padding-top: 20px;">

    <table align="left" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="signature__image" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;" width="80px">
    <img width="62" height="62" alt="Harley Therapy Team" border="0" src="https://storage.googleapis.com/ht-assets/logo_circle.png" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-interpolation-mode: bicubic; display: block; margin: 0px; padding: 0px; border: none;">
    </td>
    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;">

    <table cellpadding="0" cellspacing="0" border="0" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;">Regards,</td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td align="left" class="signature__name" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-weight: 500; color: #533747;">The Harley Therapy Team</td>
    </tr>
    </table>

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

    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="signature__link" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; padding-top: 15px;"><a href="https://harleytherapy.com" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-decoration: none; color: #722a88; font-weight: 500; background-color: transparent; -webkit-text-decoration-skip: objects;">www.HarleyTherapy.com</a></td>
    </tr>


    </table>

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


    <!-- BODY : END -->

    <!-- FOOTER : BEGIN -->
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important;">
    <table role="presentation" border="0" class="table footer" style="-ms-text-size-adjust: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important;" width="100%" cellpadding="0" cellspacing="0">
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="footer__cell_first" style="-ms-text-size-adjust: 100%; margin: 0px; padding: 25px 40px 10px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-size: 14px; line-height: 18px; color: #6e6362; font-weight: 300;">1-7 Harley Street, London W1G 9QD. Tel: <b style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">0800 047 4000</b>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td style="-ms-text-size-adjust: 100%; margin: 0px; padding: 0px 40px 10px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-size: 14px; line-height: 18px; color: #6e6362; font-weight: 300;">This email was sent to you from <b style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><a href="mailto:[email protected]" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #722a88; text-decoration: none; font-weight: 500; background-color: transparent; -webkit-text-decoration-skip: objects;">[email protected]</a></b>
    </td>
    </tr>
    <tr style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <td class="footer__cell_last" style="-ms-text-size-adjust: 100%; margin: 0px; padding: 0px 40px 40px; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; font-size: 14px; line-height: 18px; color: #6e6362; font-weight: 300;">Copyright © 2018 <b style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">Harley Therapy Platform</b>, All Rights Reserved.</td>
    </tr>
    </table>
    </td>
    </tr>
    <!-- FOOTER : END -->

    </table>
    <!-- Email Body : END -->

    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </div>

    </center>
    </body>
    </html>