Skip to content

Instantly share code, notes, and snippets.

@istvan-ujjmeszaros

istvan-ujjmeszaros/email-noinline.html

Last active August 7, 2020 23:57
Show Gist options
  • Save istvan-ujjmeszaros/ddafee33422c2a5ea309f2c81244c6e0 to your computer and use it in GitHub Desktop.
Save istvan-ujjmeszaros/ddafee33422c2a5ea309f2c81244c6e0 to your computer and use it in GitHub Desktop.
Download ZIP
Email experiment without inline styles
Raw
email-noinline.html
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<style type="text/css">
table {
width: 100%;
border-collapse:collapse;
}
table.width-auto {
width: auto;
}
td.width-600 {
width: 600px;
}
td.bg-darkblue{
font-size:20px;
line-height:24px;
font-weight:bold;
font-family:Georgia,serif;
padding:30px 10px;
text-align:center;
color:#ffffff;
background-color:#04688f;
}
td.bg-orange{
padding:50px 20px 200px 20px;
font-size:0;
line-height:0;
color:#ffffff;
background-color:#fcba34;
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td align="center">
<table class="width-auto" style="width:auto;">
<tr>
<td class="width-600" align="center">
<table>
<tr>
<td class="bg-orange">
<table>
<tr>
<td class="bg-darkblue" style="color:#ffffff;">
Lorem ipsum
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
@istvan-ujjmeszaros
Copy link
Author

Rendering tests:
https://testi.at/proj/pogFve3fpnNtJ5eunYYSv4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment