noel calendar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Calendrier de l'avent 2012 !!</title>
<style type="text/css">
	body{
		background:url('http://image.noelshack.com/fichiers/2012/49/1354923167-b83aae3f.jpg') no-repeat top center;
		background-size:100%;
	}

	div#calendrier{
		width:736px;
		height:400px;
		background:url('http://image.noelshack.com/fichiers/2012/49/1354923716-calendrierfond2.png') no-repeat top center;
		position: absolute;
		left:25%;
		top:20%;
	}

	.cadre{
		width:80px;
		height: 80px;
		border:1px red solid;
		margin-top:10px;
		margin-left: 5px;
		margin-right: 5px;
		float:left;
		text-decoration: none;
		color:yellow;
		font-size:2em;
	}

	.cadre:hover{
		background:url('http://image.noelshack.com/fichiers/2012/49/1354924744-mario-question-block.jpg');
		color:red;
	}
</style>
</head>
<body>
	<div id="calendrier">

		<!-- fenetre 1er decembre -->
		<a href="http://www.dltk-kids.com/pokemon/adoptions/pikachu.gif" class="cadre">
			1
		</a>

		<!-- fenetre 2 decembre -->
		<a href="http://alpha.heroshock.com/wp-content/uploads/2012/06/Code-Lyoko-Saison-4.jpg" class="cadre">
			2
		</a>

		<!-- fenetre 3 decembre -->
		<a href="" class="cadre">
			3
		</a>

		<!-- etc.. -->
		<a href="" class="cadre">
			4
		</a>

		<a href="" class="cadre">
			5
		</a>

		<a href="" class="cadre">
			6
		</a>

		<a href="" class="cadre">
			7
		</a>

		<a href="" class="cadre">
			8
		</a>

		<a href="" class="cadre">
			9
		</a>

		<!-- fenetre 10 decembre -->
		<a href="" class="cadre">
			10
		</a>

		<a href="" class="cadre">
			11
		</a>

		<a href="" class="cadre">
			12
		</a>

		<a href="" class="cadre">
			13
		</a>

		<a href="" class="cadre">
			14
		</a>

		<!-- fenetre 15 decembre -->
		<a href="" class="cadre">
			15
		</a>

		<a href="" class="cadre">
			16
		</a>

		<a href="" class="cadre">
			17
		</a>

		<a href="" class="cadre">
			18
		</a>

		<a href="" class="cadre">
			19
		</a>

		<a href="" class="cadre">
			20
		</a>

		<a href="" class="cadre">
			21
		</a>

		<a href="" class="cadre">
			22
		</a>

		<a href="" class="cadre">
			23
		</a>

		<!-- fenetre 24 decembre -->
		<a href="" class="cadre">
			24
		</a>

		<a href="" class="cadre">
			25
		</a>

		<a href="" class="cadre">
			26
		</a>

		<a href="" class="cadre">
			27
		</a>

		<a href="" class="cadre">
			28
		</a>

		<a href="" class="cadre">
			29
		</a>

		<a href="" class="cadre">
			30
		</a>

		<!-- fenetre 31 decembre -->
		<a href="" class="cadre">
			31
		</a>

	</div>
</body>
</html>