cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
/* RED GHOST BUTTON */
  .btnRed:hover,
  * [lang~="x-btnRed"]:hover {
  background-color:#ca333b!important;
  -webkit-border-radius:4px !important; border-radius:4px !important;
  transition: all 0.2s ease-in;
  }

  .btnRed a:hover,
   * [lang~="x-btnRed"] a:hover{
   background-color:#ca333b!important;
   color:#FFFFFF!important;
   transition: all 0.2s ease-in;
  }
  
  /* YELLOW GHOST BUTTON */
  .btnYellow :hover,
   * [lang~="x-btnYellow"]:hover {
         background-color:#FFFFFF!important;
     color:#ffa300!important;
     -webkit-border-radius:4px !important; border-radius:4px !important;
     transition: all 0.2s ease-in;
  }

  .btnYellow a:hover,
  * [lang~="x-btnYellow"] a:hover{
    color:#ffa300!important;
    background-color:#FFFFFF!important;
        transition: all 0.2s ease-in;
  }

  /* WHITE GHOST BUTTON */
  .btnWhite :hover,
   * [lang~="x-btnWhite"]:hover {
         background-color:#FFFFFF!important;
     color:#ca333b!important;
     -webkit-border-radius:4px !important; border-radius:4px !important;
     transition: all 0.2s ease-in;
  }

  .btnWhite a:hover,
  * [lang~="x-btnWhite"] a:hover{
    color:#ca333b!important;
    background-color:#FFFFFF!important;
        transition: all 0.2s ease-in;
  }

  /* BLUE GHOST BUTTON */
  .btnBlue :hover,
  * [lang~="x-btnBlue"]:hover {
    background-color:#00a3e0 !important;
    color:#FFFFFF!important;
    -webkit-border-radius:4px !important; border-radius:4px !important;
        transition: all 0.2s ease-in;
  }
  
  .btnBlue a:hover,
  * [lang~="x-btnBlue"] a:hover{
    color:#FFFFFF!important;
    background-color:#00a3e0!important;
        transition: all 0.2s ease-in;
  }
  /* GREY HOVER BUTTON */
  .btnGrey :hover,
  * [lang~="x-btnGrey"]:hover {
    background-color: #4c4d4b!important;
    color:#FFFFFF !important;
    border: 0px solid #4c4d4b!important;
    -webkit-border-radius:4px!important; border-radius:4px!important;
        transition: all 0.2s ease-in;
  }
  .btnGrey a:hover,
  * [lang~="x-btnGrey"] a:hover {
    border: 3px solid#4c4d4b!important;
    background-color:#4c4d4b!important;
    color:#FFFFFF!important;
transition: all 0.2s ease-in;
  }

/* OPACITY HOVER */
  .opacity :hover,
  * [lang~="x-opacity"] img:hover {
    opacity: 0.85;
    transition: all 0.2s ease-in;}

</style>

<style type="text/css">
/* GENERAL EMAIL CLIENT FIXES */
  #outlook a{padding:0;}
  .ReadMsgBody{width:100%;} 
  .ExternalClass{width:100%;}                
  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
   body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
   table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
   table{border-collapse:collapse !important; table-layout:fixed; !important; margin: 0 auto; !important;}
   table table {table-layout: auto;}
   img{-ms-interpolation-mode:bicubic;}
   body{margin:0; padding:0;}
   img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
   body{height:100% !important; margin:0; padding:0; width:100% !important; background-color:#d4d5d6;}
   *img[tabindex="0"] + div {display:none!important;}


/* REMOVES BLUE LINKS ON APPLE DEVICES */
    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;}
    
/* MEDIA QUERY SCREEN 414px */
  @-ms-viewport{width:device-width}
    @media screen and (max-width: 414px){
    *[class="container"]{width:100% !important;}
    *[class="text-center"]{text-align: center !important; width:100% !important; padding-left: 0px !important;}
    *[class="hide"]{display: none !important;}
    *[class="button-width"]{width:100% !important;}
    *[class="crop"]{height:auto !important; max-width:400px !important; width:100% !important;}
    *[class="mobile-padding"]{padding-right: 20px !important; padding-left: 20px !important;}
    }
        
