|
<!-- Progressive Enhancements --> |
|
<style> |
|
/* Media Queries */ |
|
@media screen and (max-width: 480px) { |
|
|
|
/* What it does: Forces table cells into full-width rows. */ |
|
.stack-column { |
|
display: block !important; |
|
width: 100% !important; |
|
max-width: 100% !important; |
|
direction: ltr !important; |
|
} |
|
|
|
} |
|
</style> |
|
|
|
<!-- Two Even Columns : BEGIN --> |
|
<tr> |
|
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%"> |
|
<!--[if mso]> |
|
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> |
|
<tr> |
|
<td align="center" valign="top" width="660"> |
|
<![endif]--> |
|
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;"> |
|
<tr> |
|
<td align="center" valign="top" style="font-size:0; padding: 10px 0;"> |
|
<!--[if mso]> |
|
<table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> |
|
<tr> |
|
<td align="left" valign="top" width="330"> |
|
<![endif]--> |
|
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column"> |
|
<table cellspacing="0" cellpadding="0" border="0" width="100%"> |
|
<tr> |
|
<td style="padding: 10px 10px;"> |
|
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;"> |
|
<tr> |
|
<td> |
|
<img src="http://placehold.it/310" width="310" alt="" style="border: 0;width: 100%;max-width: 310px;" class="center-on-narrow"> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center"> |
|
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. |
|
</td> |
|
</tr> |
|
</table> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
<!--[if mso]> |
|
</td> |
|
<td align="left" valign="top" width="330"> |
|
<![endif]--> |
|
<div style="display:inline-block; Margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column"> |
|
<table width="100%"> |
|
<tr> |
|
<td style="padding: 10px 10px;"> |
|
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;"> |
|
<tr> |
|
<td> |
|
<img src="http://placehold.it/310" width="310" alt="" style="border: 0;width: 100%;max-width: 310px;" class="center-on-narrow"> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center"> |
|
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. |
|
</td> |
|
</tr> |
|
</table> |
|
</td> |
|
</tr> |
|
</table> |
|
</div> |
|
<!--[if mso]> |
|
</td> |
|
</tr> |
|
</table> |
|
<![endif]--> |
|
</td> |
|
</tr> |
|
</table> |
|
<!--[if mso]> |
|
</td> |
|
</tr> |
|
</table> |
|
<![endif]--> |
|
</td> |
|
</tr> |
|
<!-- Two Even Columns : END --> |
