Skip to content

Instantly share code, notes, and snippets.

@zapatoche

zapatoche/html responsive 3col

Created August 9, 2013 13:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zapatoche/6193571 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zapatoche/6193571 to your computer and use it in GitHub Desktop.
Download ZIP
3 colums layout html email responsive
Raw
html responsive 3col
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
@media only screen and (max-width: 600px) {
table[class="columns"],
table[class="columns"] .column-wrap {
border-color: red;
width: 100% !important;
/*display:inline !important;*/
}
table[class="columns"] .column {
width: 100% !important;
margin-bottom: 5px !important;
padding-bottom:10px !important;
border-bottom:1px solid #cccccc;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" width="600" cellspacing="0" class="columns" id="article" style="border-top: 1px solid #cccccc;">
<tr>
<td align="left" width="600">
<table border="0" cellpadding="0" width="390" cellspacing="0" class="column-wrap" align="left">
<tr>
<td align="left" width="390">
<table border="0" cellpadding="0" width="185" cellspacing="0" class="column" align="left">
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" width="185" height="119" style="color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px;">
<a href="#" target="_blank"><img src="http://global-email-creatives.s3.amazonaws.com/expertmarket-solar-fr_FR-2013-05-01/thumb-01.jpg" alt=" " style="display: block; -wekit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em;" border="0" width="185" height="119" /></a>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="bottom" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;; font-size: 16px; line-height: 21px;">
<strong>Regionale Anbieter</strong>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;; font-size: 14px; line-height: 21px;">Unser Netzwerk an Fachleuten deckt ganz Deutschland ab, treten Sie mit Installateuren in Ihrer Nähe in Kontakt.</td>
</tr>
</table>
<table border="0" cellpadding="0" width="185" cellspacing="0" class="column" align="right">
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" width="185" height="119" style="color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px;">
<a href="#" target="_blank"><img src="http://global-email-creatives.s3.amazonaws.com/expertmarket-solar-fr_FR-2013-05-01/thumb-02.jpg" alt=" " style="display: block; -wekit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em;" border="0" width="185" height="119" /></a>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="bottom" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 21px;">
<strong>Finanzieller Gewinn in Zeiten der Krise</strong>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px;">Sparen Sie bis zu
<em style="color: #336699; font-style: normal;">1850€ jährlich (netto)</em>für eine garantierte Laufzeit von 20 Jahren. Kommen Sie in den Genuß von Steuergutschriften und weiteren Zuschüssen um Ihr Projekt zu finanzieren.</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" width="185" cellspacing="0" class="column" style="" align="right">
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" width="185" height="119" style="color: #ffffff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px;">
<a href="#" target="_blank"><img src="http://global-email-creatives.s3.amazonaws.com/expertmarket-solar-fr_FR-2013-05-01/thumb-03.jpg" alt=" " style="display: block;-wekit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em;" border="0" width="185" height="119" /></a>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="bottom" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 21px;">
<strong>Eine ökologische Geste</strong>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="line-height: 10px;" class="gutter">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="copy" width="185" style="color: #444444; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px;">Entscheiden Sie sich für eine zuverlässige, saubere und unerschöpfliche Energie. Werden Sie Öko-Bürger!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment