A fully responsive hand-coded HTML email compactible with most ESP (Email Service Providers) including Outlook, Apple mail, and Gmail.
Practice
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> </title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@font-face {
font-family: "BGFlame-Light";
src: url("https://go.business.britishgas.co.uk/l/465112/2020-04-06/23qvvd/465112/64465/BGFlame_Regular.ttf") format("truetype");
}
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
color: #333333;
font-size: 14px;
background-color: #e8e8e8;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table {
border-spacing: 0;
}
td {
padding: 0;
font-family: Arial, sans-serif;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
}
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #e8e8e8;
padding-bottom: 0px;
font-size: 13px;
color: #333333;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 640px;
border-spacing: 0;
font-size: 16px;
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: block;
}
.top-header-social {
padding: 0 3px;
}
/* General styles */
.align-top {
vertical-align: top;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.white-bg {
background-color: #ffffff;
}
.blue-bg {
background-color: #0d2431;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix {
width: 100% !important;
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
@media all and (max-width: 640px) {
.no-mob {
display: none !important;
}
.mob-center {
text-align: center !important;
}
.three-columns,
.two-columns,
.column {
width: 100%;
display: inline-block;
}
tbody, td {
display: inline-block;
text-align: center !important;
}
.mob-pd-0 {
padding: 0 0 0 0 !important;
}
}
</style>
</style>
</head>
<body style="word-spacing: normal; background-color: #e8e8e8">
<center class="wrapper">
<table class="main" style="max-width: 640px;">
<!-- TOP HEADER -->
<tr>
<td style="padding: 20px 5px 20px 5px;">
<table width="100%">
<td>
<td>
<table width="100%">
<tr>
<td align="left" class="two-columns">
<p class="text-left font-13 mob-center"> AVAILABLE FOR 48 HOURS ONLY </p>
</td>
<td align="right" class="two-columns">
<p class="text-right font-13 mob-center"> View online <a href="#" target="_blank" style="text-decoration: underline; color: #0d2431;">here >></a> </p>
</td>
</tr>
</table>
</td>
</td>
</table>
</td>
</tr>
<!-- // TOP HEADER -->
<!-- LOGO -->
<tr>
<td width="100%" class="blue-bg" style="padding: 5px 0 5px 0;">
<table width="100%" bgcolor="#0d2431">
<tr>
<td class="column" style="">
<table width="100%">
<tr>
<td align="center" class=""> <img src="images/logo.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // LOGO -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="20" class="column" style="height: 20px; min-height: 20px;">
<table width="100%" height="20">
<tr>
<td align="center" class=""> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SPACER -->
<!-- HERO -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#0d2431">
<tr>
<td class="column">
<table width="100%">
<tr>
<td align="center" class="" style="width: 640px; max-width: 640px; "> <img width="640" height="640" style="width: 100%; max-width: 640px; height: auto;" src="images/hero.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // HERO -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="20" class="column" style="height: 20px; min-height: 20px;">
<table width="100%" height="20">
<tr>
<td align="center" class=""> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SPACER -->
<!-- TITLE AND PRODUCTS -->
<tr>
<td width="100%" class="blue-bg" style="background-color: #0d2431;">
<table width="100%" bgcolor="#0d2431">
<tr>
<td class="column" style="padding: 10px 0 10px 0;">
<table width="100%" height="20">
<tr>
<td align="center" style="color: #ffffff; line-height: 1; font-size: 22px;">WE THINK YOU'LL LOVE THESE STYLES</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // TITLE AND PRODUCTS -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="50" class="column" style="height: 50px; min-height: 50px;">
<table width="100%" height="50">
<tr>
<td align="center" height="50" class="column" style="height: 50px; min-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--// SPACER -->
<!-- BODY ROW 5 image icon and text -->
<tr>
<td width="100%" class="mob-center mob-pd-0" style="padding: 0px 55px 15px 55px;">
<table align="center" width="100%" class="column">
<tr>
<td align="center">
<table align="center" width="100%">
<tr>
<!-- col -->
<td width="145" style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<table width="100%" align="center">
<tr>
<td class="text-center"> <img width="145" height="151" style="width: 100%; max-width: 145px; height: 151px; max-height: 151px; border: 0; display: block; outline: none; text-decoration: none;" src="images/127x151.png"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.3;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.title]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.5;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.price]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- spacer -->
<td class="no-mob" width="48" height="1" class="column" style="width: 48px; max-width: 48px; height: 1px; min-height: 1px;">
<table width="100%" height="1">
<tr>
<td align="center" height="1" class="column" style="height: 1px; min-height: 1px;"> </td>
</tr>
</table>
</td>
<!-- // spacer -->
<!-- col -->
<td width="145" style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<table width="100%" align="center">
<tr>
<td class="text-center"> <img width="145" height="151" style="width: 100%; max-width: 145px; height: 151px; max-height: 151px; border: 0; display: block; outline: none; text-decoration: none;" src="images/127x151.png"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.3;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.title]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.5;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.price]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
<!-- spacer -->
<td class="no-mob" width="48" height="1" class="column" style="width: 48px; max-width: 48px; height: 1px; min-height: 1px;">
<table width="100%" height="1">
<tr>
<td align="center" height="1" class="column" style="height: 1px; min-height: 1px;"> </td>
</tr>
</table>
</td>
<!-- // spacer -->
<!-- col -->
<td width="145" style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<table width="100%" align="center">
<tr>
<td class="text-center"> <img width="145" height="151" style="width: 100%; max-width: 145px; height: 151px; max-height: 151px; border: 0; display: block; outline: none; text-decoration: none;" src="images/127x151.png"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center" style="width: 145px; max-width: 145px;">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.3;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.title]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 145px; max-width: 145px;">
<table width="100%">
<tr>
<td align="center">
<p class="text-center" style="text-align: center; font-size: 11px; color: #0d2431; line-height: 1.5;"> <a href="#" target="_blank" style="text-decoration: none; color: #0d2431;">[item.price]</a> </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- // col -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 5 image and text -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="50" class="column" style="height: 50px; min-height: 50px;">
<table width="100%" height="50">
<tr>
<td align="center" height="50" class="column" style="height: 50px; min-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--// SPACER -->
<!-- BODY ROW 3 image and text -->
<tr>
<td style="padding: 0px 55px 35px 55px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td style="padding: 0 0 10px 0;">
<table width="100%">
<tr>
<td class="mob-center"> <img width="250" height="250" src="images/250x250.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="center" class="two-columns">
<table width="100%">
<tr>
<td align="center" class="mob-center">
<p class="text-center font-22 text-blue mob-center" style="text-align: center; font-size: 22px; color: #0d2431; text-transform: uppercase; line-height: 1.5;">YOU COLLECTED <span style="color: red; word-break: break-all;">[customer.points_balance]</span> POINTS, WORTH
<br> £<span style="color: red;">000.00</span> </p>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td align="center" class="mob-center"> <img width="140" height="45" style="width: 100%; max-width: 140px; height: 45px; max-height: 45px; " src="images/cta-use-points.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 3 image and text -->
<!-- BODY ROW 3 image and text -->
<tr>
<td style="padding: 0px 55px 35px 55px;">
<table width="100%">
<tr>
<td class="two-columns">
<table width="100%">
<tr>
<td style="padding: 0 0 10px 0;">
<table width="100%">
<tr>
<td class="mob-center"> <img width="250" height="250" src="images/250x250.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="center" class="two-columns">
<table width="100%">
<tr>
<td align="center" class="mob-center">
<p class="text-center font-22 text-blue mob-center" style="text-align: center; font-size: 22px; color: #0d2431; text-transform: uppercase; line-height: 1.5;">BECOME A <span style="color: #c7bc04;">GOLD<br class="no-mob"> MEMBER</span> and START
<br class="no-mob"> COLLECTING
<br class="no-mob">POINTS </p>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td align="center" class="mob-center"> <img width="140" height="45" style="width: 100%; max-width: 140px; height: 45px; max-height: 45px; " src="images/cta-use-points.png"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // BODY ROW 3 image and text -->
<!-- LOGO -->
<tr>
<td width="100%" class="blue-bg" style="padding: 10px 0 10px 0; background-color: #dfecf3;">
<table width="100%" bgcolor="#dfecf3">
<tr>
<td class="column" style="background-color: #dfecf3;">
<table width="100%">
<tr>
<td align="center" class="text-center text-white" style="text-align: center; color: #0d2431; text-transform: uppercase; font-size: 20px; line-height: 1;"> <a href="#" target="_blank" style="text-transform: uppercase; text-decoration: none; color: #0d2431; font-size: 20px;">SHIRTS</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // LOGO -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="10" class="column" style="height: 10px; min-height: 10px;">
<table width="100%" height="10">
<tr>
<td align="center" class=""> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SPACER -->
<!-- LOGO -->
<tr>
<td width="100%" class="blue-bg" style="padding: 10px 0 10px 0; background-color: #dfecf3;">
<table width="100%" bgcolor="#dfecf3">
<tr>
<td class="column" style="background-color: #dfecf3;">
<table width="100%">
<tr>
<td align="center" class="text-center text-white" style="text-align: center; color: #0d2431; text-transform: uppercase; font-size: 20px; line-height: 1;"> <a href="#" target="_blank" style="text-transform: uppercase; text-decoration: none; color: #0d2431; font-size: 20px;">SUITS</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // LOGO -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="10" class="column" style="height: 10px; min-height: 10px;">
<table width="100%" height="10">
<tr>
<td align="center" class=""> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SPACER -->
<!-- LOGO -->
<tr>
<td width="100%" class="blue-bg" style="padding: 10px 0 10px 0; background-color: #dfecf3;">
<table width="100%" bgcolor="#dfecf3">
<tr>
<td class="column" style="background-color: #dfecf3;">
<table width="100%">
<tr>
<td align="center" class="text-center text-white" style="text-align: center; color: #0d2431; text-transform: uppercase; font-size: 20px; line-height: 1;"> <a href="#" target="_blank" style="text-transform: uppercase; text-decoration: none; color: #0d2431; font-size: 20px;">CASUAL WEAR</a> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // LOGO -->
<!-- SPACER -->
<tr>
<td width="100%" class="blue-bg">
<table width="100%" bgcolor="#ffffff">
<tr>
<td height="40" class="column" style="height: 40px; min-height: 40px;">
<table width="100%" height="40" style="height: 40px; min-height: 40px;">
<tr>
<td align="center" class=""> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // SPACER -->
<!-- GREY FOOTER -->
<tr>
<td style="background-color: #03507c;">
<table width="100%" bgcolor="#03507c" style="background-color: #03507c;">
<tr>
<td style="padding: 20px 20px 30px 20px; background-color: #03507c;">
<table width="100%" class="column" bgcolor="#03507c">
<tr>
<td class="column">
<table width="100%" class="column" bgcolor="#03507c">
<tr>
<td align="center" style="text-align: center; font-size: 14px; padding: 0 0 0 0; ">
<p class="text-center text-white" style="text-align: center; font-size: 14px; color: #c0c4c8; line-height: 1.4"> Company rights </p>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; font-size: 14px; padding: 0 0 15px 0; ">
<p class="text-center text-white" style="text-align: center; font-size: 14px; color: #c0c4c8; line-height: 1.4"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse fugiat maxime dicta mollitia odio assumenda unde natus ipsum necessitatibus mollitia odio assumenda unde natus ipsum necessitatibus dolore! </p>
</td>
</tr>
<tr>
<td align="center">
<p class="text-center text-white" style="text-align: center; font-size: 14px; color: #c0c4c8; line-height: 1.4"> Unsubscribe </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- // GREY FOOTER -->
</table>
</center>
</body>
</html>
