body
{
   width: 1295px;
   margin-left: 20px; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color:MistyRose; /*url("Gif. Coeur.jpg")  Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
   background-image:url("Logo.png");
}

  

#en_tete h1
{
   width: 600px;
   height: 35px;
   background-repeat: no-repeat;
   margin-bottom: 10px;
   
}


#menu
{
   float: left;
   width: 152px;


}

.element_menu
{
   
   background-image: url("fond.png");
   background-repeat: repeat-x;
    border:2px groove teal;
   margin-bottom: 10px;
  
text-align:center;
}


/* Quelques effets sur les menus */


.element_menu h3 /* Tous les titres de menus */
{    
   color:green;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}



.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color:blue;
font-size:14px;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
  
   color: fuchsia;
}
/* Le corps de la page */

#corps
{
 height: 902px;
   margin-left: 155px;
   margin-bottom: 20px;
   padding: 5px;
   color:red;
   background-color:pink;
   background-image: url("fond.png");
   /*background-repeat: repeat-x;*/
   font-size:15px;
  border:2px groove teal;
}

#corps h1 /* Tous les titres h1 du corps */
{
   color:blue;
   text-align: center;
   font-family:Times New Roman;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 40px;
color:fuchsia;
   background-image: url("afrique.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   font-weight: bold;
font-family:Times New Roman;
   padding-left: 30px;
   
   text-align: left;
}
#corps img /* Tous les titres h2 du corps */
{
border:2px groove teal;
}
#pied_de_page
{
   padding: 1px;
   clear: both;

   text-align: center;
font-weight: bold;
   color:blue;
   background-color:pink;
   background-image: url("fond.png");
   background-repeat: repeat-x;
   border:2px groove teal;
   
   
}

.re
{
border:4px groove teal;
font-size:14px;

}
h3:hover /* Quand le visiteur pointe sur le lien */
  { 
 color: blue /* Le lien sera écrit en vert quand on pointera dessus */
 background-color: rgb(243,65,243);
}
p:hover /* Quand on pointe sur un paragraphe */
{
   color:rgb(243,65,243); /* Le fond du paragraphe change de couleur */
 
  
}
.agrandi img:hover /* Quand on pointe sur un paragraphe */
{
width:350px;
height:300px;
border:8px groove teal;
 position: relative;
  display:block;overflow:hidden;
  float:right;
  
  
  
  
  
}
.style
{

color:blue;
font-align:right;
background-color:pink;
font-weight:bold;
padding:5px;
border:2px groove teal;
margin-bottom:5px;
background-image:url("fond.png");	

}

<STYLE type=text/css>#monmenu {
	FONT-WEIGHT: bold; FONT-SIZE: 90%; FONT-FAMILY: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu UL UL {
	BORDER-RIGHT: #b0b0b0 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #b0b0b0 1px solid; DISPLAY: none; PADDING-LEFT: 0px; LEFT: 164px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #b0b0b0 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #b0b0b0 1px solid; POSITION: absolute; TOP: -1px
}
#monmenu LI {
border-radius: 3px 0 0 3px;
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; WIDTH: 160px; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; POSITION: relative; 
}
#monmenu LI:hover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI.sfhover {
	BACKGROUND-COLOR: #ffff70
}
#monmenu LI A {
	TEXT-DECORATION: none
}
#monmenu LI:hover UL.niveau2 {
	DISPLAY: block
}


#monmenu LI LI:hover UL.niveau3 {
	DISPLAY: block
	
}


#monmenu LI.sfhover UL.niveau2 {
	DISPLAY: block
}
#monmenu LI LI.sfhover UL.niveau3 {
	DISPLAY: block
}
#monmenu LI.plus {
	BACKGROUND-POSITION: right 50%;  BORDER-BOTTOM: #b0b0b0 1px solid; BACKGROUND-REPEAT: no-repeat
	
}
</STYLE>	




/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);

	}

.flip-container, .front, .back {
	width: 233px;
	height: 180px;
}

/* flip speed goes here */
.flipper {
	transition: 0.9s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 4px;
	left: -9px;
	
}

/* front pane, placed above back */
.front {
	z-index: 2;
	
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);

}

ul li a{  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 0 -3px 0 hsl(210, 100%, 44%) inset, 0 -4px 0 hsl(210, 100%, 50%) inset, 0 -5px 0 hsl(210, 100%, 60%) inset; }





