Responsive Email Template
How do I make an responsive email template?
What is a responsive email template? How do you make a responsive email template? This script and codes were developed by Emil Devantie Brockdorff on 11 September 2022, Sunday.
Responsive Email Template Previews
Responsive Email Template - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Email Template</title>
</head>
<body> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- START HEADER/BANNER --> <tbody><tr> <td align="center"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td align="center" valign="top" background="https://designmodo.com/demo/emailtemplate/images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height=" 400""=""> <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="40"></td> </tr> <tr> <td align="center" style="line-height: 0px;"> <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="https://designmodo.com/demo/emailtemplate/images/logo.png" width="109" height="103" alt="logo"> </td> </tr> <tr> <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;"> EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span> </td> </tr> <tr> <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;"> A creative email template for your email campaigns, promotions <br>and products across different email platforms. </td> </tr> <tr> <td height="50"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE --> <tr> <td align="center"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px; border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;"> <tbody><tr> <td height="35"></td> </tr> <tr> <td align="center" style="font-family: 'Raleway', sans-serif; font-size:22px; font-weight: bold; color:#2a3a4b;">A creative way to showcase your content</td> </tr> <tr> <td height="10"></td> </tr> <tr> <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;"> Prepare some flat icons of your choice. You can place your content below.<br> Make sure it's awesome. </td> </tr> </tbody></table> </td> </tr> <tr> <td align="center"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9; "> <tbody><tr> <td height="10"></td> </tr> <tr> <td> <table class="col3" width="183" border="0" align="left" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="30"></td> </tr> <tr> <td align="center"> <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr align="center" style="line-height:0px;"> <td> <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="https://designmodo.com/demo/emailtemplate/images/icon-about.png" width="69" height="78" alt="icon"> </td> </tr> <tr> <td height="15"></td> </tr> <tr align="center"> <td style="font-family: 'Raleway', Arial, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">About Us</td> </tr> <tr> <td height="10"></td> </tr> <tr align="center"> <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td> </tr> </tbody></table> </td> </tr> <tr> <td height="30"></td> </tr> </tbody></table> <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left"> <tbody><tr> <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;"> <p style="padding-left: 24px;"> </p> </td> </tr> </tbody></table> <table class="col3" width="183" border="0" align="left" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="30"></td> </tr> <tr> <td align="center"> <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr align="center" style="line-height:0px;"> <td> <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="https://designmodo.com/demo/emailtemplate/images/icon-team.png" width="69" height="78" alt="icon"> </td> </tr> <tr> <td height="15"></td> </tr> <tr align="center"> <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Team</td> </tr> <tr> <td height="10"></td> </tr> <tr align="center"> <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td> </tr> </tbody></table> </td> </tr> <tr> <td height="30"></td> </tr> </tbody></table> <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left"> <tbody><tr> <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;"> <p style="padding-left: 24px;"> </p> </td> </tr> </tbody></table> <table class="col3" width="183" border="0" align="right" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="30"></td> </tr> <tr> <td align="center"> <table class="insider" width="133" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr align="center" style="line-height:0px;"> <td> <img style="display:block; line-height:0px; font-size:0px; border:0px;" src="https://designmodo.com/demo/emailtemplate/images/icon-portfolio.png" width="69" height="78" alt="icon"> </td> </tr> <tr> <td height="15"></td> </tr> <tr align="center"> <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;">Our Portfolio</td> </tr> <tr> <td height="10"></td> </tr> <tr align="center"> <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;">Place some cool text here.</td> </tr> </tbody></table> </td> </tr> <tr> <td height="30"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td height="5"></td> </tr>
<!-- END 3 BOX SHOWCASE -->
<!-- START AWESOME TITLE --> <tr> <td align="center"> <table align="center" class="col-600" width="600" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td align="center" bgcolor="#2a3b4c"> <table class="col-600" width="600" align="center" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td height="33"></td> </tr> <tr> <td> <table class="col1" width="183" border="0" align="left" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="18"></td> </tr> <tr> <td align="center"> <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="https://designmodo.com/demo/emailtemplate/images/icon-title.png" alt="img" width="156" height="136"> </td> </tr> </tbody></table> <table class="col3_one" width="380" border="0" align="right" cellpadding="0" cellspacing="0"> <tbody><tr align="left" valign="top"> <td style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:30px; font-weight: bold;">This title is definitely awesome! </td> </tr> <tr> <td height="5"></td> </tr> <tr align="left" valign="top"> <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height:24px; font-weight: 300;"> The use of flat colors in web design is more than a recent trend, it is a style designers have used for years to create impactful visuals. When you hear "flat", it doesn't mean boring it just means minimalist. </td> </tr> <tr> <td height="10"></td> </tr> <tr align="left" valign="top"> <td> <table class="button" style="border: 2px solid #fff;" bgcolor="#2b3c4d" width="30%" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td width="10"></td> <td height="30" align="center" style="font-family: 'Open Sans', Arial, sans-serif; font-size:13px; color:#ffffff;"> <a href="#" style="color:#ffffff;">Read more</a> </td> <td width="10"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td height="33"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO --> <tr> <td align="center"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;"> <tbody><tr> <td align="center"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;"> <tbody><tr> <td height="50"></td> </tr> <tr> <td align="right"> <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0"> <tbody><tr> <td align="center" style="line-height:0px;"> <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="https://designmodo.com/demo/emailtemplate/images/icon-responsive.png" width="169" height="138"> </td> </tr> </tbody></table> <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style=""> <tbody><tr> <td align="center"> <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr align="left"> <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td> </tr> <tr> <td height="5"></td> </tr> <tr> <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;"> We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized. </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END WHAT WE DO -->
<!-- START READY FOR NEW PROJECT --> <tr> <td align="center"> <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;"> <tbody><tr> <td height="50"></td> </tr> <tr> <td align="center" bgcolor="#34495e"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="35"></td> </tr> <tr> <td align="center" style="font-family: 'Raleway', sans-serif; font-size:20px; color:#f1c40f; line-height:24px; font-weight: bold;">Ready for new project?</td> </tr> <tr> <td height="20"></td> </tr> <tr> <td align="center" style="font-family: 'Lato', sans-serif; font-size:14px; color:#fff; line-height: 1px; font-weight: 300;"> Check out our price below. </td> </tr> <tr> <td height="40"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE --> <tr> <td align="center"> <table width="600" class="col-600" align="center" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;"> <tbody><tr> <td height="50"></td> </tr> <tr> <td> <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="left" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">Small Business Website</td> </tr> <tr> <td align="center"> <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="20"></td> </tr> <tr align="center" style="line-height:0px;"> <td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$150</td> </tr> <tr> <td height="15"></td> </tr> <tr> <td height="15"></td> </tr> <tr> <td align="center"> <table width="100" border="0" align="center" cellpadding="0" cellspacing="0" style="border: 2px solid #2b3c4d;"> <tbody><tr> <td width="10"></td> <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;"> <a href="#" style="color: #2b3c4d;">Learn More</a> </td> <td width="10"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td height="30"></td> </tr> </tbody></table> <table width="1" height="20" border="0" cellpadding="0" cellspacing="0" align="left"> <tbody><tr> <td height="20" style="font-size: 0;line-height: 0;border-collapse: collapse;"> <p style="padding-left: 24px;"> </p> </td> </tr> </tbody></table> <table style="border:1px solid #e2e2e2;" class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="40" align="center" bgcolor="#2b3c4d" style="font-family: 'Raleway', sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;">E-commerce Website</td> </tr> <tr> <td align="center"> <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="20"></td> </tr> <tr align="center" style="line-height:0px;"> <td style="font-family: 'Lato', sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;">$289</td> </tr> <tr> <td height="30"></td> </tr> <tr align="center"> <td> <table width="100" border="0" align="center" cellpadding="0" cellspacing="0" style=" border: 2px solid #2b3c4d;"> <tbody><tr> <td width="10"></td> <td height="30" align="center" style="font-family: 'Lato', sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;"> <a href="#" style="color: #2b3c4d;">Learn More</a> </td> <td width="10"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td height="20"></td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END PRICING TABLE -->
<!-- START FOOTER --> <tr> <td align="center"> <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;"> <tbody><tr> <td height="50"></td> </tr> <tr> <td align="center" bgcolor="#34495e" background="https://designmodo.com/demo/emailtemplate/images/footer.jpg" height="185"> <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody><tr> <td height="25"></td> </tr> <tr> <td align="center" style="font-family: 'Raleway', sans-serif; font-size:26px; font-weight: 500; color:#f1c40f;">Follow us for some cool stuffs</td> </tr> <tr> <td height="25"></td> </tr> </tbody></table><table align="center" width="35%" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td align="center" width="30%" style="vertical-align: top;"> <a href="https://www.facebook.com/designmodo" target="_blank"> <img src="https://designmodo.com/demo/emailtemplate/images/icon-fb.png"> </a> </td> <td align="center" class="margin" width="30%" style="vertical-align: top;"> <a href="https://twitter.com/designmodo" target="_blank"> <img src="https://designmodo.com/demo/emailtemplate/images/icon-twitter.png"> </a> </td> <td align="center" width="30%" style="vertical-align: top;"> <a href="https://plus.google.com/+Designmodo/posts" target="_blank"> <img src="https://designmodo.com/demo/emailtemplate/images/icon-googleplus.png"> </a> </td> </tr> </tbody></table> </td></tr></tbody></table> </td> </tr> </tbody></table> </td> </tr>
<!-- END FOOTER --> </tbody></table>
</body>
</html>
| Developer | Emil Devantie Brockdorff |
| Username | Mestika |
| Uploaded | September 11, 2022 |
| Rating | 3.5 |
| Size | 3,649 Kb |
| Views | 28,336 |
Do you need developer help for Responsive Email Template?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Emil Devantie Brockdorff (Mestika) Script Codes
| Name | Size |
| Email Template | 5,117 Kb |
| Nestable | 7,745 Kb |
| Vertical Timeline | 5,071 Kb |
| Getting Data From the Wikipedia API Using jQuery | 1,923 Kb |
| CSS FlowChart | 2,186 Kb |
| Stretchy Navigation | 5,057 Kb |
| Facebook like Compose new post | 2,572 Kb |
| Hover.css | 4,617 Kb |
| Eventbrite HTML Email Template | 4,558 Kb |
| Facebook Content Placeholder | 2,331 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Rain Landing in a Pond | Edball | 3,009 Kb |
| Basic template | Tomcat | 1,675 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
| Fullscreen audio play button | 72 | 2,148 Kb |
| Simple animated hover effect | Pobee-norris | 3,044 Kb |
| Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
| Fluid Responsive Typography | Jonmilner | 4,205 Kb |
| Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
| Calculator | Rzencoder | 4,572 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!