Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

              
                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 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=utf-8" />
    <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email on Acid</title>


    <!--[if gte mso 9]><xml>
    <o:officedocumentsettings>
      <o:allowpng/>
      <o:pixelsperinch>96</o:pixelsperinch>
    </o:officedocumentsettings>
  </xml><![endif]-->

  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
    table {
       border-collapse:collapse !important;
  }

  </style>
  <![endif]-->

  <style type="text/css">
@media only screen and (max-width: 650px)  {

h1 {
   font-size:40px !important;
}
}


@media only screen and (max-width: 500px)  {

h1 {
   font-size:25px !important;
}
.header {
    font-size:25px !important;
}
.bg-toggle {
   background-size:cover;
   height:auto !important;
}
.hero_content {
   height:auto !important;
   padding:10px !important;
}
.hero-image {
   width:100%!important;
}
.headerlink {
   font-size:12px !important;
}
.mobile-bump {
   padding-left:41%;
}
.hide {
   display:none;
   height:0;
   visibility:hidden;
}
.arrowPad {
   padding-left:41%!important;
}
.two-column {
  padding-left:20px;
  padding-right:20px;
}
.mobpad {
      padding:0 15px 0 15px;
    }
}
}


@media screen {

@font-face {
   font-family:'open sans';
   font-style:normal;
   font-weight:400;
   src:local('open sans'), local('opensans'), url(http://fonts.gstatic.com/s/opensans/v13/cjzkeoubrn4kerxqtauh3vtxra8tvwticgirnjhmvjw.woff2) format('woff2');
   unicode-range:u+0000-00ff, u+0131, u+0152-0153, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2212, u+2215, u+e0ff, u+effd, u+f000;
}
@font-face {
   font-family:'poppins';
   font-style:normal;
   font-weight:300;
   src:local('poppins light'), local('poppins-light'), url(https://fonts.gstatic.com/s/poppins/v1/mexwgbc1ewortbwy9ffeur3hpw3pgy2gai-ip7wpmi0.woff) format('woff');
}
}

.owaContextualHighlight span {
    border:none!important;
    color:inherit!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;
}

.colourBan a {
   color:#ffffff !important;
   text-decoration:none;
   pointer-events:none !important;
}

[style*="open sans"] {
   font-family:'open sans', calibri, sans-serif !important;
}

[style*="Poppins"] {
   font-family:'poppins', calibri, sans-serif !important;
}

p {
   -webkit-font-smoothing:antialiased;
}

td {
   -webkit-font-smoothing:antialiased;
}

span {
   -webkit-font-smoothing:antialiased;
}

h1 {
   -webkit-font-smoothing:antialiased;
}

h2 {
   -webkit-font-smoothing:antialiased;
}

h3 {
   -webkit-font-smoothing:antialiased;
}

body {
   height:100% !important;
   margin:0 !important;
   padding:0;
   width:100% !important;
   min-width:100%;
   background-color:#ffffff;
   -webkit-font-smoothing:antialiased;
}

table {
   border-spacing:0;
}

img {
   border:0;
}

.webkit {
   max-width:600px;
}

.full-width-image img {
   width:100%;
   max-width:600px;
   height:auto;
}

.appleFix a {
   color:#848484;
}

.button-td {
   text-align:center;
}

.button-a:hover {
   background:#69295b !important;
   transition:all 250ms ease-in;
}

.button-td:hover {
   background:#69295b !important;
   transition:all 250ms ease-in;
}

.icon-hover:hover {
   opacity:0.6;
   transition:all 250ms ease-in;
}

.cta-hover:hover {
   color:#0e864b !important;
   transition:all 250ms ease-in;
}

@media only screen and (max-device-width: 770px) and (min-device-width: 641px){

p {
   font-size:14px !important;
   line-height:20px !important;
}
.viewport {
   position:absolute;
   left:0;
   right:0;
}
}



</style>
  <style>
  input{
    display:none;
  }
  label{
    cursor:pointer;
  }


  @media screen and (-webkit-min-device-pixel-ratio:0),
  (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* Webkit and IE */

    .cbox:checked + .interactive
    {
      display:block !important;
      max-height: none !important;
    }
    .cbox:checked + .fallback
    {
      display:none !important;
      display:none;
      max-height: 0px;
      overflow: hidden;
    }
  }

  @-moz-document url-prefix() { 
    /* Allow for Firefox browser */
    .cbox:checked + .interactive
    {
      display:block !important;
      max-height: none !important;
    }
    .cbox:checked + .fallback
    {
      display:none !important;
      display:none;
      max-height: 0px;
      overflow: hidden;
    }
    /* Block for Thunderbird */
    .moz-text-html .cbox:checked + .interactive{
      display:none !important;
    }
    .moz-text-html .cbox:checked + .fallback{
      display:block !important;
      max-height: none;
    }
  }


  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE 10/11 doesn't like this */
    .lblcont img{
          display:none;
        }
  }
  
  .ballwrap .m8ball{
    width:410px;

    height:290px;
    margin:0 auto;
    background-image:url(https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/Magic8BallEmail_EmptyBall.png);
    background-size:cover;
    background-position:top;
    text-align:center;
    overflow:hidden;
  }
  .triangle{
    box-sizing: border-box;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    width:142px;
    height:130px;
    display:block;
    margin-top:160px;
    background-image:url(https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/Magic8BallEmail_Triangle1.png);  
    font-size:19px;
    padding-top:10px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
  }

  .triangle::before{
    white-space:pre;
    display:block;
    content:'?';
    font-size:30px;
    padding-top:20px;
  }

  input[name="rr"]:checked ~ .ballwrap .m8ball .triangle::before{
    font-size:19px;
  }

  #r1:checked ~ .ballwrap .m8ball .triangle::before,
  #r1b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'It is\A certain';
  }
  #r2:checked ~ .ballwrap .m8ball .triangle::before,
  #r2b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'It is\A decidedly\A so';
  }
  #r3:checked ~ .ballwrap .m8ball .triangle::before,
  #r3b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Reply hazy\A try\A again';
  }
  #r4:checked ~ .ballwrap .m8ball .triangle::before,
  #r4b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:"Don't\A count\A on it";
  }
  #r5:checked ~ .ballwrap .m8ball .triangle::before,
  #r5b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Without\A a\A doubt';
  }
  #r6:checked ~ .ballwrap .m8ball .triangle::before,
  #r6b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Yes\A definitely';
  }
  #r7:checked ~ .ballwrap .m8ball .triangle::before,
  #r7b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Ask\A again\A later';
  }
  #r8:checked ~ .ballwrap .m8ball .triangle::before,
  #r8b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:5px;
    content:'My reply\A is no';
  }
  #r9:checked ~ .ballwrap .m8ball .triangle::before,
  #r9b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'You\A may rely\A on it';
  }
  #r10:checked ~ .ballwrap .m8ball .triangle::before,
  #r10b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'As\A I see it,\A yes';
  }



  #r11:checked ~ .ballwrap .m8ball .triangle::before,
  #r11b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Better not\A tell you\A now';
  }
  #r12:checked ~ .ballwrap .m8ball .triangle::before,
  #r12b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Sources\A say\A no';
  }
  #r13:checked ~ .ballwrap .m8ball .triangle::before,
  #r13b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:5px;
    content:'Most\A likely';
  }
  #r14:checked ~ .ballwrap .m8ball .triangle::before,
  #r14b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:5px;
    content:'Outlook\A good';
  }
  #r15:checked ~ .ballwrap .m8ball .triangle::before,
  #r15b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Cannot\A predict\A now';
  }
  #r16:checked ~ .ballwrap .m8ball .triangle::before,
  #r16b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Outlook\A not so\A good';
  }
  #r17:checked ~ .ballwrap .m8ball .triangle::before,
  #r17b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:15px;
    content:'Yes';
  }
  #r18:checked ~ .ballwrap .m8ball .triangle::before,
  #r18b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Signs\A point to\A yes';
  }
  #r19:checked ~ .ballwrap .m8ball .triangle::before,
  #r19b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Concentrate\A and ask\A again';
  }
  #r20:checked ~ .ballwrap .m8ball .triangle::before,
  #r20b:checked ~ .ballwrap .m8ball .triangle::before
  {
    padding-top:0px;
    content:'Very\A doubtful';
  }

  input[name="rr"]:checked ~ .ballwrap .btn .rset{
    margin-top:-50px;
  }

  .ra:checked ~ .ballwrap .btn .lblcont.alt{
    margin-top:-50px;
  }

  .btn{
    display:block;
    margin:0px auto;
    font-family: Calibri, sans-serif, 'Poppins';
    font-size:18px;
    width:200px;
    height:50px;
    line-height:50px;
    background-color:#933e71;
    color:white;
    overflow:hidden;
    text-align:center;
    border-left:15px solid #69295b
  }
  .lblcont{
    width:200px;
    height:50px;
    opacity:0;
    overflow:hidden;
    margin-top:-50px;  
  }
  .lblcont.alt{
    margin-top:0px;
  }
  .lblinner{
    animation: shiftlbl 10s steps(20, end) infinite;  
  }

  .lblinner:hover{
    animation-play-state: paused;
  }
  .lblcont label{
    box-sizing: border-box;
    height:50px;
    display:block;
    position:relative;
  }
  .lblcont img{
    float:left;
    background-color:#eeeeee;
  }
  @keyframes shiftlbl {
    to {
      transform: translateY(-1000px);
    }
  }


  .ra:checked ~ .ballwrap .m8ball .triangle{
    animation: appear 3s ease-in;
  }
  .ra:checked ~ .ballwrap .m8ball{
    animation: shakeball 0.5s ease-in;
  }

  .rb:checked ~ .ballwrap .m8ball .triangle{
    animation: appear2 3s ease-in;
  }
  .rb:checked ~ .ballwrap .m8ball{
    animation: shakeball2 0.5s ease-in;
  }


  @keyframes appear{
    0%{
      opacity:0;
    }
    20%{
      opacity:0;
      filter:blur(2px);
    }
    100%{
      opacity:1;
      filter:blur(0.5px);
    }
  }

  @keyframes shakeball{
    0%{
      transform:translateX(0px);
    }
    22%{
      transform:translateX(15px);
    }
    44%{
      transform:translateX(-15px);
    }
    66%{
      transform:translateX(15px);
    }
    100%{
      transform:translateX(0px);
    }
  }

  @keyframes appear2{
    0%{
      opacity:0;
    }
    20%{
      opacity:0;
      filter:blur(2px);
    }
    100%{
      opacity:1;
      filter:blur(0.5px);
    }
  }

  @keyframes shakeball2{
    0%{
      transform:translateX(0px);
    }
    22%{
      transform:translateX(15px);
    }
    44%{
      transform:translateX(-15px);
    }
    66%{
      transform:translateX(15px);
    }
    100%{
      transform:translateX(0px);
    }
  }

