[go: up one dir, main page]
Scribd
Upload
40 views12 pages

HTM Email Code

The document is an HTML email template designed for responsive display across various devices. It includes styles for mobile optimization and features a structured layout with images and contact information for a human resources department. The template emphasizes branding with specific colors and fonts, and provides links for email and website contact.

Uploaded by

Deepti Kulkarni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views12 pages

HTM Email Code

The document is an HTML email template designed for responsive display across various devices. It includes styles for mobile optimization and features a structured layout with images and contact information for a human resources department. The template emphasizes branding with specific colors and fonts, and provides links for email and website contact.

Uploaded by

Deepti Kulkarni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

<!

doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-mi-
crosoft-com:office:office">

<head>
<meta charset="utf-8" />
<meta content="width=device-width" name="viewport" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta name="x-apple-disable-message-reformatting" />
<meta content="telephone=no,address=no,email=no,date=no,url=no"
name="format-detection" />
<title>Placeholder</title>
<!--[if mso]>
<style>
*{
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<!-- <![endif]-->
<link href="https://fonts.googleapis.com/css?family=Open Sans:700"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open Sans:400"
rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Inter:400"
rel="stylesheet" type="text/css">
<style>
html {
margin: 0 !important;
padding: 0 !important;
}

*{
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
td {
vertical-align: top;
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
a{
text-decoration: none;
}
img {
-ms-interpolation-mode:bicubic;
}
@media only screen and (min-device-width: 320px) and (max-device-
width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
@media only screen and (min-device-width: 375px) and (max-device-
width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
@media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}

</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style>
@media only screen and (max-device-width: 599px), only screen and
(max-width: 599px) {

.eh {
height:auto !important;
}
.desktop {
display: none !important;
height: 0 !important;
margin: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
visibility: hidden !important;
width: 0 !important;
}
.mobile {
display: block !important;
width: auto !important;
height: auto !important;
float: none !important;
}
.email-container {
width: 100% !important;
margin: auto !important;
}
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
.wid-auto {
width:auto !important;
}

.table-w-full-mobile {
width: 100%;
}

.pl-56041263 {padding-left:16px !important;}.pr-98689273 {padding-


right:16px !important;}

.mobile-center {
text-align: center;
}

.mobile-center > table {


display: inline-block;
vertical-align: inherit;
}

.mobile-left {
text-align: left;
}

.mobile-left > table {


display: inline-block;
vertical-align: inherit;
}

.mobile-right {
text-align: right;
}
.mobile-right > table {
display: inline-block;
vertical-align: inherit;
}

</style>
</head>

<body width="100%" style="background-color:#f5f5f5;margin:0;pad-


ding:0!important;mso-line-height-rule:exactly;">
<div style="background-color:#f5f5f5">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml"
fill="t">
<v:fill type="tile" color="#f5f5f5"/>
</v:background>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="center">
<table bgcolor="#ffffff" style="margin:0 auto;" align="center"
id="brick_container" cellspacing="0" cellpadding="0" border="0"
width="600" class="email-container">
<tr>
<td width="600" class="0hbVzquHdAnohyaIF6JGcirbipsDIW invert-bg"
style="background-repeat:no-repeat !important; background-position:
center center !important; background-size: cover !important; border-col-
lapse:separate !important;" background="https://media.marka-
img.com/171869aa/0hbVzquHdAnohyaIF6JGcirbipsDIW.png">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false" style=" border: 0;display: inline-block; width:
600px; height:1442px;"

src="https://media.marka-img.com/171869aa/0hbVzquHdAnohyaIF6JGcir
bipsDIW.png"
/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
stroke="false" style=" border: 0;display: inline-block;position: absolute;
width: 600px; height:1442px;">
<v:fill opacity="0%" color="#000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="552" align="right" style="vertical-align: middle; background-
color:#9d186d; padding-left:24px; padding-right:24px;"
bgcolor="#9d186d">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:24px; height:24px; font-size:24px">&#8202;</
div>
</td>
</tr>
<tr>
<td style="vertical-align: middle;" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" align="right" style="vertical-align: middle; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="86">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="78" align="center" style="vertical-align: middle; padding-
left:4px; padding-right:4px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="vertical-align: middle;" width="68" align="center"><img
src="https://media.marka-img.com/171869aa/bd3TY099jYKWCORwEXdm
79mP1vLur8.png" width="68" border="0" style="min-width:68px;
width:68px;
height: auto; display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width:2px; min-width:2px;" width="2">&#8202;</td>
<td style="vertical-align: middle;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="vertical-align: middle; border-width: 0px 0px
0px 1px; border-color:#fcfcfc; border-style:solid; padding-left:4px; pad-
ding-right:4px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="98" align="center"><img
src="https://media.marka-img.com/171869aa/WyndhUje5Qmpeooe51xu
v4Eox9epWE.png" width="98" border="0" style="min-width:98px;
width:98px;
height: auto; display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:24px; height:24px; font-size:24px">&#8202;</
div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="552" align="center" style="vertical-align: middle; padding-
left:24px; padding-right:24px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:24px; height:24px; font-size:24px">&#8202;</
div>
</td>
</tr>
<tr>
<td style="vertical-align: middle;" align="center"><img
src="https://media.marka-img.com/171869aa/G6SapDXGX31biDB33MW0
EHHJUFVJDg.png" width="552" border="0" style="width: 100%;
height: auto; display: block;"></td>
</tr>
<tr>
<td>
<div style="line-height:24px; height:24px; font-size:24px">&#8202;</
div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="552" style="vertical-align: middle; padding-left:24px; pad-
ding-right:24px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:8px; height:8px; font-size:8px">&#8202;</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle;" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" style=" padding-left:16px; padding-right:16px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:16px; height:16px; font-size:16px">&#8202;</
div>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="115">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="115"><img
src="https://media.marka-img.com/171869aa/T1WaqNBGsf3uCMo96tj17
LfMLBslnQ.png" width="115" border="0" style="width: 100%;
height: auto; display: block;"></td>
</tr>
</table>
</td>
<td style="width:12px; min-width:12px;" width="12">&#8202;</td>
<td style=" border-width: 0px 0px 0px 0.5px; border-color:#6d6d6e;
border-style:solid; padding-left:12px; padding-right:12px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" style="vertical-align: middle; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" style="vertical-align: middle; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:28px;text-align:left;"><span
style="color:#333342;font-weight:700;font-family:Open Sans,Arial,sans-
serif;font-size:16px;line-height:28px;text-align:left;">Human
Resources</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:8px; height:8px; font-size:8px">&#8202;</div>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" style="vertical-align: middle; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="16"><img
src="https://media.marka-img.com/171869aa/zGwZ2VxRRF0OvSpDHgiQ
7kYtWoZL7W.png" width="16" border="0" style="min-width:16px;
width:16px;
height: auto; display: block;"></td>
<td style="width:8px; min-width:8px;" width="8">&#8202;</td>
<td style="vertical-align: middle;">
<div style="line-height:24px;text-align:left;"><span
style="color:#9d186d;font-family:Open Sans,Arial,sans-serif;font-
size:12px;line-height:24px;text-align:left;"><a
style="color:#9d186d;text-decoration:none;"
href="mailto:hr@mpccloudconsulting.com"
target="_blank">hr@mpccloudconsulting.com</a></span></div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:4px; height:4px; font-size:4px">&#8202;</div>
</td>
</tr>
<tr>
<td width="100%" style="vertical-align: middle; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="16"><img
src="https://media.marka-img.com/171869aa/7BpeZakvfvkdE1P5zLW74
b5fkKUDFV.png" width="16" border="0" style="min-width:16px;
width:16px;
height: auto; display: block;"></td>
<td style="width:8px; min-width:8px;" width="8">&#8202;</td>
<td style="vertical-align: middle;">
<div style="line-height:24px;text-align:left;"><span
style="color:#9d186d;font-family:Inter,Arial,sans-serif;font-
size:12px;line-height:24px;text-
align:left;">www.mpccloudconsulting.com</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:16px; height:16px; font-size:16px">&#8202;</
div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:8px; height:8px; font-size:8px">&#8202;</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="552" align="right" class="pl-56041263 pr-98689273"
style="vertical-align: middle; background-color:#9d186d; padding-
left:24px; padding-right:24px;" bgcolor="#9d186d">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="line-height:12px; height:12px; font-size:12px">&#8202;</
div>
</td>
</tr>
<tr>
<td style="vertical-align: middle;" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" align="right" style="vertical-align: middle; ">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align: middle;" width="24" align="right"><img
src="https://media.marka-img.com/171869aa/6b6tB4penRil2pOzuGyMLV
o99dotNz.png" width="24" border="0" style="min-width:24px;
width:24px;
height: auto; display: block;"></td>
<td style="width:16px; min-width:16px;" width="16">&#8202;</td>
<td style="vertical-align: middle;" width="24" align="right"><img
src="https://media.marka-img.com/171869aa/GSDKdRh5K5CZhUJZQgjG3
k6gLH9YlE.png" width="24" border="0" style="min-width:24px;
width:24px;
height: auto; display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="line-height:32px; height:32px; font-size:32px">&#8202;</
div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>

</html>

You might also like