html{

}
 ul{
  display: table; width: 165px; margin: -10px auto; padding:0; 
} 
  ul li{
   display: block;
   z-index:1;
   
}
ul{
 background: linear-gradient(deepskyblue, dodgerblue);
 }
 ul{ 
  background: -webkit-linear-gradient(deepskyblue, dodgerblue);
   background: -moz-linear-gradient(deepskyblue, dodgerblue);
    background: -ms-linear-gradient(deepskyblue, dodgerblue);
	 background: -o-linear-gradient(deepskyblue, dodgerblue); 
	 background: linear-gradient(deepskyblue, dodgerblue); 
	 }
	 ul{ background: dodgerblue; 
	  }
	  ul{  border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); }
	  ul li a{
	   display: block; text-align: center; color: rgba(0, 0, 0, .7); 
	   text-decoration: none; padding: 8px 8px 17px 8px; 
	   }
	   ul li a{ text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }
	   ul li a{ box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
	    0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset,
		 0 -3px 0 hsl(210, 100%, 44%) inset, 
		 0 -4px 0 hsl(210, 100%, 50%) inset,
		  0 -5px 0 hsl(210, 100%, 60%) inset; 
		  }
		  ul li:first-child a
		  { border-radius: 3px 0 0 3px; 
		  } 
		  ul li:last-child a{
		   border-radius: 0 3px 3px 0; 
		   } 
		   ul li a:hover, ul li a:focus{ background: rgba(255,255,255,.2);
		    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 hsl(210, 100%, 42%) inset, 0 -2px 0 hsl(210, 100%, 48%) inset, 0 -3px 0 hsl(210, 100%, 54%) inset, 0 -4px 0 hsl(210, 100%, 60%) inset, 0 -5px 0 hsl(210, 100%, 70%) inset; } 
			
					   ul li { background: rgba(255,255,255,.2);
		    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 hsl(210, 100%, 42%) inset, 0 -2px 0 hsl(210, 100%, 48%) inset, 0 -3px 0 hsl(210, 100%, 54%) inset, 0 -4px 0 hsl(210, 100%, 60%) inset, 0 -5px 0 hsl(210, 100%, 70%) inset; } 
			ul li a:hover, ul li a:focus{  padding: 8px 25px 17px 25px; }
			ul li a:hover, ul li a:focus{ background: rgba(255,255,255,.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 hsl(210, 100%, 42%) inset, 0 -2px 0 hsl(210, 100%, 48%) inset, 0 -3px 0 hsl(210, 100%, 54%) inset, 0 -4px 0 hsl(210, 100%, 60%) inset, 0 -5px 0 hsl(210, 100%, 70%) inset; } 
			ul li a:active{ background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); box-shadow: 0 0 2px rgba(0,0,0,.3) inset; }
			ul li a:hover, ul li a:focus{  padding: 8px 25px 17px 25px; }
			ul li a{  transition: padding .3s; } 
			ul li a{  transition: padding .3s, background .3s; } 
			ul li a{  transition: all .3s .1s; } ul li a:hover, ul li a:focus{ … transition: all .3s 0s; }
			ul li a{  position: relative; } ul li a::before{ content: '';
			 position: absolute; 
			 left: 50%; bottom: 9px; 
			 margin-left: -2px; width: 4px; 
			 height: 4px; border-radius: 50%; 
			 background: rgba(0, 0, 0, .5); }
			ul li a:hover::before, ul li a:focus::before{ background: white; box-shadow: 0 0 2px white, 0 -1px 0 rgba(0, 0, 0, .4); }

ol{ display: table;
 width:150px; -webkit-animation: slideAnim 20s ease 0s infinite; 
 -moz-animation: slideAnim 20s ease 0s infinite;
  -ms-animation: slideAnim 20s ease 0s infinite;
   -o-animation: slideAnim 20s ease 0s infinite; 
   animation: slideAnim 20s ease 0s infinite; }
    ol li{ display: table-cell; width:300px; } 
	@keyframes slideAnim{ 
	from,5%,to {margin-left:-10px;}
	 7%,12%{margin-left:-250px;}
	  14%,19%{margin-left:-461px;}
	  21%,26%{margin-left:-680px;}
	   28%,33%{margin-left:-910px;}
	   35%,40%{margin-left:-1130px;}
	   ol li img:hover
	   {
	   border:8px groove teal;
	   width:80px;
      height:80px;}
	   
	   }


<p><img src="johns.jpg" class="imageblock" width="210"height="175" border="2px dashed green"hspace="2" alt="Voici la photo" />
<img src="john3.jpg" class="imageblock" width="200" height="175" border="2px dashed green"alt="Voici la photo" /> 
<img src="john5.jpg" class="imageblock" width="200" height="175"border="2px dashed fuchsia" alt="Voici la photo" />
<img src="jon.jpg" class="imageblock" width="240" height="175" border="2px dashed green"alt="Voici la photo" /> </p>