<!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>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.