<!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" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
<title>Data Viz in Email: Comparison Chart for multiple products</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* DEFAULT STYLES */
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
display: block;
height: auto;
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
@media only screen and (max-width: 640px) {
#MessageViewBody .device-width {
width: 100% !important;
max-width: 100% !important;
}
.device-width {
width: 100% !important;
max-width: 100% !important;
}
.cta {
font-size: 13px !important;
padding: 3px 1px !important;
}
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@media screen {
@font-face {
font-family: "Nunito Light";
font-style: normal;
font-weight: 300;
src: local("Nunito Light"), local("Nunito-Light"), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAnsSUYevIWzgPDA.woff2) format("woff2");
mso-font-alt: 'Arial';
}
@font-face {
font-family: "Nunito Regular";
font-style: normal;
font-weight: 400;
src: local("Nunito Regular"), local("Nunito-Regular"), url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format("woff2");
mso-font-alt: 'Arial';
}
@font-face {
font-family: "Nunito SemiBold";
font-style: normal;
font-weight: 600;
src: local("Nunito SemiBold"), local("Nunito-SemiBold"), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofA6sKUYevIWzgPDA.woff2) format("woff2");
mso-font-alt: 'Arial';
}
}
</style>
<!--<![endif]-->
<!--[if gte mso 9
]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><!
[endif]-->
<!--[if mso]>
<style type="text/css">
body, span, table, td, h1, h2, h3, p {font-family: Helvetica, Arial, sans-serif !important;}
}
</style>
<![endif]-->
<meta name="robots" content="noindex, nofollow" />
</head>
<body class="body" style="padding:0; margin:0; background-color: #f4f4f7;">
<table align="center" aria-label="Comparison Chart for Multiple Products" border="0" cellpadding="0" cellspacing="0"
class="body" lang="en" role="article"
style="width: 100%; text-align:center; margin: 0 auto; table-layout: fixed;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 25px;">
</td>
</tr>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="device-width" role="presentation"
style="width:640px; max-width: 640px; margin: 0 auto;" bgcolor="#FFFFFF">
<tr>
<td valign="top" width="25px" class="mobile-hide"></td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="device-width" width="100%">
<caption
style="font-family: 'Nunito Light', 'Nunito-Light', Arial, sans-serif !important; font-weight: 300; font-size: 24px; padding: 5px;">
Comparison chart</caption>
<tr height="25" style="line-height: 25px; border: 0; background-color: #f4f4f7; ">
<th scope="col" width="33%">
<h2
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color: #2a2c35; font-size: 16px; text-align: center; margin:0; padding:0;">
Product A</h2>
</th>
<th scope="col" width="33%">
<h2
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color: #2a2c35; font-size: 16px; text-align: center; margin:0; padding:0;">
Product B</h2>
</th>
<th scope="col" width="33%">
<h2
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color: #2a2c35; font-size: 16px; text-align: center; margin:0; padding:0;">
Product C
</h2>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<th colspan="3" scope="colgroup"
style="color: #2a2c35; text-align: center; padding: 5px;">
<h3
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; font-size: 14px; padding: 0; margin: 0;">
Feature 1</h3>
<p
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400;font-size: 14px; padding: 0; margin: 0;">
More description here</p>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<td scope="row" scope="row"
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #c8efe7; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
</tr>
<tr height="25" style="line-height: 25px;">
<th colspan="3" scope="colgroup"
style="color: #2a2c35; text-align: center; padding: 5px;">
<h3
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; font-size: 14px; padding: 0; margin: 0;">
Feature 2</h3>
<p
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400;font-size: 14px; padding: 0; margin: 0;">
More description here</p>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<td scope="row"
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #c8efe7; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
</tr>
<tr height="25" style="line-height: 25px;">
<th colspan="3" scope="colgroup"
style="color: #2a2c35; text-align: center; padding: 5px;">
<h3
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; font-size: 14px; padding: 0; margin: 0;">
Feature 3</h3>
<p
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400;font-size: 14px; padding: 0; margin: 0;">
More description here</p>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<td scope="row"
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #c8efe7; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
</tr>
<tr height="25" style="line-height: 25px;">
<th colspan="3"
style="color: #2a2c35; text-align: center; padding: 5px;">
<h3
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; font-size: 14px; padding: 0; margin: 0;">
Feature 4</h3>
<p
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400;font-size: 14px; padding: 0; margin: 0;">
More description here</p>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<td scope="row"
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✗</td>
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
<td
style="background-color: #c8efe7; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
</tr>
<tr height="25" style="line-height: 25px;">
<th colspan="3" scope="colgroup"
style="color: #2a2c35; text-align: center; padding: 5px;">
<h3
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; font-size: 14px; padding: 0; margin: 0;">
Feature 5</h3>
<p
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400;font-size: 14px; padding: 0; margin: 0;">
More description here</p>
</th>
</tr>
<tr height="25" style="line-height: 25px;">
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✗</td>
<td
style="background-color: #e3f7f3; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✗</td>
<td
style="background-color: #c8efe7; font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color: #2a2c35; text-align: center; padding: 5px;">
✔</td>
</tr>
<tr height="10" style="line-height: 10px;">
<td align="left" colspan="4" style="background-color: #ffffff;"> </td>
</tr>
<tr height="25" style="line-height: 25px;">
<td scope="row" align="center" style="padding: 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#f78c6c"><a
href="https://heidi.olsen/ll19" target="_blank"
style="font-size: 16px; font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color:#ffffff; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 4px 6px; border: 1px solid #f78c6c; display: inline-block;"
class="cta">Get started</a></td>
</tr>
</table>
</td>
<td align="center" style="padding: 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#f78c6c"><a
href="https://heidi.olsen/ll19" target="_blank"
style="font-size: 16px; font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color:#ffffff; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 4px 6px; border: 1px solid #f78c6c; display: inline-block;"
class="cta">Get started</a></td>
</tr>
</table>
</td>
<td align="center" style="padding: 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#f78c6c"><a
href="https://heidi.olsen/ll19" target="_blank"
style="font-size: 16px; font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color:#ffffff; text-decoration: none; text-decoration: none;border-radius: 3px; padding: 4px 6px; border: 1px solid #f78c6c; display: inline-block;"
class="cta">Get started</a></td>
</tr>
</table>
</td>
</tr>
<tr height="25" style="line-height: 25px;">
<td align="left" colspan="4" style="background-color: #ffffff;"> </td>
</tr>
</table>
</td>
<td valign="top" width="25px" class="mobile-hide"></td>
</tr>
</table>
</td>
<tr>
<td style="font-size: 1px; line-height: 25px;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
!
