Last active
December 25, 2015 06:58
-
-
Save OutThisLife/6935557 to your computer and use it in GitHub Desktop.
HTML Email Boilerplate (Refactored)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>REPLACE_ME</title> | |
<style> | |
/* HTML Email Reset */ | |
#outlook a {padding:0;} | |
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} | |
.ExternalClass {width:100%;} | |
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} | |
#container {margin:0; padding:0; width:100% !important; line-height: 100% !important;} | |
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; max-width: 600px !important;} | |
a img {border:none;} | |
.image_fix {display:block;} | |
h1, h2, h3, h4, h5, h6 {color: #292929 } | |
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;} | |
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: purple !important; } | |
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; } | |
table td {border-collapse: collapse;} | |
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout: fixed; } | |
a {color: blue;} | |
/** | |
* This will only work on iOS, and Windows Phone 8 | |
*/ | |
@media only screen and (max-width: 600px) { | |
table { width: 100% !important; } | |
} | |
</style> | |
</head> | |
<body bgcolor="#FFFFFF" style="background-color: #FFFFFF; color: #222222; font-size: 13px; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;"> | |
<!-- Container --> | |
<table width="600" style="width: 600px" cellpadding="20px" cellspacing="0" border="0" id="container" bgcolor="#FFFFFF"> | |
<tr> | |
<td> | |
<!-- Content wrapper --> | |
<table width="600" cellpadding="30px" cellspacing="0" border="1" align="center" style="border-color: #DDDDDD"> | |
<!-- EDIT BELOW --> | |
<!-- EDIT BELOW --> | |
<!-- EDIT BELOW --> | |
<!-- HEADER --> | |
<tr><td> | |
<table width="600" style="width: 630px" cellpadding="0" align="center"> | |
<tr> | |
<td> | |
</td> | |
</tr> | |
</table> | |
</td></tr> | |
<!-- IGNORE BELOW --> | |
<!-- IGNORE BELOW --> | |
<!-- IGNORE BELOW --> | |
</table> | |
<!-- End example table --> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment