├── images
    ├── hero.jpg
    ├── logo.png
    ├── divider01.jpg
    ├── divider02.jpg
    ├── divider03.jpg
    ├── divider04.jpg
    ├── knights01.jpg
    ├── knights02.jpg
    └── knights03.jpg
├── license
├── readme.md
├── husk-production-ready.html
└── husk-example-email.html


/images/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/hero.jpg


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/logo.png


--------------------------------------------------------------------------------
/images/divider01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/divider01.jpg


--------------------------------------------------------------------------------
/images/divider02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/divider02.jpg


--------------------------------------------------------------------------------
/images/divider03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/divider03.jpg


--------------------------------------------------------------------------------
/images/divider04.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/divider04.jpg


--------------------------------------------------------------------------------
/images/knights01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/knights01.jpg


--------------------------------------------------------------------------------
/images/knights02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/knights02.jpg


--------------------------------------------------------------------------------
/images/knights03.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anseltaft/husk/HEAD/images/knights03.jpg


--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Ansel Taft
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | [![Husk: a modular and responsive HTML email framework](https://raw.githubusercontent.com/anseltaft/husk/master/images/logo.png)](https://github.com/anseltaft/husk)
 2 | ![Husk's hero image](https://raw.githubusercontent.com/anseltaft/husk/master/images/hero.jpg)
 3 | # Husk
 4 | A modular, responsive HTML email framework for rapid development.
 5 | ## Included Modules:
 6 | * Logo module
 7 | * Hero image module
 8 | * Single column module
 9 | * Two columns module
10 | * Three columns module
11 | * Button module
12 | * Show/Hide module (replacement image on mobile)
13 | * Footer module
14 | 
15 | ## Bonus goodness
16 | * Baked in fixes for iOS, Android, Gmail, Yahoo Mail, and Outlook
17 | * Well documented, formated code
18 | * Social share code in `<head>`
19 | 
20 | ## Planned updates
21 | * Background image module (issue #3)
22 | * ~~Unopinionated, vanilla version for rapid development (issue #4)~~
23 | * Dark mode support (issue #6)
24 | 
25 | Many thanks to [Julie Ng](https://julie.io/) for [Antwort](https://github.com/InterNations/antwort) AKA the starting point.
26 | 
27 | Additional thanks to [Litmus](https://www.litmus.com/) for testing and [Litmus](https://www.litmus.com/), [Campaign Monitor](https://www.campaignmonitor.com/), and [Email On Acid](https://www.emailonacid.com/) for clutch fixes.
28 | 


--------------------------------------------------------------------------------
/husk-production-ready.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 	<head>
  4 | 		<title>From Name | Subject Line</title>
  5 | 		<meta property="og:title" content="From Name | Subject Line">
  6 | 		<meta name="description" content="Same as Preheader Text">
  7 | 		<meta property="og:description" content="Same as Preheader Text">
  8 | 		<!-- Absolute path to HTML file (optional) -->
  9 | 		<meta property="og:url" content="">
 10 | 		<!-- Facebook: absolute path of image to be used upon share (optional) -->
 11 | 		<meta property="og:image" content="">
 12 | 		<!-- Facebook: use 600px x 315px image for best results (optional) -->
 13 | 		<meta property="og:image:width" content="600">
 14 | 		<meta property="og:image:height" content="315">
 15 | 		<meta property="og:type" content="website">
 16 | 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 17 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 18 | 		<!-- Windows Phone 8 fix: enable media queries  -->
 19 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 20 | 		<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
 21 | 		<!-- iOS 11 fix: prevent it from automatically scaling the email -->
 22 | 		<meta name="x-apple-disable-message-reformatting">
 23 | 
 24 | 		<style type="text/css">
 25 | 
 26 | 			/* Google Font start */
 27 | 			/* Source: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/ */
 28 | 			@font-face {
 29 | 				font-family: '';
 30 | 				font-style: ;
 31 | 				font-weight: ;
 32 | 				src: local(''), local(''), url() format('woff2');
 33 | 			}
 34 | 			/* Google Font end */
 35 | 
 36 | 			body {
 37 | 				margin: 0;
 38 | 				padding: 0;
 39 | 				text-rendering: optimizeLegibility;
 40 |                 -ms-text-size-adjust: 100%;
 41 |                 -webkit-text-size-adjust: 100%;
 42 | 				-moz-osx-font-smoothing: grayscale;
 43 | 				-webkit-font-smoothing: antialiased;
 44 | 			}
 45 | 
 46 | 			table {
 47 | 				border-spacing: 0;
 48 | 				mso-table-lspace: 0pt;
 49 | 				mso-table-rspace: 0pt;
 50 | 			}
 51 | 
 52 | 			/* Outlook 2007, 2010, and Gmail fix: <td> padding */
 53 | 			table td {
 54 | 				border-collapse: collapse;
 55 | 			}
 56 | 
 57 | 			div {
 58 | 				-webkit-box-sizing: border-box;
 59 | 				-moz-box-sizing: border-box;
 60 | 				box-sizing: border-box;
 61 | 			}
 62 | 
 63 | 			img {
 64 | 				max-width: 100%;
 65 | 				height: auto;
 66 | 				border: 0;
 67 | 				-ms-interpolation-mode: bicubic;
 68 | 			}
 69 | 
 70 |             /* Gmail fix: hide download image icon */
 71 |             img.g-img + div {
 72 |                 display: none;
 73 |             }
 74 | 
 75 | 			p {
 76 | 				margin: 0;
 77 | 				padding: 0;
 78 | 				margin-bottom: 0;
 79 | 			}
 80 | 
 81 | 			.button:hover {
 82 | 				border: 1px solid # !important;
 83 | 				background-color: # !important;
 84 | 				box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
 85 | 				transition: background 250ms;
 86 | 			}
 87 | 
 88 | 			.button:hover a {
 89 | 				color: # !important;
 90 | 				transition: color 250ms;
 91 | 			}
 92 | 
 93 | 			/* Outlook.com fix: display at full width */			
 94 | 			.ReadMsgBody,
 95 | 			.ExternalClass {
 96 | 				width: 100%;
 97 | 			}
 98 | 
 99 | 			/* Outlook.com fix: use normal line spacing */
100 | 			.ExternalClass,
101 | 			.ExternalClass p,
102 | 			.ExternalClass span,
103 | 			.ExternalClass font,
104 | 			.ExternalClass td,
105 | 			.ExternalClass div {
106 | 				line-height: 100%;
107 |                 mso-line-height-rule: exactly;
108 | 			}
109 | 
110 | 			/* Yahoo Mail fix: suppress underlined links */
111 | 			.yshortcuts a {
112 | 				border-bottom: none !important;
113 | 			}
114 | 
115 | 			/* iOS, Samsung Mail fix: suppress links added to time/date phrases by wrapping the phrase in <span class="calendar"></span> */
116 | 			span.calendar a {
117 | 				color: inherit !important;
118 | 				text-decoration: none !important;
119 | 				font-size: inherit !important;
120 | 				font-family: inherit !important;
121 | 				font-weight: inherit !important;
122 | 				line-height: inherit !important;
123 | 			}
124 | 
125 | 			.column {
126 | 				padding: 18px 12px;
127 | 			}
128 | 
129 | 			.mobileshow {
130 | 				display: none;
131 | 			}
132 | 
133 | 			@media screen and (max-width: 620px) {
134 | 				.container {
135 | 					width: 100% !important;
136 | 					max-width: 620px !important;
137 | 				}
138 | 			}
139 | 
140 | 			@media screen and (max-width: 599px) {
141 | 
142 | 				.full-width,
143 | 				.container,
144 | 				.column {
145 | 					width: 100% !important;
146 | 					max-width: 100% !important;
147 | 				}
148 | 
149 |                 .no-padding {
150 |                     padding: 0 !important;
151 |                 }
152 | 
153 |                 .no-vertical-padding {
154 |                     padding-top: 0 !important;
155 |                     padding-bottom: 0 !important;
156 |                 }
157 | 
158 |                 .no-horizontal-padding {
159 |                     padding-right: 0 !important;
160 |                     padding-left: 0 !important;
161 |                 }
162 | 
163 |                 .center {
164 |                     text-align: center !important;
165 |                 }
166 | 
167 |                 .center img,
168 |                 .center a img {
169 |                     margin-right: auto !important;
170 |                     margin-left: auto !important;
171 |                 }
172 | 
173 | 				.float-image-right {
174 | 					float: right;
175 | 					max-width: 40% !important;
176 | 					height: auto !important;
177 | 					margin-left: 12px;
178 | 				}
179 | 
180 | 				.float-image-left {
181 | 					float: left;
182 | 					max-width: 40% !important;
183 | 					height: auto !important;
184 | 					margin-right: 12px;
185 | 				}
186 | 
187 | 				.subtitle {
188 | 					margin-top: 0 !important;
189 | 				}
190 | 
191 | 				.mobilehide {
192 | 					display: none !important;
193 | 					width: 0 !important;
194 | 					height: 0 !important;
195 | 					overflow: hidden !important;
196 | 					visibility: hidden !important;
197 | 					border: none !important;
198 | 				}
199 | 				
200 | 				.mobileshow {
201 | 					display: table !important;
202 | 					width: auto !important;
203 | 					height: auto !important;
204 | 					overflow: visible !important;
205 | 					visibility: visible !important;
206 | 					border:none !important;
207 | 				}
208 | 
209 | 			}
210 | 
211 | 			@media screen and (max-width: 400px) {
212 | 
213 |                 
214 | 
215 | 			}
216 | 
217 | 			/* Android fix: centering */
218 | 			div[style*="margin: 16px 0;"] {
219 | 				margin: 0 !important;
220 | 			}
221 | 
222 | 		</style>
223 |         <!--[if gte mso 9]>
224 |             <xml>
225 |                 <o:OfficeDocumentSettings>
226 |                 <o:AllowPNG/>
227 |                 <o:PixelsPerInch>96</o:PixelsPerInch>
228 |                 </o:OfficeDocumentSettings>
229 |             </xml>
230 |         <![endif]-->
231 | 	</head>
232 | 
233 | 	<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" style="font-family: Arial, Helvetica, sans-serif; color: #3B343E; background-color: #e6e6e6;">
234 | 		
235 | 		<!-- Preheader text -->
236 | 		<div style="display: none; max-height: 0; overflow: hidden;">
237 | 			Please edit this text
238 | 		</div>
239 | 		<!-- Do not edit the div below, it hides other text from showing in preheader using &zwnj;&nbsp; -->
240 | 		<div style="display: none; max-height: 0; overflow: hidden;">
241 | 			&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
242 | 		</div>
243 | 		<!-- Preheader text end -->
244 | 		
245 | 		<!-- Wrapper table, width: 100% -->
246 | 		<table class="" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
247 | 	  		<tr>
248 | 				<td class="" align="center" valign="top" style="">
249 | 
250 | 		  			<!-- Content table, width: 600px -->
251 | 					<table class="container" align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px; margin: 0 auto; background-color: #ffffff;">
252 | 
253 | 						<!-- Logo module -->
254 | 						<tr>
255 | 							<td class="" align="center" style="padding: 0px 0px;">
256 | 								<a href="" target="_blank">
257 | 									<img src="" width="" height="" alt="" style="display: block; margin: 0 auto; border: 0;">
258 | 								</a>
259 | 							</td>
260 | 						</tr>
261 | 						<!-- Logo module end -->
262 | 
263 | 						<!-- Hero image module -->
264 | 						<tr>
265 | 							<td class="" align="center" style="">
266 | 								<a href="" target="_blank">
267 | 									<img src="" width="" height="" alt="" style="display: block; min-width: 100%; border: 0;">
268 | 								</a>
269 | 							</td>
270 | 						</tr>
271 | 						<!-- Hero image module end -->
272 | 
273 | 						<!-- Google Font module -->
274 | 						<!-- Source: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/ -->
275 | 						<!--[if mso]>
276 | 							<style type="text/css">
277 | 								.fallback-font-stack {
278 | 									font-family: ;
279 | 								}
280 | 							</style>
281 | 						<![endif]-->
282 | 						<tr>
283 | 							<td class="" align="left" style="padding: 0px 0px 0px; font-family: ; font-size: ; line-height: 1.5; mso-line-height-rule: exactly;">
284 | 								&nbsp;
285 |                           </td>
286 | 						</tr>
287 | 						<!-- Google Font module end -->
288 | 
289 | 						<!-- Divider module -->
290 | 						<tr>
291 | 							<td class="" align="center" style="">
292 | 								<img src="" width="" height="" alt="" style="display: block; min-width: 100%;">
293 | 							</td>
294 | 						</tr>
295 | 						<!-- Divider module end -->
296 | 
297 | 						<!--Button module -->
298 |                         <tr>
299 | 							<td class="" align="center" style="padding: 0px 0px; background-color: #;">
300 | 								<table class="" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
301 | 									<tr>
302 | 										<td class="" align="center" style="">
303 | 											<table class="" align="center" border="0" cellspacing="0" cellpadding="0" style="">
304 | 												<tr>
305 | 													<td class="button" align="center" style="padding: 0px 0px; background-color: #; border: 0px solid #; border-radius: 0px;"><a href="" target="_blank" style="display: block; margin: 0 auto; font-family: ; color: #; font-size: ; text-transform: uppercase; text-decoration: none; border-radius: 0px;">&nbsp;</a></td>
306 | 												</tr>
307 | 											</table>
308 | 										</td>
309 | 									</tr>
310 | 								</table>
311 | 							</td>
312 | 						</tr>
313 | 						<!--Button module end -->
314 | 
315 | 						<!-- Divider module -->
316 | 						<tr>
317 | 							<td class="" align="center" style="">
318 | 								<img src="" width="" height="" alt="" style="display: block; min-width: 100%;">
319 | 							</td>
320 | 						</tr>
321 | 						<!-- Divider module end -->
322 | 
323 | 						<!-- Two columns module -->
324 | 						<tr>
325 | 							<td class="" align="center" style="padding: 0px 24px; background-color: #;">
326 | 
327 | 								<!-- The columns are wrapped in a <table> with a fixed width of 264px. 264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns. First table is aligned left. Second table is aligned right. -->
328 | 
329 | 								<!--[if mso]>
330 | 									<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
331 |   										<tr>
332 |   											<td valign="top" style="width: 50%;">
333 |   								<![endif]-->
334 | 
335 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 264px;">
336 | 									<tr>
337 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
338 | 										<td class="column" align="left" valign="top" style="width: 100%;">
339 | 											&nbsp;
340 | 										</td>
341 | 									</tr>
342 | 								</table>
343 | 
344 | 								<!--[if mso]>
345 | 											</td>
346 | 											<td valign="top" style="width: 50%;">
347 | 								<![endif]-->
348 | 
349 |     							<table class="full-width" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 264px;">
350 | 									<tr>
351 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
352 | 										<td class="column" align="left" valign="top" style="width: 100%;">
353 | 										  &nbsp;
354 | 										</td>
355 | 									</tr>
356 | 								</table>
357 | 
358 | 								<!--[if mso]>
359 | 											</td>
360 | 										</tr>
361 | 									</table>
362 | 								<![endif]-->
363 | 
364 | 							</td>
365 | 						</tr>
366 | 						<!-- Two columns module end -->
367 | 
368 | 						<!-- Three columns module -->
369 | 						<tr>
370 |     						<td class="" style="padding: 0px 12px 0px;">
371 | 
372 | 								<!-- The three nested columns (192px each) are surrounded by a wrapper table of 576px. -->
373 | 
374 | 								<!--[if mso]>
375 | 									<table border="0" cellpadding="0" cellspacing="0" style="width: 576px;">
376 | 										<tr>
377 | 											<td valign="top" style="width: 192px;">
378 | 								<![endif]-->
379 | 
380 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
381 | 									<tr>
382 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
383 | 										<td class="column" valign="top" style="width: 100%;">
384 | 											<table class="float-image-right" border="0" cellpadding="0" cellspacing="0" style="">
385 | 												<tr>
386 | 													<td class="" style=""><img src="" width="" height="" alt=""></td>
387 | 												</tr>
388 | 											</table>
389 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
390 | 												<tr>
391 | 													<td class="subtitle" style="">&nbsp;</td>
392 | 												</tr>
393 | 											</table>
394 | 											<div class="" style="">
395 | 												&nbsp;</div>
396 | 										</td>
397 | 									</tr>
398 | 								</table>
399 | 
400 | 								<!--[if mso]>
401 | 											</td>
402 | 											<td valign="top" style="width: 192px;">
403 | 								<![endif]-->
404 | 
405 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
406 | 									<tr>
407 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
408 | 										<td class="column" valign="top" style="width: 100%;">
409 | 											<table class="float-image-left" border="0" cellpadding="0" cellspacing="0" style="">
410 | 												<tr>
411 | 													<td class="" style=""><img src="" width="" height="" alt=""></td>
412 | 												</tr>
413 | 											</table>
414 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
415 | 												<tr>
416 | 													<td class="subtitle" style="">&nbsp;</td>
417 | 												</tr>
418 | 											</table>
419 | 											<div class="" style="">
420 | 												&nbsp;</div>
421 | 										</td>
422 | 									</tr>
423 | 								</table>
424 | 
425 | 								<!--[if mso]>
426 | 											</td>
427 | 											<td valign="top" style="width: 192px;">
428 | 								<![endif]-->
429 | 
430 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
431 | 									<tr>
432 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
433 | 										<td class="column" valign="top" style="width: 100%;">
434 | 											<table class="float-image-right" border="0" cellpadding="0" cellspacing="0" style="">
435 | 												<tr>
436 | 													<td class="" style=""><img src="" width="" height="" alt=""></td>
437 | 												</tr>
438 | 											</table>
439 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
440 | 												<tr>
441 | 													<td class="subtitle" style="">&nbsp;</td>
442 | 												</tr>
443 | 											</table>
444 | 											<div class="" style="">
445 | 												&nbsp;</div>
446 | 										</td>
447 | 									</tr>
448 | 								</table>
449 | 
450 | 								<!--[if mso]>
451 | 											</td>
452 | 										</tr>
453 | 									</table>
454 | 								<![endif]-->
455 | 
456 | 							</td>
457 | 						</tr>
458 | 						<!-- Three columns module end -->
459 | 
460 | 						<!-- Show/Hide module -->
461 | 						<tr>
462 | 							<td>
463 | 								<table class="mobilehide" align="center" border="0" cellpadding="0" cellspacing="0" style="">
464 | 									<tr>
465 | 										<td class="" align="center" style="">
466 | 											<img src="" width="600" height="" alt="" style="display: block; min-width: 100%;">
467 | 										</td>
468 | 									</tr>
469 | 								</table>
470 | 								<!--[if !mso]><!-->
471 | 								<table class="mobileshow" align="center" border="0" cellpadding="0" cellspacing="0" style="display: none; width: 0; height: 0; overflow: hidden; visibility: hidden; border: none;">
472 | 									<tr>
473 | 										<td class="" align="center" style="">
474 | 											<img src="" width="600" height="" alt="" style="display: block; min-width: 100%;">
475 | 										</td>
476 | 									</tr>
477 | 								</table>
478 | 								<!--<![endif]-->
479 | 							</td>
480 | 						</tr>
481 | 						<!-- Show/Hide module end -->
482 | 
483 | 						<!-- CAN-SPAM text module -->
484 | 						<tr>
485 | 							<td class="" align="center" style="padding: 0px 0px 0px; ">
486 | 								[ View in browser link ]
487 | 								<br><br>                                
488 |                                 [ Unsubscribe block ]
489 | 							</td>
490 | 						</tr>
491 | 						<!-- CAN-SPAM text module end -->
492 | 
493 | 					</table>
494 | 					<!-- Content table, width: 600px end -->
495 | 
496 | 				</td>
497 | 			</tr>
498 | 		</table>
499 | 		<!-- Wrapper table, width: 100% end -->
500 | 
501 | 	</body>
502 | </html>


--------------------------------------------------------------------------------
/husk-example-email.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-US" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  3 | 	<head>
  4 | 		<title>From Name | Subject Line</title>
  5 | 		<meta property="og:title" content="From Name | Subject Line">
  6 | 		<meta name="description" content="Same as Preheader Text">
  7 | 		<meta property="og:description" content="Same as Preheader Text">
  8 | 		<!-- Absolute path to HTML file (optional) -->
  9 | 		<meta property="og:url" content="">
 10 | 		<!-- Facebook: absolute path of image to be used upon share (optional) -->
 11 | 		<meta property="og:image" content="">
 12 | 		<!-- Facebook: use 600px x 315px image for best results (optional) -->
 13 | 		<meta property="og:image:width" content="600">
 14 | 		<meta property="og:image:height" content="315">
 15 | 		<meta property="og:type" content="website">
 16 | 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 17 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 18 | 		<!-- Windows Phone 8 fix: enable media queries  -->
 19 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 20 | 		<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
 21 | 		<!-- iOS 11 fix: prevent it from automatically scaling the email -->
 22 | 		<meta name="x-apple-disable-message-reformatting">
 23 | 
 24 | 		<style type="text/css">
 25 | 
 26 | 			/* Google Font start */
 27 | 			/* Source: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/ */
 28 | 			@font-face {
 29 | 				font-family: 'Kalam';
 30 | 				font-style: normal;
 31 | 				font-weight: 400;
 32 | 				src: local('Kalam'), local('Kalam-Regular'), url(https://fonts.gstatic.com/s/kalam/v9/YA9dr0Wd4kDdMthROCc.woff2) format('woff2');
 33 | 			}
 34 | 			/* Google Font end */
 35 | 
 36 | 			body {
 37 | 				margin: 0;
 38 | 				padding: 0;
 39 | 				text-rendering: optimizeLegibility;
 40 |                 -ms-text-size-adjust: 100%;
 41 |                 -webkit-text-size-adjust: 100%;
 42 | 				-moz-osx-font-smoothing: grayscale;
 43 | 				-webkit-font-smoothing: antialiased;
 44 | 			}
 45 | 
 46 | 			table {
 47 | 				border-spacing: 0;
 48 | 				mso-table-lspace: 0pt;
 49 | 				mso-table-rspace: 0pt;
 50 | 			}
 51 | 
 52 | 			/* Outlook 2007, 2010, and Gmail fix: <td> padding */
 53 | 			table td {
 54 | 				border-collapse: collapse;
 55 | 			}
 56 | 
 57 | 			div {
 58 | 				-webkit-box-sizing: border-box;
 59 | 				-moz-box-sizing: border-box;
 60 | 				box-sizing: border-box;
 61 | 			}
 62 | 
 63 | 			img {
 64 | 				max-width: 100%;
 65 | 				height: auto;
 66 | 				border: 0;
 67 | 				-ms-interpolation-mode: bicubic;
 68 | 			}
 69 | 
 70 |             /* Gmail fix: hide download image icon */
 71 |             img.g-img + div {
 72 |                 display: none;
 73 |             }
 74 | 
 75 | 			p {
 76 | 				margin: 0;
 77 | 				padding: 0;
 78 | 				margin-bottom: 0;
 79 | 			}
 80 | 
 81 | 			.button:hover {
 82 | 				border: 1px solid #D81C71 !important;
 83 | 				background-color: #ffffff !important;
 84 | 				box-shadow: 0 8px 10px -6px rgba(0,0,0,0.60);
 85 | 				transition: background 250ms;
 86 | 			}
 87 | 
 88 | 			.button:hover a {
 89 | 				color: #D81C71 !important;
 90 | 				transition: color 250ms;
 91 | 			}
 92 | 
 93 | 			/* Outlook.com fix: display at full width */			
 94 | 			.ReadMsgBody,
 95 | 			.ExternalClass {
 96 | 				width: 100%;
 97 | 			}
 98 | 
 99 | 			/* Outlook.com fix: use normal line spacing */
100 | 			.ExternalClass,
101 | 			.ExternalClass p,
102 | 			.ExternalClass span,
103 | 			.ExternalClass font,
104 | 			.ExternalClass td,
105 | 			.ExternalClass div {
106 | 				line-height: 100%;
107 |                 mso-line-height-rule: exactly;
108 | 			}
109 | 
110 | 			/* Yahoo Mail fix: suppress underlined links */
111 | 			.yshortcuts a {
112 | 				border-bottom: none !important;
113 | 			}
114 | 
115 | 			/* iOS, Samsung Mail fix: suppress links added to time/date phrases by wrapping the phrase in <span class="calendar"></span> */
116 | 			span.calendar a {
117 | 				color: inherit !important;
118 | 				text-decoration: none !important;
119 | 				font-size: inherit !important;
120 | 				font-family: inherit !important;
121 | 				font-weight: inherit !important;
122 | 				line-height: inherit !important;
123 | 			}
124 | 
125 | 			.column {
126 | 				padding: 18px 12px;
127 | 			}
128 | 
129 | 			.mobileshow {
130 | 				display: none;
131 | 			}
132 | 
133 | 			@media screen and (max-width: 620px) {
134 | 				.container {
135 | 					width: 100% !important;
136 | 					max-width: 620px !important;
137 | 				}
138 | 			}
139 | 
140 | 			@media screen and (max-width: 599px) {
141 | 
142 | 				.full-width,
143 | 				.container,
144 | 				.column {
145 | 					width: 100% !important;
146 | 					max-width: 100% !important;
147 | 				}
148 | 
149 |                 .no-padding {
150 |                     padding: 0 !important;
151 |                 }
152 | 
153 |                 .no-vertical-padding {
154 |                     padding-top: 0 !important;
155 |                     padding-bottom: 0 !important;
156 |                 }
157 | 
158 |                 .no-horizontal-padding {
159 |                     padding-right: 0 !important;
160 |                     padding-left: 0 !important;
161 |                 }
162 | 
163 |                 .center {
164 |                     text-align: center !important;
165 |                 }
166 | 
167 |                 .center img,
168 |                 .center a img {
169 |                     margin-right: auto !important;
170 |                     margin-left: auto !important;
171 |                 }
172 | 
173 | 				.float-image-right {
174 | 					float: right;
175 | 					max-width: 40% !important;
176 | 					height: auto !important;
177 | 					margin-left: 12px;
178 | 				}
179 | 
180 | 				.float-image-left {
181 | 					float: left;
182 | 					max-width: 40% !important;
183 | 					height: auto !important;
184 | 					margin-right: 12px;
185 | 				}
186 | 
187 | 				.subtitle {
188 | 					margin-top: 0 !important;
189 | 				}
190 | 
191 | 				.mobilehide {
192 | 					display: none !important;
193 | 					width: 0 !important;
194 | 					height: 0 !important;
195 | 					overflow: hidden !important;
196 | 					visibility: hidden !important;
197 | 					border: none !important;
198 | 				}
199 | 				
200 | 				.mobileshow {
201 | 					display: table !important;
202 | 					width: auto !important;
203 | 					height: auto !important;
204 | 					overflow: visible !important;
205 | 					visibility: visible !important;
206 | 					border:none !important;
207 | 				}
208 | 
209 | 			}
210 | 
211 | 			@media screen and (max-width: 400px) {
212 | 
213 |                 
214 | 
215 | 			}
216 | 
217 | 			/* Android fix: centering */
218 | 			div[style*="margin: 16px 0;"] {
219 | 				margin: 0 !important;
220 | 			}
221 | 
222 | 		</style>
223 |         <!--[if gte mso 9]>
224 |             <xml>
225 |                 <o:OfficeDocumentSettings>
226 |                 <o:AllowPNG/>
227 |                 <o:PixelsPerInch>96</o:PixelsPerInch>
228 |                 </o:OfficeDocumentSettings>
229 |             </xml>
230 |         <![endif]-->
231 | 	</head>
232 | 
233 | 	<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" style="font-family: Arial, Helvetica, sans-serif; color: #3B343E; background-color: #f0efef;">
234 | 		
235 | 		<!-- Preheader text -->
236 | 		<div style="display: none; max-height: 0; overflow: hidden;">
237 | 			Please edit this text
238 | 		</div>
239 | 		<!-- Do not edit the div below, it hides other text from showing in preheader using &zwnj;&nbsp; -->
240 | 		<div style="display: none; max-height: 0; overflow: hidden;">
241 | 			&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
242 | 		</div>
243 | 		<!-- Preheader text end -->
244 | 		
245 | 		<!-- Wrapper table, width: 100% -->
246 | 		<table class="" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
247 | 	  		<tr>
248 | 				<td class="" align="center" valign="top" style="">
249 | 
250 | 		  			<!-- Content table, width: 600px -->
251 | 					<table class="container" align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px; margin: 0 auto; background-color: #ffffff;">
252 | 
253 | 						<!-- Logo module -->
254 | 						<tr>
255 | 							<td class="" align="center" style="padding: 25px 20px;">
256 | 								<a href="https://github.com/anseltaft/husk" target="_blank">
257 | 									<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/logo.png" width="250" height="84" alt="Husk" style="display: block; margin: 0 auto; border: 0;">
258 | 								</a>
259 | 							</td>
260 | 						</tr>
261 | 						<!-- Logo module end -->
262 | 
263 | 						<!-- Hero image module -->
264 | 						<tr>
265 | 							<td class="" align="center" style="">
266 | 								<a href="https://github.com/anseltaft/husk" target="_blank">
267 | 									<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/hero.jpg" width="600" height="360" alt="What? A swallow carrying a coconut?" style="display: block; min-width: 100%; border: 0;">
268 | 								</a>
269 | 							</td>
270 | 						</tr>
271 | 						<!-- Hero image module end -->
272 | 
273 | 						<!-- Google Font module -->
274 | 						<!-- Source: https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/ -->
275 | 						<!--[if mso]>
276 | 							<style type="text/css">
277 | 								.fallback-font-stack {
278 | 									font-family: 'Brush Script MT', cursive;
279 | 								}
280 | 							</style>
281 | 						<![endif]-->
282 | 						<tr>
283 | 							<td class="" align="left" style="padding: 20px 20px 40px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.75; mso-line-height-rule: exactly;">
284 | 								<span class="fallback-font-stack center" style="font-family: 'Kalam', 'Brush Script MT', cursive; color: #D81C71; font-size: 48px; font-weight: bold; line-height: 1.5; mso-line-height-rule: exactly; text-shadow: 0px 0px 0px rgba(0,0,0,0.25);">Whoa there!</span><br>
285 | 								<span style="font-weight: bold;">Soldier: </span>Halt! Who goes there?<br>
286 | 								<span style="font-weight: bold;">Arthur: </span>It is I, Arthur, son of Uther Pendragon, from the castle of Camelot. King of all Britons, defeator of the Saxons, sovereign of all England!<br>
287 | 								<span style="font-weight: bold;">Soldier: </span>Get away!<br>
288 | 								<span style="font-weight: bold;">Arthur: </span>I am...  And this my trusty servant, Patsy. We have ridden the length and breadth of the land in search of knights who will join our court at Camelot... I must speak with your lord and master.<br>
289 | 								<span style="font-weight: bold;">Soldier: </span>What? Ridden on a horse?<br>
290 | 								<span style="font-weight: bold;">Arthur: </span>Yes!<br>
291 | 								<span style="font-weight: bold;">Soldier: </span>You're using coconuts!<br>
292 | 								<span style="font-weight: bold;">Arthur: </span>...What?<br>
293 | 								<span style="font-weight: bold;">Soldier: </span>You've got two empty halves of coconuts and you're banging them together.
294 |                           </td>
295 | 						</tr>
296 | 						<!-- Google Font module end -->
297 | 
298 | 						<!-- Divider module -->
299 | 						<tr>
300 | 							<td class="" align="center" style="">
301 | 								<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/divider01.jpg" width="600" height="250" alt="" style="display: block; min-width: 100%;">
302 | 							</td>
303 | 						</tr>
304 | 						<!-- Divider module end -->
305 | 
306 | 						<!--Button module -->
307 |                         <tr>
308 | 							<td class="" align="center" style="padding: 40px 20px; background-color: #ffffff;">
309 | 								<table class="" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
310 | 									<tr>
311 | 										<td class="" align="center" style="">
312 | 											<table class="" align="center" border="0" cellspacing="0" cellpadding="0" style="">
313 | 												<tr>
314 | 													<td class="button" align="center" style="padding: 12px 24px; background-color: #D81C71; border: 1px solid #ffffff; border-radius: 0px;"><a href="https://github.com/anseltaft/husk" target="_blank" style="display: block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 18px; text-transform: uppercase; text-decoration: none; border-radius: 0px;">Just a flesh wound!</a></td>
315 | 												</tr>
316 | 											</table>
317 | 										</td>
318 | 									</tr>
319 | 								</table>
320 | 							</td>
321 | 						</tr>
322 | 						<!--Button module end -->
323 | 
324 | 						<!-- Divider module -->
325 | 						<tr>
326 | 							<td class="" align="center" style="">
327 | 								<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/divider02.jpg" width="600" height="250" alt="" style="display: block; min-width: 100%;">
328 | 							</td>
329 | 						</tr>
330 | 						<!-- Divider module end -->
331 | 
332 | 						<!-- Two columns module -->
333 | 						<tr>
334 | 							<td class="" align="center" style="padding: 12px 24px; background-color: #efe7db;">
335 | 
336 | 								<!-- The columns are wrapped in a <table> with a fixed width of 264px. 264px = (600 - 24*3) / 2 - container width minus margins divided by number of columns. First table is aligned left. Second table is aligned right. -->
337 | 
338 | 								<!--[if mso]>
339 | 									<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
340 |   										<tr>
341 |   											<td valign="top" style="width: 50%;">
342 |   								<![endif]-->
343 | 
344 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 264px;">
345 | 									<tr>
346 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
347 | 										<td class="column" align="left" valign="top" style="width: 100%; font-family: Arial, Helvetica, sans-serif;">
348 | 											<span style="color: #D81C71; font-size: 16px; font-weight: bold;">Two Columns Example:<br>Left column</span>
349 | 											<br><br>
350 | 											Benchmark thinking outside the box prairie dogging root-and-branch review. We've got to manage that low hanging fruit game plan, or race without a finish line can we take this offline, but out of scope.
351 | 										</td>
352 | 									</tr>
353 | 								</table>
354 | 
355 | 								<!--[if mso]>
356 | 											</td>
357 | 											<td valign="top" style="width: 50%;">
358 | 								<![endif]-->
359 | 
360 |     							<table class="full-width" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 264px; font-family: Arial, Helvetica, sans-serif;">
361 | 									<tr>
362 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
363 | 										<td class="column" align="left" valign="top" style="width: 100%;">
364 | 										  <span style="color: #D81C71; font-size: 16px; font-weight: bold;">Two Columns Example:<br>
365 | 											Right column</span>
366 | 											<br><br>
367 | 											Can we take this offline cross functional teams enable out of the box brainstorming, or strategic fit pig in a python strategic fit race without a finish line, nor one-sheet.
368 | 										</td>
369 | 									</tr>
370 | 								</table>
371 | 
372 | 								<!--[if mso]>
373 | 											</td>
374 | 										</tr>
375 | 									</table>
376 | 								<![endif]-->
377 | 
378 | 							</td>
379 | 						</tr>
380 | 						<!-- Two columns module end -->
381 | 
382 | 						<!-- Three columns module -->
383 | 						<tr>
384 |     						<td class="" style="padding: 20px 12px 30px;">
385 | 
386 | 								<!-- The three nested columns (192px each) are surrounded by a wrapper table of 576px. -->
387 | 
388 | 								<!--[if mso]>
389 | 									<table border="0" cellpadding="0" cellspacing="0" style="width: 576px;">
390 | 										<tr>
391 | 											<td valign="top" style="width: 192px;">
392 | 								<![endif]-->
393 | 
394 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
395 | 									<tr>
396 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
397 | 										<td class="column" valign="top" style="width: 100%;">
398 | 											<table class="float-image-right" border="0" cellpadding="0" cellspacing="0" style="">
399 | 												<tr>
400 | 													<td class="" style="padding-bottom: 12px;"><img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/knights01.jpg" width="168" height="168" alt="Sir Lancelot the Brave"></td>
401 | 												</tr>
402 | 											</table>
403 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
404 | 												<tr>
405 | 													<td class="subtitle" style="padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #D81C71;">Sir Lancelot the Brave</td>
406 | 												</tr>
407 | 											</table>
408 | 											<div class="" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align: left; color: #333333;">
409 | 												"She turned me into a newt!"
410 | 												<br><br>
411 | 												...
412 | 												<br><br>
413 | 												"Red!... I mean blue!" [falls down the crevice screaming]</div>
414 | 										</td>
415 | 									</tr>
416 | 								</table>
417 | 
418 | 								<!--[if mso]>
419 | 											</td>
420 | 											<td valign="top" style="width: 192px;">
421 | 								<![endif]-->
422 | 
423 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
424 | 									<tr>
425 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
426 | 										<td class="column" valign="top" style="width: 100%;">
427 | 											<table class="float-image-left" border="0" cellpadding="0" cellspacing="0" style="">
428 | 												<tr>
429 | 													<td class="" style="padding-bottom: 12px;"><img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/knights02.jpg" width="168" height="168" alt="Sir Robin the Not-Quite-So-Brave as Sir Lancelot"></td>
430 | 												</tr>
431 | 											</table>
432 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
433 | 												<tr>
434 | 													<td class="subtitle" style="padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #D81C71;">Sir Robin the Not-Quite-So-Brave as Sir Lancelot</td>
435 | 												</tr>
436 | 											</table>
437 | 											<div class="" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: italic; text-align: left; color: #333333;">
438 | 												Bravely bold Sir Robin rode forth from Camelot He was not afraid to die, o' brave Sir Robin! He was not at all afraid to be killed in nasty ways, Brave, brave, brave, brave Sir Robin! He was not at not in the least bit scared to be mashed into a pulp Or to have his eyes gouged out, Or his elbows broken; To have his kneecaps split And his body burned away, Or his limbs all hacked and mangled, Brave Sir Robin! His head smashed in, his heart cut out, His liver removed, and his bowels unplugged, His nostrils raped, and his bottom burned off, And his manhood split...
439 | 												<br><br>
440 | 												<span style="font-style: normal;">"Stop! That's enough singing for now."</span></div>
441 | 										</td>
442 | 									</tr>
443 | 								</table>
444 | 
445 | 								<!--[if mso]>
446 | 											</td>
447 | 											<td valign="top" style="width: 192px;">
448 | 								<![endif]-->
449 | 
450 | 								<table class="full-width" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 33.3%;">
451 | 									<tr>
452 | 										<!-- The column style below must stay as width: 100%; to expand properly in mobile viewports < 600px -->
453 | 										<td class="column" valign="top" style="width: 100%;">
454 | 											<table class="float-image-right" border="0" cellpadding="0" cellspacing="0" style="">
455 | 												<tr>
456 | 													<td class="" style="padding-bottom: 12px;"><img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/knights03.jpg" width="168" height="168" alt="Sir Bedevere the Wise"></td>
457 | 												</tr>
458 | 											</table>
459 | 											<table class="" border="0" cellpadding="0" cellspacing="0" style="">
460 | 												<tr>
461 | 													<td class="subtitle" style="padding-bottom: 12px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #D81C71;">Sir Bedevere the Wise</td>
462 | 												</tr>
463 | 											</table>
464 | 											<div class="" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align: left; color: #333333;">
465 | 												"How do you know so much about swallows?"
466 | 												<br><br>
467 | 												...
468 | 												<br><br>
469 | 												"Well now, uh, Launcelot, Galahad, and I, wait until nightfall, and then leap out of the rabbit, taking the French by surprise - not only by surprise, but totally unarmed!"</div>
470 | 										</td>
471 | 									</tr>
472 | 								</table>
473 | 
474 | 								<!--[if mso]>
475 | 											</td>
476 | 										</tr>
477 | 									</table>
478 | 								<![endif]-->
479 | 
480 | 							</td>
481 | 						</tr>
482 | 						<!-- Three columns module end -->
483 | 
484 | 						<!-- Show/Hide module -->
485 | 						<tr>
486 | 							<td>
487 | 								<table class="mobilehide" align="center" border="0" cellpadding="0" cellspacing="0" style="">
488 | 									<tr>
489 | 										<td class="" align="center" style="">
490 | 											<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/divider03.jpg" width="600" height="250" alt="" style="display: block; min-width: 100%;">
491 | 										</td>
492 | 									</tr>
493 | 								</table>
494 | 								<!--[if !mso]><!-->
495 | 								<table class="mobileshow" align="center" border="0" cellpadding="0" cellspacing="0" style="display: none; width: 0; height: 0; overflow: hidden; visibility: hidden; border: none;">
496 | 									<tr>
497 | 										<td class="" align="center" style="">
498 | 											<img src="https://raw.githubusercontent.com/anseltaft/husk/master/images/divider04.jpg" width="600" height="250" alt="" style="display: block; min-width: 100%;">
499 | 										</td>
500 | 									</tr>
501 | 								</table>
502 | 								<!--<![endif]-->
503 | 							</td>
504 | 						</tr>
505 | 						<!-- Show/Hide module end -->
506 | 
507 | 						<!-- CAN-SPAM text module -->
508 | 						<tr>
509 | 							<td class="" align="center" style="padding: 100px 20px 30px; font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; background-color: #3B343E;">
510 | 								[ View in browser link ]
511 | 								<br><br>                                
512 |                                 [ Unsubscribe block ]
513 | 							</td>
514 | 						</tr>
515 | 						<!-- CAN-SPAM text module end -->
516 | 
517 | 					</table>
518 | 					<!-- Content table, width: 600px end -->
519 | 
520 | 				</td>
521 | 			</tr>
522 | 		</table>
523 | 		<!-- Wrapper table, width: 100% end -->
524 | 
525 | 	</body>
526 | </html>


--------------------------------------------------------------------------------