<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Filmstrip Technique - Interactive email using windowed named anchors
- Email on Acid.
- by Justin Khoo (@freshinbox)
- Supported Clients: iOS Mail, Gmail on Android, Samsung
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
/*
Using @supports to ONLY target iOS Mail 10+ ht @hteumeuleu
*** IMPORTANT: @supports should be placed its OWN style block ***
Gmail strips this block out so don't put any other styles in this style block.
Using ^= attribute selector as Yahoo! Mail mangles @supports and exposes CSS within
*/
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
div[class^=interactive]{
display:block !important;
max-height:none!important;
}
div[class^=fallback]{
display:none!important;
}
}
</style>
<style>
/*
As of Nov 2017 this no longer works on Gmail Android
Target Gmail on Android ht @m_j_robbins
*/
/*
div > u ~ div .interactive{
display:block !important;
max-height:none!important;
}
div > u ~ div .fallback{
display:none!important;
}
*/
/* Enable for Samsung App */
.yfix{}
#MessageViewBody .interactive{
display:block !important;
max-height:none!important;
}
#MessageViewBody .fallback{
display:none!important;
}
.frame-container{
width:450px;max-height:280px;height:280px;overflow:hidden;
}
.frame-container .frame{
border:1px solid black;
height:280px;
max-height:280px;
padding:10px 10px;
box-sizing: border-box;
font-size:1em;
line-height:25px;
}
.frame .caption{
text-align:center;
}
.frame img{
display:block;
margin:5px auto;
}
.buttons{
text-align:center;
}
.buttons a{
display:inline-block;
padding:10px;
background-color:#f1f1f1;
margin:3px;
width:80px;
text-align:center;
border-radius:5px;
font-family:Arial;
border:1px solid #555555;
cursor:pointer;
}
.buttons a:hover
{
background-color:#cccccc;
}
.buttons a.active
{
background-color:#ff0000;
color:#ffffff;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td> </td>
<td width="600" style="background-color:#ffffff">
<BR>
<div style="font-family:'Helvetica Neue',Helvetica,Arial;color:#333333;padding:10px;">
<span style="font-size:35px;font-weight:200;">Filmstrip Technique</span><BR>
<span style="font-size:16px;line-height:30px;font-weight:normal">Works in: iOS Mail & the Samsung Client.</span><BR>
<a href="https://www.emailonacid.com/blog/article/email-development/introducing-the-filmstrip-interactive-email-technique?utm_referrer=freshinbox" style="color: #348eda;" target="_new">Learn how the Filmstrip Technique works</a><BR>
<BR>
</div>
<!-- content -->
<table width="100%"><tr><td align=center>
<!--[if !mso]><!-->
<div class="interactive" style="display:none;max-height:0;overflow:hidden;">
<div class="frame-container">
<a name="nyc"></a>
<div class="frame nyc" style="background-image:url(http://freshinbox.com/assets/images/cities/city-nyc.jpg)">
<div class="buttons">
<a href="#nyc" class="active">NYC</a>
<a href="#sf">SF</a>
<a href="#chicago">Chicago</a>
</div>
</div>
<a name="sf"></a>
<div class="frame sf" style="background-image:url(http://freshinbox.com/assets/images/cities/city-sf.jpg)">
<div class="buttons">
<a href="#nyc">NYC</a>
<a href="#sf" class="active">SF</a>
<a href="#chicago">Chicago</a>
</div>
</div>
<a name="chicago"></a>
<div class="frame chicago" style="background-image:url(http://freshinbox.com/assets/images/cities/city-chicago.jpg)">
<div class="buttons">
<a href="#nyc">NYC</a>
<a href="#sf">SF</a>
<a href="#chicago" class="active">Chicago</a>
</div>
</div>
</div>
</div>
<!--<![endif]-->
<BR><BR>
<div class="fallback">
<center>
<span style="font-size:20px;font-weight:200;font-family:'Helvetica Neue',Helvetica,Arial;">Fallback Content</span><BR>
<img src="http://freshinbox.com/assets/images/cities/city-nyc.jpg" width=450 style="width:450px;display:block;">
</center>
</div>
</td></tr></table>
<!-- /content -->
</td><td> </td>
</tr></table>
</body>
</html>