Creating a “Pride Month – Celebrate Your Colors” email template involves designing a vibrant, inclusive, and celebratory message. This template should reflect the spirit of Pride Month, celebrating diversity and inclusion. Here’s a step-by-step guide to creating such an email template using HTML and inline CSS.
Step 1: Set Up the Basic HTML Structure
Create an HTML file that will serve as your email template. Ensure to use inline CSS for better compatibility across different email clients.
<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]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<!--<![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:620px) {
.social_block.desktop_hide .social-table {
display: inline-block !important
}
.image_block img.fullWidth {
max-width: 100% !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
}
.reverse {
display: table;
width: 100%
}
.reverse .column.last {
display: table-header-group !important
}
.row-3 td.column.last .border {
padding: 0;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0
}
}
</style>
<style id="NzQwMDAwMDE5OTk5OTYy"></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:#f5f5f5;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:#f5f5f5;background-position:top center;background-repeat:no-repeat;background-size:auto;background-image:url(https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/12-12_noise_alth.png)">
<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:600px;margin:0 auto" width="600">
<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:15px;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:5px;padding-left:15px;padding-right:15px;padding-top:5px;width:100%">
<div class="alignment" align="center" style="line-height:10px"><a href="example.com" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/brand_1.png" style="display:block;height:auto;border:0;max-width:180px;width:100%" width="180" 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:600px;margin:0 auto" width="600">
<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:15px;line-height:15px;font-size:1px"> </div>
<table class="heading_block block-2" 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-left:20px;padding-right:20px;text-align:center;width:100%">
<h1 style="margin:0;color:#fff;direction:ltr;font-family:Oswald,Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:56px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder"><strong>CELEBRATE YOUR</strong></span></h1>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-3" 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-left:20px;padding-right:20px;text-align:center;width:100%">
<h1 style="margin:0;color:#fff;direction:ltr;font-family:Oswald,Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:66px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><strong>COLORS</strong></h1>
</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:20px;padding-left:25px;padding-right:25px;padding-top:20px">
<div style="color:#fff;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;letter-spacing:0;line-height:150%;text-align:center;mso-line-height-alt:22.5px">
<p style="margin:0">
<strong>It's a time for queer celebration, solidarity, vigils and tributes to those who have been lost due to hate and intolerance. It’s exciting, often playful, sometimes sad, and incredibly important month for our queer community. Join our celebration!</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-5" style="height:20px;line-height:20px;font-size:1px"> </div>
</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;background-size:auto">
<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-size:auto;color:#000;width:600px;margin:0 auto" width="600">
<tbody>
<tr class="reverse">
<td class="column column-1 last" 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="border">
<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%;padding-right:0;padding-left:0">
<div class="alignment" align="center" style="line-height:10px"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/AdobeStock_376859140_crop.png" style="display:block;height:auto;border:0;max-width:420px;width:100%"
width="420" alt="Model wearing a white shirt and earings" title="Model wearing a white shirt and earings"></div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-2" style="height:35px;line-height:35px;font-size:1px"> </div>
</div>
</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">
<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-repeat:no-repeat;background-image:url(https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/12-12_noise.png);color:#000;width:600px;margin:0 auto"
width="600">
<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:25px;line-height:25px;font-size:1px"> </div>
<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:40px;padding-right:40px;padding-top:5px">
<div style="color:#fff;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;letter-spacing:1px;line-height:150%;text-align:center;mso-line-height-alt:22.5px">
<p style="margin:0"><strong>UP TO 50% OFF</strong></p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-3" 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:10px;padding-left:20px;padding-right:20px;padding-top:5px;text-align:center;width:100%">
<h1 style="margin:0;color:#fff;direction:ltr;font-family:Oswald,Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:30px;font-weight:400;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><strong>MAKE AN IMPACT!</strong><br></h1>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-4" style="height:25px;line-height:25px;font-size:1px"> </div>
</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">
<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:600px;margin:0 auto" width="600">
<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="padding-bottom:10px;width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="example.com" target="_blank" style="outline:none" tabindex="-1"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/AdobeStock_465718567.png" style="display:block;height:auto;border:0;max-width:300px;width:100%" width="300" alt="Product" title="Product"></a></div>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-2" 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="text-align:center;width:100%">
<h1 style="margin:0;color:#393d47;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder">Our Head Turners</span></h1>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-3" style="height:15px;line-height:15px;font-size:1px">
</div>
<table class="image_block block-4" 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:10px;padding-top:10px;width:100%">
<div class="alignment" align="center" style="line-height:10px"><a href="example.com" target="_blank" style="outline:none" tabindex="-1"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/ussama-azam-27xbM3bF9_s-unsplash.png" style="display:block;height:auto;border:0;max-width:300px;width:100%" width="300" alt="Product" title="Product"></a></div>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-5" 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="text-align:center;width:100%">
<h1 style="margin:0;color:#393d47;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder">Fashonistas!</span></h1>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-6" style="height:25px;line-height:25px;font-size:1px"> </div>
</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">
<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:10px;width:100%">
<div class="alignment" align="center" style="line-height:10px">
<a href="example.com" target="_blank" style="outline:none" tabindex="-1"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/AdobeStock_390143744.png" style="display:block;height:auto;border:0;max-width:300px;width:100%" width="300" alt="Product" title="Product"></a></div>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-2" 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="text-align:center;width:100%">
<h1 style="margin:0;color:#393d47;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder">For Kings and Queens</span></h1>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-3" style="height:15px;line-height:15px;font-size:1px"> </div>
<table class="image_block block-4" 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:10px;padding-top:10px;width:100%">
<div class="alignment" align="center" style="line-height:10px"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/AdobeStock_302013169.png" style="display:block;height:auto;border:0;max-width:300px;width:100%"
width="300" alt="Product" title="Product"></div>
</td>
</tr>
</tbody>
</table>
<table class="heading_block block-5" 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="text-align:center;width:100%">
<h1 style="margin:0;color:#393d47;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder">Our Top 5</span></h1>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-6" style="height:25px;line-height:25px;font-size:1px"> </div>
</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">
<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:600px;margin:0 auto" width="600">
<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">
<table class="button_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:40px;padding-left:30px;padding-right:20px;padding-top:20px;text-align:center">
<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="example.com" style="height:44px;width:158px;v-text-anchor:middle;" arcsize="69%" stroke="false" fillcolor="#662d91"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#fefefe; font-family:Arial, sans-serif; font-size:14px"><![endif]-->
<a href="example.com" target="_blank" style="text-decoration:none;display:inline-block;color:#fefefe;background-color:#662d91;border-radius:30px;width:auto;border-top:0px solid #D31175;font-weight:400;border-right:0px solid #D31175;border-bottom:0px solid #D31175;border-left:0px solid #D31175;padding-top:8px;padding-bottom:8px;font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:40px;padding-right:40px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="word-break:break-word;"><span style="line-height: 25.2px;" data-mce-style=""><strong>SHOP NOW</strong></span></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">
<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-repeat:no-repeat;background-size:auto;background-image:url(https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/12-13.png);color:#000;width:600px;margin:0 auto"
width="600">
<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:20px;padding-top:17px;vertical-align:top;border-top:0;border-right:0;border-bottom:0;border-left:0">
<div class="spacer_block block-1" style="height:25px;line-height:25px;font-size:1px"> </div>
<table class="heading_block block-2" 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:5px;padding-left:25px;padding-right:25px;padding-top:10px;text-align:center;width:100%">
<h1 style="margin:0;color:#fff;direction:ltr;font-family:Oswald,Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:30px;font-weight:700;letter-spacing:normal;line-height:120%;text-align:center;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder">EACH PURCHASE FROM OUR PRIDE COLLECTION WILL COME WITH A LITTLE GIFT ;)</span></h1>
</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-bottom:10px;padding-left:10px;padding-right:10px;padding-top:5px">
<div style="color:#fff;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:12px;font-weight:400;letter-spacing:0;line-height:120%;text-align:center;mso-line-height-alt:14.399999999999999px">
<p style="margin:0">Valid from 6/1 to 7/1 or until we run out of stock</p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-4" style="height:25px;line-height:25px;font-size:1px"> </div>
</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">
<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:600px;margin:0 auto" width="600">
<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">
<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:600px;margin:0 auto" width="600">
<tbody>
<tr>
<td class="column column-1" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-left:15px;padding-right:15px;padding-top:5px;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%;padding-right:0;padding-left:0">
<div class="alignment" align="center" style="line-height:10px"><img class="fullWidth" src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/delia-giandeini-7FtM9dZ9ck8-unsplash-edit.jpg" style="display:block;height:auto;border:0;max-width:270px;width:100%"
width="270" alt="Queer and Proud" title="Queer and Proud"></div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-2" style="height:25px;line-height:25px;font-size:1px"> </div>
</td>
<td class="column column-2" width="50%" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;padding-bottom:5px;padding-left:15px;padding-right:15px;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:40px;line-height:40px;font-size:1px"> </div>
<table class="heading_block block-2" 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-left:3px;text-align:center;width:100%">
<h1 style="margin:0;color:#ed1e79;direction:ltr;font-family:Oswald,Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:30px;font-weight:400;letter-spacing:normal;line-height:120%;text-align:left;margin-top:0;margin-bottom:0"><span class="tinyMce-placeholder"><strong>WE HELP EACH OTHER</strong></span></h1>
</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-bottom:20px;padding-left:3px;padding-top:20px">
<div style="color:#444;direction:ltr;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:13px;font-weight:400;letter-spacing:0;line-height:150%;text-align:left;mso-line-height-alt:19.5px">
<p style="margin:0">
All the funds raised from this sale will go to help our friend in our local community, whom with we work closely all year</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="button_block block-4" 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:55px;padding-top:5px;text-align:left">
<div class="alignment" align="left">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="example.com" style="height:44px;width:171px;v-text-anchor:middle;" arcsize="69%" stroke="false" fillcolor="#ed1e79"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#fefefe; font-family:Arial, sans-serif; font-size:14px"><![endif]-->
<a href="example.com" target="_blank" style="text-decoration:none;display:inline-block;color:#fefefe;background-color:#ed1e79;border-radius:30px;width:auto;border-top:0px solid #D31175;font-weight:400;border-right:0px solid #D31175;border-bottom:0px solid #D31175;border-left:0px solid #D31175;padding-top:8px;padding-bottom:8px;font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span style="padding-left:40px;padding-right:40px;font-size:14px;display:inline-block;letter-spacing:normal;"><span style="word-break:break-word;"><span style="line-height: 25.2px;" data-mce-style=""><strong>LEARN MORE</strong></span></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-10" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;background-image:url(https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/12-14.png);background-position:top center;background-repeat:no-repeat;background-size:auto">
<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-size:auto;color:#000;width:600px;margin:0 auto" width="600">
<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">
<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:20px;padding-left:15px;padding-right:15px;padding-top:20px;width:100%">
<div class="alignment" align="center" style="line-height:10px"><a href="example.com" target="_blank" style="outline:none" tabindex="-1"><img src="https://d1oco4z2z1fhwp.cloudfront.net/templates/default/7691/brand_3.png" style="display:block;height:auto;border:0;max-width:180px;width:100%" width="180" alt="Logo" title="Logo"></a></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">
<tbody>
<tr>
<td>
<table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:600px;margin:0 auto" width="600">
<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:15px;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="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0">
<tbody>
<tr>
<td class="pad" style="padding-bottom:5px;padding-left:20px;padding-right:20px;padding-top:10px;text-align:center">
<div class="alignment" align="center">
<table class="social-table" width="126px" 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 5px 0 5px"><a href="https://www.facebook.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-only-logo-dark-gray/facebook@2x.png" width="32" height="32" alt="Facebook" title="Facebook" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 5px 0 5px"><a href="https://www.twitter.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-only-logo-dark-gray/twitter@2x.png" width="32" height="32" alt="Twitter" title="Twitter" style="display:block;height:auto;border:0"></a></td>
<td
style="padding:0 5px 0 5px"><a href="https://www.instagram.com" target="_blank"><img src="https://app-rsrc.getbee.io/public/resources/social-networks-icon-sets/t-only-logo-dark-gray/instagram@2x.png" width="32" height="32" alt="Instagram" title="Instagram" 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-bottom:5px;padding-left:10px;padding-right:10px;padding-top:15px">
<div style="color:#666;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,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">
<strong><span style="color:#39374e;"><a href="example.com" target="_blank" style="text-decoration: none; color: #ed1e79;" rel="noopener">Delivery Information</a> | <a href="example.com" target="_blank" style="text-decoration: none; color: #ed1e79;" rel="noopener">About Us</a> | <a href="example.com" target="_blank" style="text-decoration: none; color: #ed1e79;" rel="noopener">Contact</a></span></strong>
</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-bottom:15px;padding-left:10px;padding-right:10px;padding-top:5px">
<div style="color:#666;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,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 style="color:#39374e;"> Changed your mind? You can </span><strong><span><a href="*|UNSUB|*" target="_blank" rel="noopener">unsubscribe</a></span></strong><span style="color:#39374e;"><strong> </strong>at any time.</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<div class="spacer_block block-4" style="height:35px;line-height:35px;font-size:1px"> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End -->
</body>
</html>
Step 2: Customize the Content
- Header: Add a vibrant background color and a welcoming headline.
- Content: Write engaging and inclusive content that reflects the spirit of Pride Month. Highlight any special events, promotions, or messages from your company.
- Call to Action (CTA): Ensure your CTA is clear and prompts the recipient to learn more about your Pride Month initiatives or promotions.
- Footer: Include links to unsubscribe and your privacy policy.
Step 3: Add Inline CSS
Use inline CSS to ensure that your email template renders correctly across all email clients. Tools like Premailer can help convert your embedded CSS to inline CSS automatically.
Step 4: Ensure Responsiveness
Make sure your email template is responsive and looks good on both desktop and mobile devices. Use percentage-based widths and avoid relying on media queries alone, as some email clients do not support them well.
Step 5: Test Your Email
Before sending out your email, thoroughly test it:
- Email Testing Tools: Use tools like Litmus or Email on Acid to preview how your email will look in different email clients and devices.
- Send Test Emails: Send test emails to yourself and colleagues to check for any rendering issues or broken links.
Conclusion
By following these steps, you can create a vibrant and inclusive Pride Month email template that celebrates diversity and encourages recipients to join in the celebration. Remember to test your email across different platforms to ensure it displays correctly for all recipients.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.