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>
  <!-- If you delete this meta tag, Half Life 3 will never be released. -->

  <meta name="viewport" content="width=device-width">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Framebridge Newsletter 1</title>
  <link rel="stylesheet" href="http://img.mailchimp.com/404-font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="http://img.mailchimp.com/404-email.css">
</head>

<body align="center" bgcolor="#ffffff">
  <table width="100%" bgcolor="#ffffff">
    <tbody>
      <tr>
        <td>
          <table align="center" width="600px" bgcolor="#ffffff">
            <tbody>
              <tr>
                <td height="8px" style="font-size:5px">
                  <p align="center" style="color: #ffffff">PLUS! Gallery Wall Grids+++++++++++++++++++</p>
                </td>
              </tr>
              <tr>
                <td colspan="3" align="center" style="padding-top: 25px; padding-bottom: 35px; font-family: arial; font-size: 12px; color: #ffffff">
                  <a href="https://www.framebridge.com/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img width="30%" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/7951bb47-6b90-42a3-b803-cb4089eaf237.png" alt=""></a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="https://www.framebridge.com/build/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/d03e5041-d7d7-4cf0-a494-f03187e19c46.png" alt="Need inspiration? We've got it. This week: gallery wall grids, vintage photos, and vibrant art from Jessica Brilli. Enjoy! And don't forget to frame your story."
              width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://blog.framebridge.com/framebridge/art-five-ways-jessica-brilli/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/1db48fbe-0f9c-415b-9eb6-f143fa41bb6d.png" alt="Art We Love Five Ways: Jessica Brilli  Check It Out" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://blog.framebridge.com/framebridge/nine-square-gallery-wall-grid/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/19d7139c-49dd-4ff7-a07a-010cb623ece2.png" alt="How To: Plan, Order, and Hang a Gallery Wall Grid Try It!" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://blog.framebridge.com/framebridge/7-things-you-never-thought-to-custom-frame/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/05f59c8e-3f69-4934-8938-67673edbb43e.png" alt="7 Things We Think You'll Want to Frame" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://blog.framebridge.com/framebridge/how-to-enlarge-and-frame-vintage-photos/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/d4b3ecd5-7bdd-427d-bd73-fe6ce2339c3d.png" alt="How To: Enlarge and Frame Vintage Photos with Joni Lay  Try It!" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="http://blog.framebridge.com/framebridge/how-to-frame-a-jersey/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/3b63cb1e-039d-40b6-abe2-aff14a7fbd5d.png" alt="Jersey Framing for the Biggest Fans" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="https://www.framebridge.com/build/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/ca0ef1e6-8516-4cad-84c1-242c88b42f05.png" alt="Start Framing" width="600px"></a>
        </td>
      </tr>
      <tr>
        <td align="center">
          <a href="https://www.framebridge.com/build/?utm_source=General%20Production&amp;utm_medium=email&amp;utm_campaign=0923_BlogEmail2" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/934e1fcc-51a1-4ada-8636-a3223d0bb48f.png" width="600px" alt="Free Shipping. Happiness Guaranteed."></a>
        </td>
      </tr>

      <tr>
        <td align="center" height="20px">
          <!--<img src="http://centro.pixel.ad/iap/a6687c4e48ac0dda" style="display:none;"/>-->
        </td>
      </tr>
    </tbody>
  </table>
  <table align="center" width="520px">
    <tbody>
      <tr>
        <td align="center">

          <!-- content -->
          <div class="content">

            <table width="555" border="0" align="center">
              <tbody>

                <tr>
                  <td align="left" colspan="1" width="175px" valign="top">
                    <a href="mailto:support@framebridge.com" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/def18b75-1817-4bca-b070-32d5177bd30f.png" width="82%" alt="Questions? Drop us a line."></a>
                  </td>

                  <td align="center" width="195px" valign="top" style="padding-left:10px">
                    <img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/a0c44430-1db6-41a4-b0db-74f44c19e3ff.png" width="38%" alt="Follow Us">
                    <p align="center">
                      <a href="https://www.facebook.com/framebridge" target="_blank"><img style="padding: 0px 5px 0px 5px" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/c54f630d-ecfe-4e63-86b1-70ab38c50860.png" width="11%" alt="Facebook"></a>
                      <a href="https://twitter.com/framebridge" target="_blank"><img style="padding: 0px 4px 0px 4px" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/9652a913-4360-4e6f-b9f9-a5240e1cbae0.png" width="11%" alt="twitter"></a>
                      <a href="https://www.instagram.com/framebridge/" target="_blank"><img style="padding: 0px 4px 0px 4px" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/1fd8acae-20c5-4ab4-95c9-45cefb4c83b9.png" width="11%" alt="instagram"></a>
                      <a href="https://www.pinterest.com/framebridge/" target="_blank"><img style="padding: 0px 4px 0px 4px" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/32a353ac-279a-4265-834b-fb0939fb27a6.png" width="12%" alt="pinterest"></a>
                      <a href="https://plus.google.com/+Framebridge/about" target="_blank"><img style="padding: 0px 4px 0px 4px" src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/c4ca1516-eb9c-4027-832a-1c0c37b8f295.png" width="15%" alt="google+"></a>
                    </p>
                  </td>

                  <td align="right" width="165px" valign="top" style="padding-right:10px">
                    <a href="https://itunes.apple.com/us/app/framebridge/id890652433?mt=8" target="_blank"><img src="https://gallery.mailchimp.com/9c43cb5e45d00774eec30b314/images/c050f126-01c9-4624-b9c3-df50b4be69db.png" width="80%" alt="Download on the App Store"></a>
                  </td>
                </tr>
              </tbody>
            </table>

            <table align="center" border="0" cellpadding="30" cellspacing="0" id="canspamBar">
              <tbody>
                <tr align="center">
                  <td align="center" valign="top" style="color:#404040; 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="#" target="_blank" style="color:#404040 !important;">xxxxx@xxxxx.xxx</a>
                    <br>
                    <a href="#" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a
                      href="#" style="color:#404040 !important;" target="_blank">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="color:#404040 !important;" target="_blank">update subscription preferences</a>
                      <br> Framebridge, Inc. · 9701 Philadelphia Court · Suite E · Lanham, MD 20706 · USA
                      <br>
                      <br>

                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>


  <!--CANSPAM Test-->

  <!-- /content -->

  <!-- /FOOTER -->


  <!-- <center> -->
  <!-- <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
                    <tr>
                        <td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
                            <table align="center" border="0" cellpadding="0" cellspacing="0" id="canspamBar">
                                <tr align="center">
                                    <td align="center" valign="top" style="color:#606060; 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="hello@matthewsmith.cc" target="_blank" style="color:#404040 !important;">hello@matthewsmith.cc</a>
                                        <br/>
                                        <a href="http://framebridge.us8.list-manage1.com/about?u=9c43cb5e45d00774eec30b314&id=52ce268d04&e=3a26029333&c=f88350de29" target="_blank" style="color:#404040 !important;"><em>why did I get this?</em></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://framebridge.us8.list-manage1.com/unsubscribe?u=9c43cb5e45d00774eec30b314&id=52ce268d04&e=3a26029333&c=f88350de29" style="color:#404040 !important;">unsubscribe from this list</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://framebridge.us8.list-manage.com/profile?u=9c43cb5e45d00774eec30b314&id=52ce268d04&e=3a26029333" style="color:#404040 !important;">update subscription preferences</a>
                                        <br/>
                                        Framebridge, Inc. &middot; 9701 Philadelphia Court &middot; Suite E &middot; Lanham, MD 20706 &middot; USA
                                        <br/>
                                        <br/>
                                        
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table> -->
  <!--
                <style type="text/css">
                    @media only screen and (max-width: 480px){
                        table[id="canspamBar"] td{font-size:14px !important;}
                        table[id="canspamBar"] td a{display:block !important; margin-top:10px !important;}
                    }
                </style>
            -->
  <!-- </center> -->

</body>
            
          
!
999px
Loading ..................

Console