<style>
.example {
position: relative;
font-family: georgia;
height: 260px;
}
.example p {
margin: 0;
}
.example .count {
font-size: 250%;
display: inline-block;
line-height: 0.8em;
zoom: 1; *display: inline; /* IE < 8: fake inline-block */
width: 0.6em;
vertical-align: baseline;
font-family: verdana;
}
.example em {
font-size: 170%;
font-weight: bold;
text-shadow: 0 0 4px rgba(110, 132, 57, 0.75);
display: block;
font-style: normal;
}
.example .fruit {
position: absolute;
top: 21px;
left: 200px;
border: solid 3px #000;
background-color: #F4EBE2;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
padding: 0.6em 0.6em 0.9em;
text-align: center;
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.3);
font-size: 125%;
}
.example .changer {
left: 464px;
}
.example .fruit img {
position: absolute;
top: 35px;
left: -202px;
}
</style>
<div class='fruit'>
<div class="speech">We're twins<br>
for <div class="count">5</div> sec.
</div>
<img src="{{{componentAssets}}}/images/apple.png" width="221" height="225"/>
</div>
<div class='fruit changer'>
<div class="speech">We're twins<br>
for <div class="count">5</div> sec.
</div>
<img src="{{{componentAssets}}}/images/apple.png" width="221" height="225"/>
</div>
<script>
{{>yui-core-js}}
</script>