.tryeoa{
  box-sizing: border-box;
  display:block;
  background-color:#eeeeee;
  color:#555555;
  margin:0 50px;
  max-height:0px;
  overflow:hidden;
  border-radius:20px;
  text-align: center;
  font-size:32px;
  font-weight:bold;
  position:relative;
}

@media only screen and (max-width: 500px)  {
  .tryeoa{
    margin-left:0;
    margin-right:0;
    font-size:28px;
  }
  .viewport{
    min-width:450px!important;
  }
  .hero_content{
    padding:0px!important;
  }
}

.tryeoa div{
  padding:45px 20px;
}

#hidedialog:not(:checked) ~ .rb:checked ~ .ballwrap{
  animation: hideballwrap 1s ease-in 3s forwards;
}
#hidedialog:not(:checked) ~ .rb:checked ~ .tryeoa{
  animation: showtryeoa 1s ease-in 4s forwards;
}

.eoabtn2{
  display:none;
}

#hidedialog:checked ~ .ballwrap .eoabtn2{
  display:block;
}


@keyframes hideballwrap{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes showtryeoa{
  0%{
    max-height:999px;
    opacity:0;
    margin-top:-380px;
    margin-bottom:50px;
  }
  100%{
    max-height:999px;
    opacity:1;
    margin-top:-380px;
    margin-bottom:50px;
  }
}

.eoabtn,.eoabtn2{
  margin-top:20px;
  margin-bottom:20px;
  text-decoration: none;
}

.eoaclose{
  color:#8888ff;
  font-size:20px;
  font-weight:normal;
}

  </style>
</head>
<body style="Margin:0;padding:0;min-width:100%;background-color:#ffffff;">
<div class="viewport">

  <div id="preview_text" style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">{% text "preview_text" label="Preview Text", value="", no_wrapper=True %}</div>

  <table class="hero_background" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width: 100%;">
    <tr>
      <td valign="top" align="center" style="background-repeat: repeat-x; background-color: #a2cd3a;" class="bg-toggle">  
      
        <!--[if (gte mso 9)|(IE)]>
        <table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;" >
          <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
            <![endif]-->
              <!-- ======= start main body ======= -->
              <table class="hero_content" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:780px;padding: 0 30px 0 30px;">
                <tr>
                  <td valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:720px;">
                      <tr>
                        <td height="100" width="33%" align="left" style="text-align:left;">
                          <a class="headerlink" style="color:#59903a; text-decoration:none; font-size:16px;line-height:16px; font-family:'Poppins', Calibri, sans-serif;" href="https://www.emailonacid.com/signup">SIGN UP FREE TODAY</a>
                        </td>
                        <td height="100" width="33%" align="center">
                          <a href="http://www.emailonacid.com" style="text-decoration: none;font-size:16px; color:#ffffff;"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/alt-splat-2.png" alt="Email on Acid" style="border:0; display:block;" /></a>
                        </td>
                        <td height="100" width="33%" align="right" style="text-align:right;">
                          <a class="headerlink" style="color:#59903a; text-decoration:none; font-size:16px;line-height:16px; font-family:'Poppins', Calibri, sans-serif;" href="{{view_as_page_url}}">VIEW ONLINE</a>
                        </td>
                      </tr>
                    </table>








                     <table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;Margin:0 auto; max-width:720px; width:100%;" class="mobpad">
                      <tr>
                        <td height="20" class="hide"></td>
                      </tr>
                      <tr>
                        <td height="20"></td>
                      </tr>
                      <tr>
                        <td align="left" class="header" style="Margin:0;color:#ffffff;font-size:30px;font-family:'Poppins', Calibri, sans-serif;font-weight:normal;line-height:normal;">
                        <center>
                          <h1 style="Margin:0;color:#ffffff;font-size:35px;font-family:'Poppins', Calibri, sans-serif;font-weight:normal;line-height:normal;">Is your email ready to send?<br>
                          <em>Are you willing to leave it to&nbsp;chance?</em></h1></center>




  <!--[if !mso]><!-- -->
  <input type=radio class="cbox" style="display:none !important" checked>
  <!--<![endif]-->
  <div class="fallback">
<BR>
  <center>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center" style="text-align:center;">
          <table border="0" cellpadding="0" cellspacing="0" style="width:200px;margin:0 auto;">
            <tr>
              <td class="button-td" align="center" bgcolor="#933e71" style="height:45px;width:200px;border-left: 15px solid #69295b;line-height:45px;">
                <a class="button-a" href="{{view_as_page_url}}" style="padding:10px;width:200px; line-height: 45px;height:45px; mso-line-height-rule:exactly;display: inline-block;text-decoration: none;text-align: center;font-weight: bold;font-size: 18px;font-family: Calibri, sans-serif, 'Poppins';color: #ffffff;background: #933e71;border:1px solid #933e71;">
                  ASK THE BALL &nbsp;
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td height="35"></td>
      </tr>
    </table>

<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/Magic8BallEmail_CroppedEmpty.png" width=400 style="display:block;max-width:100%;" alt="Magic 8 ball">

  </center>


  </div>




  <!--[if !mso]><!-- -->
  <input type=radio class="cbox" style="display:none !important" checked>
  <div class="interactive" style="display:none;max-height:0px;overflow:hidden;">

<form>

<input id="rs" type="reset" value="reset"><BR>
<input type="radio" id="hidedialog" name="hidedialog">

<input type="radio" id="r1" name="rr" class="ra">
<input type="radio" id="r2" name="rr" class="ra">
<input type="radio" id="r3" name="rr" class="ra">
<input type="radio" id="r4" name="rr" class="ra">
<input type="radio" id="r5" name="rr" class="ra">
<input type="radio" id="r6" name="rr" class="ra">
<input type="radio" id="r7" name="rr" class="ra">
<input type="radio" id="r8" name="rr" class="ra">
<input type="radio" id="r9" name="rr" class="ra">
<input type="radio" id="r10" name="rr" class="ra">
<input type="radio" id="r11" name="rr" class="ra">
<input type="radio" id="r12" name="rr" class="ra">
<input type="radio" id="r13" name="rr" class="ra">
<input type="radio" id="r14" name="rr" class="ra">
<input type="radio" id="r15" name="rr" class="ra">
<input type="radio" id="r16" name="rr" class="ra">
<input type="radio" id="r17" name="rr" class="ra">
<input type="radio" id="r18" name="rr" class="ra">
<input type="radio" id="r19" name="rr" class="ra">
<input type="radio" id="r20" name="rr" class="ra">
<BR>
<input type="radio" id="r1b" name="rr" class="rb">
<input type="radio" id="r2b" name="rr" class="rb">
<input type="radio" id="r3b" name="rr" class="rb">
<input type="radio" id="r4b" name="rr" class="rb">
<input type="radio" id="r5b" name="rr" class="rb">
<input type="radio" id="r6b" name="rr" class="rb">
<input type="radio" id="r7b" name="rr" class="rb">
<input type="radio" id="r8b" name="rr" class="rb">
<input type="radio" id="r9b" name="rr" class="rb">
<input type="radio" id="r10b" name="rr" class="rb">
<input type="radio" id="r11b" name="rr" class="rb">
<input type="radio" id="r12b" name="rr" class="rb">
<input type="radio" id="r13b" name="rr" class="rb">
<input type="radio" id="r14b" name="rr" class="rb">
<input type="radio" id="r15b" name="rr" class="rb">
<input type="radio" id="r16b" name="rr" class="rb">
<input type="radio" id="r17b" name="rr" class="rb">
<input type="radio" id="r18b" name="rr" class="rb">
<input type="radio" id="r19b" name="rr" class="rb">
<input type="radio" id="r20b" name="rr" class="rb">

<div class="ballwrap">


<a class="btn eoabtn2" href="https://www.emailonacid.com/signup"><strong>TRY EMAIL ON ACID</strong></a>


  <div class="btn"><strong>ASK THE BALL</strong>
     <div class="lblcont">
     <div class="lblinner">
     <label class="lbb" for="r1"><img>1</label>
     <label class="lbb" for="r2"><img>2</label>
     <label class="lbb" for="r3"><img>3</label>
     <label class="lbb" for="r4"><img>4</label>
     <label class="lbb" for="r5"><img>5</label>
     <label class="lbb" for="r6"><img>6</label>
     <label class="lbb" for="r7"><img>7</label>
     <label class="lbb" for="r8"><img>8</label>
     <label class="lbb" for="r9"><img>9</label>
     <label class="lbb" for="r10"><img>10</label>
     <label class="lbb" for="r11"><img>11</label>
     <label class="lbb" for="r12"><img>12</label>
     <label class="lbb" for="r13"><img>13</label>
     <label class="lbb" for="r14"><img>14</label>
     <label class="lbb" for="r15"><img>15</label>
     <label class="lbb" for="r16"><img>16</label>
     <label class="lbb" for="r17"><img>17</label>
     <label class="lbb" for="r18"><img>18</label>
     <label class="lbb" for="r19"><img>19</label>
     <label class="lbb" for="r20"><img>20</label>
     </div>
     </div>
     <div class="lblcont alt">
     <div class="lblinner">
     <label class="lbb" for="r1b"><img>1</label>
     <label class="lbb" for="r2b"><img>2</label>
     <label class="lbb" for="r3b"><img>3</label>
     <label class="lbb" for="r4b"><img>4</label>
     <label class="lbb" for="r5b"><img>5</label>
     <label class="lbb" for="r6b"><img>6</label>
     <label class="lbb" for="r7b"><img>7</label>
     <label class="lbb" for="r8b"><img>8</label>
     <label class="lbb" for="r9b"><img>9</label>
     <label class="lbb" for="r10b"><img>10</label>
     <label class="lbb" for="r11b"><img>11</label>
     <label class="lbb" for="r12b"><img>12</label>
     <label class="lbb" for="r13b"><img>13</label>
     <label class="lbb" for="r14b"><img>14</label>
     <label class="lbb" for="r15b"><img>15</label>
     <label class="lbb" for="r16b"><img>16</label>
     <label class="lbb" for="r17b"><img>17</label>
     <label class="lbb" for="r18b"><img>18</label>
     <label class="lbb" for="r19b"><img>19</label>
     <label class="lbb" for="r20b"><img>20</label>   
     </div>
     </div>
  </div>


  <BR>
  <div class="m8ball">
    <div class="triangle"></div>
  </div>
</div>

<div class="tryeoa">
<div>
Don't Leave Your Holiday Campaigns to Chance.<BR>
Be Sure With Email on Acid.

<a class="btn eoabtn" href="https://www.emailonacid.com/signup">TRY EMAIL ON ACID</a>
<label class="eoaclose" for="hidedialog">I'll stick with the ball</label>
</div>
</div>
</form>
</div>
<!--<![endif]-->



                        </td>
                      </tr>


                    </table>



                  </td>
                </tr>
              </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->
       
      </td>
    </tr>
  </table>

  <table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color: #ffffff;min-width: 100%;">
    <tr>
      <td>
        <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;" >
          <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
            <![endif]-->
              <!-- ======= start main body ======= -->

              
              



          

              <table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;Margin:0 auto; max-width:600px; width:100%;" class="mobpad"> 
                <tr>
                  <td height="35"></td>
                </tr>
                <tr>
                  <td align="center" class="header" style="Margin:0;color:#3fb97e;font-size:25px;font-family:'Poppins', Calibri, sans-serif; font-weight: normal;"><BR>
                    <h1 style="Margin:0;color:#3fb97e;font-size:35px;font-family:'Poppins', Calibri, sans-serif; font-weight: normal;">
                      Don't take any chances.<br>
                      Check in daily and follow these tips...
                    </h1><BR>
                  </td>
                </tr>
                <tr>
                  <td height="35"></td>
                </tr>
              </table>

              <center>
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                  <tr>
                    <td align="center" style="text-align:center;">
                      <img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/emailtip.png" alt=" " border="" >
                    </td>
                  </tr>
                  <tr><td>
<!-- for those that use screen readers -->
<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/spacer-eoa.gif?tip1" alt="Tip #1. Red and green are popular holiday colors, but remember to consider color blindness. Don't rely on color for links, ensure there are multiple visual indicators." border="" width=1 height=1 style="display:block;max-height:1px;">

<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/spacer-eoa.gif?tip2" alt="Tip #2. Santa can quickly become Satan when you're hammering out your holiday copy. A quick spell check can prevent any mishaps." border="" width=1 height=1 style="display:block;max-height:1px;">

<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/spacer-eoa.gif?tip3" alt="Tip #3. Ensure you add role = 'presentation' to any tables used for presentation. This will tell screen readers not to read them out as data tables." border="" width=1 height=1 style="display:block;max-height:1px;">

<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/spacer-eoa.gif?tip4" alt="Tip #4. Inbox space is at a premium during the holiday period. To maximize your time in the inbox, ensure you set a proper pre-header to capture your audience." border="" width=1 height=1 style="display:block;max-height:1px;">

<img src="https://marketing.emailonacid.com/hubfs/2017-template-images/8ball/spacer-eoa.gif?tip5" alt="Tip #5. Take extra care to ensure all your links work correctly. Test each link individually before you hit send. You'll be glad you did!" border="" width=1 height=1 style="display:block;max-height:1px;">
</td></tr>
                  <tr>
                    <td height="35"></td>
                  </tr>
                </table>
              </center>

              
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>
    <tr>
        <td height="30"></td>
    </tr>
    </tr>
  </table>

  <!-- ======= start Footer ======= -->
  <table width="100%" bgcolor="#333333" border="0" cellpadding="0" cellspacing="0" style="background-color: #333333;min-width: 100%;">
    <tr>
      <td align="center">
        <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;" >
          <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
            <![endif]-->
              

              <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-spacing: 0; Margin:0 auto; padding:0px;text-align:center;mso-padding-alt: 10px 10px 10px 10px;">
                <tr>
                  <td align="center">
                    <table border="0" cellspacing="0" cellpadding="10">
                      <tr>
                        <td>
                          <a href="https://facebook.com/EmailAcid"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/fb-logo.png?noresize" class="icon-hover" style="border:0;" alt="Facebook" /></a>
                        </td>
                        <td>
                          <a href="https://linkedin.com/company/email-on-acid"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/li-logo.png?noresize" class="icon-hover" style="border:0;" alt="LinkedIn" /></a>
                        </td>
                        <td>
                          <a href="https://twitter.com/EmailOnAcid"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/tw-logo.png?noresize" class="icon-hover" style="border:0;" alt="Twitter" /></a>
                        </td>
                        <td>
                          <a href="https://pinterest.com/EmailonAcid"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/pi-logo.png?noresize" class="icon-hover" style="border:0;" alt="Pinterest" /></a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>
  </table>

  <table width="100%" bgcolor="#4a4b4b" border="0" cellpadding="0" cellspacing="0" style="background-color: #4a4b4b;min-width: 100%;">
    <tr>
      <td>
        <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;" >
          <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
            <![endif]-->
              <!-- ======= start Footer ======= -->


              <table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;Margin:0 auto; max-width:640px; width:100%; padding:30px 20px 30px 20px;">
                <tr>
                  <td align="center" class="footer" style="font-size:11px; color:#ffffff; font-family:Calibri, sans-serif;">

                  <a href="http://www.emailonacid.com"><img src="https://marketing.emailonacid.com/hubfs/2017-template-images/eoa-logo-footer.png?noresize" style="border:0; display:block; padding:0 0 20px 0;" /></a>

                  <p style="color:#ffffff;">5670 Greenwood Plaza Blvd.<span class="hide">|</span><br style="display:none;" class="show"> Greenwood Village, CO<br>
                  <span style="color:#ffffff; text-decoration: none;">720-242-7633</span> | <a href="mailto:helpdesk@emailonacid.com" style="color:#ffffff; text-decoration: none;">helpdesk@emailonacid.com</a></p>

                  <p><em>Copyright &copy; 2017 Email on Acid All rights reserved.</em><br class="hide">
                  Want to cancel your subscription to our emails?<br class="hide" />
                  <a href="{{ unsubscribe_link }}" style="color:#ffffff; text-decoration: underline;">Unsubscribe</a> from this list.</p>
                  </td>
                </tr>
              </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>
  </table>


  
</div>

</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console