Goodies — Pumpkin Bubble

<!-- Pumpkin Bubble by Franchesca (extasisthemes) -->

<!-- Place this before the CSS part of the code. -->

<!-- Show On Click Script -->

<script>
function myFunction() {
var x = document.getElementById("bubble-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

/** Paste this in the CSS part of the code. **/

#pumpkin-wrapper {
bottom: 20px;
height: 115px;
position: fixed;
right: 20px;
width: 150px;
z-index: 1;
}

#pumpkin {
height: 115px;
position: absolute;
width: 150px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#pumpkin:hover {
opacity: 0.7;
}

.pumpkin-stalk {
background: #94a789;
border-radius: 100px;
height: 20px;
margin-left: 70px;
position: absolute;
width: 10px;
}

.pumpkin-curve-one {
background: #f18d4f;
border-radius: 100px;
height: 100px;
margin-top: 15px;
position: absolute;
width: 100px;
}

.pumpkin-curve-two {
background: #fe9554;
border-radius: 100px;
height: 100px;
margin-left: 25px;
margin-top: 15px;
position: absolute;
width: 100px;
}

.pumpkin-curve-three {
background: #f18d4f;
border-radius: 100px;
height: 100px;
margin-left: 50px;
margin-top: 15px;
position: absolute;
width: 100px;
}

.pumpkin-nose {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid #400c18;
margin-left: 65px;
margin-top: 45px;
position: absolute;
}

.pumpkin-mouth {
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #400c18;
height: 0px;
margin-left: 15px;
margin-top: 70px;
position: absolute;
width: 75px;
}

.pumpkin-tooth-one {
background: #f18d4f;
height: 15px;
margin-left: 45px;
margin-top: 70px;
position: absolute;
width: 15px;
z-index: 1;
}

.pumpkin-tooth-two {
background: #f18d4f;
height: 15px;
margin-left: 95px;
margin-top: 80px;
position: absolute;
width: 15px;
z-index: 1;
}

.pumpkin-eye-left {
border-bottom: 10px solid #400c18;
border-left: 10px solid #400c18;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
margin-left: 35px;
margin-top: 35px;
position: absolute;
}

.pumpkin-eye-right {
border-bottom: 10px solid #400c18;
border-left: 10px solid transparent;
border-right: 10px solid #400c18;
border-top: 10px solid transparent;
margin-left: 95px;
margin-top: 35px;
position: absolute;
}

#bubble-wrapper {
display: none;
}

.bubble {
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 5px;
bottom: 135px;
color: #555555;
font-size: 0.9rem;
font-style: normal;
height: 75px;
hyphens: auto;
letter-spacing: 1px;
overflow-y: scroll;
padding: 20px;
position: absolute;
z-index: 1;
text-align: center;
text-transform: uppercase;
width: 108px;
word-wrap: break-all;
}

<!-- Paste this in the HTML part of the code. -->

<div id="pumpkin-wrapper">

<div id="pumpkin">

<a onclick="myFunction()" title="Trick Or Treat">

<div class="pumpkin-stalk"></div>

<div class="pumpkin-curve-one"></div>

<div class="pumpkin-curve-three"></div>

<div class="pumpkin-curve-two"></div>

<div class="pumpkin-eye-left"></div>

<div class="pumpkin-eye-right"></div>

<div class="pumpkin-nose"></div>

<div class="pumpkin-mouth"></div>

<div class="pumpkin-tooth-one"></div>

<div class="pumpkin-tooth-two"></div>

</a>

</div>

<div id="bubble-wrapper">

<div class="bubble">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>

</div>