Home |  Electronics |  Toolbox |  Gini and Karl's world |  E-cards |  Photos |  Online-Shop


story time | science club | math blog | computer corner  |  penguin page | home

★ Merry Christmas! ★

Click on the candle flames to blow them off or light them again.


And here is the code:

<!DOCTYPE html>
<html>
<head>


<style>

.stem {
	height: 60px;
	width: 40px;
	background-color: brown;
	-moz-border-radius: 3px;
	position: absolute;
	top: 800px;
	left: 180px;

}
.xmastree1 {
  
  	width: 0px; 
	height: 0px; 
	border-right: 200px solid transparent;
	border-left: 200px solid transparent; 
	border-top:200px solid transparent; 
	border-bottom:200px solid green; 
 	position: absolute;
	top: 400px;
	
} 


.xmastree {
	height: 800px;
	width: 400px;
	position: absolute;
	left: 50px;
	top: -250px;
	
}

.xmastree2 {
  
  	width: 0px; 
	height: 0px; 
	border-right: 190px solid transparent;
	border-left: 190px solid transparent; 
	border-top:190px solid transparent; 
	border-bottom:190px solid green; 
	position: absolute;
	top: 340px;
	left: 10px;
	
} 

.xmastree3 {
  
  	width: 0px; 
	height: 0px; 
	border-right: 180px solid transparent;
	border-left: 180px solid transparent; 
	border-top: 180px solid transparent; 
	border-bottom: 180px solid green; 
	position: absolute;
	top: 280px;
	left: 20px;
	
} 

.xmastree4 {
  
  	width: 0px; 
	height: 0px; 
	border-right: 170px solid transparent;
	border-left: 170px solid transparent; 
	border-top:170px solid transparent; 
	border-bottom:170px solid green; 
	position: absolute;
	top: 210px;
	left: 30px;
	
}

.star {
	font-size:150px;
	color: orange;
	position: absolute;
	top: 10px;
	left: 180px;
	-moz-transform: rotate(-45deg);
	z-index:5;
}



.candle {
	height: 100px;
	width: 20px;
	position: relative;
}

.wax {
	height: 45px;
	width: 15px;
	background-color: red;
	-moz-border-radius: 3px;
	position: absolute;
	top: 20px;
	

}

.wick {
	height: 7px;
	width: 3px;
	background-color: black;
	position: absolute;
	top: 15px;
	left: 4px;

}

.flame {
	width: 15px;
  	height: 20px;
  	background-color: orange;
	border-radius: 100%;
  	-moz-border-radius: 100%;
  	-webkit-border-radius: 100%;	
	position: absolute;
	top: -3px;
		
}

.candle1 {
	position: absolute;
		top: 300px;
		left:220px;
}

.candle2 {
	position: absolute;
		top: 280px;
		left:300px;
}

.candle3 {
	position: absolute;
		top: 200px;
		left:150px;
}

.candle4 {
	position: absolute;
		top: 450px;
		left:200px;
}

.candle5 {
	position: absolute;
		top: 480px;
		left:100px;
}

.candle6 {
	position: absolute;
		top: 400px;
		left:400px;

}
.candle7 {
	position: absolute;
		top: 170px;
		left:300px;
}

.candle8 {
	position: absolute;
		top: 350px;
		left:150px;
}

.candle9 {
	position: absolute;
		top: 190px;
		left:240px;
}

.candle10 {
	position: absolute;
		top: 460px;
		left:270px;
}

.candle11 {
	position: absolute;
		top: 430px;
		left:350px;
}

.candle12 {
	position: absolute;
		top: 380px;
		left:290px;
}

.sphere {
	width: 20px;
  	height: 20px;
  	background-color: blue;
	border-radius: 100%;
  	-moz-border-radius: 100%;
  	-webkit-border-radius: 100%;
}




.sphere1 {
	position: absolute;
		top: 300px;
		left:180px;
}

.sphere2 {
	position: absolute;
		top: 400px;
		left:220px;
}

.sphere3 {
	position: absolute;
		top: 250px;
		left:280px;
}

.sphere4 {
	position: absolute;
		top: 500px;
		left:150px;

}

.sphere5 {
	position: absolute;
		top: 480px;
		left:320px;
}


.wholetree {
	height: 600px;
	width: 500px;
	position: relative;

}




</style>


<script  src="http://code.jquery.com/jquery-1.8.0.min.js">
</script>

</head>


<body>


<h1>&#9733; Merry Christmas! &#9733;</h1>
Click on the candle flames to blow them off or light them again.


<script type="text/javascript">
state = ["on","on","on","on", "on","on", "on","on","on","on", "on","on"];
$(document).ready(function(){

  $(".flame").click(function() {
	
	numid = $(this).attr("id");
	
	num = parseInt(numid);
	
	if (state[num] == "on"){
	 	$(this).fadeTo(500,0.1);
	 	state[num] = "off";
	} else {
	 	
		
	 	$(this).fadeTo(500,1);
	 	state[num] = "on";
	}
	 
  });

});
</script>


<div class="wholetree">

<div class="star">&#9733;</div>
<div class="xmastree">

<div class="stem"></div>
<div class="xmastree1"></div>
<div class="xmastree2"></div>
<div class="xmastree3"></div>
<div class="xmastree4"></div>
</div>


<div class= "candle1">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="0"></div>
</div>
</div>

<div class= "candle2">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="1"></div>
</div>
</div>

<div class= "candle3">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="2"></div>
</div>
</div>

<div class= "candle4">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="3"></div>
</div>
</div>

<div class= "candle5">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="4"></div>
</div>
</div>


<div class= "candle6">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="5"></div>
</div>
</div>

<div class= "candle7">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="6"></div>
</div>
</div>

<div class= "candle8">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="7"></div>
</div>
</div>

<div class= "candle9">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="8"></div>
</div>
</div>

<div class= "candle10">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="9"></div>
</div>
</div>

<div class= "candle11">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="10"></div>
</div>
</div>

<div class= "candle12">
<div class="candle">
<div class="wax"></div>
<div class="wick"></div>
<div class="flame" id="11"></div>
</div>
</div>

 <div class="sphere1">
<div class="sphere">
</div>
</div>

<div class="sphere2">
<div class="sphere">
</div>
</div>

<div class="sphere3">
<div class="sphere">
</div>
</div>


<div class="sphere4">
<div class="sphere">
</div>
</div>

<div class="sphere5">
<div class="sphere">
</div>
</div>
</div>	

</body>
</html>


Copyright © 2004-2017 Katja Socher, tuxgraphics.org