<!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: Progress Tabs</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="x-apple-disable-message-reformatting">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
h1,
h2,
h3,
h4 {
font-weight: inherit;
}
p {
display: block;
margin: 13px 0;
}
img {
cursor: default;
}
u~div img+div {
display: none;
}
/***************************************************
TABS
***************************************************/
@media screen yahoo {
* {
overflow: visible !important
}
.y-overflow-hidden {
overflow: hidden !important
}
.tab,
.tabcheck {
display: none !important;
}
#container {
display: none !important;
}
}
.tab,
.tabcheck {
display: none;
}
.tabcheck {
height: 0px;
visibility: hidden;
}
.tab-show {
display: block !important;
max-height: 540px !important;
overflow: visible !important;
}
.title1,
.title2,
.title3 {
float: left;
cursor: pointer;
width: 200px;
height: 35px;
border-top: 10px solid #FFFFFF;
border-left: 0;
border-right: 0;
color: #2a2c35;
}
.title1,
.title2,
.title3 {
background-color: #babcc5;
}
.tabcheck:checked+#container {
width: 100%;
height: 145px !important;
max-height: 145px !important;
overflow: hidden;
}
.tabcheck:checked+div,
#tab2:checked+span .content2,
#tab3:checked+span .content3 {
display: block !important;
max-height: none !important;
height: auto !important;
}
#tab1:checked+span .title1,
#tab2:checked+span .title2,
#tab3:checked+span .title3 {
background: #2a2c35 !important;
color: #f78c6c !important;
border: 0;
width: 200px;
height: 45px;
}
/***************************************************
MOBILE TARGETING
***************************************************/
@media screen and (max-width: 520px),
screen and (max-device-width: 520px) {
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
.device-width {
width: 100% !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
h2 {
margin: 0 15px !important;
}
.mobile-hide {
display: none !important;
}
.center-img {
float: none !important;
margin: 0 auto !important;
width: auto;
}
.mobile-txt-center {
text-align: center !important;
padding: 0 15px !important;
}
.mobile-txt-left {
text-align: left !important;
padding: 0 15px !important;
height: 50px !important;
}
.mobile-spacer {
width: 15px !important;
}
/*** ---- TABS ---- **/
.tab-show {
display: block !important;
max-height: 775px !important;
overflow: visible !important;
}
.title1,
.title2,
.title3 {
float: left;
cursor: pointer;
width: 33.3333% !important;
color: #FFFFFF;
}
#tab1:checked+span .title1,
#tab2:checked+span .title2,
#tab3:checked+span .title3 {
border: 0;
width: 33.3333% !important;
height: 45px;
}
.tabcheck:checked+#container {
height: 170px !important;
max-height: 170px !important;
width: 100% !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;">
<div class="content">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="device-width">
<tbody>
<tr>
<td valign="top" height="45"></td>
</tr>
<tr>
<td valign="top">
<h2
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600; color: #2a2c35; font-size: 24px; margin:0; padding:0;">
Your dollars make a difference</h2>
</td>
</tr>
<tr>
<td valign="top" height="15"></td>
</tr>
<tr>
<td valign="top">
<form>
<!--[if !mso]><!-- -->
<input type="radio" class="tabcheck" lang="x-tabcheck" style="display:none !important;"
checked="">
<!--<![endif]-->
<div id="container" lang="x-container" style="width:600px;">
<!--[if !mso]><!-- -->
<input type="radio" class="tabcheck" lang="x-tabcheck" style="display:none !important;"
checked="">
<div style="height:0px;max-height:0px;overflow:hidden;display:none;">
<label><input type="radio" name="tab" class="tab" lang="x-tab1" id="tab1"
style="display:none !important;" checked=""><span>
<div class="title1" lang="x-title1"
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600;color:#2a2c35;text-align:center;font-size:20px;line-height:35px;"
valign="top">
<h3 style="font-size:20px;line-height:35px;margin:0;padding:0;"
class="inactive">$10.00</h3>
</div>
<!-- NESTED TAB 2 -->
<label><input type="radio" name="tab" class="tab" lang="x-tab2" id="tab2"
style="display:none !important;"><span>
<div class="title2" lang="x-title2"
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600;color:#2a2c35;text-align:center;font-size:20px;line-height:35px;"
valign="top">
<h3 style="font-size:20px;line-height:35px;margin:0;padding:0;"
class="inactive">$25.00</h3>
</div>
<!-- NESTED TAB 3 -->
<label><input type="radio" name="tab" class="tab" lang="x-tab3"
id="tab3" style="display:none !important;"><span>
<div class="title3" lang="x-title3"
style="font-family: 'Nunito SemiBold', 'Nunito-SemiBold', Arial, sans-serif !important; font-weight: 600;color:#2a2c35;text-align:center;font-size:20px;line-height:35px;"
valign="top">
<h3 style="font-size:20px;line-height:35px;margin:0;padding:0;"
class="inactive">$50.00</h3>
</div>
<div class="content3" lang="x-content3"
style="height:0px;max-height:0px;overflow:hidden;clear:left;">
<table cellpadding="0" cellspacing="0" align="center"
border="0" bgcolor="#2a2c35" width="100%">
<tbody>
<tr>
<td valign="top" width="32"
class="mobile-spacer"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0"
align="center" border="0" width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="100%"
title="$50.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top"
class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$50.00 will fund an
<span
style="font-weight: bold; color: #f78c6c">entire</span>
month of supplies.</h4>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32"
class="mobile-spacer"></td>
</tr>
</tbody>
</table>
</div>
</span>
</label>
<!-- END NESTED TAB 3 -->
<div class="content2" lang="x-content2"
style="height:0px;max-height:0px;overflow:hidden;clear:left;display:none">
<table cellpadding="0" cellspacing="0" align="center" border="0"
bgcolor="#2a2c35" width="100%">
<tbody>
<tr>
<td valign="top" width="32" class="mobile-spacer"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0"
align="center" border="0" width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="67%"
title="$20.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
<td width="33%"
style="padding: 0; font-weight: 300; margin: 0; background-color: #ffffff; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$25.00 will fund a half of a
month's supplies.</h4>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32" class="mobile-spacer"></td>
</tr>
</tbody>
</table>
</div>
</span>
</label>
<!-- END NESTED TAB 2 -->
<!-- TAB 1 Content originally here -->
<table cellpadding="0" cellspacing="0" align="center" border="0"
bgcolor="#2a2c35" width="100%">
<tbody>
<tr>
<td valign="top" width="32" class="mobile-spacer"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="center" border="0"
width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="33%" title="$20.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
<td width="67%"
style="padding: 0; font-weight: 300; margin: 0; background-color: #ffffff; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$10.00 will fund a week of supplies.</h4>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32" class="mobile-spacer"></td>
</tr>
</tbody>
</table>
</span>
</label>
</div>
<!--<![endif]-->
<!-- TAB 1 Content moved outside nested labels for fallback for non supported clients: Outlook.com/Outlook -->
<table cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#2a2c35"
width="100%">
<tbody>
<tr>
<td valign="top" width="32" class="mobile-spacer"></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" align="center" border="0"
width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="33%" title="$20.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
<td width="67%"
style="padding: 0; font-weight: 300; margin: 0; background-color: #ffffff; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$10.00 will fund a week of supplies.</h4>
</td>
</tr>
<tr>
<td valign="top" height="20"></td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32" class="mobile-spacer"></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#2a2c35"
width="100%">
<tbody>
<tr>
<td valign="top" width="32" class="mobile-spacer"></td>
<td valign="top" bgcolor="#2a2c35">
<table cellpadding="0" cellspacing="0" align="center" border="0"
width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="67%" title="$20.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
<td width="33%"
style="padding: 0; font-weight: 300; margin: 0; background-color: #ffffff; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$25.00 will fund a half of a month's supplies.</h4>
</td>
</tr>
<tr>
<td valign="top" height="20"></td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32" class="mobile-spacer"></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" align="center" border="0" bgcolor="#2a2c35"
width="100%">
<tbody>
<tr>
<td valign="top" width="32" class="mobile-spacer"></td>
<td valign="top" bgcolor="#2a2c35">
<table cellpadding="0" cellspacing="0" align="center" border="0"
width="100%">
<tbody>
<tr>
<td valign="top" height="20"></td>
</tr>
<tr>
<td
style="padding: 0; font-weight: 300; margin: 0; text-align: left">
<table
style="width: 100%; font-weight: 300; margin-bottom: 20px; border-collapse: collapse">
<tr>
<td width="100%" title="$50.00 Per Month"
style="padding: 0; font-weight: 300; margin: 0; background-color: #f78c6c; text-align: left">
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="mobile-txt-left"
style="font-family: 'Nunito Regular', 'Nunito-Regular', Arial, sans-serif !important; font-weight: 400; color:#FFFFFF;text-align:left;font-size:18px;line-height:24px;padding: 0;">
<h4
style="font-size:18px;line-height:24px;margin:0;padding:0;">
$50.00 will fund an <span
style="font-weight: bold; color: #f78c6c">entire</span>
month of supplies.</h4>
</td>
</tr>
<tr>
<td valign="top" height="20"></td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="32" class="mobile-spacer"></td>
</tr>
</tbody>
</table>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
!
