ice-watch/Apogee email holiday 2016

In this example below you will see how to do a ice-watch/Apogee email holiday 2016 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andrewck, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andrewck ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ice-watch/Apogee email holiday 2016</title>
  
  
  
  
  
</head>

<body>

  <!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">
<head>
    <meta charset="utf-8"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->

    <!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
    
    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
        <style>
            * {
                font-family: sans-serif !important;
            }
        </style>
    <![endif]-->
    
    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
    <!--<![endif]-->

    <!-- Web Font / @font-face : END -->
    
    <!-- CSS Reset -->
    <style type="text/css">

        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }
        
        /* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        
        /* What is does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }
        
        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
                
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto; 
        }
        
        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }
        
        /* What it does: A work-around for iOS meddling in triggered links. */
        .mobile-link--footer a,
        a[x-apple-data-detectors] {
            color:inherit !important;
            text-decoration: underline !important;
        }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }
      
    </style>
    
    <!-- Progressive Enhancements -->
    <style type="text/css">
        
        /* What it does: Hover styles for buttons */
        .button-td,
        .button-a {
            transition: all 100ms ease-in;
        }
        .button-td:hover,
        .button-a:hover {
            background: #9c7c52 !important;
            border-color: #9c7c52 !important;
        }

        /* Media Queries */
        @media screen and (max-width: 600px) {

            .email-container {
                width: 100% !important;
                margin: auto !important;
            }

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid {
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
        
            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }
			
			    /* Stacked Top Links Navigation Pattern CSS */
    @media only screen and (max-width: 400px) {
        td[class="main_nav"] {
            padding: 10px 0;
        }
        td[class="main_nav"] td {
            display: block;
            float: left;
            padding: 0 !important;
            width: 50%;
        }
        td[class="main_nav"] a {
            display: block;
            padding: 20px 0;
            background: #eee;
        }
        td[class="main_nav"] .nav1 a,
        td[class="main_nav"] .nav2 a {
            border-bottom: 1px solid #999;
        }
        td[class="main_nav"] .nav1 a,
        td[class="main_nav"] .nav3 a {
            border-right: 1px solid #999;
        }
    }
			
				/* Image Surround Layout Pattern CSS */
	@media only screen and (max-width: 599px) {
        td[class="pattern"] img {
            width: 100%;
            height: auto !important;
        }
        td[class="pattern"] img.cta {
            width: auto;
        }
        td[class="pattern"] table,
        td[class="pattern"] .row {
            width: 100%;
        }
        td[class="pattern"] .img {
            display: block;
            float: left;
            width: 25%;
        }
        td[class="pattern"] .middle {
            width: 50%;
        }
	}
    @media only screen and (max-width: 550px) {
        td[class="pattern"] .headline { font-size: 26px !important; }
    }
    @media only screen and (max-width: 460px) {
        td[class="pattern"] .row2 { padding: 40px 0; }
        td[class="pattern"] .headline { font-size: 42px !important; }
        td[class="pattern"] .body_copy { font-size: 16px !important; }
        td[class="pattern"] .hide { display: none; }
        td[class="pattern"] .img {
            width: 50%;
        }
        td[class="pattern"] .img img {
            width: 100%;
        }
    }
                
        }

    </style>

</head>
<body bgcolor="#ffffff" width="100%" style="margin: 0;">
    <center style="width: 100%; background: #ffffff;">

        <!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
            Save 75% off BMW Watches. Perfect for the die heart BMW fan. Save 75% Off Apogee Audio Accessories for the hardcore musician
        </div>
        <!-- Visually Hidden Preheader Text : END -->

        <!-- Email Header : BEGIN -->
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
            <tr>
                <td style="padding: 20px 0; text-align: left" class="stack-column-center">
                   <a href="https://activeinternational.com/">
					   <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/3cd1ded3-8a04-4fd1-855f-e9e69670a274.png" width="200" height="50" alt="Active International" border="0" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #343434;"></a>
                </td>
                <td style="padding: 20px 0; text-align: right" class="stack-column-center">
                   <a href="https://activefriendsandfamily.com/">
					   <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/357559c7-e75f-43b1-a570-4ec7bc9be469.png" width="200" height="50" alt="Active Friends & Family" border="0" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #343434;"></a>
                </td>

            </tr>
            <tr>
            <td>

				</td>
			</tr>
        </table>
        <!-- Email Header : END -->
        
        <!-- Email Body : BEGIN -->
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="margin: auto;" class="email-container">
            
            <!-- Hero Image, Flush : BEGIN -->
            <tr>
                <td bgcolor="#ffffff">
                   <a href="https://activefriendsandfamily.com/account/login?checkout_url=/collections/ice-watch-apogee">
					   <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/d6feeeb9-7f7c-4f0e-b029-7c0bf0dacc04.jpg" width="600" height="600" alt="75% Off All BMW Ice-Watch & Apogee Professional Audio  Accessories" border="0" align="center" class="fluid" style="width: 100%; max-width: 600px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;"></a>
                </td>
            </tr>
            <!-- Hero Image, Flush : END -->

            <!-- 1 Column Text : BEGIN -->
            <tr>
                <td bgcolor="#ffffff" style="padding: 40px; text-align: center; font-family: sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 24px; color: #000000;">
                                        <!-- Button : Begin -->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
                        <tr>
                            <td style="border-radius: 3px; background: #c39b67; text-align: center;" class="button-td">
                                <a href="https://activefriendsandfamily.com/account/login?checkout_url=/collections/ice-watch-apogee" style="background: #c39b67; border: 15px solid #c39b67; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
                                        <span style="color:#ffffff;">Shop Now</span>    
                                </a>
                            </td>
                        </tr>
                    </table>
                    <!-- Button : END --><br>
