<!doctype html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style id="font">
/* latin */
@font-face {
font-family: 'Carter One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/carterone/v17/q5uCsoe5IOB2-pXv9UcNExN8hA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
a, a:link, a:hover, a:active, a:visited { text-decoration:underline; color:#B688FF !important; }
h1 { font-family:'Carter One', Helvetica, Arial, sans-serif; font-size:125px; line-height:1.3; font-weight:800; color:#fff; text-align: center; margin: 0; }
h2 { font-family:'Carter One', Helvetica, Arial, sans-serif; font-size:23px; line-height:1.5; font-weight:400; color:#fff; text-align: left; margin: 0; }
p { font-family:Helvetica, Arial, sans-serif; font-size:16px; line-height:1.5; font-weight:400; color:#fff; text-align: left; margin: 10px 0; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; font-size:1px; opacity:0; }
</style>
<style id="faux-absolute">
.container { width:537px; margin:0 auto; height:2000px; }
.parallax-container { width: 537px; margin: 0 auto; height:500px; }
.parallax { max-height:0; opacity:0.999; }
.spacer { padding-top:80px; }
.seeds-2 img { padding-left:165px; padding-top:145px; }
.sushi-1 img { padding-left:125px; padding-top:187px; }
.sushi-4 img { padding-left:225px; padding-top:495px; }
.title h1 { padding-left:0; padding-top:215px; }
.nuts img { padding-left:110px; padding-top:155px; }
.sushi-2 img { padding-left:180px; padding-top:360px; }
.sushi-3 img { padding-left:155px; padding-top:485px; }
.sushi-5 img { padding-left:190px; padding-top:580px; }
.plate img { padding-left:55px; padding-top:635px; }
.seeds-1 img { padding-left:185px; }
.seeds-3 img { padding-left:244px; padding-top:263px; }
.seeds-4 img { padding-left:140px; padding-top:378px; }
.seeds-5 img { padding-left:145px; padding-top:545px; }
.seeds-6 img { padding-left:10px; padding-top:655px; }
.salad-1 img { padding-left:180px; padding-top:15px; }
.salad-2 img { padding-left:120px; padding-top:115px; }
.salad-3 img { padding-left:305px; padding-top:235px; }
.salad-4 img { padding-left:110px; padding-top:352px; }
.salad-5 img { padding-left:115px; padding-top:515px; }
.salad-6 img { padding-left:40px; padding-top:580px; }
.salad-7 img { padding-left:110px; padding-top:650px; }
.salad-8 img { padding-left:31px; padding-top:725px; }
.footer { margin:700px auto 100px; }
</style>
<style id="parallax-apple-mail">
@media (prefers-reduced-motion: no-preference) {
.Singleton .fab { display:none!important; }
.Singleton .par { display:block!important;}
.Singleton .container { width:auto; height:100vh; overflow-x:hidden; perspective: 1px; perspective-origin:top left;}
.Singleton .parallax-container { transform-style: preserve-3d; padding-bottom:25vh; width: 537px; margin: 0 auto; }
.Singleton .parallax { position: absolute; max-height:none!important; }
.Singleton .parallax h1,
.Singleton .parallax img { padding:0!important; }
.Singleton .parallax h1 img { width:80px!important; }
.Singleton h1 { font-family:'Carter One', Helvetica, Arial, sans-serif; font-size:96px; line-height:1.3; font-weight:800; color:#fff; text-align: center; margin: 0; }
.Singleton .title { transform: translateZ(-0.2px) scale(1.5); top: 380px; left: 170px; }
.Singleton .sushi-1 { transform: translateZ(-0.3px) scale(1.3); top: 320px; left: 200px; }
.Singleton .sushi-2 { transform: translateZ(0.1px) scale(0.9); top: 360px; left: 140px; }
.Singleton .sushi-3 { transform: translateZ(-0.1px) scale(1.1); top: 580px; left: 175px; }
.Singleton .sushi-4 { transform: translateZ(-0.3px) scale(1.3); top: 700px; left: 320px; }
.Singleton .sushi-5 { transform: translateZ(-0.2px) scale(1.2); top: 745px; left: 240px; }
.Singleton .nuts { transform: translateZ(0px); top: 200px; left: 100px; }
.Singleton .salad-1 { transform: translateZ(-0.5px) scale(1.5); top: 100px; left: 320px; }
.Singleton .salad-2 { transform: translateZ(-0.4px) scale(1.4); top: 240px; left: 220px; }
.Singleton .salad-3 { transform: translateZ(-0.1px) scale(1.1); top: 310px; left: 340px; }
.Singleton .salad-4 { transform: translateZ(-0.1px) scale(1.1); top: 430px; left: 130px; }
.Singleton .salad-5 { transform: translateZ(0px); top: 560px; left: 105px; }
.Singleton .salad-6 { transform: translateZ(-0.1px) scale(1.1); top: 680px; left: 315px; }
.Singleton .salad-7 { transform: translateZ(0.2px) scale(0.8); top: 550px; left: 50px; }
.Singleton .salad-8 { transform: translateZ(0.1px) scale(0.9); top: 690px; left: 5px; }
.Singleton .seeds-1 { transform: translateZ(-0.4px) scale(1.4); top: 80px; left: 3000px; }
.Singleton .seeds-2 { transform: translateZ(-0.3px) scale(1.3); top: 265px; left: 255px; }
.Singleton .seeds-3 { transform: translateZ(-0.1px) scale(1.1); top: 345px; left: 275px; }
.Singleton .seeds-4 { transform: translateZ(-0.2px) scale(1.2); top: 510px; left: 200px; }
.Singleton .seeds-5 { transform: translateZ(0px); top: 590px; left: 135px; }
.Singleton .seeds-6 { transform: translateZ(0px); top: 700px; left: 0; }
.Singleton .plate { transform: translateZ(-0.1px) scale(1.1); top: 740px; left: 70px; }
.Singleton .footer { margin:400px auto 100px; }
}
</style>
<style id="parallax-ios-mail">
@media (prefers-reduced-motion: no-preference) {
:root body:not(.Singleton) .fab { display:none!important; }
:root body:not(.Singleton) .par { display:block!important; }
:root body:not(.Singleton) .container { width:auto; height:1000px; overflow-x:hidden; perspective: 1px; perspective-origin:top left;}
:root body:not(.Singleton) .parallax-container { transform-style: preserve-3d; padding-bottom:25vh; width: 537px; margin: 0 auto; }
:root body:not(.Singleton) .parallax { position: absolute; max-height:none!important; }
:root body:not(.Singleton) .parallax h1,
:root body:not(.Singleton) .parallax img { padding:0!important; }
:root body:not(.Singleton) .parallax h1 img { width:80px!important; }
:root body:not(.Singleton) h1 { font-family:'Carter One', Helvetica, Arial, sans-serif; font-size:96px; line-height:1.3; font-weight:800; color:#fff; text-align: center; margin: 0; }
:root body:not(.Singleton) .title { transform: translateZ(-0.2px) scale(1.5); top: 380px; left: 170px; }
:root body:not(.Singleton) .sushi-1 { transform: translateZ(-0.3px) scale(1.3); top: 320px; left: 200px; }
:root body:not(.Singleton) .sushi-2 { transform: translateZ(0.1px) scale(0.9); top: 360px; left: 140px; }
:root body:not(.Singleton) .sushi-3 { transform: translateZ(-0.1px) scale(1.1); top: 580px; left: 175px; }
:root body:not(.Singleton) .sushi-4 { transform: translateZ(-0.3px) scale(1.3); top: 700px; left: 320px; }
:root body:not(.Singleton) .sushi-5 { transform: translateZ(-0.2px) scale(1.2); top: 745px; left: 240px; }
:root body:not(.Singleton) .nuts { transform: translateZ(0px); top: 200px; left: 100px; }
:root body:not(.Singleton) .salad-1 { transform: translateZ(-0.5px) scale(1.5); top: 100px; left: 320px; }
:root body:not(.Singleton) .salad-2 { transform: translateZ(-0.4px) scale(1.4); top: 240px; left: 220px; }
:root body:not(.Singleton) .salad-3 { transform: translateZ(-0.1px) scale(1.1); top: 310px; left: 340px; }
:root body:not(.Singleton) .salad-4 { transform: translateZ(-0.1px) scale(1.1); top: 430px; left: 130px; }
:root body:not(.Singleton) .salad-5 { transform: translateZ(0px); top: 560px; left: 105px; }
:root body:not(.Singleton) .salad-6 { transform: translateZ(-0.1px) scale(1.1); top: 680px; left: 315px; }
:root body:not(.Singleton) .salad-7 { transform: translateZ(0.2px) scale(0.8); top: 550px; left: 50px; }
:root body:not(.Singleton) .salad-8 { transform: translateZ(0.1px) scale(0.9); top: 690px; left: 5px; }
:root body:not(.Singleton) .seeds-1 { transform: translateZ(-0.4px) scale(1.4); top: 80px; left: 3000px; }
:root body:not(.Singleton) .seeds-2 { transform: translateZ(-0.3px) scale(1.3); top: 265px; left: 255px; }
:root body:not(.Singleton) .seeds-3 { transform: translateZ(-0.1px) scale(1.1); top: 345px; left: 275px; }
:root body:not(.Singleton) .seeds-4 { transform: translateZ(-0.2px) scale(1.2); top: 510px; left: 200px; }
:root body:not(.Singleton) .seeds-5 { transform: translateZ(0px); top: 590px; left: 135px; }
:root body:not(.Singleton) .seeds-6 { transform: translateZ(0px); top: 700px; left: 0; }
:root body:not(.Singleton) .plate { transform: translateZ(-0.1px) scale(1.1); top: 740px; left: 70px; }
:root body:not(.Singleton) .footer { margin:400px auto 100px; }
}
</style>
<!--[if mso]>
<style>
h1 { font-family:Arial, Helvetica, sans-serif; font-size:130px; line-height:140px; }
.footer { margin-top:1000px !important; }
</style>
<![endif]-->
<title>Bare Bones - Parallax with Faux Absolute Positioning</title>
</head>
<body class="body go-dark-bg" xml:lang="en" style="margin:0; padding:0; background-color:#181B23;">
<div role="article" aria-roledescription="email" aria-label="Bare Bones - Faux Absolute Positioning + Parallax" lang="en" dir="ltr" style="margin:0; padding:0; background-color:#181B23;">
<p style="margin-bottom:0; font-size:15px; font-weight:400; color:#fff; text-align:center;">You're viewing the</p>
<p class="fab" style="margin:0; font-size:40px; line-height:45px; font-weight:900; color:lime; text-align:center;">Faux Absolute</p>
<p class="par" style="margin:0; display:none; font-size:40px; line-height:45px; font-weight:900; color:aqua; text-align:center;">Parallax</p>
<p style="margin-bottom:0; font-size:15px; font-weight:400; color:#fff; text-align:center;">version of the build</p>
<!--[if mso]><table style="width:537px;" role="presentation" cellspacing="0" cellpadding="0" border="0" align="center"><tr><td><![endif]-->
<div class="container">
<div class="parallax-container">
<div class="parallax spacer"></div>
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:240px; top:145px; width:125px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-2"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-2.png" border="0" alt="" style="width: 125px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:200px; top:187px; width:95px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax sushi-1"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/piece-1.png" border="0" alt="" style="width:95px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:300px; top:495px; width:79px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax sushi-4"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/piece-3b.png" border="0" alt="" style="width:79px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:75px; top:215px; width:537px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax title">
<h1>I
<img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sushi-1.png" border="0" alt="" width="100" style="width: 100px; max-width:100%;" /><span class="sr-only" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; font-size:1px; opacity:0;">heart</span>
Sushi</h1>
</div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:185px; top:155px; width:193px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax nuts"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/nuts.png" border="0" alt="" style="width: 193px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:255px; top:360px; width:100px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax sushi-2"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/piece-2.png" border="0" alt="" style="width:100px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:230px; top:485px; width:92px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax sushi-3"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/piece-3a.png" border="0" alt="" style="width:92px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:265px; top:580px; width:91px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax sushi-5"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/piece-4.png" border="0" alt="" style="width:91px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:130px; top:645px; width:445px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax plate"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/plate.png" border="0" alt="" style="width: 445px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:260px; top:0; width:59px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-1"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-1.png" border="0" alt="" style="width: 59px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:130px; top:300px; width:148px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-3"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-3.png" border="0" alt="" style="width: 148px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:215px; top:378px; width:156px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-4"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-4.png" border="0" alt="" style="width: 156px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:130px; top:565px; width:199px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-5"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-5.png" border="0" alt="" style="width: 199px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:85px; top:655px; width:178px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax seeds-6"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/sesame-6.png" border="0" alt="" style="width: 178px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:255px; top:15px; width:58px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-1"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-1.png" border="0" alt="" style="width: 58px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:195px; top:115px; width:43px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-2"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-2.png" border="0" alt="" style="width: 43px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:380px; top:235px; width:53px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-3"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-3.png" border="0" alt="" style="width: 53px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:185px; top:352px; width:54px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-4"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-4.png" border="0" alt="" style="width: 54px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:190px; top:515px; width:32px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-5"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-5.png" border="0" alt="" style="width: 32px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:360px; top:580px; width:54px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-6"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-6.png" border="0" alt="" style="width: 54px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:185px; top:650px; width:60px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-7"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-7.png" border="0" alt="" style="width: 60px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
<!--[if mso]><v:rect fill="f" stroked="f" style="position:absolute; left:106px; top:725px; width:87px;"><v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;"><![endif]-->
<div class="parallax salad-8"><img src="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/salad-8.png" border="0" alt="" style="width: 87px;" /></div>
<!--[if mso]></v:textbox></v:rect><![endif]-->
</div>
<div class="footer" style="max-width: 450px; text-align: left;">
<p>👋🏾 <a href="https://bare-bones.dev/blog/parallax-in-email/" target="_blank">Read my full breakdown of the build</a>, which covers the background and inspiration of the idea, how I coded the parallax effect for email and the fallback for email clients that don't support Parallax.</p>
<h2 style="margin-top:40px;">Build inspiration:</h2>
<p>🙏🏾 The static TV ad for Gousto which inspired the idea - <a href="https://www.bare-bones.dev/images/experiment-assets/parallax-in-email/photo-of-ad.jpg">Photo of the ad</a></p>
<p>🙏🏾 Chrome Developers blog - <a href="https://developer.chrome.com/blog/performant-parallaxing/">Performant Parallaxing</a></p>
<p>🙏🏾 Keith Clark - <a href="https://keithclark.co.uk/articles/pure-css-parallax-websites/">Pure CSS Parallax Websites</a></p>
<p>🙏🏾 Mark Robbins - <a href="https://parcel.io/e/495df74b-ac1b-4de6-8df3-1a11f4f7d8cf">Parallax test</a> (forked from Robert Flack's position:sticky test on <a href="https://jsbin.com/sexiwe/3/edit?html,css,js,output">JS Bin</a>)</p>
<hr style="width:100px; border-color:#8F48FF; margin:3rem auto;">
<h2>Image credits:</h2>
<p>🪧 Sushi stock image - <a href="https://stock.adobe.com/uk/476512567">Adobe Stock</a></p>
<p>🪧 Sushi heart icon - <a href="https://www.dreamstime.com/heart-sushi-roll-shaped-design-logo-icon-cartoon-gradient-style-flat-two-color-print-isolated-symbol-vector-image139636108">Dreamstime</a></p>
<div style="margin:150px auto 0; text-align:center;"><a href="https://www.bare-bones.dev"><img alt="Bare Bones logo" src="https://www.bare-bones.dev/images/experiment-assets/build-complete-logo.png" width="30" style="width:30px; max-width:100%;" /></a></div>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.