356 lines
18 KiB
Handlebars
356 lines
18 KiB
Handlebars
<!-- Ref: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 -->
|
|
<!DOCTYPE html>
|
|
<html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="x-apple-disable-message-reformatting">
|
|
<!--[if !mso]><!-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<!--<![endif]-->
|
|
<title></title>
|
|
<!--[if mso]>
|
|
<style type="text/css">
|
|
table {border-collapse:collapse;border:0;border-spacing:0;margin:0;}
|
|
div, td {padding:0;}
|
|
div {margin:0 !important;}
|
|
</style>
|
|
<noscript>
|
|
<xml>
|
|
<o:OfficeDocumentSettings>
|
|
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
</o:OfficeDocumentSettings>
|
|
</xml>
|
|
</noscript>
|
|
<![endif]-->
|
|
<style type="text/css">
|
|
@media screen and (max-width: 350px) {
|
|
.three-col .column {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 351px) and (max-width: 460px) {
|
|
.three-col .column {
|
|
max-width: 50% !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 460px) {
|
|
.two-col .column {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.two-col img {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 461px) {
|
|
.three-col .column {
|
|
max-width: 33.3% !important;
|
|
}
|
|
|
|
.two-col .column {
|
|
max-width: 50% !important;
|
|
}
|
|
|
|
.sidebar .small {
|
|
max-width: 16% !important;
|
|
}
|
|
|
|
.sidebar .large {
|
|
max-width: 84% !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="margin:0;padding:0;word-spacing:normal;background-color:#ffffff;">
|
|
|
|
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#ffffff;">
|
|
|
|
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
|
|
<tr>
|
|
<td align="center">
|
|
|
|
<!--[if mso]>
|
|
<table role="presentation" align="center" style="width:660px;">
|
|
<tr>
|
|
<td style="padding:20px 0;">
|
|
<![endif]-->
|
|
<!--The div for Email content-->
|
|
<div class="outer" style="width:96%;max-width:660px;margin:20px auto;">
|
|
|
|
<!-- Start_1 Column -->
|
|
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
|
|
<tr>
|
|
<td style="padding:10px 10px 20px 10px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">
|
|
<img src="https://agmission.agnav.com/public/images/header.png" width="640" alt="" style="width:100%;height:auto;" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px;text-align:left;">
|
|
<h1 style="margin-top:0;margin-bottom:16px;font-family:Arial,sans-serif;font-size:26px;line-height:32px;font-weight:bold;">Creating responsive email magic</h1>
|
|
<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus!</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
|
|
<!-- End_1 Column -->
|
|
|
|
<!-- Start_2 Column2 -->
|
|
<div class="two-col" style="text-align:center;font-size:0;">
|
|
<!--[if mso]>
|
|
<table role="presentation" width="100%">
|
|
<tr>
|
|
<td style="width:50%;padding:10px;" valign="middle">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
|
|
|
|
<div style="padding:10px;">
|
|
<p style="margin:0;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
|
|
<img src="https://agmission.agnav.com/public/images/two-column-01.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:50%;padding:10px;" valign="middle">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;">
|
|
|
|
<div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
|
|
<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Taciti nostra, per litora nostra</p>
|
|
<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">
|
|
<a href="https://agnav.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff">
|
|
<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]-->
|
|
<span style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</span>
|
|
<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]-->
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</div>
|
|
<div class="spacer" style="line-height:24px;height:24px;mso-line-height-rule:exactly;"> </div>
|
|
<!-- End__2 Column2 -->
|
|
|
|
<!--Start_2Col_Img -->
|
|
<div class="two-col" style="text-align:center;font-size:0;direction:rtl;">
|
|
<!--[if mso]>
|
|
<table role="presentation" width="100%" dir="rtl">
|
|
<tr>
|
|
<td style="width:50%;padding:10px;" valign="middle" dir="ltr">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin:0;font-family:Arial,sans-serif;">
|
|
<img src="https://agmission.agnav.com/public/images/two-column-02.png" width="310" alt="" style="display:block;width:310px;max-width:100%;height:auto;" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:50%;padding:10px;" valign="middle" dir="ltr">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:330px;display:inline-block;vertical-align:middle;direction:ltr;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;text-align:left;">
|
|
<p style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Conubia nostra, per inceptos himenaeos</p>
|
|
<p style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sed ante pellentesque.</p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">
|
|
<a href="https://example.com/" style="background: #ffffff; border: 2px solid #8dc1d6; text-decoration: none; padding: 10px 25px; color: #000000; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ffffff">
|
|
<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt"> </i><![endif]-->
|
|
<span style="mso-text-raise:10pt;font-weight:bold;">Lock it in</span>
|
|
<!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%"> </i><![endif]-->
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</div>
|
|
<!--End_2Col_Img -->
|
|
|
|
<!--Start_1_Col-->
|
|
<table role="presentation" style="width:100%;border:0;border-spacing:0;">
|
|
<tr>
|
|
<td style="padding:10px;text-align:center;">
|
|
<h1 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-size:24px;line-height:28px;font-weight:bold;">Praesent laoreet malesuada cursus</h1>
|
|
<p style="margin:0;font-family:Arial,sans-serif;font-size:18px;line-height:24px;">Posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora!</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<!--End_1_Col-->
|
|
|
|
<!--Start_3_Col-->
|
|
<div class="three-col" style="font-size:0;text-align:center;">
|
|
|
|
<!--[if mso]>
|
|
<table role="presentation" width="100%" style="text-align:center;">
|
|
<tr>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-01.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-02.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-03.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-04.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-05.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:220px;padding:10px;" valign="top">
|
|
<![endif]-->
|
|
<div class="column" style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin-top:0;margin-bottom:10px;font-family:Arial,sans-serif;"><img src="https://agmission.agnav.com/public/images/three-column-06.png" width="100" alt="" style="width:100px;max-width:100%;height:auto;" /></p>
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere.</p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
|
|
</div>
|
|
<!--End_3_Col-->
|
|
|
|
<!--Start_2_Col_SideBar-->
|
|
<div class="sidebar" style="font-size:0;text-align:center;">
|
|
|
|
<!--[if mso]>
|
|
<table role="presentation" width="100%">
|
|
<tr>
|
|
<td style="width:100px;padding:10px;text-align:center;" valign="middle">
|
|
<![endif]-->
|
|
<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">
|
|
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<img src="https://agmission.agnav.com/public/images/sidebar-01.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:560px;padding:10px;text-align:center;" valign="middle">
|
|
<![endif]-->
|
|
<div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;">
|
|
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.
|
|
<a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;">
|
|
<strong>Read on</strong></a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
|
|
</div>
|
|
<!--End_2_Col_SideBar-->
|
|
<div class="spacer" style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </div>
|
|
|
|
<!--Start_3_Col_SideBar_Reverse-->
|
|
<div class="sidebar" style="font-size:0;text-align:center;direction:rtl;">
|
|
<!--[if mso]>
|
|
<table role="presentation" width="100%" dir="rtl">
|
|
<tr>
|
|
<td style="width:100px;padding:10px;text-align:center;" valign="middle" dir="ltr">
|
|
<![endif]-->
|
|
<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;direction:rtl;">
|
|
<div style="padding:10px;font-family:Arial,sans-serif;font-size:14px;line-height:18px;">
|
|
<img src="https://agmission.agnav.com/public/images/sidebar-02.png" width="80" alt="" style="width:80px;max-width:100%;height:auto;" />
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
<td style="width:560px;padding:10px;text-align:center;" valign="middle" dir="ltr">
|
|
<![endif]-->
|
|
<div class="large" style="width:100%;max-width:560px;display:inline-block;vertical-align:middle;direction:rtl;">
|
|
<div style="padding:10px;font-size:14px;line-height:18px;">
|
|
<p style="margin:0;font-family:Arial,sans-serif;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra. <a href="http://www.example.com/" style="color:#a16767;text-decoration:underline;"><strong>Register today</strong></a></p>
|
|
</div>
|
|
</div>
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</div>
|
|
|
|
<!--End_3_Col_SideBar_Reverse-->
|
|
|
|
|
|
<!--[if mso]>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<![endif]-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |