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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console