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.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Black Friday Launch</title>
    <!-- ===== STYLES ========== -->

  <style type="text/css">
		table{
			border-collapse:collapse;
			border-spacing:0;
		}
		td.text,td.text--footer,.has-btn{
			mso-line-height-rule:exactly;
			-webkit-font-smoothing:antialiased;
			-ms-text-size-adjust:none;
			-webkit-text-size-adjust:none;
		}
		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;
		}
		.mask-link a{
			color:#ffffff !important;
		}
	@media screen and (max-width: 600px){
		.text{
			font-size:14px !important;
			line-height:21px !important;
		}

}	@media screen and (max-width: 600px){
		.text--footer{
			font-size:12px !important;
			line-height:18px !important;
		}

}	@media screen and (max-width: 600px){
		.h1{
			font-size:20px !important;
		}

}	@media screen and (max-width: 600px){
		.h2{
			font-size:18px !important;
		}

}	@media screen and (max-width: 600px){
		.h3{
			font-size:16px !important;
		}

}	@media screen and (max-width: 600px){
		.h4{
			font-size:14px !important;
		}

}	@media screen and (max-width: 600px){
		.h5{
			font-size:14px !important;
		}

}	@media screen and (max-width: 600px){
		table{
			line-height:1.5 !important;
		}

}	@media screen and (max-width: 600px){
		.h1,.h2,.h3,.h4,.h5{
			line-height:1.2 !important;
		}

}	@media screen and (max-width: 600px){
		.cs-logo{
			width:120px !important;
		}

}	@media screen and (max-width: 600px){
		.flex-size{
			max-width:100% !important;
			width:100% !important;
		}

}	@media screen and (max-width: 600px){
		.flex-size img{
			max-width:100% !important;
		}

}	@media screen and (max-width: 600px){
		.s-height{
			height:10px !important;
		}

}	@media screen and (max-width: 600px){
		.s-db{
			display:block !important;
		}

}	@media screen and (max-width: 600px){
		.s-dib{
			display:inline-block !important;
		}

}	@media screen and (max-width: 600px){
		.s-hf{
			height:0 !important;
		}

}	@media screen and (max-width: 600px){
		.s-paf{
			padding:0 !important;
		}

}	@media screen and (max-width: 600px){
		.s-pbf{
			padding-bottom:0 !important;
		}

}	@media screen and (max-width: 600px){
		.s-pbm{
			padding-bottom:16px !important;
		}

}	@media screen and (max-width: 600px){
		.s-plf{
			padding-left:0 !important;
		}

}	@media screen and (max-width: 600px){
		.s-prf{
			padding-right:0 !important;
		}

}	@media screen and (max-width: 600px){
		.s-pts{
			padding-top:8px !important;
		}

}	@media screen and (max-width: 600px){
		.s-ptm{
			padding-top:16px !important;
		}

}	@media screen and (max-width: 600px){
		.s-ptl{
			padding-top:32px !important;
		}

}	@media screen and (max-width: 600px){
		.s-tac{
			text-align:center !important;
		}

}	@media screen and (max-width: 600px){
		.s-tal{
			text-align:left !important;
		}

}	@media screen and (max-width: 600px){
		.s-tss{
			font-size:12px !important;
		}

}	@media screen and (min-device-width: 375px) and (max-device-width: 667px){
		.text{
			font-size:16px !important;
		}

}		.bg-img{
			background:url(https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/e1bb634b-abbe-4496-9c1b-8b267857f6e3.png) no-repeat center center;
			background-size:cover;
		}
