Download Email Template HTML
Build Responsive, Interactive, Beautiful Email Newsletters HTML Templates
Supports email clients, including Mailchimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook, and Gmail.
HTML Email Templates Code
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i" rel="stylesheet">
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], .unstyle-auto-detected-links *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
@media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
.primary {
background: #f3a333;
}
.bg_white {
background: #ffffff;
}
.bg_light {
background: #fafafa;
}
.bg_black {
background: #000000;
}
.bg_dark {
background: rgb(1 126 186 / 80%);
}
.email-section {
padding: 2.5em;
}
/*BUTTON*/
.btn {
padding: 10px 15px;
}
.btn.btn-primary {
border-radius: 30px;
background: #007de7;
color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
color: #000000;
margin-top: 0;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a {
color: #007de7;
}
table {
}
/*LOGO*/
.logo h1 {
margin: 0;
}
.logo h1 a {
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
}
/*HERO*/
.hero {
position: relative;
}
.hero img {
}
.hero .text {
color: rgba(255,255,255,.8);
}
.hero .text h2 {
color: #ffffff;
font-size: 30px;
margin-bottom: 0;
}
/*HEADING SECTION*/
.heading-section {
}
.heading-section h2 {
color: #000000;
font-size: 28px;
margin-top: 0;
line-height: 1.4;
}
.heading-section .subheading {
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after {
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #007de7;
margin: 0 auto;
}
.heading-section-white {
color: rgba(255,255,255,.8);
}
.heading-section-white h2 {
font-size: 28px;
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2 {
color: #ffffff;
}
.heading-section-white .subheading {
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon {
text-align: center;
}
.icon img {
}
/*SERVICES*/
.text-services {
padding: 10px 10px 0;
text-align: center;
}
.text-services h3 {
font-size: 20px;
}
/*BLOG*/
.text-services .meta {
text-transform: uppercase;
font-size: 14px;
}
/*TESTIMONY*/
.text-testimony .name {
margin: 0;
}
.text-testimony .position {
color: rgba(0,0,0,.3);
}
/*VIDEO*/
.img {
width: 100%;
height: auto;
position: relative;
}
.img .icon {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
margin-top: -25px;
}
.img .icon a {
display: block;
width: 60px;
position: absolute;
top: 0;
left: 50%;
margin-left: -25px;
}
/*COUNTER*/
.counter-text {
text-align: center;
}
.counter-text .num {
display: block;
color: #ffffff;
font-size: 34px;
font-weight: 700;
}
.counter-text .name {
display: block;
color: rgba(255,255,255,.9);
font-size: 13px;
}
/*FOOTER*/
.footer {
color: rgba(255,255,255,.5);
}
.footer .heading {
color: #a09f9f;
font-size: 20px;
}
.footer ul {
margin: 0;
padding: 0;
}
.footer ul li {
list-style: none;
margin-bottom: 0px;
}
.footer ul li a {
color: rgba(134 134 134);;
}
@media screen and (max-width: 500px) {
.icon {
text-align: left;
}
.text-services {
padding-left: 0;
padding-right: 20px;
text-align: left;
}
}
</style>
</head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width: 100%; background-color: #f1f1f1;">
<div style="display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<div style="max-width: 600px; margin: 0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<tr>
<td class="bg_white logo" style="padding: 1em 2.5em; text-align: center"><h1><a href="#">HTML CSS3 Tutorials</a></h1></td>
</tr>
<tr>
<td class="bg_white"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_dark email-section" style="text-align:center;"><div class="heading-section heading-section-white"> <span class="subheading">Welcome</span>
<h2>Welcome To HTML CSS3 Tutorials</h2>
<p>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.</p>
</div></td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white email-section"><div class="heading-section" style="text-align: center; padding: 0 30px;"> <span class="subheading">Services</span>
<h2>Our Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%" style="padding-top: 20px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="icon"><img src="images/001-web.png" alt="" style="width: 100px; max-width: 600px; height: auto; margin: auto; display: block;"></td>
</tr>
<tr>
<td class="text-services"><h3>Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p><a href="#" class="btn btn-primary">Read more</a></p>
</td>
</tr>
</table></td>
<td valign="top" width="50%" style="padding-top: 20px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="icon"><img src="images/002-web.png" alt="" style="width: 100px; max-width: 600px; height: auto; margin: auto; display: block;"></td>
</tr>
<tr>
<td class="text-services"><h3>Web Designing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p><a href="#" class="btn btn-primary">Read more</a></p>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="counter" style="background-image: url(images/bg_1.jpg); background-size: cover; padding: 4em 0;"><table>
<tr style="background: rgb(0 125 231 / 60%);">
<td valign="middle" width="25%"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="counter-text"><span class="num">9457</span> <span class="name">Happy Customer</span></td>
</tr>
</table></td>
<td valign="middle" width="25%"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="counter-text"><span class="num">20</span> <span class="name">Years of Experienced</span></td>
</tr>
</table></td>
<td valign="middle" width="25%"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="counter-text"><span class="num">80</span> <span class="name">Branches</span></td>
</tr>
</table></td>
<td valign="middle" width="25%"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="counter-text"><span class="num">980</span> <span class="name">Staff</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- end tr -->
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<tr>
<td valign="middle" class="bg_black footer email-section"><table>
<tr>
<td valign="top" width="33.333%" style="padding-top: 20px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align: left; padding-right: 10px;"><h3 class="heading">HCTutorials</h3>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam </p></td>
</tr>
</table></td>
<td valign="top" width="33.333%" style="padding-top: 20px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align: left; padding-left: 5px; padding-right: 5px;"><h3 class="heading">Contact Info</h3>
<ul>
<li><span class="text">302, Street-7, New MIG, 500022</span></li>
<li><span class="text">+91-000000000</span></li>
</ul></td>
</tr>
</table></td>
<td valign="top" width="33.333%" style="padding-top: 20px;"><table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align: left; padding-left: 10px;"><h3 class="heading">Useful Links</h3>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Help</a></li>
</ul></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- end: tr -->
</table>
</div>
</center>
</body>
</html>Share this:
