|
|
|
|
|
This is a Headline
|
|
Nam sollicitudin dapibus nisi quis varius. Ut posuere volutpat erat, pellentesque iaculis velit eleifend vitae.
|
|
|
|
|
|
|
|
Image Surround
A layout that provides placement for a headline in the center, wrapped with images arround the sides. As screen size narrows, certain images are dropped and others rearrange. Decent for promotional layouts containing product images.
<style>
/* Image Surround Layout Pattern CSS */
@media only screen and (max-width: 599px) {
td[class="pattern"] img {
width: 100%;
height: auto !important;
}
td[class="pattern"] img.cta {
width: auto;
}
td[class="pattern"] table,
td[class="pattern"] .row {
width: 100%;
}
td[class="pattern"] .img {
display: block;
float: left;
width: 25%;
}
td[class="pattern"] .middle {
width: 50%;
}
}
@media only screen and (max-width: 550px) {
td[class="pattern"] .headline { font-size: 26px !important; }
}
@media only screen and (max-width: 460px) {
td[class="pattern"] .row2 { padding: 40px 0; }
td[class="pattern"] .headline { font-size: 42px !important; }
td[class="pattern"] .body_copy { font-size: 16px !important; }
td[class="pattern"] .hide { display: none; }
td[class="pattern"] .img {
width: 50%;
}
td[class="pattern"] .img img {
width: 100%;
}
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="pattern" width="600">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="row row1">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="img hide"><img src="http://placehold.it/150x150/bbbbbb&text=Image+7" alt="" style="display: block; border: 0;" /></td>
<td class="img"><img src="http://placehold.it/150x150&text=Image+1" alt="" style="display: block; border: 0;" /></td>
<td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+2" alt="" style="display: block; border: 0;" /></td>
<td class="img hide"><img src="http://placehold.it/150x150&text=Image+8" alt="" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row row2">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="hide">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://placehold.it/150x150&text=Image+9" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td><img src="http://placehold.it/150x150/bbbbbb&text=Image+11" alt="" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
<td class="middle" width="300" align="center" valign="middle">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="headline" align="center" style="font-family: arial,sans-serif; font-size: 42px; font-weight: bold; text-transform: uppercase; color: #333; padding: 10 20px;">
This is a Headline
</td>
</tr>
<tr>
<td class="body_copy" align="center" style="font-family: arial,sans-serif; font-size: 14px; color: #666; padding: 10px 20px;">
Nam sollicitudin dapibus nisi quis varius. Ut posuere volutpat erat, pellentesque iaculis velit eleifend vitae.
</td>
</tr>
<tr>
<td align="center" style="padding: 10px;">
<img class="cta" src="http://placehold.it/120x40/333333&text=Shop+Now" alt="" style="display: block; border: 0;" />
</td>
</tr>
</table>
</td>
<td class="hide">
<table cellpadding="0" cellspacing="0">
<tr>
<td><img src="http://placehold.it/150x150/bbbbbb&text=Image+10" alt="" style="display: block; border: 0;" /></td>
</tr>
<tr>
<td><img src="http://placehold.it/150x150&text=Image+12" alt="" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row row3">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="img"><img src="http://placehold.it/150x150&text=Image+3" alt="" style="display: block; border: 0;" /></td>
<td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+4" alt="" style="display: block; border: 0;" /></td>
<td class="img"><img src="http://placehold.it/150x150&text=Image+5" alt="" style="display: block; border: 0;" /></td>
<td class="img"><img src="http://placehold.it/150x150/bbbbbb&text=Image+6" alt="" style="display: block; border: 0;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
