<!DOCTYPE html>
<html>
<head>
<!--
By: Justin Khoo @freshinbox
http://freshinbox.com
-->
<title>FreshInbox.com - Bubble Wrap in Email</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>
.bubble-wrapper{
display:none; /* Yahoo Mail */
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffffffff) {
div[class^=bubble-wrapper] { display:block!important; }
div[class^=bubble-fallback] { display:none!important; }
}
#MessageViewBody .bubble-wrapper { display:block!important; }
#MessageViewBody .bubble-fallback { display:none!important; }
@media (-webkit-min-device-pixel-ratio: 0) and (min-device-width:1024px)
{
/*
Enable for Apple Mail and Outlook for Mac
WARNING: Outlook for Mac does not play audio
so remove this block to disable for Mac clients
*/
.bubble-wrapper { display:block!important; }
.bubble-fallback { display:none!important; }
}
.bubble,.z2 {
width:45px;
height:45px;
border-radius: 50%;
position:relative;
overflow:hidden;
}
/* Bubble wrap shapes - https://codepen.io/Calvein/pen/qOpbJL */
.bubble{
transition-delay:5s;
box-shadow: inset 0 -10px 12px rgba(0,0,0,.5);
display:inline-block;
vertical-align:middle;
margin:10px;
}
.bubble:active{
transition-delay:0s;
box-shadow:none!important;
}
.z2{
box-shadow: inset 0 0 6px rgba(0,0,0,.5);
}
.z2:active{
box-shadow: inset 0 -10px 12px rgba(0,0,0,.5)!important;
}
.z3{
margin-top:-50px;
transition-delay:5s;
}
.z3 audio{
width:100px;
opacity:0.0;
margin-top:50px;
margin-left:-5px;
}
.z3:active{
margin-top:0px;
transition-delay:0s;
}
.z3:active audio{
margin-top:0px;
}
audio{
width:100px;
transform:scale(1.5);
transform-origin:top left;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
/* to deal with iOS 10 bug */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline {
display:none;
}
.paper{
background-color:#97eef4;
}
</style>
<style>
body,*{
font-family: 'Open Sans',Arial,sans-serif;
}
.logo{
margin-left:30px;
margin-top:15px;
}
.logo a{
text-decoration: none;
color:#666666;
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>
<BR><BR>
<center>
<div style="font-family:Lobster,cursive,sans-serif;font-size:65px;color:#777777;">Bubble Wrap in Email</div>
<div style="font-family:Lobster,cursive,sans-serif;font-size:30px;color:#999999;">with sound effects</div>
</div>
</center>
<BR><BR>
<!-- fallback section -->
<div class="bubble-fallback">
<center>
<a href="http://freshinbox.com/examples/bubble-wrap/" ><img
src="http://freshinbox.com/examples/bubble-wrap/images/bubblewrap-fallback.jpg" width="341" border="0" /></a>
</center>
</div>
<!-- end fallback section -->
<div class="bubble-wrapper" style="display:none;min-width:350px">
<div style="text-align:center;">
<div class="paper" style="border:2px solid #277482;display:inline-block;padding:55px;box-shadow: 2px 2px 5px rgba(0,0,0,.5)!important;">
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<BR>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<BR>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
<div class="bubble">
<div class="z2">
<div class="z3">
<audio src="http://freshinbox.com/images/audio/pop.mp3" controls="true" ></audio>
</div>
</div>
</div>
</div>
</div><BR><BR>
<center>
<a href="http://freshinbox.com/examples/bubble-wrap/" style="font-family:'Open Sans',Arial,san-serif;text-decoration:none;font-size:20px;color:#555555;">Learn more...</a>
</center>
</div>
<BR><BR><BR><BR><BR>
</body>
</html>