A fully responsive HTML email compactible with most ESP (Email Service Providers) including Outlook, Apple mail, and Gmail.
Practice
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML Email Template - By Aury Silva</title>
<style type="text/css">
body {
margin: 0;
background-color: #cccccc;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 22px;
}
table {
border-spacing: 0;
}
tr {
padding: 0;
margin: 0;
}
td {
padding: 0;
}
img {
border: none;
}
/* Mobile Responsive Email Editor Standard Template built by Adestra Digital Design V2 Updated 07/16 RP*/
* {
-webkit-text-size-adjust: none !important;
}
a,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
}
/* Ensure text is not resized on Smartphones */
body,
td {
font-family: Arial, sans-serif;
margin: 0px;
}
/* Yahoo P tag override */
p {
margin-bottom: 14px
}
/* Outlook.com,Hotmail reset */
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
mso-line-height-rule: exactly;
line-height: 100%;
}
table,
td {
border-collapse: collapse;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 0px;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
line-height: 21px;
font-family: sans-serif;
color: #171a1b;
}
.three-columns {
width: 33%;
display: inline-block;
}
.two-columns {
width: 50%;
display: inline-block;
}
.column {
width: 100%;
display: table;
margin: 0 auto;
}
.top-header-social {
padding: 0 3px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
body,
td,
a,
span {
font-family: Arial, sans-serif !important;
}
}
@media screen and (max-width:599px) {
table[class="responsive"] {
width: 100% !important;
text-align: center;
}
.two-columns,
.three-columns,
.column {
width: 100%;
text-align: center;
}
.responsive {
width: 100%;
height: auto;
max-width: 600px;
}
}
</style>
</head>
<body style="background-color: #cccccc;">
<center class="wrapper">
<table class="main">
<!-- TOP BORDER -->
<tr>
<td height="5" style="background-color: #40618d;"></td>
</tr>
<!-- LOGO SECTION AND SOCIAL ICONS -->
<tr>
<td style="padding: 10px 20px 10px 20px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td>
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/modern.jpg" alt="" width="180" height="50">
</a>
</td>
</tr>
</table>
</td>
<td class="two-columns">
<table width="100%">
<tr>
<td>
<table width="40%" align="center">
<tr>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-facebook.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-twitter.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-youtube.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-linkedin.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/black-instagram.png" alt="" width="35" height="35">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BANNER IMAGE -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<table width="">
<tr>
<td>
<img class="responsive" src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/banner.jpg" alt="" width="600" height="350">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- THREE COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 30px 30px 30px 30px;">
<table width="100%">
<tr>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" align="center" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/email.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">Ecommerce</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" align="center" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/settings.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">Web Design</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="three-columns">
<table width="100%" align="center">
<tr>
<td style="padding: 7px 7px 7px 7px;">
<table width="100%" class="column">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/home.png" alt="" width="100" height="100">
</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px;">
<span style="font-weight: bold; line-height: 20px; font-size: 18px;">HTML Email</span>
</td>
</tr>
<tr>
<td align="center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TWO COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 30px; background-color: #171a1b;">
<table width="100%">
<tr>
<td class="two-columns">
<table class="column">
<tr>
<td>
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/keyboard.jpg" width="230" height="200">
</td>
</tr>
</table>
</td>
<td class="two-columns">
<table width="100%" align="center" class="column">
<tr>
<td align="center" style="padding-bottom: 10px; padding-top: 15px;">
<span style="color: #ffffff; font-weight: bold; line-height: 20px; font-size: 18px;"> Create Custom Designs </span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 25px;">
<span style="color: #ffffff;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit aliqua. </span>
</td>
</tr>
<tr>
<td width="100%" align="center">
<table width="130" align="center">
<tr>
<td style="background-color: #ffffff; border-radius: 5px; padding: 10px 20px; color: #171a1b; font-weight: bold; text-align: center;"> Read More </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TITLE, TEXT & BUTTON -->
<tr>
<td>
<table width="100%">
<tr>
<td style="padding: 50px 30px; background-color: #ffffff;">
<table width="100%">
<tr>
<td>
<table class="column">
<tr>
<td align="center" style="padding: 0px 0px 20px 0px; font-weight: bold; line-height: 20px; font-size: 18px;">HTML Email Template</td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px;">
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 dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td style="padding-top: 20px;">
<table width="130" align="center">
<tr>
<td style="background-color: #171a1b; border-radius: 5px; padding: 10px 20px; color: #ffffff; font-weight: bold; text-align: center;"> Read More </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER SECTION -->
<tr>
<td>
<table width="100%" style="background-color: #171a1b;">
<tr>
<td style="padding: 50px;">
<table width="100%">
<tr>
<td align="center">
<a href="https://www.aurysilva.co.uk/" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/modern-white.png" alt="" width="180" height="50">
</a>
</td>
</tr>
<tr>
<td align="center" style="font-size: 11px; line-height: 20px; color: #ffffff; padding-bottom: 20px;"> Responsive HTML Email Template </td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px; color: #ffffff; padding-bottom: 20px;"> 123 Street Road, City, HU8 7HU </td>
</tr>
<tr>
<td align="center" style="padding-bottom: 20px;">
<table>
<tr>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-facebook.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-twitter.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-youtube.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-linkedin.png" alt="" width="35" height="35">
</a>
</td>
<td class="top-header-social">
<a href="#" target="_blank">
<img src="https://www.aurysilva.co.uk/reallyb2b/html-emails/modern/img/white-instagram.png" alt="" width="35" height="35">
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size: 14px; line-height: 20px; color: #ffffff;"> SUBSCRIBE </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- BOTTOM BORDER -->
<tr>
<td bgcolor="#40618d" style="background-color: #40618d;">
<table width="100%">
<tr>
<td height="3"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>