Skip to content

Instantly share code, notes, and snippets.

@eemr3
Created February 21, 2024 19:20
Show Gist options
  • Save eemr3/c56ffd2b4446e0a69785c0d1a1c50c22 to your computer and use it in GitHub Desktop.
Save eemr3/c56ffd2b4446e0a69785c0d1a1c50c22 to your computer and use it in GitHub Desktop.
Template para envio de email
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<!--[if (mso 16)]>
<style type="text/css">
a {
text-decoration: none;
}
</style>
<![endif]-->
<!--[if gte mso 9
]><style>
sup {
font-size: 100% !important;
}
</style><!
[endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style>
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.es-button {
text-decoration: none !important;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.es-desk-hidden {
display: none;
float: left;
overflow: hidden;
width: 0;
max-height: 0;
line-height: 0;
}
/*
END OF IMPORTANT
*/
s {
text-decoration: line-through;
}
body {
width: 100%;
font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0px;
}
table td,
html,
body,
.es-wrapper {
padding: 0;
margin: 0;
}
.es-content,
.es-header,
.es-footer {
table-layout: fixed !important;
width: 100%;
}
img {
display: block;
border: 0;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
table tr {
border-collapse: collapse;
}
p,
hr {
margin: 0;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
line-height: 120%;
font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif;
}
p,
ul li,
ol li,
a {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
.es-left {
float: left;
}
.es-right {
float: right;
}
.es-p5 {
padding: 5px;
}
.es-p5t {
padding-top: 5px;
}
.es-p5b {
padding-bottom: 5px;
}
.es-p5l {
padding-left: 5px;
}
.es-p5r {
padding-right: 5px;
}
.es-p10 {
padding: 10px;
}
.es-p10t {
padding-top: 10px;
}
.es-p10b {
padding-bottom: 10px;
}
.es-p10l {
padding-left: 10px;
}
.es-p10r {
padding-right: 10px;
}
.es-p15 {
padding: 15px;
}
.es-p15t {
padding-top: 15px;
}
.es-p15b {
padding-bottom: 15px;
}
.es-p15l {
padding-left: 15px;
}
.es-p15r {
padding-right: 15px;
}
.es-p20 {
padding: 20px;
}
.es-p20t {
padding-top: 20px;
}
.es-p20b {
padding-bottom: 20px;
}
.es-p20l {
padding-left: 20px;
}
.es-p20r {
padding-right: 20px;
}
.es-p25 {
padding: 25px;
}
.es-p25t {
padding-top: 25px;
}
.es-p25b {
padding-bottom: 25px;
}
.es-p25l {
padding-left: 25px;
}
.es-p25r {
padding-right: 25px;
}
.es-p30 {
padding: 30px;
}
.es-p30t {
padding-top: 30px;
}
.es-p30b {
padding-bottom: 30px;
}
.es-p30l {
padding-left: 30px;
}
.es-p30r {
padding-right: 30px;
}
.es-p35 {
padding: 35px;
}
.es-p35t {
padding-top: 35px;
}
.es-p35b {
padding-bottom: 35px;
}
.es-p35l {
padding-left: 35px;
}
.es-p35r {
padding-right: 35px;
}
.es-p40 {
padding: 40px;
}
.es-p40t {
padding-top: 40px;
}
.es-p40b {
padding-bottom: 40px;
}
.es-p40l {
padding-left: 40px;
}
.es-p40r {
padding-right: 40px;
}
.es-menu td {
border: 0;
}
.es-menu td a img {
display: inline-block !important;
}
/* END CONFIG STYLES */
a {
text-decoration: underline;
}
p,
ul li,
ol li {
font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif;
line-height: 150%;
}
ul li,
ol li {
margin-bottom: 15px;
margin-left: 0;
}
.es-menu td a {
text-decoration: none;
display: block;
font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif;
}
.es-wrapper {
width: 100%;
height: 100%;
background-repeat: repeat;
background-position: center top;
}
.es-wrapper-color,
.es-wrapper {
background-color: #f6f6f6;
}
.es-header {
background-color: transparent;
background-repeat: repeat;
background-position: center top;
}
.es-header-body {
background-color: transparent;
}
.es-header-body p,
.es-header-body ul li,
.es-header-body ol li {
color: #999999;
font-size: 14px;
}
.es-header-body a {
color: #999999;
font-size: 14px;
}
.es-content-body {
background-color: #ffffff;
}
.es-content-body p,
.es-content-body ul li,
.es-content-body ol li {
color: #040404;
font-size: 14px;
}
.es-content-body a {
color: #040404;
font-size: 14px;
}
.es-footer {
background-color: transparent;
background-repeat: repeat;
background-position: center top;
}
.es-footer-body {
background-color: #ffffff;
}
.es-footer-body p,
.es-footer-body ul li,
.es-footer-body ol li {
color: #ffffff;
font-size: 14px;
}
.es-footer-body a {
color: #ffffff;
font-size: 14px;
}
.es-infoblock,
.es-infoblock p,
.es-infoblock ul li,
.es-infoblock ol li {
line-height: 120%;
font-size: 12px;
color: #cccccc;
}
.es-infoblock a {
font-size: 12px;
color: #cccccc;
}
h1 {
font-size: 30px;
font-style: normal;
font-weight: bold;
color: #040404;
}
h2 {
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #040404;
}
h3 {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #040404;
}
.es-header-body h1 a,
.es-content-body h1 a,
.es-footer-body h1 a {
font-size: 30px;
}
.es-header-body h2 a,
.es-content-body h2 a,
.es-footer-body h2 a {
font-size: 24px;
}
.es-header-body h3 a,
.es-content-body h3 a,
.es-footer-body h3 a {
font-size: 20px;
}
a.es-button,
button.es-button {
display: inline-block;
background: #38c2f1;
border-radius: 25px;
font-size: 14px;
font-family: helvetica, 'helvetica neue', arial, verdana, sans-serif;
font-weight: bold;
font-style: normal;
line-height: 120%;
color: #ffffff;
text-decoration: none;
width: auto;
text-align: center;
padding: 10px 30px 10px 30px;
}
.es-button-border {
border-style: solid solid solid solid;
border-color: #38c2f1 #38c2f1 #38c2f1 #38c2f1;
background: #38c2f1;
border-width: 0px 0px 0px 0px;
display: inline-block;
border-radius: 25px;
width: auto;
}
/* RESPONSIVE STYLES Please do not delete and edit CSS styles below. If you don't need responsive layout, please delete this section. */
@media only screen and (max-width: 600px) {
p,
ul li,
ol li,
a {
line-height: 150% !important;
}
h1,
h2,
h3,
h1 a,
h2 a,
h3 a {
line-height: 120% !important;
}
h1 {
font-size: 28px !important;
text-align: center;
}
h2 {
font-size: 26px !important;
text-align: center;
}
h3 {
font-size: 20px !important;
text-align: center;
}
.es-header-body h1 a,
.es-content-body h1 a,
.es-footer-body h1 a {
font-size: 28px !important;
}
.es-header-body h2 a,
.es-content-body h2 a,
.es-footer-body h2 a {
font-size: 26px !important;
}
.es-header-body h3 a,
.es-content-body h3 a,
.es-footer-body h3 a {
font-size: 20px !important;
}
.es-menu td a {
font-size: 12px !important;
}
.es-header-body p,
.es-header-body ul li,
.es-header-body ol li,
.es-header-body a {
font-size: 12px !important;
}
.es-content-body p,
.es-content-body ul li,
.es-content-body ol li,
.es-content-body a {
font-size: 14px !important;
}
.es-footer-body p,
.es-footer-body ul li,
.es-footer-body ol li,
.es-footer-body a {
font-size: 14px !important;
}
.es-infoblock p,
.es-infoblock ul li,
.es-infoblock ol li,
.es-infoblock a {
font-size: 11px !important;
}
*[class='gmail-fix'] {
display: none !important;
}
.es-m-txt-c,
.es-m-txt-c h1,
.es-m-txt-c h2,
.es-m-txt-c h3 {
text-align: center !important;
}
.es-m-txt-r,
.es-m-txt-r h1,
.es-m-txt-r h2,
.es-m-txt-r h3 {
text-align: right !important;
}
.es-m-txt-l,
.es-m-txt-l h1,
.es-m-txt-l h2,
.es-m-txt-l h3 {
text-align: left !important;
}
.es-m-txt-r img,
.es-m-txt-c img,
.es-m-txt-l img {
display: inline !important;
}
.es-button-border {
display: block !important;
}
a.es-button,
button.es-button {
font-size: 14px !important;
display: block !important;
border-left-width: 0px !important;
border-right-width: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.es-btn-fw {
border-width: 10px 0px !important;
text-align: center !important;
}
.es-adaptive table,
.es-btn-fw,
.es-btn-fw-brdr,
.es-left,
.es-right {
width: 100% !important;
}
.es-content table,
.es-header table,
.es-footer table,
.es-content,
.es-footer,
.es-header {
width: 100% !important;
max-width: 600px !important;
}
.es-adapt-td {
display: block !important;
width: 100% !important;
}
.adapt-img {
width: 100% !important;
height: auto !important;
}
.es-m-p0 {
padding: 0px !important;
}
.es-m-p0r {
padding-right: 0px !important;
}
.es-m-p0l {
padding-left: 0px !important;
}
.es-m-p0t {
padding-top: 0px !important;
}
.es-m-p0b {
padding-bottom: 0 !important;
}
.es-m-p20b {
padding-bottom: 20px !important;
}
.es-mobile-hidden,
.es-hidden {
display: none !important;
}
tr.es-desk-hidden,
td.es-desk-hidden,
table.es-desk-hidden {
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
line-height: inherit !important;
}
tr.es-desk-hidden {
display: table-row !important;
}
table.es-desk-hidden {
display: table !important;
}
td.es-desk-menu-hidden {
display: table-cell !important;
}
.es-menu td {
width: 1% !important;
}
table.es-table-not-adapt,
.esd-block-html table {
width: auto !important;
}
table.es-social {
display: inline-block !important;
}
table.es-social td {
display: inline-block !important;
}
.es-desk-hidden {
display: table-row !important;
width: auto !important;
overflow: visible !important;
max-height: inherit !important;
}
.h-auto {
height: auto !important;
}
}
</style>
</head>
<body>
<div dir="ltr" class="es-wrapper-color">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-email-paddings" valign="top">
<table cellpadding="0" cellspacing="0" class="es-content esd-header-popover" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table bgcolor="rgba(0, 0, 0, 0)" class="es-content-body" align="center" cellpadding="0"
cellspacing="0" width="600" style="background-color: transparent">
<tbody>
<tr>
<td class="esd-structure es-p10t es-p10b es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="esd-block-text es-infoblock" align="left"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="es-header" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table bgcolor="transparent" class="es-header-body" align="center" cellpadding="0" cellspacing="0"
width="600" style="background-color: transparent">
<tbody>
<tr>
<td class="esd-structure" align="left" style="
background-position: center top;
background-color: #2a2929;
" bgcolor="#2a2929">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="600" class="esd-container-frame esd-checked" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%" style="
background-image: url(https://portalempregobrasil.com.br/img/BG-Banner-Top-Pag-Home.jpg);
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
"
background="https://portalempregobrasil.com.br/img/BG-Banner-Top-Pag-Home.jpg">
<tbody>
<tr>
<td align="center" class="esd-block-image es-p5b es-m-txt-c"
style="font-size: 0px">
<a target="_blank"><img
src="https://portalempregobrasil.com.br/img/Portal-emprego-Brasil-Pessoas.png"
alt style="display: block" width="185" /></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="es-content" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table bgcolor="#ffffff" class="es-content-body" align="center" cellpadding="0" cellspacing="0"
width="600">
<tbody>
<tr>
<td class="esd-structure es-p20t es-p10b es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%"
style="background-position: left top">
<tbody>
<tr>
<td align="left" class="esd-block-text">
<p>Prezado {{name}},</p>
<br />
{{#each message}}
<p>{{this}}</p>
{{/each}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{{#if urlInterview}}
<tr>
<td class="esd-structure es-p15t es-p15b es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-spacer es-p15" style="font-size:0">
<table border="0" width="100%" height="100%" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td
style="border-bottom: 1px solid #cccccc; background: unset; height:1px; width:100%; margin:0px 0px 0px 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<p style="color: #494141;">Link para entrevista: <a
rel="nofollow noopener noreferrer" target="_blank"
href={{urlInterview}}>{{urlInterview}}</a></p>
</td>
</tr>
<tr>
<td align="center" class="esd-block-spacer es-p10" style="font-size:0">
<table border="0" width="100%" height="100%" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td
style="border-bottom: 1px solid #cccccc; background: unset; height:1px; width:100%; margin:0px 0px 0px 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{{/if}}
{{#if linkConvocation}}
<tr>
<td class="esd-structure es-p15t es-p15b es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" class="esd-block-spacer es-p15" style="font-size: 0">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
border-bottom: 1px solid #cccccc;
background: unset;
height: 1px;
width: 100%;
margin: 0px 0px 0px 0px;
"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="esd-block-button h-auto" height="37">
<p>
Para aceitar sua convocação, clique por
favor no botão da vaga abaixo:
</p>
</td>
</tr>
<tr>
<td align="left" class="esd-block-button h-auto" height="37">
<span class="es-button-border" style="
background: #49922B;
border-color: #ff564e;
border-radius: 8px;
"><a href={{linkConvocation}} class="es-button" target="_blank" style="
background: #49922B;
border-radius: 8px;
">{{vacancyName}}</a></span>
</td>
</tr>
<tr>
<td align="center" class="esd-block-spacer es-p15" style="font-size: 0">
<table border="0" width="100%" height="100%" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td style="
background: unset;
height: 1px;
width: 100%;
margin: 0px 0px 0px 0px;
"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<h4 style="color: #494141; font-size: 13px">
Se caso o botão não funcionar copie o link
abaixo e cole no seu navegador:<br />
</h4>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<p style="
color: #494141;
font-size: 12px;
padding-top: 6px;
">
{{linkConvocation}}
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{{/if}}
{{#if linkConvocation}}
<tr>
<td class="esd-structure es-p20r es-p20l" align="left" style="
background-position: left top;
background-color: #f6f6f6;
" bgcolor="#F6F6F6">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%"
style="background-position: left top">
<tbody>
<tr>
<td align="center" class="esd-block-spacer" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
{{/if}}
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="es-content esd-footer-popover" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table bgcolor="transparent" class="es-content-body" align="center" cellpadding="0" cellspacing="0"
width="600" style="background-color: transparent">
<tbody>
<tr>
<td class="esd-structure es-p30t es-p30b es-p20r es-p20l" align="left">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-container-frame" width="560" valign="top" align="center">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<p style="color: #494141; padding-bottom: 5px;">
Atensiosamente,
</p>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<h4 style="color: #494141">
{{responsabile}}
</h4>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c es-p5b">
<p style="
color: #554d4d;
font-size: 12px;
line-height: 150%;
font-style: italic;
">
<strong>{{responsibilePosition}}</strong>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="esd-container-frame" width="560" valign="top" align="center">
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="esd-block-text es-m-txt-c">
<h5 style="
color: #494141;
padding-top: 5px;
border-top: 1px solid #cccccc;
width: auto;
">
{{companyName}}
</h5>
</td>
</tr>
<tr>
<td align="left" class="esd-block-text es-m-txt-c es-p5b">
<p style="
color: #554d4d;
font-size: 12px;
font-style: italic;
">
<strong>{{companyEmail}}</strong>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment