cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              <HTML>

<HEAD>
  <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</HEAD>
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="date">
  <!--[if !mso]><!-- -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->


  <title></title>
  <style type="text/css">
    /* standard resets */
    
    div, p, a, li, td {
    	-webkit-text-size-adjust: none;
    	-ms-text-size-adjust: none;
    }
    body {
    	margin: 0;
    	padding: 0;
    }
    table td {
    	border-collapse: collapse;
    }
    table th {
    	margin: 0 !important;
    	padding: 0 !important;
    	vertical-align: top;
    	font-weight: normal;
    }
    div[style*="margin: 16px 0"] {
    	margin: 0 !important;
    }
    .ExternalClass {
    	width: 100%;
    }
    .ExternalClass * {
    	line-height: 110%
    }
    img {
    	-ms-interpolation-mode: bicubic;
    }
    .appleLinksgrey a {
    	color: #9ca299 !important;
    	text-decoration: none;
    }
    
    /* control text changed to links by phones */
    
    @media only screen {
    body {
    	width: 100% !important;
    	min-width: 100% !important;
    }
    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;
    }
    }
    
    /* Yahoo and apple mail reset on desktop */
    
    @media screen and (min-width: 600px) {
    .wrapto680px {
    	width: 670px !important;
    	height: auto !important;
    }
    }
    
    @media screen and (max-device-width: 640px), screen and (max-width: 640px) {
    /* responsive rules */
    *[class=wrapto100pc] {
    	width: 100% !important;
    	height: auto !important;
    }
    *[class=wrapto100pc-pt20] {
    	width: 100% !important;
    	height: auto !important;
    	margin-top: 20px !important;
    }
    th[class=colsplit] {
    	width: 100% !important;
    	float: left !important;
    	display: block !important;
    }
    th[class=colsplit-padding] {
    	width: 100% !important;
    	float: left !important;
    	display: block !important;
    	padding-top: 10px !important;
    }
    *[class=hero-image] {
    	width: 100% !important;
    	height: auto !important;
    	padding-top: 20px !important;
    	padding-bottom: 20px !important;
    }
    *[class=wrapto100pc-max480] {
    	width: 100% !important;
    	height: auto !important;
    	max-width: 480px !important;
    }
    *[class=wrapto100pc-max320] {
    	width: 100% !important;
    	height: auto !important;
    	max-width: 320px !important;
    }
    *[class=height-auto] {
    	height: auto !important;
    }
    *[class=nomob] {
    	display: none !important;
    	width: 0px !important;
    	height: 0px !important;
    }
    th[class=footer-button] {
    	float: left !important;
    	display: block !important;
    	width: 100% !important;
    	padding-top: 10px !important;
    	padding-bottom: 10px !important;
    	height: auto !important;
    }
    /* fonts */
    *[class=center-text] {
    	text-align: center !important;
    }
    *[class=fontsize19] {
    	font-size: 19px !important;
    	line-height: 27px !important;
    }
    *[class=fontsize23] {
    	font-size: 23px !important;
    	line-height: 28px !important;
    }
    *[class=footer-button] {
    	border-bottom: #333333 solid thick;
    	border-top: #333333 solid thick;
    	border-left: #333333 solid thick;
    	border-right: #333333 solid thick;
    	background: #333333;
    	background-color: #333333 !important;
    	width: 97% !important;
    	display: block !important;
    	color: #ffffff !important;
    	text-decoration: none !important;
    	text-align: center !important;
    	padding: 10px 1px;
    	margin-top: 15px !important;
    	font-size: 15px;
    }
    *[class=mobile-margin] {
    	padding: 0 20px 0 20px !important;
    }
    *[class=bg-1e1e1e] {
    	background-color: #1e1e1e !important;
    	background: #1e1e1e !important;
    }
    *[class=menu-border] {
    	border-bottom: 1px solid #424242 !important;
    	border-right: none !important;
    	padding: 15px 0 15px 0 !important
    }
    *[class=menu-border2] {
    	border-right: none !important;
    	padding: 15px 0 15px 0 !important
    }
    *[class=white-menu-border] {
    	border-bottom: 1px solid #000000 !important;
    	border-right: none !important;
    	padding: 15px 0 15px 0 !important;
    	height: auto !important;
    }
    *[class=white-menu-border2] {
    	border-right: none !important;
    	padding: 15px 0 15px 0 !important;
    	height: auto !important;
    }
    }
    @media screen and (max-device-width: 500px), screen and (max-width: 500px) {
    /* responsive rules */
    *[class=art-logo] {
    	width: 270px !important;
    	height: auto !important;
    }
  </style>

  <!--[if gte mso 15]>
<style type="text/css" media="all">
tr { font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>
<div style="background-color: #e14c6b;">

  <body>
    <style type="text/css">
      div.preheader 
      { display: none !important; }
    </style>
    <div class="preheader" style="font-size: 1px; display: none !important;">The best of arts and culture from across the BBC</div>
    <!--[if (gte mso 9)|(IE)]><body background="http://img.actionrocket.co/bbc/2016/2016-BBC-Arts/html/images/outlookbg-v2.jpg"><![endif]-->


    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="100%" align="center">
            <table width="800" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" style="background-image: url(http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/background-image.jpg); background-position:center; background-size:cover;"
              background="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/background-image.jpg">
              <tbody>
                <tr>
                  <td width="100%" align="center">
                    <!-- Preheader -->

                    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="wrapto100pc">
                      <tr>
                        <td align="center">
                          <!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="800"><tr><td align="center"><![endif]-->

                          <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="nomob">
                            <tr>
                              <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height:20px; color:#ffffff; text-align:center; padding-top:10px; padding-bottom:10px"> Having difficulty reading this email?&nbsp;<a href="#" style="color:#ffffff; text-decoration:underline;"
                                  target="_blank">View online</a></td>
                            </tr>
                          </table>

                          <table width="800" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                            <tr>
                              <td width="80" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="80" height="1" alt="" /></td>
                              <td width="20" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="20" height="1" alt="" /></td>
                              <td align="center" valign="top" bgcolor="#2d2d2d">
                                <table class="wrapto100pc" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#343434">
                                  <tr>
                                    <td class="wrapto100pc" valign="top" style="padding:25px 15px 25px 15px">
                                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <th class="colsplit" align="center" valign="middle" style="padding-bottom:10px; padding-top:10px;">
                                            <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a49692739216a4b2cf02feef39db9dc29fe92ad67c2b80b73d9ca5a436ecbb604" target="_blank"><img style="display:block" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/bbc-logo-retina.png" width="107" height="30" alt="" /></a>
                                          </th>
                                          <th class="colsplit-padding" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size:25px; line-height:32px; color:#ffffff;"><span class="fontsize19">More for you to enjoy from the BBC</span></th>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                              <td width="20" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="20" height="1" alt="" /></td>
                              <td width="80" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="80" height="1" alt="" /></td>
                            </tr>
                          </table>

                          <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </table>

                    <!-- End Preheader -->

                    <!-- main -->

                    <table border="0" cellspacing="0" cellpadding="0" width="100%" class="wrapto100pc">
                      <tr>
                        <td align="center">
                          <!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="800"><tr><td align="center"><![endif]-->

                          <table width="800" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                            <tr>
                              <td width="80" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="80" height="1" alt="" /></td>
                              <td width="20" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="20" height="1" alt="" /></td>
                              <td align="center" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="30" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                      <td align="center" style="font-family: proxima-nova, Arial, sans-serif; font-size:28px; line-height:34px; color:#ffffff;" class="fontsize23">Discover a world of creativity</td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                    <tr>
                                      <td align="center">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2aa28f3db3cd553ae09dcc6d753d87ff3a25c2b6a460e0f628ce092f852ce42087" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/bbc-arts-logo-retina.png" width="300" height="150" alt="BBC Arts" class="art-logo" /></a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts1.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="101" class="height-auto" bgcolor="#c40029">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2aed0a81d81cc9885cde068c2342caa5753869a2d4785efff5c833fe9c3b5f94ef" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts2.png" width="600" height="101" alt="Film - Explore the magic of cinema" class="wrapto100pc" /></a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts3.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="96" class="height-auto" bgcolor="#c40029">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a668a15faa6c0ffde7d693ffa891e1ebec2912f71d50884e438f2209f954bf367" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts4.png" width="600" height="96" alt="Books - A closer look at the written word" class="wrapto100pc" /></a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts5.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="101" class="height-auto" bgcolor="#c40029">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a8810057b8e49be483c53a1552780b4bc6db77c4163487c8bfd9c3dd6c3d7d195"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artd6.png" width="600" height="101" alt="Art & Artists - Immerse yourself in the world of visual art" class="wrapto100pc"
                                          /></a>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts7.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="99" class="height-auto" bgcolor="#c40029">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a7cf3a7517bb1e50ae0da460cbdc6b86033a5f8f8134da3927db52a8201bdc8b0" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts8.png" width="600" height="99" alt="Performance - The best in theatre, dance and music" class="wrapto100pc"
                                          /></a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts9.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="99" class="height-auto" bgcolor="#c40029">
                                        <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2af73652049cad3f7ffacdfc678a1a85ed5933102f827f87f8cf32a776fe27ffdf" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts10.png" width="600" height="99" alt="Get creative - Celebrating British arts, crafts and creativity" class="wrapto100pc"
                                          /></a>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="65" class="height-auto"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/arts11.png" width="600" height="65" alt="" class="wrapto100pc" /></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="35" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="20"></td>
                                      <td style="font-family:proxima-nova, arial; color:#000000; line-height:26px; font-size:18px; text-align:left;">BBC Arts brings you films, articles, galleries and archive gems showcasing the best of arts and culture from across the BBC. </td>
                                      <td width="20"></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="20" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="20"></td>
                                      <td align="center">
                                        <table border="0" cellspacing="0" cellpadding="0" bgcolor="#c40029" width="200" class="wrapto100pc">
                                          <tbody>
                                            <tr>
                                              <td width="15"></td>
                                              <td style="font-family:helvetica, arial, sans-serif; font-weight:bold; color:#ffffff; font-size:17px; line-height:24px; text-align:center; vertical-align:middle;" valign="middle"><a style="color:#ffffff; text-decoration:none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2aa28f3db3cd553ae09dcc6d753d87ff3a25c2b6a460e0f628ce092f852ce42087" target="_blank">Find out more</a></td>
                                              <td width="5"></td>
                                              <td align="right">
                                                <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2aa28f3db3cd553ae09dcc6d753d87ff3a25c2b6a460e0f628ce092f852ce42087" target="_blank"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/cta-button-retina.png" width="38" height="38" alt="" /></a>
                                              </td>
                                            </tr>
                                          </tbody>
                                        </table>
                                      </td>
                                      <td width="20"></td>
                                    </tr>
                                  </tbody>
                                </table>
                                <table width="600" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">
                                  <tbody>
                                    <tr>
                                      <td width="100%" height="45" style="font-size:1px; line-height:1px;">&nbsp;</td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                              <td width="20" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="20" height="1" alt="" /></td>
                              <td width="80" class="nomob"><img style="display: block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/artsspacer.gif" width="80" height="1" alt="" /></td>
                            </tr>
                          </table>

                          <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </table>

                    <!-- End main -->
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- BBC footer -->
    <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#343434" style="border-top:1px solid #585858;">
      <tr>
        <td align="center">
          <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#282828">
            <tbody>
              <tr>
                <td style="text-align: center; vertical-align: top; font-size: 0px;" class="mobile-margin">
                  <!--[if (gte mso 9)|(IE)]>
						<table border="0" cellspacing="0" cellpadding="0" width="624">
							<tr>
								<td>
								<![endif]-->

                  <div style="width: 85px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="85" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="Homepage" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a54ebb512f8a545c24be6a28ff9cbfc6101aa62be9442523ad1ba61780bcc40c8" class="udl">Home</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 86px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="86" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="News" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a3d806df504ab7199e616ca62a76eea4460db51dfb5366120a836a9a2e4f0c13c" class="udl">News</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 86px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="86" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="Sport" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2aefb2b6a76cc03c5fda2103b8d9436d01bb999488879a69b8bfd6acb491f0c57b" class="udl">Sport</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 86px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="86" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="Weather" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a7a4c94db2cb7af3a92fed463abbb4d5f7099917df4a1b2748fe67c9578dcf602" class="udl">Weather</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 86px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="86" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="BBC iPlayer" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a6663e5e93e68647dd826ea8ca03fb1842c4a589c80c0b12b7679c3bb6e3e1f9a" class="udl">iPlayer</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 86px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="86" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="TV" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2ae59977b9d3f247ff24943e3cbebf3794ac573e7e91ef9afd6915631e7b10fbec" class="udl">TV</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]></td>
								<td><![endif]-->

                  <div style="width: 85px; display: inline-block; vertical-align: top;" class="wrapto100pc">
                    <table width="85" cellspacing="0" cellpadding="0" border="0" align="left" style="" class="wrapto100pc">
                      <tbody>
                        <tr>
                          <td width="120" bgcolor="#282828" align="center" class="menu-border" style="font-family: arial; font-size: 14px; color: #ffffff; line-height: 20px; padding: 15px 0px;"><a title="Radio" target="_blank" style="color: #ffffff; text-decoration: none;" href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a2e61e476e69051188c9fc263fce33ec859f2b649db13e26643aec835043e55f7" class="udl">Radio</a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>

                  <!--[if (gte mso 9)|(IE)]>
								</td>
							</tr>
						</table>
						<![endif]-->
                </td>
              </tr>
            </tbody>
          </table>
          <table width="100%" cellspacing="0" cellpadding="0" border="0" class="bg-1e1e1e" style="border-top:1px solid #585858;">
            <tr>
              <td style="color:#282828; font-size:1px; line-height:1px">.</td>
              <td width="640" align="center" valign="top" class="mobile-margin">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td width="100%" height="15"></td>
                  </tr>
                  <tr>
                    <td width="100%" valign="middle">
                      <table cellspacing="0" cellpadding="0" border="0" class="wrapto100pc" align="left" width="83">
                        <tr>
                          <td align="center" height="35" valign="middle">
                            <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2a49692739216a4b2cf02feef39db9dc29fe92ad67c2b80b73d9ca5a436ecbb604" target="_blank"><img style="display:block;" border="0" src="http://image.e.bbcmail.co.uk/lib/fe9013727761077872/m/2/bbc-logo-retina.png" width="90" height="auto" alt="BBC logo"></a>
                          </td>
                        </tr>
                      </table>

                      <!--[if (gte mso 9)|(IE)]></td><td><![endif]-->

                      <table cellspacing="0" cellpadding="0" border="0" class="wrapto100pc" align="right" width="380">
                        <tr>
                          <td style=" padding-top:7px; padding-bottom:7px; text-align:right; font-family: Arial, sans-serif; font-size:14px; line-height:19px; color:#ffffff;"><a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2ab33e35b8abec9570b31f94657fd9ace83af75cca9bcbe8eed73db24200043682" target="_blank" style="text-decoration:none; color:#ffffff;" class="footer-button">Terms of use</a>
                            <span
                              class="nomob">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span> <a href="http://click.e.bbcmail.co.uk/?qs=1634b9d03b08db2ae9a5ab7961d4bbe29655e9ea345947a1452d19cffa784be7da47625400b67506" target="_blank" style="text-decoration:none; color:#ffffff;"
                                class="footer-button">Privacy and Cookies</a> <span class="nomob">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
                              <a title="Unsubscribe" href="#" target="_blank"
                                style="text-decoration: none; color: #ffffff;" class="footer-button">Unsubscribe</a></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="100%" height="15"></td>
                  </tr>
                </table>
              </td>
              <td style="color:#282828; font-size:1px; line-height:1px">.</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!-- End BBC footer -->

    <!-- terms & conditions -->
    <table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
      <tr>
        <td align="center">
          <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
              <td style="color:#282828; font-size:1px; line-height:1px">.</td>
              <td width="640" align="center" valign="top" class="mobile-margin">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td width="100%" height="15"></td>
                  </tr>
                  <tr>
                    <td style="text-align:center; font-family: Arial, sans-serif; font-size:12px; line-height:19px; color:#252525;"> BBC Broadcasting House, Portland Place, London W1A 1AA <br> Copyright &copy; 2016 BBC </td>
                  </tr>
                  <tr>
                    <td width="100%" height="15"></td>
                  </tr>
                </table>
              </td>
              <td style="color:#282828; font-size:1px; line-height:1px">.</td>
            </tr>
          </table>
          <table width="100%" border="0" cellspacing="0" cellpadding="0" class="nomob" style="min-width:600px">
            <tbody>
              <tr>
                <td style="min-width:600px"><img src="http://img.actionrocket.co/bbc/2016/New-tech-internal-newsletter/html/images/spacer.gif" width="600" height="10" alt="" class="nomob"></td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <!-- end terms & conditions -->
    <!-- gmail app prevent optimisation option fix -->
    <div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff; line-height:0;width:600px !important; min-width:600px !important; max-width:600px !important;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
    <!-- end gmail app prevent optimisation option fix -->

  </body>
</div>

</html>

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