Skip to content

Instantly share code, notes, and snippets.

@felipeandres254

felipeandres254/email.html

Last active February 16, 2018 18:27
Show Gist options
  • Save felipeandres254/ab38b94ad462f46d57d9cdfa196591a0 to your computer and use it in GitHub Desktop.
Save felipeandres254/ab38b94ad462f46d57d9cdfa196591a0 to your computer and use it in GitHub Desktop.
Download ZIP
Template for responsive email
Raw
email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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></title>
<style type="text/css">
body { min-width:calc(100% - 30px); Margin:0; padding:15px; background-color:#eeeeee; }
table { font-family:sans-serif; color:#222222; border-spacing:0; } td { padding:0; } img { border:0; }
.wrapper { width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
.webkit { max-width:600px; } @-ms-viewport { width:device-width; }
.outer { Margin:0 auto; width:100%; max-width:600px; }
.inner { background:white; border-bottom:2.5px solid #aaaaaa; border-right:2.5px solid #aaaaaa; }
p { Margin:0; } .col-100 .contents { text-align:left; }
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table{ border-collapse:collapse !important; }
</style>
<![endif]-->
</head>
<body style="min-width:calc(100% - 30px); Margin:0; padding-top:15px; padding-bottom:15px; padding-left:15px; padding-right:15px; background-color:#eeeeee;">
<center class="wrapper" style="width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<div class="webkit" style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="font-family:sans-serif; color:#222222; border-spacing:0;">
<tr>
<td style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
<![endif]-->
<table class="outer" align="center" style="width:100%; max-width:600px; Margin:0 auto; font-family:sans-serif; color:#222222; border-spacing:0;">
<tr>
<td class="col-100" style="padding-top:0; padding-bottom:0; padding-left:0; padding-right:0;">
<table width="100%" style="font-family:sans-serif; color:#222222; border-spacing:0;">
<tr>
<td class="inner contents" style="text-align:left; background-color:white; background-image:none; background-repeat:repeat; background-position:center; background-attachment:scroll; border-bottom-width:2.5px; border-bottom-style:solid; border-bottom-color:#aaaaaa; border-right-width:2.5px; border-right-style:solid; border-right-color:#aaaaaa;">
<!-- EMAIL BODY -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment