Created
January 17, 2018 20:05
-
-
Save bjyurkovich/f98e064c5acd44087318d66f323925b1 to your computer and use it in GitHub Desktop.
register-email
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>Reset your password for Nautic-ON</title> | |
| <!-- | |
| The style block is collapsed on page load to save you some scrolling. | |
| Postmark automatically inlines all CSS properties for maximum email client | |
| compatibility. You can just update styles here, and Postmark does the rest. | |
| --> | |
| <style type="text/css" rel="stylesheet" media="all"> | |
| /* Base ------------------------------ */ | |
| *:not(br):not(tr):not(html) { | |
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| width: 100% !important; | |
| height: 100%; | |
| margin: 0; | |
| line-height: 1.4; | |
| background-color: #F2F4F6; | |
| color: #74787E; | |
| -webkit-text-size-adjust: none; | |
| } | |
| p, | |
| ul, | |
| ol, | |
| blockquote { | |
| line-height: 1.4; | |
| text-align: left; | |
| } | |
| a { | |
| color: #3869D4; | |
| } | |
| a img { | |
| border: none; | |
| } | |
| td { | |
| word-break: break-word; | |
| } | |
| /* Layout ------------------------------ */ | |
| .email-wrapper { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| background-color: #F2F4F6; | |
| } | |
| .email-content { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| } | |
| /* Masthead ----------------------- */ | |
| .email-masthead { | |
| padding: 25px 0; | |
| text-align: center; | |
| } | |
| .email-masthead_logo { | |
| width: 94px; | |
| } | |
| .email-masthead_name { | |
| font-size: 16px; | |
| font-weight: bold; | |
| color: #bbbfc3; | |
| text-decoration: none; | |
| text-shadow: 0 1px 0 white; | |
| } | |
| /* Body ------------------------------ */ | |
| .email-body { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| border-top: 1px solid #EDEFF2; | |
| border-bottom: 1px solid #EDEFF2; | |
| background-color: #FFFFFF; | |
| } | |
| .email-body_inner { | |
| width: 570px; | |
| margin: 0 auto; | |
| padding: 0; | |
| -premailer-width: 570px; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| background-color: #FFFFFF; | |
| } | |
| .email-footer { | |
| width: 570px; | |
| margin: 0 auto; | |
| padding: 0; | |
| -premailer-width: 570px; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| text-align: center; | |
| } | |
| .email-footer p { | |
| color: #AEAEAE; | |
| } | |
| .body-action { | |
| width: 100%; | |
| margin: 30px auto; | |
| padding: 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| text-align: center; | |
| } | |
| .body-sub { | |
| margin-top: 25px; | |
| padding-top: 25px; | |
| border-top: 1px solid #EDEFF2; | |
| } | |
| .content-cell { | |
| padding: 35px; | |
| } | |
| .preheader { | |
| display: none !important; | |
| visibility: hidden; | |
| mso-hide: all; | |
| font-size: 1px; | |
| line-height: 1px; | |
| max-height: 0; | |
| max-width: 0; | |
| opacity: 0; | |
| overflow: hidden; | |
| } | |
| /* Attribute list ------------------------------ */ | |
| .attributes { | |
| margin: 0 0 21px; | |
| } | |
| .attributes_content { | |
| background-color: #EDEFF2; | |
| padding: 16px; | |
| } | |
| .attributes_item { | |
| padding: 0; | |
| } | |
| /* Related Items ------------------------------ */ | |
| .related { | |
| width: 100%; | |
| margin: 0; | |
| padding: 25px 0 0 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| } | |
| .related_item { | |
| padding: 10px 0; | |
| color: #74787E; | |
| font-size: 15px; | |
| line-height: 18px; | |
| } | |
| .related_item-title { | |
| display: block; | |
| margin: .5em 0 0; | |
| } | |
| .related_item-thumb { | |
| display: block; | |
| padding-bottom: 10px; | |
| } | |
| .related_heading { | |
| border-top: 1px solid #EDEFF2; | |
| text-align: center; | |
| padding: 25px 0 10px; | |
| } | |
| /* Discount Code ------------------------------ */ | |
| .discount { | |
| width: 100%; | |
| margin: 0; | |
| padding: 24px; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| background-color: #EDEFF2; | |
| border: 2px dashed #9BA2AB; | |
| } | |
| .discount_heading { | |
| text-align: center; | |
| } | |
| .discount_body { | |
| text-align: center; | |
| font-size: 15px; | |
| } | |
| /* Social Icons ------------------------------ */ | |
| .social { | |
| width: auto; | |
| } | |
| .social td { | |
| padding: 0; | |
| width: auto; | |
| } | |
| .social_icon { | |
| height: 20px; | |
| margin: 0 8px 10px 8px; | |
| padding: 0; | |
| } | |
| /* Data table ------------------------------ */ | |
| .purchase { | |
| width: 100%; | |
| margin: 0; | |
| padding: 35px 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| } | |
| .purchase_content { | |
| width: 100%; | |
| margin: 0; | |
| padding: 25px 0 0 0; | |
| -premailer-width: 100%; | |
| -premailer-cellpadding: 0; | |
| -premailer-cellspacing: 0; | |
| } | |
| .purchase_item { | |
| padding: 10px 0; | |
| color: #74787E; | |
| font-size: 15px; | |
| line-height: 18px; | |
| } | |
| .purchase_heading { | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid #EDEFF2; | |
| } | |
| .purchase_heading p { | |
| margin: 0; | |
| color: #9BA2AB; | |
| font-size: 12px; | |
| } | |
| .purchase_footer { | |
| padding-top: 15px; | |
| border-top: 1px solid #EDEFF2; | |
| } | |
| .purchase_total { | |
| margin: 0; | |
| text-align: right; | |
| font-weight: bold; | |
| color: #2F3133; | |
| } | |
| .purchase_total--label { | |
| padding: 0 15px 0 0; | |
| } | |
| /* Utilities ------------------------------ */ | |
| .align-right { | |
| text-align: right; | |
| } | |
| .align-left { | |
| text-align: left; | |
| } | |
| .align-center { | |
| text-align: center; | |
| } | |
| /*Media Queries ------------------------------ */ | |
| @media only screen and (max-width: 600px) { | |
| .email-body_inner, | |
| .email-footer { | |
| width: 100% !important; | |
| } | |
| } | |
| @media only screen and (max-width: 500px) { | |
| .button { | |
| width: 100% !important; | |
| } | |
| } | |
| /* Buttons ------------------------------ */ | |
| .button { | |
| background-color: #3869D4; | |
| border-top: 10px solid #3869D4; | |
| border-right: 18px solid #3869D4; | |
| border-bottom: 10px solid #3869D4; | |
| border-left: 18px solid #3869D4; | |
| display: inline-block; | |
| color: #FFF; | |
| text-decoration: none; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); | |
| -webkit-text-size-adjust: none; | |
| } | |
| .button--green { | |
| background-color: #22BC66; | |
| border-top: 10px solid #22BC66; | |
| border-right: 18px solid #22BC66; | |
| border-bottom: 10px solid #22BC66; | |
| border-left: 18px solid #22BC66; | |
| } | |
| .button--nauticon { | |
| background-color: rgb(99,200,208); | |
| border-top: 10px solid rgb(99,200,208); | |
| border-right: 18px solid rgb(99,200,208); | |
| border-bottom: 10px solid rgb(99,200,208); | |
| border-left: 18px solid rgb(99,200,208); | |
| } | |
| .button--red { | |
| background-color: #FF6136; | |
| border-top: 10px solid #FF6136; | |
| border-right: 18px solid #FF6136; | |
| border-bottom: 10px solid #FF6136; | |
| border-left: 18px solid #FF6136; | |
| } | |
| /* Type ------------------------------ */ | |
| h1 { | |
| margin-top: 0; | |
| color: #2F3133; | |
| font-size: 19px; | |
| font-weight: bold; | |
| text-align: left; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| color: #2F3133; | |
| font-size: 16px; | |
| font-weight: bold; | |
| text-align: left; | |
| } | |
| h3 { | |
| margin-top: 0; | |
| color: #2F3133; | |
| font-size: 14px; | |
| font-weight: bold; | |
| text-align: left; | |
| } | |
| p { | |
| margin-top: 0; | |
| color: #74787E; | |
| font-size: 16px; | |
| line-height: 1.5em; | |
| text-align: left; | |
| } | |
| p.sub { | |
| font-size: 12px; | |
| } | |
| p.center { | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <span class="preheader">Use this link to reset your password.</span> | |
| <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td align="center"> | |
| <table class="email-content" width="100%" cellpadding="0" cellspacing="0" style="background:rgb(99,200,208)"> | |
| <tr> | |
| <td class="email-masthead"> | |
| <img style="height:30%" src="https://static.wixstatic.com/media/38ce53_7a64ac3eb3c04ce0ae3dac241fdbd1a1~mv2_d_1276_1275_s_2.png/v1/fill/w_206,h_104,al_c,usm_0.66_1.00_0.01/38ce53_7a64ac3eb3c04ce0ae3dac241fdbd1a1~mv2_d_1276_1275_s_2.png"> | |
| </td> | |
| </tr> | |
| <!-- Email Body --> | |
| <tr> | |
| <td class="email-body" width="100%" cellpadding="0" cellspacing="0"> | |
| <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0"> | |
| <!-- Body content --> | |
| <tr> | |
| <td class="content-cell"> | |
| <h1>Hello {{firstName}},</h1> | |
| <p>Someone has requested a password reset for your Nautic-ON account. If you would like to reset your password please click the button below. If you did not request a password reset, please contact customer support.</p> | |
| <!-- Action --> | |
| <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0"> | |
| <tr> | |
| <td align="center"> | |
| <!-- Border based button | |
| https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design --> | |
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |
| <tr> | |
| <td align="center"> | |
| <table border="0" cellspacing="0" cellpadding="0"> | |
| <tr> | |
| <td> | |
| <a href="{{resetUrl}}" class="button button--nauticon" >Reset your password</a> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| <p>Thanks, | |
| <br>Nautic-ON</p> | |
| <!-- Sub copy --> | |
| <table class="body-sub"> | |
| <tr> | |
| <td> | |
| <p class="sub">This email was sent to {{ email }}</p> | |
| <p class="sub">Report span or abuse to <a href="mailto:support@nautic-on.com">support@nautic-on.com</a></p> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment