Skip to content

Instantly share code, notes, and snippets.

@kopasetik

kopasetik/Responsive_Template1.html

Last active August 29, 2015 14:06
Show Gist options
  • Save kopasetik/f00bfe59095a8a223e97 to your computer and use it in GitHub Desktop.
Save kopasetik/f00bfe59095a8a223e97 to your computer and use it in GitHub Desktop.
Download ZIP
Sparkifly Gists
Raw
mailjet_send.js
//using mailjet-sendemail npm module (located at https://github.com/CharlesCollas/Mailjet-sendemail)
var Mailjet = require('mailjet-sendemail');
var mailjet = new Mailjet['Mailjet']('0835fa8ae0ca95dc5c69c3365f6736b3',
'fb9b482d1481ca6b3e3f4f37f9d7bb96'
);
var email_content;
var fs = require("fs");
fs.readFile('mail_templates/resp_dir/Responsive_Template1.html', function (err, data) {
if (err) throw err;
email_content = data.toString();
mailjet.sendText('[email protected]',
'[email protected]',
'Full Width Email',
email_content
);
});
Raw
Responsive_Template1.html
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- Start Header-->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td width="100%" bgcolor="#ffffff">
</td>
</tr>
</table><!-- End Header -->
<!-- One Column -->
<table width="580" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed">
<tr>
<td valign="top" style="padding:0" bgcolor="#ffffff">
<a href="#"><h1>SPARKIFLY</h1></a>
</td>
</tr>
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px" bgcolor="#eeeeed">
<table>
<tr>
<td valign="top" style="padding:0 10px 10px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/1.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; color: #272727; font-size: 16px; color: #272727; font-weight: bold; font-family:Arial, sans-serif ">JACK, you are a … DETECTIVE</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End One Column -->
<div style="height:15px">&nbsp;</div><!-- spacer -->
<!-- 2 Column Images & Text Side by SIde -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#202022">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="center" class="center" style="padding-top:20px">
<a href="#"><img width="267" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/responsive4.jpg" alt="" border="0" style="border-radius: 4px; width: 267px; display: block;" class="deviceWidth" /></a>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td valign="top" style="padding:0 10px 10px 5px">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/2.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #ccc; font-weight: bold; font-family:Arial, sans-serif ">THE DETECTIVE</a>
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
According to our research and the quiz that you took, you’re a detective. This means that you like to discover and uncover the unseen. Years of research have shown that detectives like to uncover nature and its sometimes hidden beauty.
<br/><br/>
<table width="100" align="right">
<tr>
<td background="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/blue_back.jpg" bgcolor="#409ea8" style="padding:5px 0;background-color:#409ea8; border-top:1px solid #77d5ea; background-repeat:repeat-x" align="center">
<a href=""
style="
color:#ffffff;
font-size:13px;
font-weight:bold;
text-align:center;
text-decoration:none;
font-family:Arial, sans-serif;
-webkit-text-size-adjust:none;">
Read More
</a>
</td>
</tr>
</table>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#fe7f00"><div style="height:6px">&nbsp;</div></td>
</tr>
</table><!-- End 2 Column Images & Text Side by SIde -->
<div style="height:15px">&nbsp;</div><!-- spacer -->
<!-- Two Column (Images Stacked over Text) -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#eeeeed">
<tr>
<td class="center" style="padding:10px 0 0 5px">
<table width="49%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<!-- The paragraph tag is important here to ensure that this table floats properly in Outlook 2007, 2010, and 2013
To learn more about this fix check out this link: http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
This fix is used for all floating tables in this responsive template
The margin set to 0 is for Gmail -->
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/responsive7.jpg" alt="" border="0" style="border-radius: 4px; width: 267px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tr>
<td valign="top" style="padding:0 10px 10px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/3.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif ">OUTDOORS</a>
</td>
</tr>
</table>
<p>Drawn to discovery and the hidden, Detectives enjoy the outdoors for its majestic vistas and its opportunities for time away from city life.</p>
</td>
</tr>
</table>
<table width="49%" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="267" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/responsive5.jpg" alt="" border="0" style="border-radius: 4px; width: 267px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="font-size: 12px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tr>
<td valign="top" style="padding:0 10px 10px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/4.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif ">NATIONAL PARKS</a>
</td>
</tr>
</table>
<p>As National Parks are some of the best of the outdoors, they are something like a natural habitat for Detectives!</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Two Column (Images Stacked over Text) -->
<div style="height:15px">&nbsp;</div><!-- spacer -->
<!-- Dark Background, Three Column Images -->
<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#202022">
<tr>
<td style="padding:10px 0 0 10px">
<table>
<tr>
<td valign="top" style="padding:0 10px 10px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/5.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0"><a href="#" style="text-decoration: none; font-size: 16px; color: #eee; font-weight: bold; font-family:Arial, sans-serif ">Matching with Your Partner</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding:10px 0">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/responsive18.jpg" alt="" border="0" style="border-radius: 4px; width: 170px;" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="padding:0 10px 20px 10px">
<a href="#" style="text-decoration: none; font-size: 14px; color: #eee; font-weight: bold; font-family:Arial, sans-serif ">JACK</a>
<p style="color:#ddd; text-align:left; font-size: 10px; line-height:17px">Iste natus error sit volu ptatem accusa tium dolor emque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
<table width="90" align="left">
<tr>
<td bgcolor="#c8c8ca" style="padding:2px 0 5px 0;background-color:#c8c8ca; border-top:1px solid #eee; background-repeat:repeat-x" align="center">
<a href=""
style="
color:#333;
font-size:12px;
font-weight:bold;
text-align:center;
text-decoration:none;
font-family:Arial, sans-serif;
-webkit-text-size-adjust:none;">
Read More
</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Image 1 -->
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding:10px 0">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/responsive20.jpg" alt="" border="0" style="border-radius: 4px; width: 170px;" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="padding:0 10px 20px 10px">
<a href="#" style="text-decoration: none; font-size: 14px; color: #eee; font-weight: bold; font-family:Arial, sans-serif ">BOTH</a>
<p style="color:#ddd; text-align:left; font-size: 10px; line-height:17px">Iste natus error sit volu ptatem accusa tium dolor emque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
<table width="90" align="left">
<tr>
<td bgcolor="#c8c8ca" style="padding:2px 0 5px 0;background-color:#c8c8ca; border-top:1px solid #eee; background-repeat:repeat-x" align="center">
<a href=""
style="
color:#333;
font-size:12px;
font-weight:bold;
text-align:center;
text-decoration:none;
font-family:Arial, sans-serif;
-webkit-text-size-adjust:none;">
Read More
</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Image 2 -->
<table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td valign="top" align="center" style="padding:10px 0">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><a href="#"><img width="170" src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/360.jpg" alt="" border="0" style="border-radius: 4px; width: 170px" class="deviceWidth" /></a></p>
</td>
</tr>
<tr>
<td style="padding:0 10px 20px 10px">
<a href="#" style="text-decoration: none; font-size: 14px; color: #eee; font-weight: bold; font-family:Arial, sans-serif ">JILL</a>
<p style="color:#ddd; text-align:left; font-size: 10px; line-height:17px">Iste natus error sit volu ptatem accusa tium dolor emque lauda ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
<table width="90" align="left">
<tr>
<td bgcolor="#c8c8ca" style="padding:2px 0 5px 0;background-color:#c8c8ca; border-top:1px solid #eee; background-repeat:repeat-x" align="center">
<a href=""
style="
color:#333;
font-size:12px;
font-weight:bold;
text-align:center;
text-decoration:none;
font-family:Arial, sans-serif;
-webkit-text-size-adjust:none;">
Read More
</a>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End Image 3 -->
</td>
</tr>
<tr>
<td bgcolor="#bdcc50"><div style="height:6px">&nbsp;</div></td>
</tr>
</table><!-- End 3 Small Images -->
<!-- Dark Background, Three Column Images -->
<div style="height:35px">&nbsp;</div><!-- spacer -->
<!-- 4 Columns -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#363636" style="padding:30px 0">
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<table width="45%" cellpadding="0" cellspacing="0" border="0" align="left" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; color:#999; font-family: Arial, sans-serif; padding-bottom:20px" class="center">
You are receiving this email because<br/>
1.) You're an awesome customer of "Company Name" or<br/>
2.) You subscribed via <a href="" style="color:#999;text-decoration:underline;">our website</a><br/>
<br/><br/>
Want to be removed? No problem, <a href="" style="color:#999;text-decoration:underline;">click here</a> and we won't bug you again.
</td>
</tr>
</table>
<table width="40%" cellpadding="0" cellspacing="0" border="0" align="right" class="deviceWidth">
<tr>
<td valign="top" style="font-size: 11px; color: #f1f1f1; font-weight: normal; font-family: Georgia, Times, serif; line-height: 26px; vertical-align: top; text-align:right" class="center">
<a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_rss.gif" width="42" height="42" alt="RSS Feed" title="RSS Feed" border="0" /></a>
<a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_twitter.gif" width="42" height="42" alt="Twitter" title="Twitter" border="0" /></a>
<a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_vm.gif" width="42" height="42" alt="Vimeo" title="Vimeo" border="0" /></a>
<a href=""><img src="http://www.emailonacid.com/images/emails/5_13/footer_fb.gif" width="42" height="42" alt="Facebook" title="Facebook" border="0" /></a>
<br />
<a href="#"><img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/footer_logo2.jpg" alt="" border="0" style="padding-top: 5px;" /></a><br/>
<a href="#" style="text-decoration: none; color: #848484; font-weight: normal;">555-555-5555</a><br/>
<a href="#" style="text-decoration: none; color: #848484; font-weight: normal;">[email protected]</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 4 Columns -->
</td>
</tr>
</table> <!-- End Wrapper -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment