forked from kaverti/website
261 lines
15 KiB
HTML
261 lines
15 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<!--
|
|
|
|
SALTED | A RESPONSIVE EMAIL TEMPLATE
|
|
=====================================
|
|
|
|
Based on code used and tested by Litmus (@litmusapp)
|
|
Originally developed by Kevin Mandeville (@KEVINgotbounce)
|
|
Cleaned up by Jason Rodriguez (@rodriguezcommaj)
|
|
Presented by A List Apart (@alistapart)
|
|
|
|
Email is surprisingly hard. While this has been thoroughly tested, your mileage may vary.
|
|
It's highly recommended that you test using a service like Litmus and your own devices.
|
|
|
|
Enjoy!
|
|
|
|
-->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<style type="text/css">
|
|
@media screen and (max-width: 525px) {
|
|
table[class="wrapper"] {
|
|
width: 100% ;
|
|
}
|
|
|
|
td[class="logo"] {
|
|
text-align: left;
|
|
padding: 20px 0 20px 0 ;
|
|
}
|
|
|
|
td[class="logo"] img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
td[class="mobile-hide"] {
|
|
display: none;
|
|
}
|
|
|
|
img[class="mobile-hide"] {
|
|
display: none ;
|
|
}
|
|
|
|
img[class="img-max"] {
|
|
max-width: 100% ;
|
|
height: auto ;
|
|
}
|
|
|
|
table[class="responsive-table"] {
|
|
width: 100%;
|
|
}
|
|
|
|
td[class="padding"] {
|
|
padding: 10px 5% 15px 5% ;
|
|
}
|
|
|
|
td[class="padding-copy"] {
|
|
padding: 10px 5% 10px 5% ;
|
|
text-align: center;
|
|
}
|
|
|
|
td[class="padding-meta"] {
|
|
padding: 30px 5% 0px 5% ;
|
|
text-align: center;
|
|
}
|
|
|
|
td[class="no-pad"] {
|
|
padding: 0 0 20px 0 ;
|
|
}
|
|
|
|
td[class="no-padding"] {
|
|
padding: 0 ;
|
|
}
|
|
|
|
td[class="section-padding"] {
|
|
padding: 50px 15px 50px 15px ;
|
|
}
|
|
|
|
td[class="section-padding-bottom-image"] {
|
|
padding: 50px 15px 0 15px ;
|
|
}
|
|
|
|
td[class="mobile-wrapper"] {
|
|
padding: 10px 5% 15px 5% ;
|
|
}
|
|
|
|
table[class="mobile-button-container"] {
|
|
margin: 0 auto;
|
|
width: 100% ;
|
|
}
|
|
|
|
a[class="mobile-button"] {
|
|
width: 80% ;
|
|
padding: 15px ;
|
|
border: 0 ;
|
|
font-size: 16px ;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; max-width: 575px; margin: 0 auto; padding: 0; height: 100%; width: 100%;" dir="ltr">
|
|
|
|
<!-- HEADER -->
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td bgcolor="#ffffff" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<div align="center" style="padding: 0px 15px 0px 15px;">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<!-- LOGO/PREHEADER TEXT -->
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 30px 0px 30px 0px;" class="logo">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td bgcolor="#ffffff" width="400" align="center" class="mobile-hide" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<table border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 0 5px 0; font-size: 23px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #666666; text-decoration: none;">
|
|
<span class="branding" style="color: #666666; text-decoration: none;">
|
|
<a href="https://kaverti.com" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: inherit; text-decoration: none;">
|
|
|
|
Kaverti
|
|
|
|
</a>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- ONE COLUMN W/ BOTTOM IMAGE SECTION -->
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td bgcolor="#f8f8f8" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 70px 15px 70px 15px;" class="section-padding-bottom-image">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<!-- COPY -->
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 25px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333333;" class="padding-copy">
|
|
Hi Kaverti,
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">
|
|
<!-- Intro -->
|
|
|
|
<p>Welcome to Kaverti</p>
|
|
|
|
|
|
<!-- Dictionary -->
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<!-- Table -->
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- ONE COLUMN SECTION -->
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td bgcolor="#ffffff" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 15px 40px 15px;" class="section-padding">
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<!-- Action -->
|
|
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<!-- COPY -->
|
|
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 0 0 0; font-size: 16px; line-height: 25px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">
|
|
<p>Please verify your account via the button below</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<!-- BULLETPROOF BUTTON -->
|
|
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 0 0 0;" class="padding-copy">
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"><a href="https://kaverti.com/verify?token=undefined" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 16px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #33b5e5; border-top: 15px solid #33b5e5; border-bottom: 15px solid #33b5e5; border-left: 25px solid #33b5e5; border-right: 25px solid #33b5e5; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Verify account →</a></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Outro -->
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td bgcolor="#f8f8f8" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 0px 20px 0px;">
|
|
<!-- UNSUBSCRIBE COPY -->
|
|
<table width="500" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
|
|
<tr>
|
|
<td align="center" valign="middle" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size: 12px; line-height: 18px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #666666;">
|
|
<span class="appleFooter" style="color:#666666;">
|
|
© 2020 <a href="https://kaverti.com" target="_blank" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #999999; text-decoration: none;">Kaverti</a>. All rights reserved.
|
|
</span>
|
|
<br>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Support for Gmail Go-To Actions -->
|
|
|
|
|
|
</body>
|
|
</html>
|