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
Raw
mail_example.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment