Flyer

From Codepen

by Calvin Tomkins

HTML

<style type="text/css">

.desktop_only{
display: none;
}

</style>

<table width="100%" border="0" cellpaddng="0" style="background-color:#EEE; margin: 0; padding: 0;">
<tr>
<td align="center" valign="top" style="background-color:#EEE; font-family: verdana;">

<table width="100%" style="background-color:#EEE; border:1px solid #EEE; display" cellspacing="0">
<tr>
<td></td>
<td width="650" style="background-color: #FFF;">

<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="200" style="padding: 7px;">
<img src="http://www.bakerite.co.uk/img/logos.png" />
</td>
<td></td>
<td width="125" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; padding: 7px;">Free Phone: 0800 999 8876</td>
<td width="100" align="center" style="background-color: #EC4C4C; color: #FFF; font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; padding: 7px;">View Online</td>
</tr>
</table>

<table align="center" width="100%" cellspacing="0" cellpadding="0">
<tr>
    <td style="background-image: url('http://www.bakerite.co.uk/img/flyers/main.jpg');" background="http://www.bakerite.co.uk/img/flyers/main.jpg" width="650" height="450" valign="middle" >
      <!--[if gte mso 9]>
       <v:rect style="width:650px;height:450px;" strokecolor="none">
          <v:fill type="tile" color="#EEEEEE" src="http://www.bakerite.co.uk/img/flyers/main.jpg" /></v:fill>
       </v:rect>
       <v:shape id="theText" style="position:absolute;width:650px;height:450px;">
       <![endif]-->
      <div style="font-size: 4em; font-weight: bold; color: #fff;" align="center" valign="middle">MAIZE FLOUR</div>
      <div style="font-size: 2.5em; font-weight: bold;  color: #fff;" align="center" valign="middle">WHOLE GRAIN</div>
      <!--[if gte mso 9]>
       </v:shape>
    <![endif]-->
    </td>
  </tr>
</table>

<table align="center" width="100%" cellspacing="0" cellpadding="0" style="margin-top: 5px; margin-bottom:...