Slides 2 - HTML Email Newsletter

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>
CSS
JAVASCRIPT
Expand for more options Login