Skip to content

Instantly share code, notes, and snippets.

@eliotharper

eliotharper/gal-example.html Secret

Created August 18, 2017 06:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eliotharper/7d185625077a57d5ce081bb58c275290 to your computer and use it in GitHub Desktop.
Save eliotharper/7d185625077a57d5ce081bb58c275290 to your computer and use it in GitHub Desktop.
Download ZIP
Example Email
Raw
gal-example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Focus Luggage</title>
<meta name="author" content="Eliot Harper" />
<style type="text/css">
*{margin:0;padding:0}*{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}img{max-width:100%}.collapse{padding-right:15px;padding:0}body{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;width:100% !important;height:100%}a{color:#aaaaaa;font-size:12px}.bt{padding-top:10px}p.callout{padding:9px;font-size:12px}p.text{padding-left:5px;font-size:12px}p.left{padding:5px;font-size:12px;text-align:left}.prod{margin:0;padding:0;color:#aaaaaa}.callout a{font-weight:bold;color:#aaaaaa}table.head-wrap{width:100%}.header.container table td.logo{padding:15px}.header.container table td.label{padding:15px;padding-left:0px}table.body-wrap{width:100%}table.footer-wrap{width:100%;background-color:#f5f5f5;height:50px}table.footer-wrap2{width:100%}} h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;line-height:1.1;margin-bottom:5px;color:#000}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#6f6f6f;line-height:0;text-transform:none}h1{font-weight:200;font-size:18px;padding:20px;letter-spacing:3px;font-weight:300}h2{font-weight:200;font-size:37px}h3{font-weight:500;font-size:27px}h4{font-weight:500;font-size:23px}h5{font-weight:900;font-size:13px;color:#c2a67e}h6{font-weight:900;font-size:14px;text-transform:uppercase;color:#444}h7{font-weight:900;font-size:14px;text-transform:uppercase;color:#444;padding:5px}.collapse{margin:0 !important}p,ul{margin-bottom:2px;font-weight:normal;font-size:11px;line-height:1.6}p.lead{font-size:13px}p.last{margin-bottom:0px}ul li{margin-left:5px;list-style-position:inside}.container{display:block !important;max-width:600px !important;margin:0 auto !important;clear:both !important}.content{padding:5px;max-width:600px;margin:0 auto;display:block}.content table{width:100%}.column{width:300px;float:left}.column tr td{padding:5px}.column-wrap{padding:0 !important;margin:0 auto;max-width:600px !important}.column table{width:100%}.social .column{width:280px;min-width:279px;float:left}.column3{width:300px;float:left}.column3 tr td{padding:1px}.column3-wrap{padding:0 !important;margin:0 auto;max-width:600px !important}.column3 table{width:100%}.column2{width:240px;float:left}.column2 tr td{padding:5px}.column2-wrap{padding:0 !important;margin:0 auto;max-width:600px !important}.column2 table{width:100%}.social .column{width:280px;min-width:279px;float:left}.prod{width:200px;float:left}.prod tr td{padding:5px}.prod-wrap{padding:0 !important;margin:0 auto;max-width:600px !important}.prod table{width:100%}.prod .column{width:200px;min-width:200px;float:left}.clear{display:block;clear:both}p.colour{text-transform:uppercase;@media only screen and (max-width:600px) { a[class="btn"] { display:block !important;margin-bottom:10px !important;background-image:none !important;margin-right:0 !important}div[class="column"]{width:auto !important;float:none !important}div[class="column2"]{width:auto !important;float:none !important}div[class="column3"]{width:auto !important;float:none !important}table[class="top"]{width:auto !important;float:none !important}.prod{width:150px;float:left}table.social div[class="column"]{width:auto !important}}
</style>
<
</head>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
%%[
var @featuredCases
set @featuredCases = HTTPGet('https://raw.githubusercontent.com/eliotharper/gtl-demo/master/featuredCases.json')
]%%
<!-- header -->
<table class="head-wrap" bgcolor="#f5f5f5">
<tr>
<td>
</td>
<td class="header container">
<div class="content">
<table bgcolor="#f5f5f5" class="">
<tr>
<td>
<img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/logo.jpg"/>
</td>
<td align="right">
<h6 class="collapse">Lifestyle Accessories With A Down To Earth</h6>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</table>
<!-- body -->
<table class="body-wrap">
<tr>
<td>
</td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table bgcolor="" class="social" width="100%">
<tr>
<td align="center">
<h1>ONE BAG, TWO PACK, THREE WAYS</h1>
<img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/top_banner.jpg"/>
</td>
</tr>
</table>
</div>
<!-- column wrap -->
<div class="column-wrap">
<div class="column">
<table bgcolor="" class="social" width="100%">
<tr>
<td>
<p>
<img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/small1.jpg"/>
</p>
</td>
</tr>
<tr>
<td>
<table align="left" width="100%">
<tr>
<p class="text">
This leather satchel is an elegant example of our commitment to producing quality leather goods. The satchel silhouette is a classic shape and the roomy interior is ideal for storing work essentials.
</p>
<p class="bt">
<a href="#"><img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/btn_shop.jpg"/></a>
</p>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="column">
<table bgcolor="" class="social" width="100%">
<tr>
<td>
<p>
<img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/small2.jpg"/>
</p>
</td>
</tr>
<tr>
<td>
<table align="left" width="100%">
<tr>
<p class="text">
We are Australia's leading independent retailer of high quality luggage, business cases, handbags, wallets and leather accessories. Understated luxury and sleek details are hallmarks of our brand.
</p>
<p class="bt">
<a href="#"><img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/btn_shop.jpg"/></a>
</p>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="content">
<!-- line -->
<table width="18" height="81">
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1150" style="border-bottom: 1px solid #e5e5e5;">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<!-- divider title -->
<td align="center" valign="middle">
<tr>
<td height="0" border="5px" cellspacing="0" cellpadding="0">
<h7>IPHONE CASES</h6>
</td>
</tr>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1150" style="border-bottom: 1px solid #e5e5e5;">
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</table>
</div>
{{.datasource featuredCases type=variable source=@featuredCases}}
{{.data}}
{"target" : "@featuredCases"}
{{/data}}
{{.datasource products type=nested}}
{{.data}}
{"target":"featuredCases.cases"}
{{/data}}
<div class="prod">
<table bgcolor="" class="social" width="100%">
<tr>
<td>
<p>
<img src="{{image}}"/>
</p>
</td>
</tr>
<tr>
<td>
<table align="left" width="100%">
<p><h6>{{name}}</h6></p>
<p class="colour">{{colour}}</p>
</table>
</td>
</tr>
</table>
</div>
{{/datasource}}
{{/datasource}}
<!-- btn iphone -->
<div class="content">
<table align="center" width="100%">
<tr>
<td align="center">
<br><a href="#"><img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/btn_iphone.jpg"/></a>
</p>
</td>
</tr>
</table>
<br>
</div>
<!-- bottom banner -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<img src="https://raw.githubusercontent.com/eliotharper/gtl-demo/master/images/bt_banner.jpg"/>
</p>
<!-- /hero -->
<!-- Callout Panel -->
<p class="left">
A luxurious messenger-style satchel bag that's perfect for work days. A padded compartment keeps your laptop safe and protected, while the soft, genuine leather outer oozes style and class.<br>
<a href="#">Read more</a>
</p>
<!-- /Callout Panel -->
</td>
</tr>
</table>
</div>
<div class="clear">
</div>
</div>
</td>
<td>
</td>
</tr>
</table>
<!-- footer -->
<table class="footer-wrap">
<tr>
<td>
</td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="%%profile_center_url%%">Update Preferences</a>
</p>
<p>This email was sent by %%Member_Busname%%, %%Member_Addr%%, %%Member_City%% %%Member_State%% %%Member_PostalCode%%</p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
<td>
</td>
</tr>
</table>
<!-- /footer -->
<custom name="opencounter" type="tracking">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment