JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,900" rel="stylesheet">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse:collapse;}
</style>
<![endif]-->
<style type="text/css">
/* Basics */
body {
margin:0 !important;
padding:0;
background-color:#000000;
}
table {
border-spacing:0;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
margin:0;
padding:0;
border:none;
}
td {
padding:0;
}
img {
border:0;
display:block;
-ms-interpolation-mode:bicubic;
outline:none;
}
div[style*="margin:16px 0"] {
margin:0 !important;
}
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;
}
.ReadMsgBody {
width:100%;
}
.ExternalClass {
mso-line-height-rule:exactly;
line-height:100%;
width:100%;
}
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
#cta_01:hover {
background-color:#B20710 !important;
transition:0.2s;
}
.animation_text_01 {
animation:opacity_01 5s infinite;
}
.animation_text_02 {
animation:opacity_02 5s infinite;
}
.animation_text_03 {
animation:opacity_03 5s infinite;
}
.animation_text_04 {
animation:opacity_04 5s infinite;
}
@keyframes opacity_01 {
0% {
opacity:1;
}
50% {
opacity:0.9;
}
100% {
opacity:1;
}
}
@keyframes opacity_02 {
0% {
opacity:1;
}
30% {
opacity:0.9;
}
70% {
opacity:1;
}
}
@keyframes opacity_03 {
20% {
opacity:1;
}
80% {
opacity:0.9;
}
100% {
opacity:1;
}
}
@keyframes opacity_04 {
69% {
opacity:1;
}
70% {
opacity:0;
}
71% {
opacity:1;
}
89% {
opacity:1;
}
90% {
opacity:0.5;
}
91% {
opacity:1;
}
92% {
opacity:1;
}
93% {
opacity:0;
}
94% {
opacity:1;
}
}
.animation_cover_01 {
animation:move_01 120s;
}
@keyframes move_01 {
0% {
padding-top:0;
}
1% {
padding-top:0;
}
10% {
padding-top:280px;
}
4% {
opacity:1;
}
4.1% {
opacity:0.5;
}
4.2% {
opacity:1;
}
4.3% {
opacity:0;
}
4.4% {
opacity:1;
}
6% {
opacity:1;
}
6.1% {
opacity:0.5;
}
6.2% {
opacity:1;
}
6.3% {
opacity:0;
}
6.4% {
opacity:1;
}
8% {
opacity:1;
}
8.1% {
opacity:0.2;
}
8.2% {
opacity:1;
}
8.3% {
opacity:0.5;
}
8.4% {
opacity:1;
}
11% {
opacity:1;
}
11.1% {
opacity:0.5;
}
11.2% {
opacity:1;
}
11.3% {
opacity:0;
}
11.4% {
opacity:1;
}
14% {
opacity:1;
}
14.1% {
opacity:0;
}
100% {
padding-top:280px;
opacity:0;
}
}
.animation_cover_02 {
animation:move_02 120s;
}
@keyframes move_02 {
0% {
opacity:1;
}
100% {
opacity:1;
}
}
@media only screen and (max-width:500px) {
html, body, th {
-webkit-text-size-adjust:none;
}
div[class="body"] .fontsize24px {
font-size:24px !important;
}
div[class="body"] .lineheight28px {
line-height:28px !important;
}
div[class="body"] .fontsize60px {
font-size:60px !important;
}
div[class="body"] .lineheight60px {
line-height:60px !important;
}
div[class="body"] .fontsize17px {
font-size:17px !important;
}
div[class="body"] .lineheight21px {
line-height:21px !important;
}
}
@media only screen and (max-width:400px) {
html, body, th {
-webkit-text-size-adjust:none;
}
div[class="body"] .fontsize24px {
font-size:20px !important;
}
div[class="body"] .lineheight28px {
line-height:24px !important;
}
div[class="body"] .fontsize60px {
font-size:50px !important;
}
div[class="body"] .lineheight60px {
line-height:50px !important;
}
div[class="body"] .fontsize17px {
font-size:13px !important;
}
div[class="body"] .lineheight21px {
line-height:17px !important;
}
}
[style*="Roboto"] {
font-family: 'Roboto', Arial, sans-serif !important
}
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]><xml xmlns:w="urn:schemas-microsoft-com:office:word"><w:WordDocument><w:AutoHyphenation/></w:WordDocument></xml><![endif]-->
</head>
<body bgcolor="#000000" style="margin:0px; padding:0px; background-color:#000000;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="width:100%; padding:0px; margin:0px;" bgcolor="#000000"><div class="body">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="center" style="text-align:center;"><center style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0 auto;">
<div style="max-width:500px; margin:0 auto;">
<table align="center" cellpadding="0" cellspacing="0" border="0" style="max-width:500px; width:100%; margin:0px auto;">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table cellpadding="0" cellspacing="0" border="0" width="500" style="width:500px; margin:0px auto;" align="center"><tr><td align="center"><![endif]-->
<div style="width:100%;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
<tr>
<td align="center" style="padding:40px 0 10px;"><a href="#toreplace" target="_blank"><img src="http://test.badsender.com/images_hebergees_tests/netflix/20181024_email_01/netflix.png" alt="NETFLIX" width="150" height="40" border="0" style="display:block; margin:0px auto; color:#E50912; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:20px;" title="NETFLIX" /></a></td>
</tr>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:12px; text-align:center; font-weight:500; mso-line-height-rule:exactly; line-height:16px; padding-bottom:20px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">A NETFLIX ORIGINAL SERIES</a></td>
</tr>
<tr>
<td align="center"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
<tr>
<td style="line-height:1px; font-size:1px; width:30px;" width="30"> </td>
<td align="center" height="560" style="height:560px; vertical-align:top;" valign="top"><div style="width:260px; height:560px;">
<div style="max-height:0; max-width:260px; overflow:visible;">
<div style="width:260px; height:560px; display:inline-block; text-align:center;"><a href="#toreplace" target="_blank"><img src="http://test.badsender.com/images_hebergees_tests/netflix/20181024_email_01/cover_desktop.jpg" alt="The Haunting of Hill House" title="The Haunting of Hill House" width="260" height="280" border="0" class="animation_cover_01" style="margin:0px auto; font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:18px;" /></a></div>
</div>
<div style="max-height:0; max-width:260px; overflow:visible;">
<div style="width:260px;height:280px;display:inline-block;text-align:center; background-color:#000000;" class="animation_cover_02"></div>
</div>
</div></td>
<td style="line-height:1px; font-size:1px; width:20px;" width="20"> </td>
<td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIxMTkxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMTE5MTMiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(33,25,19,0) 0%, rgba(33,25,19,1) 50%, rgba(33,25,19,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,25,19,0)), color-stop(50%,rgba(33,25,19,1)), color-stop(100%,rgba(33,25,19,0)));
background: -webkit-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -o-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: -ms-linear-gradient(top, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
background: linear-gradient(to bottom, rgba(33,25,19,0) 0%,rgba(33,25,19,1) 50%,rgba(33,25,19,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00211913', endColorstr='#00211913',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5"> </td>
<td style="line-height:1px; font-size:1px; width:20px;" width="20"> </td>
<td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzA5MDQwYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwOTA0MGIiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(9,4,11,0) 0%, rgba(9,4,11,1) 50%, rgba(9,4,11,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,4,11,0)), color-stop(50%,rgba(9,4,11,1)), color-stop(100%,rgba(9,4,11,0)));
background: -webkit-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -o-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: -ms-linear-gradient(top, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
background: linear-gradient(to bottom, rgba(9,4,11,0) 0%,rgba(9,4,11,1) 50%,rgba(9,4,11,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0009040b', endColorstr='#0009040b',GradientType=0 ); width:5px; line-height:1px; font-size:1px;" width="5"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:19px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:23px; padding-top:30px;" class="fontsize17px lineheight21px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">TH<span class="animation_text_01">E</span></a></td>
</tr>
<tr>
<td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:70px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:70px;" class="fontsize60px lineheight60px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">H<span class="animation_text_04">A</span>U<span class="animation_text_01">N</span>TI<span class="animation_text_02">N</span>G</a></td>
</tr>
<tr>
<td align="center"><table border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;">
<tr>
<td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
<tr>
<td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1"> </td>
</tr>
</table></td>
<td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15"> </td>
<td align="center" style="font-family:'Times New Roman', Times, serif; color:#FFFFFF; font-size:30px; text-align:center; letter-spacing:10px; mso-line-height-rule:exactly; line-height:34px;" class="fontsize24px lineheight28px"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">O<span class="animation_text_03">F</span> <span class="animation_text_04">H</span>IL<span class="animation_text_02">L</span> HOUS<span class="animation_text_01">E</span></a></td>
<td style="width:15px; line-height:1px; font-size:1px; vertical-align:middle;" valign="middle" width="15"> </td>
<td valign="middle" style="vertical-align:middle;"><table width="40" border="0" cellspacing="0" cellpadding="0" style="width:40px;">
<tr>
<td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:900; padding-top:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">ALL EPISODES</a></td>
</tr>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; text-align:center; mso-line-height-rule:exactly; line-height:22px; font-weight:500; padding-bottom:30px;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">October 31<sup style="font-size:12px; line-height:0; vertical-align:6px;">st</sup></a></td>
</tr>
<tr>
<td align="center" style="padding-bottom:60px;"><div style="margin:0px auto;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" target="_blank" href="http://#toreplace" style="height:50px;v-text-anchor:middle;width:160px;" arcsize="10%" strokecolor="#E50912" fillcolor="#E50912">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;">PLAY TRAILER</center>
</v:roundrect>
<![endif]--><a target="_blank" href="http://#toreplace"
style="background-color:#E50912;border:1px solid #E50912;border-radius:5px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif, 'Roboto';font-size:16px;font-weight:900;line-height:50px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;mso-hide:all;" id="cta_01">PLAY TRAILER</a></div></td>
</tr>
<tr>
<td align="center" style="padding-bottom:25px;"><table border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0px auto;">
<tr>
<td valign="middle" style="font-family:Arial, Helvetica, sans-serif, 'Roboto'; color:#FFFFFF; font-size:18px; mso-line-height-rule:exactly; font-weight:500;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">View All TV Shows & Movies </a></td>
<td valign="middle" style="vertical-align:middle;"><a href="#toreplace" target="_blank"><img src="http://test.badsender.com/images_hebergees_tests/netflix/20181024_email_01/icon_01.png" alt="The Haunting of Hill House" width="27" height="27" border="0" style="display:block;" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; margin:0px auto;" align="center">
<tr>
<td style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZTZlNmUiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(110,110,110,0) 0%, rgba(110,110,110,1) 50%, rgba(110,110,110,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(110,110,110,0)), color-stop(50%,rgba(110,110,110,1)), color-stop(100%,rgba(110,110,110,0)));
background: -webkit-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -o-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: -ms-linear-gradient(left, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
background: linear-gradient(to right, rgba(110,110,110,0) 0%,rgba(110,110,110,1) 50%,rgba(110,110,110,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006e6e6e', endColorstr='#006e6e6e',GradientType=1 ); line-height:1px; font-size:1px; height:1px;" height="1"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:14px; mso-line-height-rule:exactly; line-height:18px; text-align:center; padding:30px 0 10px;">Questions? Call <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">0800-724-0697</a></td>
</tr>
<tr>
<td align="center"><table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; margin:0px auto;" align="center">
<tr>
<td align="left" style="font-family:Arial, Helvetica, sans-serif; color:#6e6e6e; font-size:12px; mso-line-height-rule:exactly; line-height:18px; text-align:left; padding:0 40px 30px;">This informational email has been sent to you as part of your Netflix membership. If you would like to stop receiving these emails, please <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">click here to unsubscribe</a>, or visit the <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Communication Settings page</a>, uncheck the <span style="font-weight:bold;">Now on Netflix</span> box, and click "Update." Please do not reply to this email, as we are unable to respond from this email address. If you need help or would like to contact us, please visit our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Help Center</a>.<br />
<br />
This message was mailed to [<a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:none;">hello@SmilesDavis.yeah</a>] by Netflix.<br />
SRC: 11893_en_DE<br />
Use of the Netflix service and website is subject to our <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Terms of Use</a> and <a href="#toreplace" target="_blank" style="color:#6e6e6e; text-decoration:underline;">Privacy Statement</a>.<br />
Netflix International B.V.</td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</div>
</center></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>
Also see: Tab Triggers