HTML
<!DOCTYPE html>
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
@media screen and (max-width: 775px) {
table[width="750"] {
width: 100%;
}
}
@media screen and (max-width: 680px) {
table[width="625"] {
width: 90%;
}
table[width="625"] h2 {
width: calc(100% - 192px) !important;
}
}
@media screen and (max-width: 640px) {
table[width="625"] h2,
table[width="625"] .logo,
table[width="625"] .social {
display: block !important;
width: 100% !important;
float: left !important;
text-align: center !important;
}
table[width="625"] h2 {
margin: 10px 0 20px !important;
}
table[width="625"] .logo img {
display: inline-block !important;
}
table[width="625"] .social a {
display: inline-block !important;
width: auto !important;
float: none !important;
}
table[width="550"] {
width: 90%;
}
}
@media screen and (max-width: 540px) {
img[src="button.png"], img[width="444"] {
width: 90%;
height: auto;
}
.h {
font-size: 30px !important;
}
td[height="90"] {
height: 60px;
}
td[height="45"] {
height: 20px;
}
}
</style>
</head>
<body bgcolor="#2B2B2B">
<table bgcolor="#2B2B2B" cellspacing="0" cellpadding="0" width="750" align="center" style="margin: 0 auto;">
<!-- header:start -->
<tr>
<td style="border-bottom: 1px solid #3D3D3D">
<table cellpadding="0" cellspacing="0" width="625" align="center" style="margin:0 auto">
<tr>
<td height="35"></td>
</tr>
<tr>
<td valign="middle">
<a href="http://designmodo.com/" class="logo" style="display:block;float:left;width:96px;">
<img width="25" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/c59fe501-a866-4a77-9267-431dae1d5cc4.png" style="display:block;padding:6px 0;">
</a>
<h2 style="text-align:center;margin:0;padding:4px 0;width:428px;font-weight:normal;font-family:Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;font-size:16px;color: #797979;line-height:1;float:left;">
This email contains many cool images.
<a href="*|ARCHIVE|*" style="text-decoration:none;margin:5px 0 0;color:#B9B9B9;display:block;width:100%;"><strong style="font-weight:bold;">No images?</strong> View online.</a>
</h2>
<div class="social" style="float:right;">
<a style="display:block;float:left;margin:0 8px 0 0;" href="https://twitter.com/designmodo"><img width="40" style="display:block" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/f66e66d1-b2dc-4e84-84ed-b6752c95fd8f.png"></a>
<a style="display:block;float:left;" href="https://www.facebook.com/designmodo"><img width="40" style="display:block" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/b946f6fb-a3d4-4808-a54f-c79ef032523f.png"></a>
</div>
</td>
</tr>
<tr>
<td height="35" class="hide_640"></td>
</tr>
</table>
</td>
</tr>
<!-- header:end -->
<!-- content:start -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<!-- margin:start -->
<tr><td height="90"></td></tr>
<!-- margin:end -->
<tr><td class="h" style="text-align:center;font-family: CircularStd-Book, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 64px;color: #FFFFFF;"><img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/0c92c94a-4fa3-4879-bbda-f1f3fef45e78.png" width="444"></td></tr>
<tr><td height="45"></td></tr>
<tr><td><a href="http://designmodo.com/slides/" style="display:block;"><img border="0" style="display:block;margin:0 auto;" src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/10a12ff5-0ec9-46ac-aff8-870af7ad9534.png" width="447"></a></td></tr>
<tr><td height="90"></td></tr>
<tr><td><a href="http://designmodo.com/slides/" style="display:block"><img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/58f690b7-3132-45f4-b106-a3f04829f299.png" border="0" width="100%"></a></td></tr>
<!-- margin:start -->
<tr><td height="90"></td></tr>
<!-- margin:end -->
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="550" align="center" style="margin: 0 auto;text-align: center">
<tr>
<td style="font-family: SourceSansPro-Light, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 24px;color: rgb(222, 222, 222);line-height: 32px;font-weight: lighter">Tons of new features. 22 new (and 92 total) stunning slides. A new effect to present your slides like a classic scroll page. New templates featuring new scroll effect. Comprehensive help guide and examples. Now it is your turn to try it.</td>
</tr>
<tr>
<td height="80"></td>
</tr>
<tr>
<td><a href="http://designmodo.com/slides/"><img src="https://gallery.mailchimp.com/d7b5474e1bff23f08409d4ba9/images/f1078846-f1d4-46e3-a4b9-a734b2416be7.png" width="173" border="0" style="display:block;margin: 0 auto;"></a></td>
</tr>
</table>
</td>
</tr>
<!-- margin:start -->
<tr><td height="90"></td></tr>
<!-- margin:end -->
</table>
</td>
</tr>
<!-- content:end -->
<!-- footer:start -->
<tr>
<td>
<table class="footer" cellspacing="0" width="100%" style="text-align:center; border-top: 1px solid #3D3D3D">
<tr>
<td height="40"></td>
</tr>
<tr>
<td style="padding:0 25px; line-height:1.6;font-family: SourceSansPro-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 16px;color: #959595;line-height: 19px;">Made for you by <a href="http://designmodo.com/" style="text-decoration: none; color: #959595;font-weight:bold;">Designmodo Team</a>. We appreciate you!</td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td style="font-family: SourceSansPro-Regular, Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 16px;color: #959595;line-height: 19px;"><a href="*|UPDATE_PROFILE|*" style="text-decoration: none; color: #959595;">Manage subscription</a>, <a href="*|UNSUB|*" style="text-decoration: none; color: #959595;">Unsubscribe</a></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
</td>
</tr>
<!-- footer:end -->
</table>
</body>
</html>