</style><!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Open&#43;Sans:400,400i,700,700i" rel="stylesheet"><!--<![endif]--></head>
  <body style="margin: 0; padding: 0;">

    <!-- ====== HEADER ============ -->
    <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;border-spacing: 0;">
      <tr>
        <td align="center" style="border-bottom:1px solid #f7f7f7;padding:12px 0;">
          <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=ac36534730&amp;e=f67ef7bd0f">
            <img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/3b956e42-1381-4d47-8332-808334d3b280.png" alt="Code School" style="display: block;" width="190"></a>
          </td>
        </tr>
      </table>
      <!-- ====== MAIN WRAPPER ============ -->
      <table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;border-spacing: 0;">
        <tr>
          <td bgcolor="#0f7e9b" style="background:url('https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/e1bb634b-abbe-4496-9c1b-8b267857f6e3.png') no-repeat center;">

            <!-- ====== CONTENT: {name} ========== -->
            <table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;border-spacing: 0;">
              <tr>
                <td style="font-size:0;">&nbsp;</td>
                <td style="padding:40px 20px;" width="520">

                  <!-- Content goes here -->
                  <!-- ====== WRAPPER ============ -->
                  <table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;border-spacing: 0;">
                    <!-- H1 -->
                    <tr>
                      <td align="center" class="text h1" style="color: #ffffff;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 32px;font-weight: bold;line-height: 48px;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        ’Tis the season to save 51%
                      </td>
                    </tr>
                    <!-- Text -->
                    <tr>
                      <td align="left" class="text" style="color: #ffffff;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 16px;line-height: 24px;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        Our Black <span class="mask-link">Friday</span> sale has launched early! <span class="mask-link">Starting today</span> you can save up to 51% on a Code School subscription. This deal won’t last long — grab it before it’s gone!
                      </td>
                    </tr>
                    <!-- Button A -->
                    <tr>
                      <td align="center" style="padding-top:32px;">
                        <!--[if mso]>
                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.codeschool.com/pricing/?utm_medium=email&amp;utm_campaign=black_friday_announcement&amp;utm_source=mailchimp&amp;utm_content=null" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="250%" stroke="f" fillcolor="#5dbb6c">
                          <center>
                            <![endif]-->


                        <a class="btn-a" href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=96f3dfbcd2&amp;e=f67ef7bd0f" style="background-color:#5dbb6c;border-radius:100px;color:#ffffff;display:inline-block;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:16px;font-weight:600;line-height:48px;text-align:center;text-decoration:none;width:240px;">Sign up now</a>

                        <!--[if mso]>
                      </center>
                    </v:roundrect>
                    <![endif]-->
                      </td>
                    </tr>
                  </table>
                </td>
                <td style="font-size:0;">&nbsp;</td>
              </tr>
            </table>
            <!-- ====== WRAPPER ============ -->
            <table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;border-spacing: 0;">
              <!-- Row -->
              <tr>
                <td>
                  <img src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/086139ca-316f-4880-b26b-8f83696e0bf4.png" alt="{alt}" style="display: block; max-width: 100%" width="100%">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <!-- ===== FOOTER ========== -->
      <table bgcolor="#2d3033" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="color: #aebdc1;font-size: 12px;border-collapse: collapse;border-spacing: 0;" width="100%">
        <tr>
          <td align="center">
            <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;border-spacing: 0;">
              <tr>
                <td align="center" style="padding:32px 12px 0 12px;">
                  <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=ea79969f25&amp;e=f67ef7bd0f" style="text-decoration:none;">
                    <img alt="Twitter Icon" border="0" height="30" src="http://d367zuf2xzw0m3.cloudfront.net/common/social-twitter.png" width="30"></a>
                  </td>
                  <td align="center" style="padding:32px 12px 0 12px;">
                    <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=054fb77d9d&amp;e=f67ef7bd0f" style="text-decoration:none;">
                      <img alt="Facebook Icon" border="0" height="30" src="http://d367zuf2xzw0m3.cloudfront.net/common/social-facebook.png" width="30"></a>
                    </td>
                    <td align="center" style="padding:32px 12px 0 12px;">
                      <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=92b317e2c1&amp;e=f67ef7bd0f" style="text-decoration:none;">
                        <img alt="LinkedIn Icon" border="0" height="30" src="https://gallery.mailchimp.com/8234ed62d6a7fa87721ff1d8a/images/255ddf4d-e09f-46a4-8382-2fc273750da1.png" width="30"></a>
                      </td>
                    </tr>
                  </table>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size" style="border-collapse: collapse;border-spacing: 0;">
                    <tr>
                      <td align="left" class="text--footer s-tac" style="color: #aebdc1;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 14px;line-height: 21px;padding-top: 24px;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        Have questions or need assistance?
                      </td>
                    </tr>
                  </table>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size" style="border-collapse: collapse;border-spacing: 0;">
                    <tr>
                      <td align="center">
                        <!--[if (IE)|mso]>
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="384">
                          <tr>
                            <td>
                              <![endif]-->
                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size" style="max-width: 384px;border-collapse: collapse;border-spacing: 0;" width="100%">
                          <tr>
                            <td style="font-size:0;text-align:center;">
                              <div style="display:inline-block;">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" class="content" width="182" style="border-collapse: collapse;border-spacing: 0;">
                                  <tr>
                                    <td align="center" style="padding:16px 16px 0 16px;">
                                      <!--[if mso]>
                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.codeschool.com/support" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="200%" strokecolor="#aebdc1" fillcolor="#2d3033">

                                        <center style="color:#aebdc1;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:bold;">Support</center>
                                      </v:roundrect>
                                      <![endif]-->
                                      <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=61a7a3f23b&amp;e=f67ef7bd0f" style="background-color:#2d3033;border:1px solid #aebdc1;border-radius:20px;color:#aebdc1;display:inline-block;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:300;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;text-transform:uppercase;mso-hide:all;">Support</a>
                                    </td>
                                  </tr>
                                </table>
                              </div>
                              <!--[if mso]>
                            </td>
                            <td>
                              <![endif]-->
                              <div style="display:inline-block;">
                                <table align="left" border="0" cellpadding="0" cellspacing="0" class="content" width="182" style="border-collapse: collapse;border-spacing: 0;">
                                  <tr>
                                    <td align="center" style="padding:16px 16px 0 16px;">
                                      <!--[if mso]>
                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.codeschool.com/faq" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="200%" strokecolor="#aebdc1" fillcolor="#2d3033">

                                        <center style="color:#aebdc1;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:bold;">FAQ</center>
                                      </v:roundrect>
                                      <![endif]-->
                                      <a href="https://CodeSchool.us5.list-manage.com/track/click?u=8234ed62d6a7fa87721ff1d8a&amp;id=e090e3d407&amp;e=f67ef7bd0f" style="background-color:#2d3033;border:1px solid #aebdc1;border-radius:20px;color:#aebdc1;display:inline-block;font-family:'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size:12px;font-weight:300;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;text-transform:uppercase;mso-hide:all;">FAQ</a>
                                      <!--[if (IE)|mso]>
                                    </td>
                                  </tr>
                                </table>
                                <![endif]-->
                                    </td>
                                  </tr>
                                </table>
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                  <table align="center" border="0" cellpadding="0" cellspacing="0" class="flex-size" style="border-collapse: collapse;border-spacing: 0;">
                    <tr>
                      <td align="center" class="text--footer" style="color: #aebdc1;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 12px;line-height: 18px;padding: 32px 20px 0 20px;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        © 2016 Code School LLC. Crafted lovingly in Orlando, Florida.
                      </td>
                    </tr>
                    <tr>
                      <td align="center" class="text--footer" style="color: #aebdc1;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 12px;line-height: 18px;padding: 0 20px;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        <span class="maskLink-footer">Code School
618 E South Street
Suite 620
Orlando, FL 32801
USA</span>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" class="text--footer" style="color: #aebdc1;font-family: 'Open Sans', Verdana, Helvetica, Arial, sans-serif;font-size: 12px;line-height: 18px;padding: 16px 0 32px 0;mso-line-height-rule: exactly;-webkit-font-smoothing: antialiased;-ms-text-size-adjust: none;-webkit-text-size-adjust: none;">
                        <a href="#" style="color:#aebdc1;">Edit your email settings</a>
                        &nbsp; &nbsp;
                        <a href="#" style="color:#aebdc1;">
                          Unsubscribe
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </body>
</html>
            
          
!
999px
Loading ..................

Console