<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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<!--Built in London by the ActionRocket team - @ActionRocket -->
<title>Desserts</title>
<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.w100pc {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
.nomob {
display: none!important;
width: 0px!important;
height: 0px!important;
}
}
</style>
<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.show {
display: block!important;
width: 100%!important;
max-height: inherit!important;
overflow: visible!important;
}
.desktop-hide {
display: block!important;
}
}
</style>
</head>
<body style="margin:0!important; padding:0!important; width:100%!important;" class="body" id="body">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top"><table width="640" border="0" cellspacing="0" cellpadding="0" class="w100pc">
<tr>
<td bgcolor="#EBE8E4"><table width="100%" cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td align="center" style="font-size:1px; line-height:1px;"><style type="text/css">
/* Thanks to the team at B&Q for the inspiration! */
/* Test to see if device has the ability to have checked */
@media only screen and (min-device-pixel-ratio:0), (min--moz-device-pixel-ratio:0) {
#webkitnocheck:checked ~ .fallback { display:none; }
#webkitnocheck:checked ~ div .interactive { display:block !important; max-height:none !important; }
}
/* Specific Yahoo! Detection */
@media screen yahoo {
.fallback { display:block!important; max-height:none; }
.interactive { display:none !important; }
}
/* Specific Samsung Mail detection */
@media screen and (min-device-pixel-ratio: 0) {
#MessageViewBody .fallback, body.MsgBody .fallback { display:block!important; }
#MessageViewBody .interactive, body.MsgBody .interactive { display:none !important; }
#MessageViewBody .samsung { display:none !important; }
}
/* Specific Gmail detection */
@media screen and (max-width:9999px) {
u + .gmailbody .fallback { display:block!important; max-height:none; }
u + .gmailbody .interactive { display:none!important; }
}
/*Start of interactive CSS */
/* Background image Desktop */
@media only screen and (min-device-pixel-ratio:0), (min--moz-device-pixel-ratio:0) {
.desserts { position: relative; display: block !important; overflow: hidden; width: 640px; height: 754px; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/dessert-full-brick.png); background-size:cover; }
/* Buttons */
.cake1, .cake2, .cake3, .cake4, .cake5 { visibility: visible!important; display: block!important; max-height: 33px!important; position: absolute!important; z-index: 7; left: -1000px; top: -1000px; width: 27px; height: 27px; background-size: cover; background-position:center; animation: pulse 2s ease 0s infinite; border-radius:23px; box-shadow: 0px 0px 5px 5px rgba(50,50,50,0.5); cursor:pointer;}
.cake1, .cake2, .cake3, .cake4, .cake5 { background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/button-v3.png); }
/* Content Labels Position Desktop */
#cake1-content { position:absolute; left:480px; top:164px; width: 120px; height: 30px; z-index:1; }
#cake2-content { position:absolute; left:95px; top:155px; width: 120px; height: 30px; z-index:1; }
#cake3-content { position:absolute; left:297px; top:277px; width: 120px; height: 46px; z-index:1; }
#cake4-content { position:absolute; left:150px; top:430px; width: 119px; height: 30px; z-index:1; }
#cake5-content { position:absolute; left:340px; top:600px; width: 120px; height: 46px; z-index:1; }
/* keyframe animation - button pulse */
@-webkit-keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.7; transform: scale(1); } }
/* Desktop button positions */
.cake1 { left: 530px!important; top: 152px!important; }
.cake2 { left: 140px!important; top: 142px!important; }
.cake3 { left: 344px!important; top: 264px!important; }
.cake4 { left: 190px!important; top: 418px!important; }
.cake5 { left: 386px!important; top: 588px!important; }
/* If button checked desktop */
#cake1:checked ~ div #cake1-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/carrot-cake.png) !important; z-index:10; }
#cake1:checked ~ div .cake1 { display:block !important; }
#cake1:checked ~ div .cake2 { display:block !important; }
#cake1:checked ~ div .cake3 { display:block !important; }
#cake1:checked ~ div .cake4 { display:block !important; }
#cake1:checked ~ div .cake5 { display:block !important; }
#cake2:checked ~ div #cake2-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/Tiramisu.png) !important; z-index:10; }
#cake2:checked ~ div .cake1 { display:block !important; }
#cake2:checked ~ div .cake2 { display:block !important; }
#cake2:checked ~ div .cake3 { display:block !important; }
#cake2:checked ~ div .cake4 { display:block !important; }
#cake2:checked ~ div .cake5 { display:block !important; }
#cake3:checked ~ div #cake3-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/fudge-cake.png) !important; z-index:10; }
#cake3:checked ~ div .cake1 { display:block !important; }
#cake3:checked ~ div .cake2 { display:block !important; }
#cake2:checked ~ div .cake3 { display:block !important; }
#cake3:checked ~ div .cake4 { display:block !important; }
#cake3:checked ~ div .cake5 { display:block !important; }
#cake4:checked ~ div #cake4-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/Lemon-Tart.png) !important; z-index:10; }
#cake4:checked ~ div .cake1 { display:block !important; }
#cake4:checked ~ div .cake2 { display:block !important; }
#cake4:checked ~ div .cake3 { display:block !important; }
#cake4:checked ~ div .cake4 { display:block !important; }
#cake4:checked ~ div .cake5 { display:block !important; }
#cake5:checked ~ div #cake5-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/toffee-cake.png) !important; z-index:10; }
#cake5:checked ~ div .cake1 { display:block !important; }
#cake5:checked ~ div .cake2 { display:block !important; }
#cake5:checked ~ div .cake3 { display:block !important; }
#cake5:checked ~ div .cake4 { display:block !important; }
#cake5:checked ~ div .cake5 { display:block !important; }
}
</style>
<!-- Styles for Mobile -->
<style>
/* Background image mobile */
@media only screen and (max-width: 640px) {
.desserts { position: relative; display: block !important; overflow: hidden; width: 100vw; height: 118vw; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/dessert-full-brick.png); background-size:100vw 118vw; }
/* Mobile Buttons */
.cake1m, .cake2m, .cake3m, .cake4m, .cake5m { visibility: visible!important; display: block!important; max-height: 33px!important; position: absolute!important; z-index: 7; left: -1000px; top: -1000px; width: 27px; height: 27px; background-size: cover; background-position:center; animation: pulse 2s ease 0s infinite; border-radius:23px; box-shadow: 0px 0px 5px 5px rgba(50,50,50,0.5); cursor:pointer;}
.cake1m, .cake2m, .cake3m, .cake4m, .cake5m { background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/button-v3.png); }
/* Mobile content label positions vw - vh support is inconsistent on mobile */
#cake1m-content { position:absolute; left:62vw; top:22.5vw; width: 120px; height: 30px; z-index:1; }
#cake2m-content { position:absolute; left:10vw; top:27vw; width: 120px; height: 30px; z-index:1; }
#cake3m-content { position:absolute; left:40vw; top:45vw; width: 120px; height: 46px; z-index:1; }
#cake4m-content { position:absolute; left:11vw; top:68vw; width: 119px; height: 30px; z-index:1; }
#cake5m-content { position:absolute; left:43vw; top:88vw; width: 120px; height: 46px; z-index:1; }
/* Button keyframe animation */
@-webkit-keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.7; transform: scale(1); } }
.cake1m { left: 75vw!important; top: 20vw!important; }
.cake2m { left: 20vw!important; top: 24vw!important; }
.cake3m { left: 50vw!important; top: 42vw!important; }
.cake4m { left: 22vw!important; top: 65vw!important; }
.cake5m { left: 54vw!important; top: 85vw!important; }
}
/* If checked actions mobile */
#cake1m:checked ~ div #cake1m-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/carrot-cake.png) !important; z-index:10; }
#cake1m:checked ~ div .cake1m { display:block !important; }
#cake1m:checked ~ div .cake2m { display:block !important; }
#cake1m:checked ~ div .cake3m { display:block !important; }
#cake1m:checked ~ div .cake4m { display:block !important; }
#cake1m:checked ~ div .cake5m { display:block !important; }
#cake2m:checked ~ div #cake2m-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/Tiramisu.png) !important; z-index:10; }
#cake2m:checked ~ div .cake1m { display:block !important; }
#cake2m:checked ~ div .cake2m { display:block !important; }
#cake2m:checked ~ div .cake3m { display:block !important; }
#cake2m:checked ~ div .cake4m { display:block !important; }
#cake2m:checked ~ div .cake5m { display:block !important; }
#cake3m:checked ~ div #cake3m-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/fudge-cake.png) !important; z-index:10; }
#cake3m:checked ~ div .cake1m { display:block !important; }
#cake3m:checked ~ div .cake2m { display:block !important; }
#cake3m:checked ~ div .cake3m { display:block !important; }
#cake3m:checked ~ div .cake4m { display:block !important; }
#cake3m:checked ~ div .cake5m { display:block !important; }
#cake4m:checked ~ div #cake4m-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/Lemon-Tart.png) !important; z-index:10; }
#cake4m:checked ~ div .cake1m { display:block !important; }
#cake4m:checked ~ div .cake2m { display:block !important; }
#cake4m:checked ~ div .cake3m { display:block !important; }
#cake4m:checked ~ div .cake4m { display:block !important; }
#cake4m:checked ~ div .cake5m { display:block !important; }
#cake5m:checked ~ div #cake5m-content { display: block!important; background-image:url(https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/toffee-cake.png) !important; z-index:10; }
#cake5m:checked ~ div .cake1m { display:block !important; }
#cake5m:checked ~ div .cake2m { display:block !important; }
#cake5m:checked ~ div .cake3m { display:block !important; }
#cake5m:checked ~ div .cake4m { display:block !important; }
#cake5m:checked ~ div .cake5m { display:block !important; }
</style>
<table role="presentation" width="640" style="width:640px;" border="0" align="center" cellpadding="0" cellspacing="0" class="w100pc">
<tr>
<td>
<!-- Desktop hotspots -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="nomob">
<tbody>
<tr>
<td><table role="presentation" width="640" cellpadding="0" cellspacing="0" align="center" border="0" style="width:640px;" class="w100pc">
<tr>
<td valign="top" align="center"><table role="presentation" width="640" align="center" border="0" cellspacing="0" cellpadding="0" style="width:640px;">
<tr>
<td><table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="640" valign="top" style="width:640px;" align="center"><!--[if !mso]><!-- --><input type="checkbox" id="webkitnocheck" name="webkit" checked="checked" style="display:none;max-height:0;visibility:hidden;"><!--<![endif]-->
<div class="fallback"> <img src="https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/dessert-fallback-desktop.png" width="640" height="372" style="display:block;" border="0" alt="Free Dessert" /> </div>
<div class="samsung">
<!--[if !mso]><!-- -->
<div class="interactive" style="mso-hide:all;display:none;max-height:0;overflow:hidden;">
<input type="checkbox" class="cake" id="cake1" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake2" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake3" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake4" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake5" name="cake" style="display:none;max-height:0;visibility:hidden;">
<div class="desserts">
<label class="cake1" for="cake1" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake2" for="cake2" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake3" for="cake3" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake4" for="cake4" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake5" for="cake5" style="display:none;max-height:0;visibility:hidden;"></label>
<div id="cake1-content"></div>
<div id="cake2-content"></div>
<div id="cake3-content"></div>
<div id="cake4-content"></div>
<div id="cake5-content"></div>
</div>
</div>
<!--<![endif]-->
</div>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
<!-- Mobile hotspots -->
<!--[if !mso]><!-->
<div class="show" style="display: none; max-height: 0px; overflow: hidden;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table role="presentation" width="320" align="center" border="0" cellspacing="0" cellpadding="0" style="width:320px;" class="w100pc">
<tr>
<td><table width="320" border="0" cellspacing="0" cellpadding="0" align="center" class="w100pc">
<tr>
<td width="320" valign="top" style="width:320px;" align="center"><!--[if !mso]><!-- --><input type="checkbox" id="webkitnocheck" name="webkit" checked="checked" style="display:none;max-height:0;visibility:hidden;"><!--<![endif]-->
<div class="fallback"> <img src="https://arcdn.net/pizza-express/Newsletters-2018/10-October/html/1010/images/dessert-fallback-mobile.png" width="320" height="387" style="display:block;" border="0" alt="Free Dessert" class="w100pc"/> </div>
<div class="samsung">
<!--[if !mso]><!-- -->
<div class="interactive" style="mso-hide:all;display:none;max-height:0;overflow:hidden;">
<input type="checkbox" class="cake" id="cake1m" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake2m" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake3m" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake4m" name="cake" style="display:none;max-height:0;visibility:hidden;">
<input type="checkbox" class="cake" id="cake5m" name="cake" style="display:none;max-height:0;visibility:hidden;">
<div class="desserts">
<label class="cake1m" for="cake1m" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake2m" for="cake2m" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake3m" for="cake3m" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake4m" for="cake4m" style="display:none;max-height:0;visibility:hidden;"></label>
<label class="cake5m" for="cake5m" style="display:none;max-height:0;visibility:hidden;"></label>
<div id="cake1m-content"></div>
<div id="cake2m-content"></div>
<div id="cake3m-content"></div>
<div id="cake4m-content"></div>
<div id="cake5m-content"></div>
</div>
</div>
<!--<![endif]-->
</div>
</th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</div>
<!--<![endif]--></td>
</tr>
</table>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.