cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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>
  <title>Complete your Shapeways registration in 30 Seconds</title>
  <style type="text/css">
  /*Force Hotmail to display normal line spacing */
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

    /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}

    /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */

    /* ========== Page Styles ========== */

#bodyCell{padding:0px;}
#templateContainer{max-width:600px;}

body, #bodyTable{
    background-color:#edeff0;
    margin-bottom: 26px;
}

#bodyCell{
    border-top:none;
}

#templateContainer{
    border:none;
}

h1{
  color:#183643;
  display:block;
  font-family:Helvetica, sans-serif;
    font-size:32px;
    font-style:normal;
    font-weight:bold;
    line-height:38px;
    letter-spacing:normal;
    margin-top:40px;
    margin-right:0;
    margin-bottom:50px;
    margin-left:0;
}

    /* ========== Header Styles ========== */

#templateHeader{
    background-color:#edeff0;
    text-align: center;
    margin-top:26px;
    margin-bottom: 26px;
}

.headerContent{
  color:#445258;
  font-family:Helvetica, sans-serif;
    font-size:20px;
    font-weight:bold;
    line-height:100%;
    padding-top:0;
    padding-right:0;
    padding-bottom:0;
    padding-left:0;
    text-align:center;
    vertical-align:middle;
    background-color: #ffffff;
}

#headerImage{
    height:auto;
    max-width:600px;
}

    /* ========== Body Styles ========== */

#templateBody, #headline {
    background-color:#FFFFFF;
    text-align: center;
}

.bodyContent{
  color:#445258;
  font-family:Helvetica, sans-serif;
    font-size:15px;
    line-height:150%;
    background-color:#FFFFFF;
}

.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
  color:#0098db;
  font-weight:normal;
    text-decoration:none;
}
  #linkSection
  {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
  }

    /* /\/\/\/\/\/\/\/\/ MOBILE STYLES /\/\/\/\/\/\/\/\/ */

@media only screen and (max-width: 480px){
  /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
  body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
    body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */

    /* /\/\/\/\/\/\/ MOBILE RESET STYLES /\/\/\/\/\/\/ */
    #bodyCell{padding:10px !important;}

    /* /\/\/\/\/\/\/ MOBILE TEMPLATE STYLES /\/\/\/\/\/\/ */

    /* ======== Page Styles ======== */


    #templateContainer{
        max-width:600px !important;
        width:100% !important;
    }


    h1{
  font-size:26px !important;
        line-height:125% !important;
    }

    /* ======== Body Styles ======== */

    .bodyContent{
  font-size:16px !important;
        line-height:140% !important;
    }
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="background-color:#edeff0; margin-bottom: 26px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background-color:#edeff0; margin-bottom: 26px;">
        <tbody><tr>
            <td align="center" valign="top" id="bodyCell">
                <!-- BEGIN TEMPLATE // -->
                <table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="max-width:600px;">
                                      <tbody><tr>
                        <td align="center" valign="top">
                            <!-- BEGIN PREHEADER LOGO // -->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader" style="margin-top: 36px; margin-bottom: 26px;">
                                <tbody><tr>
                                    <td align="center">
                                        <a href="https://www.shapeways.com?etId=151322913&amp;utm_source=automated-contact&amp;utm_medium=email&amp;utm_campaign=verify-account&amp;utm_content=0" target="_blank"><img src="https://www.shapeways.com/rrstatic/img/email/sw-logo-email-2x-20131114.png" style="max-width:180px;" alt="Shapeways"></a>
                                    </td>
                                </tr>
                            </tbody></table>
                            <!-- // END PREHEADER LOGO -->
                        </td>
                    </tr>
                                      <tr>
                        <td align="center" valign="top">
                            <!-- BEGIN HEADER // -->
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tbody><tr>
                                    <td valign="top">
                                        <img src="https://www.shapeways.com/rrstatic/img/email/email-rounded-top.jpg" width="100%" style="vertical-align:bottom;">
                                    </td>
                                </tr>
                            </tbody></table>
                            <!-- // END HEADER -->
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#ffffff;">
                                <tbody><tr>
                                    <td>
                                        <!-- Body of email will go here -->
                                        

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #ffffff;font-family:Helvetica, Arial, sans-serif;color:#445258;line-height: 22px;">
  <tbody><tr>
    <td style="text-align: center; display: block; padding: 0px 20px 20px 20px;">
      <h1 style="color:#183643;text-align: center; font-size: 24px; letter-spacing: 1px; margin-bottom: 30px;">Activate your Shapeways account</h1>
    </td>
  </tr>
  <tr>
    <td style="padding: 0px 16.66% 40px 16.66%; text-align: center; display: block;">
      <img style="width: 100%" src="https://www.shapeways.com/rrstatic/img/email/email-verification-three-step.png" alt="Activate Your Shapeways Account">
    </td>
  </tr>
  <tr>
    <td style="text-align: center; font-family:Helvetica, Arial, sans-serif;">
      <a href="#" title="Activate Now" style="background: #4fc9ff; border: solid 1px #02B2FF; border-radius: 2px; padding: 3% 7%; color: #ffffff; font-weight: bold; font-size: 14px; letter-spacing: .25px; -webkit-font-smoothing: antialiased; text-transform: uppercase; text-decoration: none; line-height:18px; display: inline-block;" target="_blank">Activate Now</a>
    </td>
  </tr>
  <tr>
    <td style="padding: 7% 50px;">
      <p style="color:#183643;text-align: center;font-size: 16px; margin-bottom: 5px;">
        Get <span style="font-weight: bold; ">free shipping</span> on your first design<br>
      </p>
      <p style="color:#183643;text-align: center;font-size: 16px; margin-top: 0px;">
        Use code at checkout <span style="padding: 5px 10px; font-weight: bold; background-color:#CCE8A4;text-align: center;">FIRSTFREESHIP</span>
      </p>
    </td>
  </tr>
</tbody></table>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <img src="https://www.shapeways.com/rrstatic/img/email/email-rounded-bottom.jpg" width="100%" style="vertical-align:top;">
                                    </td>
                                </tr>
                            </tbody></table>
                                                          <table border="0" cellpadding="0" cellspacing="0" width="100%" style="">
  <tbody><tr>
    <td style="padding: 20px;font-family:Helvetica, Arial, sans-serif; font-size:12px; line-height: 14px;">
      <p style="color:#858D98;">
        *FREESHIPFIRST promo code is good for Free Shipping via our lowest-price carrier. Code is valid once per customer and is only valid on the first order of your own designs. If you order a design during the promotion period that cannot be printed, we cannot apply discounts to future orders placed after the promotion period (even if these models are repaired). Code cannot be combined with other discounts or offer codes. No cash value.
      </p>
    </td>
  </tr>
</tbody></table>
                                                    </td>
                    </tr>
                </tbody></table>
            </td>
        </tr>
    </tbody></table>

</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