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.

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/"> <head>
        
<meta property="og:title" content="Friday Finds: Permission to Procrastinate "/>
<meta property="fb:page_id" content="43929265776" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />        
    <meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
    
  <style type="text/css">
	@media only screen and (max-width: 480px){
		table[id=canspamBar] td{
			font-size:13pt !important;
		}

}	@media only screen and (max-width: 480px){
		table[id=canspamBar] td a{
			display:block !important;
			margin-top:10px !important;
		}

}	@media only screen and (max-width: 480px){
		*{
			-webkit-text-size-adjust:none;
		}

}</style>        
        <body style="background-color:#000000;margin-top:0px;">
    <center>
      <!--[if (gte mso 9)|(IE)]>
      <style>
        body,table,td {
        font-family:Arial,'tahoma';
        }
      </style>
      <![endif]-->
      <!--[if mso]>
      <style>
        body,table,td {
        font-family:Arial,Helvetica,sans-serif !important;
        }
      </style>
      <![endif]-->
      <table cellspacing="0" cellpadding="0" width="600">
        <tr>
          <td style="padding:0px;">
            <!-- Main content table starts here: -->
            <table cellspacing="0" cellpadding="0">
              <tr style="background-color:#252525;">
                <td style="padding:20px 15px 20px;">
                  <table width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="49%" align="left">
                        <span style="color:#b7b7b7;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.1em;">Friday Finds</span>
                      </td>
                      <td width="2%" align="center"> </td>
                      <td width="49%" align="right" style="text-align:right;">
                        <span style="color:#b7b7b7;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.1em;text-align: right;">Week of July 7</span>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td style="padding:70px 45px 50px;">
                  <a href="http://foxfuelcreative.com"><img src="http://www.foxfuelcreative.com/email/foxfuel/take-it-easy.png" style="border:0;" align="left" width="293" height="67" alt="FoxFuel Creative"></a>
                </td>
              </tr>
              <!-- full width content block 1: -->
              <tr>
                <td>
                  <table width="600" cellspacing="0" cellpadding="0" style="background-color:#000000;">
                    <tr>
                      <td valign="top">
                        <a style="border:0;" href="https://www.unstuck.com/advice/procrastination-for-good/"><img src="http://www.foxfuelcreative.com/email/foxfuel/it-can-wait.png" width="600" style="display:block; border:0;" alt="Google"></a>
                      </td>
                    </tr>
                    <tr>
                      <td style="padding:0px 30px 60px 0px;background-color:#000000;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="39%" align="left">   </td>
                            <td width="1%" align="center">   </td>
                            <td width="60%" align="right">
                              <div style="text-align:left;">
                                <p style="font-family:'Times New Roman', Times, serif;font-size:20px;color:#ffffff;line-height:1.75em;text-align:left;margin:0;letter-spacing:.02em;">Procrastination might actually be useful in helping us think creatively...when done right.</p>
                                <br><a href="https://www.unstuck.com/advice/procrastination-for-good/"><img src="http://www.foxfuelcreative.com/email/foxfuel/orange-arrow.png" width="97" height="36" style="display:block; border:0;" align="left" alt="From A to Gen Z."></a>
                              </div>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- end of full width content block 1 -->
              <!-- full width content block 2: -->
              <tr>
                <td style="background-color:#000000;">
                  <table style="background-color:#000000;" width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                      <td style="background-color:#000000;" align="left">
                        <a href="https://www.evert45.com/"><img src="http://www.foxfuelcreative.com/email/foxfuel/the-story-of-evert_45.png" width="600" style="display:block; border:0; padding-bottom: 0px;" alt="Fallingwater"></a>
                      </td>
                    </tr>
                    <tr>
                      <td style="padding:0px 0px 30px 45px;background-color:#000000;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="60%" align="left">
                              <div style="text-align:left;">
                                <p style="font-family:'Times New Roman', Times, serif;font-size:20px;color:#ffffff;line-height:1.75em;text-align:left;margin:0;letter-spacing:.02em;">Both elegant and impactful, this project shows us a glimpse of what a 1945 war story might have looked like with YouTube and Instagram.</p>
                                <br><a href="https://www.evert45.com/"><img src="http://www.foxfuelcreative.com/email/foxfuel/orange-arrow.png" width="97" height="36" style="display:block; border:0;" align="left" alt="We hit a homerun."></a>
                              </div>
                            </td>
                            <td width="1%" align="center">   </td>
                            <td width="39%" align="right">   </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- end of full width content block 2 -->
              <!-- footer starts here: -->
              <tr>
                <td style="background-color:#000000;">
                  <table style="background-color:#000000;" width="100%" cellspacing="0" cellpadding="0">
                    <tr>
                      <td style="padding:30px 0px;background-color:#000000;" align="left">
                        <img src="http://www.foxfuelcreative.com/email/foxfuel/orange-line.jpg" width="600" style="display:block; border:0;" alt="orange-line.jpg">
                      </td>
                    </tr>
                    <tr>
                      <td style="padding:30px 0px 60px 0px;background-color:#000000;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="33%" align="left">   </td>
                            <td width="34%" align="center">
                              <div style="text-align:left;">
                                <a href="http://www.foxfuelcreative.com/contact"><img src="http://www.foxfuelcreative.com/email/foxfuel/cta-text.png" width="219" height="19" style="display:block; border:0;" align="left" alt="We hit a homerun."></a>
                              </div>
                            </td>
                            <td width="33%" align="right">   </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td style="padding:30px 0px 30px 0px;background-color:#000000;font-family:Helvetica, Arial, sans-serif;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="28%" align="right" style="text-align:right;padding-left:100px;">
                              <a style="color:#ffffff;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;text-align:right;" href="http://facebook.com/FoxFuelCreative">Facebook</a>
                            </td>
                            <td width="15%" align="center" style="text-align:center;padding:0px 8px 0px 15px;">
                              <a style="color:#ffffff;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;" href="http://www.twitter.com/FoxFuelCreative">Twitter</a>
                            </td>
                            <td width="15%" align="center" style="text-align:center;padding:0px 8px;">
                              <a style="color:#ffffff;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;" href="http://www.instagram.com/FoxFuelCreative">Instagram</a>
                            </td>
                            <td width="15%" align="center" style="text-align:center;padding:0px 15px 0px 8px;">
                              <a style="color:#ffffff;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;" href="http://www.linkedin.com/company/foxfuel-creative">LinkedIn</a>
                            </td>
                            <td width="27%" align="left" style="text-align:left;padding-right:100px;">
                              <a style="color:#ffffff;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:12px;text-transform:uppercase;" href="http://foxfuel.tumblr.com">Tumblr</a>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr>
                      <td style="padding:0px 60px 60px;background-color:#000000;" align="left">
                        <p style="color:#ffffff;text-align:center;text-decoration:none;font-family:Helvetica, Arial, sans-serif;font-size:10px;">We believe creativity is best when it is simple, honest, and based on strategy. Through collaboration with our client's experience and our marketing expertise, we guide solutions between sophistication and rebellion.</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <!-- end of footer -->
            </table>
            <!-- end of main content table -->
            <div style="display:none;white-space:nowrap;font:15px courier;line-height:0;"></div>
            <!--mail chimp -->
            <center>
              <br>
              <br>
              <table border="0" cellpadding="0" cellspacing="0" width="600" id="canspamBarWrapper" style="background-color:#000000;border-top:1px solid #707070;">
                <tr>
                  <td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
                    <table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
                      <tr>
                        <td align="center" valign="top" style="color:#707070;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
                          This email was sent to <a href="mailto:kelsey@foxfuelcreative.com" target="_blank" style="color:#707070 !important;font-family:Helvetica, Arial, sans-serif;font-size:11px;">hello@SmilesDavis.yeah</a>
                          <br><a href="#" target="_blank" style="color:#707070 !important;font-family:Helvetica, Arial, sans-serif;font-size:11px;">unsubscribe from this list</a>    <a href="#" style="color:#707070 !important;font-family:Helvetica, Arial, sans-serif;font-size:11px;">update subscription preferences</a>    <!--  -->
                          <br>
                          <br>
                          <br>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </center>
            <!-- end of mailchimp section -->
          </td>
        </tr>
      </table>
    </center>
  </body>    </body> </html>

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

Console