/* HYBRID CODING TABLE MEDIA QUERY */
        @media screen and (min-width: 601px) {
        *[class="containerDesktop"]{width: 600px!important;}
        }

/* Hide spacer image in applications that support media queries */
        @media only screen and (max-width: 600px) {
        *[class="gmail-fix"] {display: none !important;}
        }

/* FLOATING */
.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  60% {
    transform: translateY(6%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  60% {
    transform: translateY(6%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}

  /* ARROWED */
  .arrow-down {
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 20px solid #f4f5f5;}

  .arrow-down-white {
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 20px solid #ffffff}

/* Image Center Crop Pattern CSS */
    @media only screen and (max-width: 559px) {
    td[class="cropIMG"] {
    position: relative;
        overflow: hidden;
        width: 100%;
        height: 290px;
        }
        
        td[class="cropIMG"] img {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -300px;
        }       
}
        
</style>

<style type="text/css">
div.preheader 
{ display: none !important; } 
</style>
<title></title>
</head>
<body bgcolor="#D4D5D6"><!-- HACK TO FORCE GMAIL APP TO DISPLAY DESKTOP VIEW // HIDDEN ON MOBILE // DO NOT DELETE -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr><td align="center" valign="top"><div class="mktEditable" id="Preheader"><!-- HIDDEN PREHEADER  -->
<div class="preheader" style="font-size: 1px; display: none !important;">Not as good as peanut butter + jelly, but close</div></div>
</td>
</tr>
</tbody></table>
<!-- HEADER CONTENT STARTS HERE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"><tbody><tr><td align="center" valign="top"><div class="mktEditable" id="Header"><div></div></div>
</td>
</tr>
</tbody></table>
<!-- FEATURE CONTENT STARTS HERE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#FFFFFF"><tbody><tr><td align="center" valign="top"><div class="mktEditable" id="Feature"><!-- THIS IS A TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#ff9d6e">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0; background-color: #ff9d6e; background: url('http://pages.returnpath.com/rs/154-UGD-777/images/EmailUniversity_RepeatBG_570x900.png') top center repeat; background-size: auto; padding: 0px 20px 0px 20px;"><!--[if (gte mso 9)|(IE)]>	
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center" valign="top" width="600">
			<![endif]-->
<table class="containerDesktop" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tbody>
<tr>
<td align="center" valign="top" style="padding: 30px 0px 0px 0px;"><a href="http://email.returnpath.com/uwg000PG8p0E02009lZUDA0" title="" target="_blank" style="text-decoration: none;"><img src="http://pages.returnpath.com/rs/154-UGD-777/images/EmailUniversityLogo_300x180x2.png" width="300" height="180" alt="Email University Online" style="display: block; border: 0px; width: 100%; height: auto; max-width: 300px; max-height: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 26px; line-height: 32px; color: #ffffff; font-weight: bold;"></a></td>
</tr>
<tr>
<td align="center" valign="top"><!-- THIS IS A TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td align="left" valign="top" style="padding: 10px 0px 40px 0px;"><!--[if (gte mso 9)|(IE)]>	
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td align="center" valign="top" width="600">
			<![endif]-->
<table class="containerDesktop" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#f2f2f2" style="box-shadow: 0px 2px 5px #999999; ;border: #b4b4b4 solid 4px; border-radius: 10px; -webkit-border-radius: 10px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 26px; line-height: 32px; color: #ac4fc6; padding: 30px 20px 16px 20px;"><strong>Thank you for taking the first Email&nbsp;University Quiz!</strong></td>
</tr>
<tr>
<td align="center" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: #4c4d4b; padding: 0px 20px 20px 20px;">We hope you’ll choose to continue your education with our next quiz. But in the meantime, here are some downloads you might enjoy:</td>
</tr>
<tr>
<td align="center" valign="top"><!--THUMBS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#f2f2f2">
<tbody>
<tr>
<td align="center" valign="top"><!--[if (gte mso 9)|(IE)]>
<table width="560" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" style="border:none;mso-border-right-alt:solid #f2f2f2 .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
  <![endif]-->
<table class="containerDesktop" align="center" cellpadding="0" cellspacing="0" width="100%" style="max-width: 560px; min-width: 100%;">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0;"><!--[if (gte mso 9)|(IE)]>
      <table align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td valign="top" width="160" style="border:none;mso-border-right-alt:solid #f2f2f2 .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
            <![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;" class="container">
<table cellpadding="0" cellspacing="0" align="center" width="180" class="container">
<tbody>
<tr>
<td align="center" valign="top" width="160" style="padding: 0px 10px 20px 10px;"><a href="http://email.returnpath.com/c0800ZlU0pgG0AED30Px900" target="_blank"><img src="http://pages.returnpath.com/rs/154-UGD-777/images/EU_EmojiThumb_160x143x2.png" width="160" height="143" class="crop" style="display: block; border: 0px; width: 100%; height: auto; max-width: 160px;"></a></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
          </td>
          <td valign="top" width="180" style="border:none;mso-border-right-alt:solid #f2f2f2 .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
            <![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;" class="container">
<table cellpadding="0" cellspacing="0" align="center" width="180" class="container">
<tbody>
<tr>
<td align="center" valign="top" width="160" style="padding: 0px 10px 20px 10px;"><a href="http://email.returnpath.com/E0E0U0l4GyP0g0ZD0908p0A" target="_blank"><img src="http://pages.returnpath.com/rs/154-UGD-777/images/EU_GetToKnowThumb_160x143x2.png" width="160" height="143" class="crop" style="display: block; border: 0px; width: 100%; height: auto; max-width: 160px;"></a></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
          </td>
          <td valign="top" width="160" style="border:none;mso-border-right-alt:solid #f2f2f2 .5pt;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
            <![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;" class="container">
<table cellpadding="0" cellspacing="0" align="center" width="180" class="container">
<tbody>
<tr>
<td align="center" valign="top" width="160" style="padding: 0px 10px 20px 10px;"><a href="http://email.returnpath.com/jZ5G0A0pU008P0lgDEz0900" target="_blank"><img src="http://pages.returnpath.com/rs/154-UGD-777/images/EU_HiddenMetricsThumb_160x143x2.png" width="160" height="143" class="crop" style="display: block; border: 0px; width: 100%; height: auto; max-width: 160px;"></a></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
              </td>
            </tr>
          </table>
        <![endif]--></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
              </td>
            </tr>
          </table>
        <![endif]--></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: #4c4d4b; padding: 0px 20px 24px 20px;">You can also update your <a href="#" target="_blank" style="color: #00a3e0; text-decoration: none;"><strong>Preference Center</strong></a> to receive our bi-monthly newsletter, blog digest, webinar notifications, and event invitations. As always, we will never sell your information and you can unsubscribe at any time. We hope you’ll never need to!</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td align="left" valign="top" style="padding: 0px 10px 30px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="200" align="center">
<tbody>
<tr>
<td align="center" valign="top"><a href="http://email.returnpath.com/JG0pUZ0AAD0g69P0El00080" title="" target="_blank" style="text-decoration: none;"><img src="http://pages.returnpath.com/rs/154-UGD-777/images/EmailUniversity_UpdatePrefsBTN_200x65x2.png" width="200" alt="Update Your Preferences" style="display: block; border: 0px; width: 100%; height: auto; max-width: 200px; font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: #ca333b; font-weight: bold;"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
		</td>
	</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table></div>
</td>
</tr>
</tbody></table>
<!-- FOOTER STARTS HERE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"><tbody><tr><td align="center" valign="top"><div class="mktEditable" id="Footer"><table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="#4C4D4E">
<tbody>
<tr>
<td align="center" valign="top" width="180">
<table align="center" bgcolor="#4C4D4E" border="0" cellpadding="0" cellspacing="0" width="180">
<tbody>
<tr>
<td width="180" align="center" style="padding: 20px 0px 20px 0px;" valign="top"><a href="http://email.returnpath.com/wGPDg8EUp0000lA700Z0B09" target="_blank"><img alt="Return Path" border="0" height="40" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/RP_Logo_180x40x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #ffffff;" width="180"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#D4D5D6"><!--[if (gte mso 9)|(IE)]>	
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top" width="600">
			<![endif]-->
<table class="containerDesktop" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tbody>
<tr>
<td align="center" style="padding: 16px 20px 10px 20px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td align="center" valign="top" width="34"><a href="http://email.returnpath.com/LZ80DG00A0C90U8Pl0p0E0g" target="_blank"><img alt="T" border="0" height="34" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/TwitterIcon_34x34x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4c4d4e;" width="34"></a></td>
<td align="center" style="padding: 0px 10px 0px 10px;" valign="top" width="34"><a href="http://email.returnpath.com/FAPGp00D90U0l09Z000DEg8" target="_blank"><img alt="F" border="0" height="34" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/FacebookIcon_34x34x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4c4d4e;" width="34"></a></td>
<td align="center" style="padding: 0px 10px 0px 0px;" valign="top" width="34"><a href="http://email.returnpath.com/a0000p0AZU0P00aDEGg98lE" target="_blank"><img alt="In" border="0" height="34" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/LinkedInIcon_34x34x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4c4d4e;" width="34"></a></td>
<td align="center" valign="top" width="34"><a href="http://email.returnpath.com/GAG0D900Pb8FU0Ep0000lgZ" target="_blank"><img alt="P" border="0" height="34" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/PinterestIcon_34x34x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4c4d4e;" width="34"></a></td>
<td align="center" class="hide" style="padding: 0px 0px 0px 10px;" valign="top" width="34"><a href="http://email.returnpath.com/FAPGp00Gc0U0l09Z000DEg8" target="_blank"><img alt="R" border="0" height="34" src="http://na-ab12.marketo.com/rs/154-UGD-777/images/RSSIcon_34x34x2.png" style="display: block; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4c4d4e;" width="34"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 20px 0px 20px; font-family: Arial, Helvetica, sans-serif; color: #4c4d4e; font-size: 14px; line-height: 20px; text-decoration: none;" align="center" valign="top"><span class="appleLinks">3 Park Ave, 41st Floor&nbsp;&nbsp;|&nbsp;&nbsp;New York, NY 10016</span></td>
</tr>
<tr>
<td align="center" style="padding: 0px 20px 30px 20px; font-family: Arial, Helvetica, sans-serif; color: #5e5d5e; font-size: 12px; line-height: 20px;" valign="top"><span class="hide"><a href="#" style="text-decoration: none; color: #5e5d5e;" target="_blank">View in browser</a>&nbsp;&nbsp;|&nbsp;&nbsp;</span><a href="http://email.returnpath.com/SG0D0E0Pp080gUl0A009ZdH" style="text-decoration: none; color: #5e5d5e;" target="_blank">Contact Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<span style="text-decoration: none; color: #5e5d5e;"><a href="http://email.returnpath.com/P000g0EUpG0lI8090PeDAZ0" style="text-decoration: none; color: #5e5d5e;" target="_blank">Privacy Policy</a><br><a href="#" style="text-decoration: none; color: #5e5d5e;" target="_blank">Update&nbsp;Preferences</a></span>&nbsp;&nbsp;| &nbsp;©&nbsp;Return&nbsp;Path,&nbsp;Inc&nbsp;2017</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
		</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table></div>
</td>
</tr>
</tbody></table>
<img src="https://pixel.monitor1.returnpath.net/pixel.gif?r=mVQhJNL7eToGvvRODpbl2R3XMg" width="1" height="1"><a href="http://email.returnpath.com/ZGg8l0AfE0000Z0PJ00pDU9" target="_blank"></a>
<img src="http://email.returnpath.com/trk?t=1&amp;mid=MTU0LVVHRC03Nzc6MDo2NjcyOjIzOTkxOjA6OTk2NTo5OjE2NjgzOjIxNDQyOTEtNDpudWxs" width="1" height="1" style="display:none !important;" alt="">

<!-- COMMENT -->

</body>
            
          
!
999px
Loading ..................

Console