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.

            
              <style type="text/css">
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* 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 */

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;}

#bodyCell{padding:20px;}
#templateContainer{width:600px;}

body, #bodyTable{
/*@editable*/ background-color:#444;
}
#bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
}
#templateContainer{
/*@editable*/ border: 0
}
.single-spark-item {
  margin-bottom: 50px;
}

#templateHeader{
/*@editable*/ background-color: #181818;
/*@editable*/ border-top: 0;
/*@editable*/ border-bottom: 0;
}

.headerContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:20px;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ padding-top: 20px;
/*@editable*/ padding-right:0;
/*@editable*/ padding-bottom:20px;
/*@editable*/ padding-left:20px;
/*@editable*/ text-align:left;
/*@editable*/ vertical-align:middle;
}

h1{
/*@editable*/ color:#202020 !important;
display:block;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:26px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
h2{
/*@editable*/ color:#404040 !important;
display:block;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:20px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
h3{
/*@editable*/ color:#606060 !important;
display:block;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:18px;
/*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}
h4{
/*@editable*/ color:#808080 !important;
display:block;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:14px;
/*@editable*/ font-style:italic;
/*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/ text-align:left;
}

#templatePreheader{
/*@editable*/ background-color:#F4F4F4;
/*@editable*/ border-bottom:1px solid #CCCCCC;
}

.preheaderContent{
/*@editable*/ color:#808080;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:125%;
/*@editable*/ text-align:left;
}

.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}

.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#2F82DE;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}

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

#templateBody{
/*@editable*/ background-color:#F4F4F4;
/*@editable*/ border-top:1px solid #FFFFFF;
/*@editable*/ border-bottom:1px solid #CCCCCC;
}

.bodyContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:16px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left;
}

.bodyContent a:link, .bodyContent a:visited, /* Yahoo! Mail Override */ .bodyContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#2F82DE;
/*@editable*/ font-weight:inherit;
/*@editable*/ text-decoration:none;
}

.bodyContent img{
display:inline;
height:auto;
max-width:560px;
}

.templateColumnContainer{
  width:260px;
}

#templateColumns{
/*@editable*/ background-color:#F4F4F4;
/*@editable*/ border-top:1px solid #FFFFFF;
/*@editable*/ border-bottom:1px solid #CCCCCC;
}

.leftColumnContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:150%;
padding-top:0;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left;
}

.leftColumnContent a:link, .leftColumnContent a:visited, /* Yahoo! Mail Override */ .leftColumnContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#2F82DE;
/*@editable*/ font-weight:inherit;
/*@editable*/ text-decoration:none;
}

.rightColumnContent{
/*@editable*/ color:#505050;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:14px;
/*@editable*/ line-height:150%;
padding-top:0;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left;
}

.rightColumnContent a:link, .rightColumnContent a:visited, /* Yahoo! Mail Override */ .rightColumnContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#2F82DE;
/*@editable*/ font-weight:inherit;
/*@editable*/ text-decoration:none;
}

.leftColumnContent img, .rightColumnContent img{
display:inline;
height:auto;
max-width:260px;
}

#templateFooter{
/*@editable*/ background-color:#F4F4F4;
/*@editable*/ border-top:1px solid #FFFFFF;
}

.footerContent{
/*@editable*/ color:#808080;
/*@editable*/ font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left;
}

.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}

