123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en" xml:lang="en">
<head>
	
	<script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "Organization",
        "name": "ActionRocket",
        // If showing a logo, we recommend using an https URL.
        // It's not a requirement today, but may be in the future.
        "logo": "https://arcdn.net/ActionRocket/emailweekly/cdn/misc-https://arcdn.net/ActionRocket/emailweekly/AR-christmas-email/images/gmail-logo.png"
      },{
        "@context": "http://schema.org/",
        "@type": "EmailMessage",
        // Alternative subject line, coming soon.
        "subjectLine": "EmailWeekly #205: 'Tis the season...For CSS snow"
      },{
        // Promotion card with single image.
        // We recommend using an https URL.  It's not a requirement today, but may be in the future.
        // Any image size will work and will just be cropped automatically.
        // GIF & WEBP images are not supported and will be filtered out.
        // Sample image is 538x138, 3.9 aspect ratio
        "@context": "http://schema.org/",
        "@type": "PromotionCard",
        "image": "https://arcdn.net/ActionRocket/emailweekly/cdn/misc-https://arcdn.net/ActionRocket/emailweekly/AR-christmas-email/images/gmail-preview2.png"
      }]
    </script>
	
	
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-35940396-16"></script>
	<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments)};gtag('js', new Date());gtag('config','UA-35940396-16');</script>
	<title>AR Presents...</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="x-apple-disable-message-reformatting" />
	<meta name="robots" content="noindex,nofollow" />
	
	<!--[if gte mso 9]><xml>
		<o:OfficeDocumentSettings>
		<o:AllowPNG/>
		<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml><![endif]-->
	
	<style type="text/css">
		.hide, input {display:none!important;max-height:0;line-height:0;height:0;overflow:hidden;mso-hide:all;mso-line-hight-rule:exact; visibility: hidden;}
		@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
			table, .fluid {width: 100%!important;}
			.w-100 {width:100%!important; height:auto!important;}
			.w-90 {width:90%!important; height:auto!important;}
			.w-80 {width:80%!important; height:auto!important;}
			.w-70 {width:70%!important; height:auto!important;}
			.w-60 {width:60%!important; height:auto!important;}
			.w-50 {width:50%!important; height:auto!important;}
			.w-40 {width:50%!important; height:auto!important;}
			.w-30 {width:50%!important; height:auto!important;}
			.w-20 {width:50%!important; height:auto!important;}
			.w-10 {width:50%!important; height:auto!important;}
			.pd-t {padding:5% 0 0 0!important; height:auto!important;}
			.pd-b {padding:0 0 5% 0!important; height:auto!important;}
			.pd-tb {padding:5% 0 5% 0!important; height:auto!important;}
			.pd-all {padding:5% 5% 5% 5%!important; height:auto!important;}
		}
	</style>
	
	
	<style type="text/css">
		/********* ESP CLASSES *********/
		div, p, a, li, td		{-webkit-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-font-smoothing:antialiased!important;}
		body						{min-width:100%!important; Margin:0 auto!important; padding:0; background-color:#000000; font-size: 10px;}
		#outlook a				{padding:0;}
		.ReadMsgBody			{width:100%;}
		.ExternalClass			{width:100%;}
		.ExternalClass *		{line-height:110%;}
		table td 				{padding:0; border-collapse:collapse;}
		img						{display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; }
		/************* COPY STYLES *************/
		h1, h2 {
			font-family: 'Open Sans light', Helvetica, arial, serif;
			font-weight: 900;
			line-height: 120%;
			color: #ffffff; 
			margin: 0;
			text-decoration: none;
		}
		a {
			line-height: 120%;
			color: inherit; 
			margin: 0;
			text-decoration: none;
		}
		h1 {
			font-size: 24px;
			padding:5px 5px;
		}
		h2 {
			font-size: 20px;
			vertical-align: middle;
		}
		h2:hover {
			color: #ffffff;
			vertical-align: middle;
			background-color: #e00f41;
		}
		a:hover {
			color: #ffffff;
			vertical-align: middle;
			background-color: #e00f41;
		}
		p {
			font-family: 'Open Sans', Helvetica, arial, serif;
			font-size: 16px;
			line-height: 120%;
			color: #ffffff;
			font-style: italic;
			margin: 0;
		}
		/************* ALIGNMENT STYLES *************/
		.pd-t 	{padding:7px 0 0 0!important; height:auto!important;}
		.pd-b		{padding:0 0 7px 0!important; height:auto!important;}
		.pd-tb	{padding:7px 0 7px 0!important; height:auto!important;}x
		.pd-all	{padding:7px 7px 7px 7px!important; height:auto!important;}
		/************* COLOUR STYLES *************/
		.white {color:#ffffff;}
		.black {color:#000000;}
		/********* AUTO LINK CLASSES *********/
		a[x-apple-data-detectors] {
			color:inherit!important; 
			text-decoration:none!important; 
			font-size:inherit!important; 
			font-family:inherit!important; 
			font-weight:inherit!important; 
			line-height:inherit!important;
		}
		a[href^='tel'], a[href^='sms'], a[href^='mailto'] {
			/*color:inherit!important;*/
			cursor:default!important;
			/*text-decoration:none!important;*/
		}
		.loads {
			 background-image: 
			 url(http://i1.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/bkg-scene-0_0.jpg),
			 url(http://i2.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/bkg-scene-1_1.jpg);
		}
	</style>
	
	
	<style type="text/css">
	/*fonts*/
	@media screen {  
		/* open sans import */
		@font-face {
		font-family: 'Open Sans light';
		font-style: normal;
		font-weight: 300;
		src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
		}
		@font-face {
		font-family: 'Open Sans';
		font-style: normal;
		font-weight: 400;
		src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
		}
		@font-face {
		font-family: 'Open Sans semibold';
		font-style: normal;
		font-weight: 600;
		src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
		}
		@font-face {
		font-family: 'Open Sans bold';
		font-style: normal;
		font-weight: 700;
		src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
		}
	}
	</style>
	
	<style type="text/css">
		
	.sc{display:none;}
	@supports (animation:game){
		#interactive:checked ~ .wrapper [class].fallback{
			display:none;
		}
		#interactive:checked ~ .wrapper .game{
			display:block !important;
			max-height:none !important;
		}
	}
	#day0:checked ~ * .day0,
	#day1:checked ~ * .day1, #day1b:checked ~ * .day1,
	#day2:checked ~ * .day2, #day2b:checked ~ * .day2,
	#day3:checked ~ * .day3, #day3b:checked ~ * .day3,
	#day4:checked ~ * .day4, #day4b:checked ~ * .day4,
	#day5:checked ~ * .day5, #day5b:checked ~ * .day5,
	#day6:checked ~ * .day6, #day6b:checked ~ * .day6,
	#day7:checked ~ * .day7, #day7b:checked ~ * .day7,
	#day8:checked ~ * .day8, #day8b:checked ~ * .day8,
	#day9:checked ~ * .day9, #day9b:checked ~ * .day9,
	#day10:checked ~ * .day10, #day10b:checked ~ * .day10,
	#day11:checked ~ * .day11, #day11b:checked ~ * .day11,
	#day12:checked ~ * .day12, #day12b:checked ~ * .day12,
	#day13:checked ~ * .day13, #day13b:checked ~ * .day13
	{
		display: block;
		-webkit-animation: fade-in 1s linear forwards;
		-webkit-animation-iteration-count: 1;
	}
	/* Sub scs */
	#day1:checked ~ * #ct-1b, 
	#day1b:checked ~ * #ct-1a,
	#day2:checked ~ * #ct-2b, 
	#day2b:checked ~ * #ct-2a,
	#day3:checked ~ * #ct-3b, 
	#day3b:checked ~ * #ct-3a, 
	#day4:checked ~ * #ct-4b, 
	#day4b:checked ~ * #ct-4a,
	#day5:checked ~ * #ct-5b, 
	#day5b:checked ~ * #ct-5a,
	#day6:checked ~ * #ct-6b, 
	#day6b:checked ~ * #ct-6a, 
	#day7:checked ~ * #ct-7b, 
	#day7b:checked ~ * #ct-7a,
	#day8:checked ~ * #ct-8b, 
	#day8b:checked ~ * #ct-8a,
	#day9:checked ~ * #ct-9b, 
	#day9b:checked ~ * #ct-9a,
	#day10:checked ~ * #ct-10b, 
	#day10b:checked ~ * #ct-10a,
	#day11:checked ~ * #ct-11b, 
	#day11b:checked ~ * #ct-11a,
	#day12:checked ~ * #ct-12b, 
	#day12b:checked ~ * #ct-12a,
	#day13:checked ~ * #ct-13b, 
	#day13b:checked ~ * #ct-13a
	{ 
		display: none; 
	}
	#day1b:checked ~ * #ct-1b,
	#day2b:checked ~ * #ct-2b,
	#day3b:checked ~ * #ct-3b,
	#day4b:checked ~ * #ct-4b,
	#day5b:checked ~ * #ct-5b,
	#day6b:checked ~ * #ct-6b,
	#day7b:checked ~ * #ct-7b,
	#day8b:checked ~ * #ct-8b,
	#day9b:checked ~ * #ct-9b,
	#day10b:checked ~ * #ct-10b,
	#day11b:checked ~ * #ct-11b,
	#day12b:checked ~ * #ct-12b { 
		display: block;
		-webkit-animation: fade-in 1s;
		-webkit-animation-iteration-count: 1 linear forwards;
	}
	.fade-2nd-line{
		opacity: 0;
		animation: fade-text .5s forwards;
		animation-delay: 0.5s;
		font-weight: 700;
		margin-bottom: 1em;
	}
	.bg-sc {
		width: 60em;
		
		position: relative;
		overflow: hidden;
	}
	.ui {
		padding: 0px 3em 2em 3em;
		width: 54em;
	}
	.panel {
		background: #ed6062;
		width: 53em;
	}
	.cont {
		width: 90%;
		padding: 5%;
	}
	@keyframes fade-text {
		0% {display: block!important; opacity: 0; transition: translateY(-20px)}
		100% {display: block!important; opacity: 1; transition: translateY(0px)}
	}
	@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
		
		.bg-sc {
			width: 100vw!important;
			height: 70vw!important;
			position: relative;
		}
		.bg-0, .bg-1, .bg-2, .bg-3, .bg-4, .bg-5, .bg-6, .bg-7, .bg-8{background-size: cover;}
		
		.ground {
			width: 100vw!important;
			height: 4.2vw;
		}
		.ui {
			width: 96vw!important;
			padding: 0vw 2vw 4vw 2vw;		
		}
		.panel {
			width: 90vw!important;
			height: auto;
		}
		.nomob {
	display: none!important;
	width: 0px!important;
	height: 0px!important;
}
	}
	</style>
	
</head>
<body class="body" bgcolor="#CC0232" style="font-size: 10px; image-rendering: pixelated; background-color: #CC0232">
	<div style="display: none; max-height: 0px; overflow: hidden;">
		Merry Christmas from the team at Action Rocket...
	</div>
	<div style="display: none; max-height: 0px; overflow: hidden;">
		&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;
		&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;
		&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;
		&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;
		&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;
		&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;
	</div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" bgcolor="#CC0232" style="table-layout: fixed; background: #CC0232; ">
		<tr>
			<td style="font-size:0px;">&nbsp;</td>
			<td class="fluid" align="center" width="800">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
					<tr>
						<td align="center">
							<img class="w-100" src="http://i3.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/lights2_2.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
						</td>
					</tr>
					<tr>
						<td align="center" style="padding: 0 10px;">
							<table width="300" border="0" cellspacing="0" cellpadding="0" role="presentation" style=" transform: rotate(-5deg);">
								<tr>
									<td style="font-family: 'Open Sans light', Helvetica, Arial, sans-serif; text-align: left; color:#ffffff; font-size: 22px; font-style: italic; padding-bottom: 10px;	">
										The 12 days of
									</td>
								</tr>
								<tr>
									<td>
										<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
											<tr>
												<td width="30"></td>
												<td width="240" bgcolor="#ffffff" style="font-family: 'Open Sans bold', Helvetica, Arial, sans-serif; padding: 5px; color: #e00f41; text-align: center; font-size: 40px; font-style: italic; font-weight: 900; ">EMAILGEEK</td>
												<td width="30"></td>
											</tr>
										</table>
									</td>
								</tr>
								<tr>
									<td style="font-family: 'Open Sans light', Helvetica, Arial, sans-serif; text-align: right; color:#ffffff; font-size: 22px; font-style: italic; padding-top: 5px;">
										Christmas
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<!--[if mso]><!-->
				<input class="hide" type="radio" id="interactive" checked="checked" >
				<!--<![endif]-->
				<div class="wrapper">
					
					<div class="fallback">
							<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
							<tr>
								<td align="center">
									<table width="800" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="width:800px;" class="w-100">
										
										<tr>
											<td align="center">
												<img class="w-100" src="http://i4.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/fallback-img-3_3.png" width="600" alt="Fairy Lights." border="0" style="display:block; width: 600px;"/>
											</td>
										</tr>
									</table>
									<table width="800" style="width:800px;" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
										<tr>
											<td align="center" bgcolor="#e00f41" background="http://i5.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/fallback-bg-lrg-2_4.jpg" width="600" height="200" valign="top" style="background: url('http://i5.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/fallback-bg-lrg-2_4.jpg') center / cover no-repeat #e00f41;">
													<!--[if gte mso 9]>
													<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width: 600pt; height: 150pt;" src="http://i5.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/fallback-bg-lrg-2_4.jpg" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block;position: absolute; width: 600pt; height:150pt;">
													<v:fill opacity="0%" color="#e00f41" /> 
													<v:textbox inset="0,0,0,0"> 
													<![endif]-->
												<div>
												<div style="font-size: 0;">
													<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
														<tr>
															<td align="center">
																<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
																	<tr>
																		<td align="center">
																			<table width="490" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" style="width:490px;">
																				<tr>
																					<td align="center" width="490" style="background: #ed6062; padding:10px 10px; font-family: 'Open Sans light', Helvetica, arial, serif; font-size: 16px; line-height: 20px; color: #ffffff; font-style: italic; width:490px;">
																						12 Email Geeks Celebrating, The 11th hour sending,<br class="nomob">
 
																						10 Stages of sign off, 9 Last minute changes, 8 Outlook issues,<br class="nomob">
 
																						7 Hours coding, 6 GIF's to export, 5 rounds of amends, <br class="nomob">
																						4 Copy changes, 3 Design concepts, 2 Wireframes &<br class="nomob">
 
																						an email brief for all to see<br>
<br>
																						We hope you have a very Merry Christmas and <br class="nomob">
a Happy New Year!<br>
																						From, The ActionRocket Team.
																					</td>
																				</tr>				
																			</table>
																		</td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</div>
												</div>
													<!--[if gte mso 9]> 
													</v:textbox>
													</v:fill>
													</v:rect>
													</v:image>
													<![endif]-->
											</td>
										</tr>
									</table>
									<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
										<tr>
											<td align="center">
												<table width="480" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" class="w-100">
													<tr>
														<td align="center" width="100%" bgcolor="" style="padding: 10px;">
															<table width="400" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation" bgcolor="#ffffff">
																<tr>
																	<td align="center" style="background: #ffffff; padding:7px 7px 7px 7px;">
																		<a href="/t/ViewEmail/j/2BD709092819C0A52540EF23F30FEDED/6432A9DAA9590042F99AA49ED5AF8B9E" style="color:#333333; text-decoration: none;">
																			<p><span style="color: #ed6062;">Check out the 12 #emailgeeks days of Christmas</span></p>
																		</a>
																	</td>
																</tr>
															</table>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
						</table>
					</div>
					
					
					
					<!--[if mso]><!-->
					<div class="game" style="display:none;max-height:0;overflow:hidden;mso-hide:all;">
						<input class="hide" type="radio" name="sc" id="day0" checked="checked"/>
						<input class="hide" type="radio" name="sc" id="day1" />
						<input class="hide" type="radio" name="sc" id="day1b" />
						<input class="hide" type="radio" name="sc" id="day2" />
						<input class="hide" type="radio" name="sc" id="day2b" />
						<input class="hide" type="radio" name="sc" id="day3" />
						<input class="hide" type="radio" name="sc" id="day3b" />
						<input class="hide" type="radio" name="sc" id="day4" />
						<input class="hide" type="radio" name="sc" id="day4b" />
						<input class="hide" type="radio" name="sc" id="day5"  />
						<input class="hide" type="radio" name="sc" id="day5b" />
						<input class="hide" type="radio" name="sc" id="day6"/>
						<input class="hide" type="radio" name="sc" id="day6b" />
						<input class="hide" type="radio" name="sc" id="day7" />
						<input class="hide" type="radio" name="sc" id="day7b" />
						<input class="hide" type="radio" name="sc" id="day8" />
						<input class="hide" type="radio" name="sc" id="day8b" />
						<input class="hide" type="radio" name="sc" id="day9" />
						<input class="hide" type="radio" name="sc" id="day9b" />
						<input class="hide" type="radio" name="sc" id="day10" />
						<input class="hide" type="radio" name="sc" id="day10b" />
						<input class="hide" type="radio" name="sc" id="day11" />
						<input class="hide" type="radio" name="sc" id="day11b" />
						<input class="hide" type="radio" name="sc" id="day12" />
						<input class="hide" type="radio" name="sc" id="day12b" />
						<input class="hide" type="radio" name="sc" id="day13" />
						<input class="hide" type="radio" name="sc" id="day13b" />
					
						<div class="loads hide" style="width: 0px; height: 0px; max-height: 0;"></div>
						
						<div>
							<!-- Opening Sequence -->
							<div class="sc day0">
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i6.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/ar-scene-0-1_5.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div class="sc-0-ui">
											
												<p style="padding: 0 0 20px 0;">Merry Christmas #emailgeek!</p>
												<label for="day1"><h2 class="pd-tb">Begin story</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- Opening Sequence END -->
							
							<!-- day-1 -->
							<div class="sc day1" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i7.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene1-600_6.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-1a">
												<p class="pd-b">
													On the 1st day of Christmas my campaign manager gave to me:<br />
												</p>
												<p class="pd-b fade-2nd-line" >
													An email brief for all to see
												</p>
												<label for="day2"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-1 END -->	
							
							<!-- day-2 -->
							<div class="sc day2" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i8.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene2-600_7.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-2a">
												<p class="pd-b">
													On the 2nd day of Christmas my campaign manager gave to me:<br />
												</p>
												<p class="pd-b fade-2nd-line" >
													2 Wireframes and an email brief for all to see
												</p>
												<label for="day3"><h2 class="pd-tb">NEXT</h2></label>
											
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-2 END -->
							<!-- day-3 -->
							<div class="sc day3" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i9.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene3-600_8.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-3a">
												<p class="pd-b">
												On the 3rd day of Christmas my campaign manager gave to me:
												</p>
												<p class="pd-b fade-2nd-line" >
													3 Design concepts, 2 Wireframes <br />
													and an email brief for all to see
												</p>
												<label for="day4"><h2 class="pd-tb">NEXT</h2></label>
											
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-3 END -->
							<!-- day-4 -->
							<div class="sc day4" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i10.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene4-600_9.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">										
											<!-- sc-4a -->
											<div id="ct-4a">
												<p class="pd-b">
													On the 4th day of Christmas my campaign manager gave to me:
												</p>
												<p class="pd-b fade-2nd-line" >
													4 Copy changes, 3 Design concepts, <br />
													2 Wireframes and an email brief for all to see
												</p>
												<label for="day5"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-4 END -->
							<!-- day-5 -->
							<div class="sc day5" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i1.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene5-600_10.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">	
											<div id="ct-5a">
												<p class="pd-b">
													On the 5th day of Christmas my campaign manager gave to me:
												</p>
												<p class="pd-b fade-2nd-line" >
													5 rounds of amends, 4 Copy changes, 3 Design concepts,<br />
													2 Wireframes and an email brief for all to see
												</p>
												<label for="day6"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>	
									</div>
								</div>
							</div>
							<!-- day-5 END -->
							<!-- day-6 -->
							<div class="sc day6" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i2.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene6-600_11.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-6a">
												<p class="pd-b">
													On the 6th day of Christmas my campaign manager gave to me: 
												</p>
												<p class="pd-b fade-2nd-line" >
													6 GIF's to export, 5 rounds of amends,<br />
 
													4 Copy changes, 3 Design concepts, 2 Wireframes<br />
													and an email brief for all to see
												</p>
												<label for="day7"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-6 END -->
							<!-- day-7 -->
							<div class="sc day7">
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i3.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene7-600_12.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-7a">
												<p class="pd-b">
													On the 7th day of Christmas my campaign manager gave to me:
												</p>
												<p class="pd-b fade-2nd-line" >
													7 Hours coding,<br />
 
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see
												</p>
												<label for="day8"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-7 END -->
							<!-- day-8 -->
							<div class="sc day8" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i4.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene8-600_13.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-8a">
												<p class="pd-b">
													On the 8th day of Christmas my campaign manager gave to me:
												</p>
												
												<p class="pd-b fade-2nd-line" >
													8 Outlook issues,<br />
 
													7 Hours coding,<br />
 
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see
												</p>
												<label for="day9"><h2 class="pd-tb">NEXT</h2></label>
											</div>
						
										</div>
									</div>
								</div>
							</div>
							<!-- day-8 END -->
							<!-- day-9 -->
							<div class="sc day9" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i5.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene9-600_14.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-9a">
												<p class="pd-b">
													On the 9th day of Christmas my campaign manager gave to me:
												</p>
												
												<p class="pd-b fade-2nd-line" >
													9 Last minute changes,<br />
													8 Outlook issues,<br />
 
													7 Hours coding,<br />
 
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see
												</p>
												<label for="day10"><h2 class="pd-tb">NEXT</h2></label>
											</div>
											
										</div>
									</div>
								</div>
							</div>
							<!-- day-9 END -->
							<!-- day-10 -->
							<div class="sc day10" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i6.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene10-600_15.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-10a">
												<p class="pd-b">
													On the 10th day of Christmas my campaign manager gave to me:
												</p>
												
													<p class="pd-b fade-2nd-line" >
													10 Stages of sign off,<br />
													9 Last minute changes,<br />
													8 Outlook issues,<br />
													7 Hours coding,<br />
 
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see	
												</p>
												<label for="day11"><h2 class="pd-tb">NEXT</h2></label>
											</div>
											
										</div>
									</div>
								</div>
							</div>
							<!-- day-10 END -->
							<!-- day-11 -->
							<div class="sc day11" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i7.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene11-600_16.gif" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-11a">
												<p class="pd-b">
													On the 11th day of Christmas my campaign manager gave to me:
												</p>
												
												<p class="pd-b fade-2nd-line" >
													The 11th hour sending,<br />
													10 Stages of sign off,<br />
													9 Last minute changes,<br />
													8 Outlook issues,<br />
													7 Hours coding,<br />
 
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see
												</p>
													<label for="day12"><h2 class="pd-tb">NEXT</h2></label>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-11 END -->
							<!-- day-12 -->
							<div class="sc day12" >
								
								<div class="bg-sc" align="center">
									<img class="w-100" src="http://i8.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/scene12-600_17.png" alt="Action Rocket" width="600" style="width:600px; display: block" />
								</div>
								
								<div class="ui">
									
									<div class="panel" align="center">
										<div class="cont" align="center">
											<div id="ct-12a">
												<p class="pd-b">
													On the 12th day of Christmas my campaign manager gave to me: 
												</p>
												
												<p class="pd-b fade-2nd-line" >
													12 Email Geeks Celebrating,<br />
													The 11th hour sending,<br />
													10 Stages of sign off,<br />
													9 Last minute changes,<br />
													8 Outlook issues,<br />
													7 Hours coding,<br />
  
													6 GIF's to export,<br />
													5 rounds of amends,<br />
													4 Copy changes,<br />
													3 Design concepts,<br />
													2 Wireframes<br />
													and an email brief for all to see
												</p>
												<label for="day12b"><h2 class="pd-tb">Next</h2></label>
											</div>
									
											<div id="ct-12b">
												<p class="pd-b">Warm wishes this Festive period!<br />
 
												We hope you have a very Merry Christmas and a Happy New Year!<br />
												From, The ActionRocket Team.
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- day-12 END -->
						</div>
						
					</div>
					<!--<![endif]-->
				</div>
			</td>
			<td style="font-size:0px;">&nbsp;</td>
		</tr>
	</table>
	
	<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" bgcolor="#2d2d2d" style="table-layout: fixed;">
		<tr>
			<td style="font-size:0px;">&nbsp;</td>
			<td class="pd-all fluid" align="center" width="800" style="padding:20px;">
				<footer>
					<div class="footer">
						<p>Made with ♥ using <a href="http://taxiforemail.com/">Taxi for Email</a></p>
						<p>
							<small>You have received this email because you signed up at <a href="http://www.emaildesignreview.com/">Email Design Review</a> or <a href="http://emailweekly.co/">EmailWeekly.co</a>. 
								We try out new bits of code in this email, so it may break from time to time. Think of it as a permanent beta. 
								If you don't want these emails any more, please unsubscribe below. Have a nice day.
							</small>
						</p>
						<address>
							<p>
								<small>
									ActionRocket 209 Clerkenwell Workshops, 27/31 Clerkenwell Close, Farringdon, London, EC1R 0AT. UK
								</small>
							</p>
						</address>
						<p>
							<small>&copy; 2011-2018 Action Rocket Ltd. All Rights Reserved.
								Registered in England and Wales, № 07783258. VAT № 130667819.
							</small>
						</p>
						<p>
							<small>
								<a href="http://emailweekly.co/">Subscribe</a> &#x2022; <a href="http://actionrocket.co/contact/">Contact Us</a> &#x2022; <a href="http://actionrocket.co/privacy/">Privacy Policy</a> &#x2022; 
								<a href="#">Unsubscribe</a>
							</small>
						</p>
					</div>
				</footer>
				
				<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" role="presentation">
					<tr>
						<td align="center" style="padding: 5px;">
							<a href="http://www.emaildesignreview.com/" style="text-decoration: none;"><img src="http://i9.cmail20.com/ei/j/ED/3FB/9B2/023953/csimport/logo-ar-white_18.png" alt="Action Rocket" width="100" style="width:100px; display: block" /></a>
						</td>
					</tr>
				</table>
			</td>
			<td style="font-size:0px;">&nbsp;</td>
		</tr>
	</table>

  </body>
</html>



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console