75% Off All BMW Ice-Watches & Apogee Professional Audio Accessories* <br>
					<span style="font-size: 12px;">*Cannot be applied to previous purchases</span>
          <br>
           </td>
            </tr>
            <!-- 1 Column Text : BEGIN -->

            <!-- Background Image with Text : BEGIN -->
            <tr>
                <td>
                    <div>
                        <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td>
                                <table cellpadding="0" cellspacing="0">
										<tr>
											<td class="pattern" width="600" bgcolor="#ffffff">
												<table cellpadding="0" cellspacing="0">
													<tr>
														<td class="row row1">
															<table cellpadding="0" cellspacing="0">
																<tr>
																	<td class="img hide"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/8b14e148-20fb-4eda-bf64-932a7bd8254a.png" alt="Lands End" style="display: block; border: 0;"></td>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/2ef22494-3855-4f12-9f5e-be0cec7b22a2.png" alt="beats" style="display: block; border: 0;"></td>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/d92da436-dd21-453b-8fcb-f03cf027e19e.png" alt="itunes" style="display: block; border: 0;"></td>
																	<td class="img hide"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/339db127-5c5e-4dfa-a38c-8fc0cebdf059.png" alt="TGI FRIDAYS" style="display: block; border: 0;"></td>
																</tr>
															</table>
														</td>
													</tr>
													<tr>
														<td class="row row2">
															<table cellpadding="0" cellspacing="0">
																<tr>
																	<td class="hide">
																		<table cellpadding="0" cellspacing="0">
																			<tr>
																				<td><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/df06eb0c-8bee-4f8c-acf5-6c865a94e9a6.png" alt="Ice Watch" style="display: block; border: 0;"></td>
																			</tr>
																			<tr>
																				<td><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/391b6b32-0324-4673-86de-6f15c0e005f7.png" alt="Tommie Copper" style="display: block; border: 0;"></td>
																			</tr>
																		</table>
																	</td>
																	<td class="middle" width="300" align="center" valign="middle">
																		<table cellpadding="0" cellspacing="0">
																			<tr>
																				<td class="headline" align="center" style="font-family: arial,sans-serif; line-height:44px; font-size: 36px; font-weight: bold; text-transform: uppercase; color: #333; padding: 10 20px;">Active's
																			    Holiday Countdown to Savings</td>
																			</tr>
																			<tr>
																				<td class="body_copy" align="center" style="font-family: arial,sans-serif; line-height:18px; font-size: 14px; color: #666; padding: 10px 20px;"> Check back for Limited Time Offers on Top Brands!</td>
																			</tr>
																			<tr>
																				<td align="center" style="padding: 10px;">
																					<!-- Button : Begin -->
																					<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
																						<tr>
																							<td style="border-radius: 3px; background: #c39b67; text-align: center;" class="button-td">
																								<a href="https://activefriendsandfamily.com/account/login?checkout_url=/collections/fitbit" style="background: #c39b67; border: 15px solid #c39b67; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
																									    <span style="color:#ffffff;">Shop Now</span>    
																								</a>
																							</td>
																						</tr>
																					</table>
																					<!-- Button : END -->
																				</td>
																			</tr>
																		</table>
																	</td>
																	<td class="hide">
																		<table cellpadding="0" cellspacing="0">
																			<tr>
																				<td><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/dc2db8d9-1e22-4b19-a650-337103aa2fe2.png" alt="Apogee" style="display: block; border: 0;"></td>
																			</tr>
																			<tr>
																				<td><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/65431648-ac67-4e02-a729-8756152c922c.png" alt="Aeropostale" style="display: block; border: 0;"></td>
																			</tr>
																		</table>
																	</td>
																</tr>
															</table>
														</td>
													</tr>
													<tr>
														<td class="row row3">
															<table cellpadding="0" cellspacing="0">
																<tr>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/34799692-a2ab-4975-bd87-2cd0bc35214a.png" alt="gopro" style="display: block; border: 0;"></td>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/b8ebd7f0-33f2-40e1-b3c4-2c39a9da016d.png" alt="fitbit" style="display: block; border: 0;"></td>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/79f4c822-c040-4529-bd35-29f83c4f4c13.png" alt="mizuno" style="display: block; border: 0;"></td>
																	<td class="img"><img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/3c8df628-f03b-40bc-8028-29ce6108aae3.png" alt="iHome" style="display: block; border: 0;"></td>
																</tr>
															</table>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>

                                </td>
                            </tr>
                        </table>
                        </div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
                </td>
            </tr>
            <!-- Background Image with Text : END -->
           
            <!-- 2 Even Columns : BEGIN -->
            <tr>
                <td bgcolor="#ffffff" align="center" valign="top" style="padding: 10px;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <!-- Column : BEGIN -->
                            <td class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td style="padding: 10px; text-align: center">
                                            <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/03ee9e05-bc72-464c-b64d-beedb97ca197.jpg" width="270" height="270" alt="Sign Up and Get Access to Exclusive Deals" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                                <!-- Button : Begin -->
												<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
													<tr>
														<td style="border-radius: 3px; background: #c39b67; text-align: center;" class="button-td">
															<a href="https://activefriendsandfamily.com/account/register" style="background: #c39b67; border: 15px solid #c39b67; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
																    <span style="color:#ffffff;">Sign Up</span>    
															</a>
														</td>
													</tr>
												</table>
												<!-- Button : END -->
 
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <!-- Column : END -->
                            <!-- Column : BEGIN -->
                            <td class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td style="padding: 10px; text-align: center">
                                            <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/d6f8d319-4a2e-460b-919c-b682dca3d622.jpg" width="270" height="270" alt="Save 20-80% on Top Products, Travel and Entertainment" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
											<!-- Button : Begin -->
											<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto">
												<tr>
													<td style="border-radius: 3px; background: #c39b67; text-align: center;" class="button-td">
														<a href="https://activefriendsandfamily.com/pages/about-us" style="background: #c39b67; border: 15px solid #c39b67; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
															    <span style="color:#ffffff;">Learn More</span>    
														</a>
													</td>
												</tr>
											</table>
											<!-- Button : END -->

                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <!-- Column : END -->
                        </tr>
                    </table>
                </td>
            </tr>
            <!-- 2 Even Columns : END -->

            <!-- 3 Even Columns : BEGIN -->
            <tr>
                <td bgcolor="#ffffff" align="center" valign="top" style="padding: 10px;">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <!-- Column : BEGIN -->
                            <td width="33.33%" class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td style="padding: 10px; text-align: center">
                                           <a href="https://activefriendsandfamily.com/">
											   <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/82ab8a53-e0c2-4d07-997d-fa2a15a04a1d.png" width="170" height="100" alt="www.Activefriendsandfamily.com" border="0" class="fluid" style="height: auto; background: #fffff; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #121212; display: block;"></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <!-- Column : END -->
                            <!-- Column : BEGIN -->
                            <td width="33.33%" class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;" class="center-on-narrow">
                                               Powered by    
                                        </td>                                 
                                   </tr>
                                </table>
                            </td>
                            <!-- Column : END -->
                            <!-- Column : BEGIN -->
                            <td width="33.33%" class="stack-column-center">
                                <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                    <tr>
                                        <td style="padding: 10px; text-align: center">
                                           <a href="https://activeinternational.com/">
											   <img src="https://gallery.mailchimp.com/75f4f9e1872db383fcfc6ab1b/images/8625a78a-8239-498a-b7eb-0ff3d60be336.png" width="170" height="100" alt="www.activeinternational.com" border="0" class="fluid" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; display: block;"></a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <!-- Column : END -->
                        </tr>
                    </table>
                </td>
            </tr>
            <!-- 3 Even Columns : END -->
            

            <!-- Clear Spacer : BEGIN -->
            <tr>
                <td height="40" style="font-size: 0; line-height: 0;"> 
                    
                </td>
            </tr>
            <!-- Clear Spacer : END -->

            <!-- 1 Column Text + Button : BEGIN -->
            <tr>
                <td bgcolor="#ffffff">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                    	<tr>
                            <td style="padding: 40px; font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; text-align:center;">
                                Offer subject to eligibility, while availability lasts, additional terms and conditions may apply.
                                <br> <br>
                                Offer cannot be applied to previous purchases
                                <br> <br>
								*Offer available through Active Friends and Family, savings made available through application of a trading program and is not available to the general public.
								<br> <br>
								You’re receiving this email because you or your employer is affiliated with Active International.
                           		<br> <br>
                            </td>
							</tr>
                    </table>
                </td>
            </tr>
            <!-- 1 Column Text + Button : BEGIN -->

        </table>
        <!-- Email Body : END -->
          
    </center>
            <center>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
                    <tr>
                        <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
                            <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
                                <tr>
                                    <td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
                                        This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;">*|EMAIL|*</a>
                                        <br>
                                        <a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>    <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a>    <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
                                        <br>
                                        *|LIST:ADDRESSLINE|*
                                        <br>
                                        <br>
                                        
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <style type="text/css">
                    @media only screen and (max-width: 480px){
                        table#canspamBar td{font-size:14px !important;}
                        table#canspamBar td a{display:block !important; margin-top:10px !important;}
                    }
                </style>
            </center></body>
</html>
  
  

</body>

</html>

Comments