@media only screen and (max-width: 480px) {
  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 */
  #bodyCell{
    padding:10px !important;
  }
  #templateContainer{
    max-width:600px !important;
    /*@editable*/ width:100% !important;
  }
  h1{
    /*@editable*/ font-size:24px !important;
    /*@editable*/ line-height:100% !important;
  }
  h2{
    /*@editable*/ font-size:20px !important;
    /*@editable*/ line-height:100% !important;
  }
  h3{
    /*@editable*/ font-size:18px !important;
    /*@editable*/ line-height:100% !important;
  }
  h4{
    /*@editable*/ font-size:16px !important;
    /*@editable*/ line-height:100% !important;
  }
  #templatePreheader{
    display:none !important;
  } /* Hide the template preheader to save space */
  #headerImage{
    height:auto !important;
    /*@editable*/ max-width:600px !important;
    /*@editable*/ width:100% !important;
  }
  .headerContent{
    /*@editable*/ font-size:20px !important;
    /*@editable*/ line-height:125% !important;
  }
  .bodyContent{
    /*@editable*/ font-size:16px !important;
    /*@editable*/ line-height:125% !important;
  }
  .templateColumnContainer{
    display:block !important; width:100% !important;
  }
  .columnImage{
    height:auto !important;
    /*@editable*/ max-width:480px !important;
    /*@editable*/ width:100% !important;
  }
  .leftColumnContent{
    /*@editable*/ font-size:16px !important;
    /*@editable*/ line-height:125% !important;
  }
  .rightColumnContent{
    /*@editable*/ font-size:16px !important;
    /*@editable*/ line-height:125% !important;
  }
  .footerContent{
    /*@editable*/ font-size:14px !important;
    /*@editable*/ line-height:115% !important;
  }
  .footerContent a{
    display:block !important;
  } /* Place footer social and utility links on their own lines, for easier access */
}
</style>

<center>
  <table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
      <td align="center" valign="top" id="bodyCell">
        <!-- BEGIN TEMPLATE // -->
        <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
          <tr>
            <td align="center" valign="top">
              <!-- BEGIN HEADER // -->
              <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
                <tr>
                  <td valign="top" class="headerContent">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/codepen-spark-header.png" style="max-width:600px;" id="headerImage" />
                  </td>
                </tr>
              </table>
              <!-- // END HEADER -->
            </td>
          </tr>
          <tr>
            <td align="center" valign="top">
              <!-- BEGIN BODY // -->
              <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
                <tr>
                  <td valign="top" class="bodyContent">
                    <h1>Reflections, Connections, and Smiles</h1>
                    <p>This week, the CodePen community reflects on lessons learned during 2016, gets together in Florida for #OrlandoCodePen, and crafts some clever Pens to make you smile! </p>
                  </td>
                </tr>
              </table>
              <!-- // END BODY -->
            </td>
          </tr>
          <tr>
            <td align="center" valign="top">
              <!-- BEGIN COLUMNS // -->
              <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateColumns">
                <tr>
                  <td align="center" valign="top" class="templateColumnContainer" style="padding-top:20px;">
                    
<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/punkydrewster713/post/the-danger-crew-beta">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/the-danger-crew.png" alt="The Danger Crew RPG: Lessons Learned" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/punkydrewster713/post/the-danger-crew-beta">
          The Danger Crew RPG: Lessons Learned
        </a>
      </h3>
      Drew Conley writes about lessons learned while his team built a game in React and Redux, with insights from the very first CodePen demo to the finished game.
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/reallygoodemails/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/really-good-emails.png" alt="Really Good Emails" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/reallygoodemails/">
          Really Good Emails
        </a>
      </h3>
      This beautifully curated account lives up to its name and gathers really good examples of email design. Check out their showcase and collections for inspiration for your next campaign.
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/jkantner/pen/Bpyzvq">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/I-square-icon-fonts.png" alt="I  Icon Fonts" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/jkantner/pen/Bpyzvq">
          I [] Icon Fonts
        </a>
      </h3>
      Don't we all? Jon Kantner's super-realistic CSS mug is probably filled with developer tears
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/stefanweck/pen/YNPdRR">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/spark6-sea-waves.png" alt="Sea Waves" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/stefanweck/pen/YNPdRR">
          Sea Waves
        </a>
      </h3>
      Sit back and relax, with these beautiful oceanic waves by Stefan Weck.
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/DonKarlssonSan/post/my-2016-on-codepen">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/spark6-my-2016.png" alt="2016" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/DonKarlssonSan/post/my-2016-on-codepen">
          2016
        </a>
      </h3>
      With 2016 behind us, we're seeing some great recaps, personal reviews, and 2017 goals. Johan Karlsson's had a particularly creative year!
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/kmck/pen/YpNXZd">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/spark6-happy-switches.png" alt="Happy Switches" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/kmck/pen/YpNXZd">
          Happy Switches
        </a>
      </h3>
      It never gets tiring to see funny and creative ways to use web elements. This switchy happy face by McKnight will definitely put a smile on your dial.
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/panda_bear/pen/jVovXQ">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/whale-like-watermelon.png" alt="Whale Like Watermelon" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/panda_bear/pen/jVovXQ">
          Whale Like Watermelon
        </a>
      </h3>
      panda_bear's delightful CSS illustration shows how a whale can be like a watermelon!
    </td>
  </tr>
</table>

                  </td>
                  <td align="center" valign="top" class="templateColumnContainer" style="padding-top:20px;">
                    
<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/tmrDevelops/pen/ygBgVL">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/discoid.png" alt="Discoid" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/tmrDevelops/pen/ygBgVL">
          Discoid
        </a>
      </h3>
      Tiffany Rayside is back with more psychedelic grandeur.  Pop this one into your favorite CodePen TV collection! 
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/jonbp1993/pen/XprEZN">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/up-dn-pen.gif" alt="Up & Down" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/jonbp1993/pen/XprEZN">
          Up & Down
        </a>
      </h3>
      Jon Beaumont Pike recreates that clever sign you saw on Reddit. Gotta love an efficient design!
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://nvite.com/OrlandoCodePen/dbf2">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/orlando-codepen.png" alt="#OrlandoCodePen this Week!" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://nvite.com/OrlandoCodePen/dbf2">
          #OrlandoCodePen this Week!
        </a>
      </h3>
      There's a CodePen meetup in Orlando, Florida on Wednesday starting at 7 p.m. at Fattmerchant HQ. Wanna go? Don't forget to RSVP!
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/collection/ngwYeg/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/277/spark6-album-art.png" alt="Album Art Collection" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/collection/ngwYeg/">
          Album Art Collection
        </a>
      </h3>
      Anastasia Lanz has put together this fantastic collection of album art, recreated with web technologies. If you're in a creative rut, recreating some of your favorite albums might be just what you need!
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="https://codepen.io/giuliacardieri/pen/GrJWMY">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/spark6-hair-changes.png" alt="Hair Color Changes" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="https://codepen.io/giuliacardieri/pen/GrJWMY">
          Hair Color Changes
        </a>
      </h3>
      Giulia Cardieri has made a beautiful pen to recap all of her 2016 hair changes.
    </td>
  </tr>
</table>

<table border="0" cellpadding="20" cellspacing="0" width="100%" class="single-spark-item">
  <tr>
    <td class="leftColumnContent">
      <a href="http://dailycssimages.com/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/daily-css-images.png" alt="Daily CSS Images" style="max-width:260px;" class="columnImage" />
      </a>
    </td>
  </tr>
  <tr>
    <td valign="top" class="leftColumnContent">
      <h3>
        <a href="http://dailycssimages.com/">
          Daily CSS Images
        </a>
      </h3>
      Mike Mangialardi's email challenge sends you a CSS drawing prompt every weekday
    </td>
  </tr>
</table>

                  </td>
                </tr>
              </table>
              <!-- // END COLUMNS -->
            </td>
          </tr>
          <tr>
            <td align="center" valign="top">
              <!-- BEGIN FOOTER // -->
              <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
                <tr>
                  <td valign="top" class="footerContent">
                    You're receiving this email because you are a member of CodePen.
                    <br />
                    You can <a data-msys-unsubscribe="1" href="https://codepen.io/admin/unsubscribed" title="Unsubscribe from CodePen email">opt out</a> of this type of email any time. Or manage
            your notification settings <a href="https://codepen.io/you/settings/notifications">here.</a>
                  </td>
                </tr>
              </table>
              <!-- // END FOOTER -->
            </td>
          </tr>
        </table>
        <!-- // END TEMPLATE -->
      </td>
    </tr>
  </table>
</center>

            
          
!
999px
Loading ..................

Console