Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/the-fab-four.html

Created December 22, 2016 10:57
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 hteumeuleu/43eb4d9ae43f37788551ddc00b583ba3 to your computer and use it in GitHub Desktop.
Save hteumeuleu/43eb4d9ae43f37788551ddc00b583ba3 to your computer and use it in GitHub Desktop.
Download ZIP
The Fab Four (fixed for iOS 9 and 10)
Raw
the-fab-four.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Fab Four</title>
<style>
html, body { min-width:260px; min-height:100%; padding:0; Margin:0 auto; background:#fff; }
a img { border:none; }
.ReadMsgBody { width:100%; }
.ExternalClass { width:100%; }
.ExternalClass * { line-height:100%; }
table, td { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
@-ms-viewport { width:320px; }
@viewport { width:320px; }
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
</head>
<body>
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td>
<![endif]-->
<div style="Margin:0 auto; max-width:800px; min-width:260px; font:16px sans-serif;">
<div style="text-align:center; font-size:0;">
<div style="width:190px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(190px); width:calc(230400px - 48000%); min-width:calc(190px);">
<h1 style="Margin:20px auto; color:#231f20; font:bold 32px sans-serif; text-align:left; width:190px; letter-spacing:-0.05em;">The Fab Four</h1>
</div>
</div>
<div style="text-align:center; font-size:0;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/ringo.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
</div><!--
--><!--[if mso]>
</td><td style="background:#F05A41;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<a href="https://dribbble.com/shots/2012212-Ringo-John" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/john.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
</div><!--
--><!--[if mso]>
</td><td style="background:#FACF39;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/george.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
</div><!--
--><!--[if mso]>
</td><td style="background:#F266B6;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:50%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<a href="https://dribbble.com/shots/2012203-Paul-George" target="_blank"><img src="http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/paul.png" alt="" width="200" style="display:block; width:100%; height:auto; max-width:240px;" border="0" /></a>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
<div style="text-align:center; font-size:0;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="background:#27AAE1;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="background:#F05A41;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="background:#FACF39;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="background:#F266B6;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:25%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(25%); width:calc(230400px - 48000%); min-width:calc(25%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
<div style="text-align:center; font-size:0; background:#FACF39;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:40%; background:#FACF39;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:40%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(40%); width:calc(230400px - 48000%); min-width:calc(40%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="width:60%; background:#27AAE1;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#27AAE1; vertical-align:top; width:60%; min-width:120px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(60%); width:calc(230400px - 48000%); min-width:calc(60%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente error quisquam facere ex harum dolores qui.
</p>
</div><!--
--><!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
<div style="text-align:center; font-size:0; background:#F05A41;">
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="800" align="center" bgcolor="#ffffff" style="width:800px;"><tr><td style="width:33%; background:#F266B6;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F266B6; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="width:34%; background:#F05A41;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#F05A41; vertical-align:top; width:34%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(34%); width:calc(230400px - 48000%); min-width:calc(34%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td><td style="width:33%; background:#FACF39;">
<![endif]--><!--
--><div style="display:inline-block; font-size:16px; text-align:left; color:#231f20; background:#FACF39; vertical-align:top; width:33%; min-width:160px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(33%); width:calc(230400px - 48000%); min-width:calc(33%);">
<p style="Margin:16px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div><!--
--><!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
<p style="Margin:10px 0; color:#aaa; font:13px/1.5 sans-serif; text-align:right;">
Illustrations by <a href="https://dribbble.com/elias" target="_blank" style="color:#aaa;">Elias Stein</a>
</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment