Skip to content

Instantly share code, notes, and snippets.

@adueck

adueck/inline-css-output.html

Created April 26, 2019 11:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adueck/723fa0a018421ffd976bd0661aa3427a to your computer and use it in GitHub Desktop.
Save adueck/723fa0a018421ffd976bd0661aa3427a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
inline-css-output.html
<!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" style="background: #f3f3f3 !important;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<style>
@media only screen {
html {
min-height: 100%%;
background: #f3f3f3;
}
}
@media only screen and (max-width: 596px) {
.small-float-center {
margin: 0 auto !important;
float: none !important;
text-align: center !important;
}
}
@media only screen and (max-width: 596px) {
table.body img {
width: auto;
height: auto;
}
table.body center {
min-width: 0 !important;
}
table.body .container {
width: 95%% !important;
}
table.body .columns {
height: auto !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 16px !important;
padding-right: 16px !important;
}
table.body .columns .columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
table.body .collapse .columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
th.small-6 {
display: inline-block !important;
width: 50%% !important;
}
th.small-12 {
display: inline-block !important;
width: 100%% !important;
}
.columns th.small-12 {
display: block !important;
width: 100%% !important;
}
table.menu {
width: 100%% !important;
}
table.menu td,
table.menu th {
width: auto !important;
display: inline-block !important;
}
table.menu.vertical td,
table.menu.vertical th {
display: block !important;
}
table.menu[align="center"] {
width: auto !important;
}
}
</style>
</head>
<body style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%%; Margin: 0; background: #f3f3f3 !important; box-sizing: border-box; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; min-width: 100%%; padding: 0; text-align: left; width: 100%% !important;">
<span class="preheader" style="color: #f3f3f3; display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;"></span>
<table class="body" style="Margin: 0; background: #f3f3f3 !important; border-collapse: collapse; border-spacing: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top;" border="0" cellpadding="0" cellspacing="0" width="100%%" height="100%%">
<tr style="padding: 0;" valign="top" align="left">
<td class="float-center" align="left" valign="top" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; word-wrap: break-word;">
<table class="container" style="Margin: 0 auto; background: #fefefe; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top;" border="0" cellpadding="0" cellspacing="0" width="580px">
<tr style="padding: 0;" valign="top" align="left">
<td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; word-wrap: break-word;" valign="top" align="left">
<table class="row" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top;" border="0" cellpadding="0" cellspacing="0" width="100%%">
<tr style="padding: 0;" valign="top" align="left">
<th class="columns first last" style="Margin: 0 auto; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 16px; padding-left: 16px; padding-right: 16px;" align="left">
<table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top;" border="0" cellpadding="0" cellspacing="0" width="100%%">
<tr style="padding: 0;" valign="top" align="left">
<th style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0;" align="left">
<table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top;" border="0" cellpadding="0" cellspacing="0" width="100%%">
<tbody>
<tr style="padding: 0;" valign="top" align="left">
<td height="16px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; mso-line-height-rule: exactly; padding: 0; word-wrap: break-word;" valign="top" align="left">&#xA0;</td>
</tr>
</tbody>
</table>
<div>Email Content</div>
</th>
<th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; visibility: hidden;" width="0" align="left"></th>
</tr>
</table>
</th>
<th class="expander" style="Margin: 0; color: #0a0a0a; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; visibility: hidden;" width="0" align="left"></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment