Creating an email template using HTML, CSS, and a bit of JavaScript (for preview purposes) involves several steps. Email templates need to be designed with specific constraints in mind to ensure they display correctly across different email clients. Here’s a step-by-step guide:
Step 1: Set Up the HTML Structure
Create an HTML file that will serve as your email template. Email templates use inline CSS for styling, so keep that in mind.
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
<style>
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important
}
#MessageViewBody a {
color: inherit;
text-decoration: none
}
p {
line-height: inherit
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0;
overflow: hidden
}
.image_block img+div {
display: none
}
@media (max-width:660px) {
.social_block.desktop_hide .social-table {
display: inline-block !important
}
.mobile_hide {
display: none
}
.row-content {
width: 100% !important
}
.stack .column {
width: 100%;
display: block
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important
}
}
</style>
<style id="NjgwMDAwMDE5OTk5OTY1"></style>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/patch-xhr.js" data-params="{}"></script>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/set-global.js" data-params="{"name":"__stopWatching","value":true}"></script>
<script type="text/javascript" charset="utf-8" defer="" async="" src="chrome-extension://lnaahdmijnjnmgaalacdgakieangpjgp/inject-scripts/set-global.js" data-params="{"name":"__jsons","value":[]}"></script>
</head>
<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
<table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fff">
<tbody>
<tr>
<td>
<table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:30px;padding-top:30px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Logo_26.png" style="display:block;height:auto;border:0;max-width:258px;width:100%" width="258" alt="Logo" title="Logo"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Featured_Area_1.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="padding-bottom:15px;padding-top:15px;width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Heading-01.png" style="display:block;height:auto;border:0;max-width:600px;width:100%" width="600" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:50px">
<div style="color:#202749;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:16px;line-height:150%;text-align:center;mso-line-height-alt:24px">
<p style="margin:0;word-break:break-word">
<span>Cinco de Mayo is an annual celebration held on May 5. The date is observed to commemorate the Mexican Army's victory over the French Empire at the Battle of Puebla, on May 5, 1862, under the leadership of General Ignacio Zaragoza.The victory of the smaller Mexican force against a larger French force was a boost to morale for the Mexicans. Zaragoza died months after the battle due to illness. A year after the battle, a larger French force defeated the Mexican army at the Second Battle of Puebla, and Mexico City soon fell to the invaders.</span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-4" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:15px;padding-top:25px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Heading-02.png" style="display:block;height:auto;border:0;max-width:600px;width:100%" width="600" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-5" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/red-top.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-6" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fc4f5c;color:#000;width:640px;margin:0 auto"
width="640">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Image-01_1.png" style="display:block;height:auto;border:0;max-width:257px;width:100%" width="257" alt="Image" title="Image"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:34px;line-height:120%;text-align:center;mso-line-height-alt:40.8px">
<p style="margin:0;word-break:break-word"><a style="text-decoration: none; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener"><strong><span>Fast Food</span></strong></a></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com/" style="height:42px;width:137px;v-text-anchor:middle;" arcsize="10%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#fc4f5c; font-family:Tahoma, Verdana, sans-serif; font-size:14px"><![endif]-->
<a href="http://www.example.com/" target="_blank" style="text-decoration:none;display:inline-block;color:#fc4f5c;background-color:#ffffff;border-radius:4px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:Roboto, Tahoma, Verdana, Segoe, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="font-size: 16px; word-break: break-word; line-height: 2; mso-line-height-alt: 32px;"><strong><span style="font-size:14px;" data-mce-style="font-size:14px;">View Proposals</span></strong></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-7" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/red-bottom.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-8" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-9" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/blue-top.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-10" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#3fb9bc;color:#000;width:640px;margin:0 auto"
width="640">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Image-04.png" style="display:block;height:auto;border:0;max-width:236px;width:100%" width="236" alt="Image" title="Image"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:34px;line-height:120%;text-align:center;mso-line-height-alt:40.8px">
<p style="margin:0;word-break:break-word"><a style="text-decoration: none; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener"><strong><span>Healthy Food</span></strong></a></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com/" style="height:42px;width:137px;v-text-anchor:middle;" arcsize="10%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#3fb9bc; font-family:Tahoma, Verdana, sans-serif; font-size:14px"><![endif]-->
<a href="http://www.example.com/" target="_blank" style="text-decoration:none;display:inline-block;color:#3fb9bc;background-color:#ffffff;border-radius:4px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:Roboto, Tahoma, Verdana, Segoe, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="font-size: 16px; word-break: break-word; line-height: 2; mso-line-height-alt: 32px;"><strong><span style="font-size:14px;" data-mce-style="font-size:14px;">View Proposals</span></strong></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-11" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/blue-bottom.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-12" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-13" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/green-top.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-14" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#46bd6c;color:#000;width:640px;margin:0 auto"
width="640">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Image-03.png" style="display:block;height:auto;border:0;max-width:174px;width:100%" width="174" alt="Image" title="Image"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:35px;line-height:35px;font-size:1px"> </div>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:34px;line-height:120%;text-align:center;mso-line-height-alt:40.8px">
<p style="margin:0;word-break:break-word"><a style="text-decoration: none; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener"><strong><span>Drinks</span></strong></a></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com/" style="height:42px;width:137px;v-text-anchor:middle;" arcsize="10%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#46bd6c; font-family:Tahoma, Verdana, sans-serif; font-size:14px"><![endif]-->
<a href="http://www.example.com/" target="_blank" style="text-decoration:none;display:inline-block;color:#46bd6c;background-color:#ffffff;border-radius:4px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:Roboto, Tahoma, Verdana, Segoe, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="font-size: 16px; word-break: break-word; line-height: 2; mso-line-height-alt: 32px;"><strong><span style="font-size:14px;" data-mce-style="font-size:14px;">View Proposals</span></strong></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-15" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/green-bottom.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image"
title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-16" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-top:5px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-17" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/yellow-top.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-18" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#fcce65;color:#000;width:640px;margin:0 auto"
width="640">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="http://www.example.com/" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Image-04.png" style="display:block;height:auto;border:0;max-width:236px;width:100%" width="236" alt="Image" title="Image"></a></div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:20px;line-height:20px;font-size:1px"> </div>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:34px;line-height:120%;text-align:center;mso-line-height-alt:40.8px">
<p style="margin:0;word-break:break-word"><a style="text-decoration: none; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener"><strong><span>Dishes</span></strong></a></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-3" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.example.com/" style="height:42px;width:137px;v-text-anchor:middle;" arcsize="10%" stroke="false" fillcolor="#ffffff"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#fcce65; font-family:Tahoma, Verdana, sans-serif; font-size:14px"><![endif]-->
<a href="http://www.example.com/" target="_blank" style="text-decoration:none;display:inline-block;color:#fcce65;background-color:#ffffff;border-radius:4px;width:auto;border-top:0px solid transparent;font-weight:undefined;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;padding-top:5px;padding-bottom:5px;font-family:Roboto, Tahoma, Verdana, Segoe, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="font-size: 16px; word-break: break-word; line-height: 2; mso-line-height-alt: 32px;"><strong><span style="font-size:14px;" data-mce-style="font-size:14px;">View Proposals</span></strong></span></span></a>
<!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-19" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/yellow-bottom.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image"
title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="row row-20" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-color:#202749">
<tbody>
<tr>
<td>
<table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:640px;margin:0 auto" width="640">
<tbody>
<tr>
<td class="column column-1" width="100%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-top:20px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<table class="social_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad">
<div class="alignment" align="center">
<table class="social-table" width="184px" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block">
<tbody>
<tr>
<td style="padding:0 7px 0 7px"><a href="https://www.facebook.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-circle-white/facebook@2x.png" width="32" height="32" alt="Facebook" title="Facebook" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 7px 0 7px">
<a href="https://www.twitter.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-circle-white/twitter@2x.png" width="32" height="32" alt="Twitter" title="Twitter" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 7px 0 7px"><a href="https://www.instagram.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-circle-white/instagram@2x.png" width="32" height="32" alt="Instagram" title="Instagram" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 7px 0 7px"><a href="https://www.linkedin.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-circle-white/linkedin@2x.png" width="32" height="32" alt="LinkedIn" title="LinkedIn" style="display:block;height:auto;border:0"></a></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-left:10px;padding-right:10px;padding-top:10px">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:12px;line-height:150%;text-align:center;mso-line-height-alt:18px">
<p style="margin:0;word-break:break-word"><span>Having trouble viewing this email? <a style="text-decoration: underline; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener">Click here</a> to view in your browser.</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-left:10px;padding-right:10px">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:14px;line-height:150%;text-align:center;mso-line-height-alt:21px">
<p style="margin:0;word-break:break-word"> </p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-4" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:12px;line-height:150%;text-align:center;mso-line-height-alt:18px">
<p style="margin:0;word-break:break-word">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="paragraph_block block-5" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word">
<tbody>
<tr>
<td class="pad">
<div style="color:#fff;font-family:Roboto,Tahoma,Verdana,Segoe,sans-serif;font-size:12px;line-height:120%;text-align:center;mso-line-height-alt:14.399999999999999px">
<p style="margin:0;word-break:break-word">
<span><a style="text-decoration: underline; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener">Manage Preferences</a> | <a style="text-decoration: underline; color: #ffffff;" href="http://www.example.com/" target="_blank" rel="noopener">Unsubscribe</a></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="image_block block-6" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="width:100%">
<div class="alignment" align="center" style="line-height:10px"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/1061/Footer-Graphics.png" style="display:block;height:auto;border:0;max-width:640px;width:100%" width="640" alt="Image" title="Image"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End -->
</body>
</html>
Step 2: Add Inline CSS
For email templates, it’s crucial to use inline CSS for better compatibility across various email clients. You can use tools like Premailer to automatically inline your CSS.
Step 3: Use Table Layouts
Emails are traditionally built using tables for layout because they provide the most consistent rendering across different email clients.
Step 4: Testing Your Template
To test how your email looks, you can create a simple HTML preview using JavaScript. This isn’t necessary for the final email, but it helps during development.
Step 5: Best Practices
- Inline Styles: Always use inline CSS for styling. Email clients like Gmail strip out
<style>tags in the head. - Responsive Design: Use media queries for responsiveness, but ensure your email looks good even without them.
- Alt Text for Images: Always include alt text for images as some email clients block images by default.
- Fallback Fonts: Use web-safe fonts and provide fallbacks.
- Testing: Test your email in multiple clients (Gmail, Outlook, Yahoo, etc.) and devices to ensure compatibility.
Step 6: Using Email Marketing Tools
When sending your email, use email marketing tools like MailChimp, SendGrid, or others that support HTML emails. These platforms often provide additional functionality like tracking, analytics, and easier handling of subscriptions and unsubscriptions.
By following these steps, you can create a robust and visually appealing email template using HTML, CSS, and a bit of JavaScript for development purposes.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.