Skip to content

Instantly share code, notes, and snippets.

@ncswenson

ncswenson/forgotpassword.html

Last active September 3, 2020 23:49
Show Gist options
  • Save ncswenson/b189ea56532f9ce4b3b202e4fe59be99 to your computer and use it in GitHub Desktop.
Save ncswenson/b189ea56532f9ce4b3b202e4fe59be99 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
forgotpassword.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>reset your password</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>body {
margin: 0;
}
h1 a:hover {
font-size: 30px; color: #333;
}
h1 a:active {
font-size: 30px; color: #333;
}
h1 a:visited {
font-size: 30px; color: #333;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.button__text:hover {
color: #fff; text-decoration: none;
}
.button__text:active {
color: #fff; text-decoration: none;
}
.button__text:visited {
color: #fff; text-decoration: none;
}
a:hover {
color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
a:active {
color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
a:visited {
color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
@media (max-width: 600px) {
.container {
width: 94% !important;
}
.main-action-cell {
float: none !important; margin-right: 0 !important;
}
.secondary-action-cell {
text-align: center; width: 100%;
}
.header {
margin-top: 20px !important; margin-bottom: 2px !important;
}
.shop-name__cell {
display: block;
}
.order-number__cell {
display: block; text-align: left !important; margin-top: 20px;
}
.button {
width: 100%;
}
.or {
margin-right: 0 !important;
}
.apple-wallet-button {
text-align: center;
}
.customer-info__item {
display: block; width: 100% !important;
}
.spacer {
display: none;
}
.subtotal-spacer {
display: none;
}
.container {
width: 94% !important;
}
}
@media only screen and (max-width: 600px) {
table.header.row {
margin-top: 0px !important; margin-bottom: 0px !important; background-color: #4A4A4A; width: 100%;
}
.customer-info__item {
display: table-cell; width: 50% !important;
}
}
</style>
</head>
<body style="margin: 0;">
<table class="body" style='height: 100% !important; width: 100% !important; border-spacing: 0; border-collapse: collapse; max-width: 600px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin: 0 auto;'>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<table class="header row" style="width: 100%; border-spacing: 0; border-collapse: collapse; margin: 0px 0;" bgcolor="#4A4A4A">
<tr>
<td class="header__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 13px 20px;' bgcolor="#4A4A4A">
<center>
<table class="container" style="width: 560px; text-align: left; border-spacing: 0; border-collapse: collapse; margin: 0 auto;">
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<table class="row" style="width: 100%; border-spacing: 0; border-collapse: collapse;">
<tr>
<td class="shop-name__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<img src="https://cdn.shopify.com/s/files/1/2804/6630/email_settings/simplehuman_logo_3x_6e2220eb-d5e4-4e1e-abe7-d15da03c17de.png?18550" alt="simplehuman" width="180" style="margin-top: 8px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="topcontent row" style="width: 100%; border-spacing: 0; border-collapse: collapse; margin: 20px 0px 30px;">
<tr>
<td class="topcontent__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<center>
<table class="container" style="width: 560px; text-align: left; border-spacing: 0; border-collapse: collapse; margin: 0 auto;">
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<table class="row" style="width: 100%; border-spacing: 0; border-collapse: collapse;">
<tr>
<td class="notification-type__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; margin-top: 25px; display: block; float: left; padding: 0px;'>
<span class="notification-type__text" style="font-size: 24px !important; color: #666; font-weight: 500;">reset your password</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content" style="width: 100%; border-spacing: 0; border-collapse: collapse;">
<tr>
<td class="content__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding-bottom: 40px;'>
<center>
<table class="container" style="width: 560px; text-align: left; border-spacing: 0; border-collapse: collapse; margin: 0 auto;">
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<p style="color: #777; line-height: 150%; font-size: 14px; font-weight: 500; margin: 0;">Follow this link to reset your customer
password at <a href="https://www.simplehuman.com/pages/reset-password?code={####}&email={username}&view=reset-password" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>simplehuman</a>. If you didn't request a new password, you can safely delete this email.</p>
<table class="row actions" style="width: 100%; border-spacing: 0; border-collapse: collapse; margin-top: 20px;">
<tr>
<td class="empty-line" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 0.5em;'> </td>
</tr>
<tr>
<td class="actions__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<table class="button main-action-cell" style="border-spacing: 0; border-collapse: collapse; float: left; margin-right: 15px;">
<tr>
<td class="button__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; border-radius: 4px;' align="center" bgcolor="#666666"><a href="https://www.simplehuman.com/pages/reset-password?code={####}&email={username}&view=reset-password" class="button__text" style='font-size: 14px; text-decoration: none; display: block; color: #fff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; text-align: center; width: 100%; padding: 15px;'>reset your password</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer" style="width: 100%; border-spacing: 0; border-collapse: collapse; border-top-width: 1px; border-top-color: #e5e5e5; border-top-style: solid;">
<tr>
<td class="footer__cell" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 30px 0px;'>
<center>
<table class="container" style="width: 560px; text-align: left; border-spacing: 0; border-collapse: collapse; margin: 0 auto;">
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<p class="disclaimer__subtext greytext" style="color: #666 !important; line-height: 150%; font-size: 14px; font-weight: 400; margin: 0;">If you need further assistance, please reply directly to this email or contact us at <a href="mailto:[email protected]" style='font-size: 14px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-weight: 400;'>[email protected]</a>.</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
<td class="footer__cell social" style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px 0px 30px;'>
<center>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-spacing: 0; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://www.facebook.com/simplehuman" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="facebook" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/af4934b7-9d07-454e-aad0-518254e08ad8.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://instagram.com/simplehuman" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="instagram" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/09fc69b2-419e-4761-82f1-09e7d91f4a33.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://www.pinterest.com/simplehuman/" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="pinterest" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/7e3e1d10-bdf7-4a49-a4a9-c3b54ac4c580.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://twitter.com/simplehuman" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="twitter" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/69abe91b-7e76-4964-99cc-6c910b5d1b9d.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://www.simplehuman.com/pages/refer" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="refer a friend" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/915b6a16-261b-40db-97ac-29a138ee1f09.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
<td style='width: 16.66%; border-top-style: none; border-right-color: #FFFFFF; border-right-style: none; border-top-color: #FFFFFF; border-top-width: 0px; border-right-width: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0px;' valign="top" align="left">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; padding: 0;' valign="top"><a href="https://itunes.apple.com/us/app/simplehuman/id943280497?ls=1&amp;mt=8" target="_self" style='font-size: 16px; text-decoration: none; color: #666; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'><img align="left" alt="download the app" src="https://d3k81ch9hvuctc.cloudfront.net/company/JDMiga/images/d99edf5f-f443-4ae7-beca-b0c45845353c.jpeg" style="max-width: 160px; width: 100% !important;"> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<center>
<table style="border-spacing: 0; border-collapse: collapse;">
<tr>
<td style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;'>
<p class="textsmall textlightgrey textcenter" style="color: #999 !important; line-height: 150%; font-size: 12px !important; font-weight: 500; margin: 0;" align="center">simplehuman 19850 Magellan Dr. Torrance, California 90502</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="https://cdn.shopify.com/s/assets/themes_support/notifications/spacer-1a26dfd5c56b21ac888f9f1610ef81191b571603cb207c6c0f564148473cab3c.png" class="spacer" height="1" style="min-width: 600px; height: 0;">
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment