Page d'accueil

Le code

Code:

<link href="http://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet" type="text/css" />
<div id="contour_pa">
 
<div id="triangle_haut_pa">
 
<div id="bienvenue_pa">
 Bienvenue {USERNAME} !
</div>
 
</div>
 
<div id="contour_centre_pa">
 
<div id="contexte_pa">
 
<div class="titre_pa">
 Contexte
</div>
 
<div id="contenu_conexte_pa">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna est, accumsan nec placerat a, malesuada nec nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque a sapien non dui malesuada volutpat. Donec vel vehicula lorem. Donec pellentesque viverra risus at tempor. Nulla quis metus viverra, adipiscing ante sit amet, congue odio. Donec sit amet laoreet sem. Donec turpis enim, sollicitudin eu facilisis ac, aliquam quis odio. Integer suscipit luctus auctor. Nam sagittis velit suscipit odio egestas molestie. Donec quis nunc quis neque dictum bibendum non ut dui. Suspendisse convallis nulla id libero consectetur eleifend. Vestibulum tincidunt placerat diam ut viverra. Pellentesque velit dolor, tristique eu sapien commodo, dignissim malesuada sapien. Praesent egestas fermentum orci, eu malesuada nisl semper eget. Nam id massa mattis, rhoncus lorem ut, auctor lacus. Fusce luctus euismod rutrum. Vivamus sit amet justo et erat dapibus rhoncus non eget eros. Curabitur sapien velit, pretium a dolor a, molestie fermentum ipsum. Maecenas ac felis magna. Nunc ac libero non nisl pretium convallis nec eu ligula. Sed vitae velit non massa imperdiet pulvinar. Curabitur enim massa, tincidunt id imperdiet ornare, tincidunt lobortis mauris. Ut volutpat gravida aliquam. Fusce scelerisque justo non eros dignissim lacinia. Donec pretium commodo faucibus. Duis lectus lectus, tristique ac nibh ac, sagittis imperdiet mauris. Cras commodo vitae augue eget condimentum. Nulla aliquet sit amet felis in varius. Sed porta ipsum eget quam convallis, vitae fermentum magna lobortis. Quisque in lacinia felis, ac iaculis lacus. Sed sodales, justo in viverra placerat, massa erat aliquet massa, at sollicitudin dolor nibh sed magna. Donec sed metus a nunc rhoncus lobortis ut sit amet dolor. Etiam porttitor magna ut dolor lobortis hendrerit. Aenean porttitor, ligula et suscipit ultricies, ante sapien dictum lacus, nec faucibus libero est eu nibh. Praesent metus augue, luctus sit amet placerat eu, egestas vel metus. Pellentesque eleifend neque at augue luctus consectetur. Sed vitae arcu ut quam lobortis convallis at eu turpis. Integer commodo euismod tellus at gravida. Maecenas adipiscing, arcu ut dapibus bibendum, erat mi faucibus nibh, quis rhoncus neque erat id sapien.
</div>
 
</div>
 
<div id="gauche_pa">
 
<div id="staff_pa">
 
<div class="titre_pa">
 Staff
</div>
 
<div class="contour_staff_pa">
 <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
<div class="infobulle_staff_pa">
 Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
</div>
 
</div><br />
 <div class="contour_staff_pa">
 <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
<div class="infobulle_staff_pa">
 Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
</div>
 
</div>
 <div class="contour_staff_pa">
 <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
<div class="infobulle_staff_pa">
 Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
</div>
 
</div>
 <div class="contour_staff_pa">
 <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
<div class="infobulle_staff_pa">
 Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
</div>
 
</div>
 <div class="contour_staff_pa">
 <img class="img_staff_pa" src="http://club-de-magie.com/files/avatars/smalls/37_Shrek3_effets_magie_mainmerlin_Lariffoulette.small.jpg" />
<div class="infobulle_staff_pa">
 Nom Prénom<br /> Poste<br /> <a href="" target="_blank">MP</a><br />
</div>
 
</div>
 
</div>
 
<div id="news_pa">
 
<div class="titre_pa">
 News
</div>
 
<div id="contenu_news_pa">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam magna est, accumsan nec placerat a, malesuada nec nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque a sapien non dui malesuada volutpat. Donec vel vehicula lorem. Donec pellentesque viverra risus at tempor. Nulla quis metus viverra, adipiscing ante sit amet, congue odio. Donec sit amet laoreet sem. Donec turpis enim, sollicitudin eu facilisis ac, aliquam quis odio. Integer suscipit luctus auctor. Nam sagittis velit suscipit odio egestas molestie. Donec quis nunc quis neque dictum bibendum non ut dui. Suspendisse convallis nulla id libero consectetur eleifend. Vestibulum tincidunt placerat diam ut viverra. Pellentesque velit dolor, tristique eu sapien commodo, dignissim malesuada sapien. Praesent egestas fermentum orci, eu malesuada nisl semper eget. Nam id massa mattis, rhoncus lorem ut, auctor lacus. Fusce luctus euismod rutrum. Vivamus sit amet justo et erat dapibus rhoncus non eget eros. Curabitur sapien velit, pretium a dolor a, molestie fermentum ipsum. Maecenas ac felis magna. Nunc ac libero non nisl pretium convallis nec eu ligula. Sed vitae velit non massa imperdiet pulvinar. Curabitur enim massa, tincidunt id imperdiet ornare, tincidunt lobortis mauris. Ut volutpat gravida aliquam. Fusce scelerisque justo non eros dignissim lacinia. Donec pretium commodo faucibus. Duis lectus lectus, tristique ac nibh ac, sagittis imperdiet mauris. Cras commodo vitae augue eget condimentum. Nulla aliquet sit amet felis in varius. Sed porta ipsum eget quam convallis, vitae fermentum magna lobortis. Quisque in lacinia felis, ac iaculis lacus. Sed sodales, justo in viverra placerat, massa erat aliquet massa, at sollicitudin dolor nibh sed magna. Donec sed metus a nunc rhoncus lobortis ut sit amet dolor. Etiam porttitor magna ut dolor lobortis hendrerit. Aenean porttitor, ligula et suscipit ultricies, ante sapien dictum lacus, nec faucibus libero est eu nibh. Praesent metus augue, luctus sit amet placerat eu, egestas vel metus. Pellentesque eleifend neque at augue luctus consectetur. Sed vitae arcu ut quam lobortis convallis at eu turpis. Integer commodo euismod tellus at gravida. Maecenas adipiscing, arcu ut dapibus bibendum, erat mi faucibus nibh, quis rhoncus neque erat id sapien.
</div>
 
</div>
 
</div>
 
</div>
 
<div id="triangle_bas_pa">
 
<div id="partenaires_pa">
 Partenaires
</div>
 
<div id="position_part_pa">
 
<div id="partenaires_deroulement_pa">
 
<div id="marquee_pa">
 <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" /> <img src="http://i71.servimg.com/u/f71/09/03/38/36/mini10.jpg" />
</div>
 
</div>
 
</div>
 
</div>
</div>

Code:

/***** DÉBUT PA *******/
#contour_pa {
  position: relative;
  width: 600px;
  height: 600px;
  margin: auto;
}

/* Mise en forme du triangle du haut. */
#triangle_haut_pa {
  width: 0;
 height: 0;
 border-left: 300px solid transparent;
  border-right: 300px solid transparent;
/* Ici détermine la couleur du triangle. */
  border-bottom: 150px solid #1C1C1C;
}

/* Mise en forme et placement du bienvenue. */
#bienvenue_pa {
  position: absolute;
  top: 120px;
  left: 0;
/* Empêche le retour à la ligne. */
  white-space: nowrap;
  width: 600px;
  text-align: center;
/* Police du titre.*/
  font-family: Diplomata;
  font-size: 18pt;
/* Couleur et ombre du titre. */
  color: white;
  text-shadow: 1px 1px black;
}
  
/* Permet e placer les blocs du centre. */
#contour_centre_pa {
  width: 100%;
  height: 300px;
}

/* Div contenant le contexte. */
#contexte_pa {
  width: 300px;
  height: 100%;
  float: left;
/* Couelur de fond du contexte */
  background-color: white;
}

/* Permet d eplacer le staff & les news à droite. */
#gauche_pa {
  width: 300px;
  height: 100%;
  float: left;
}

/* Div contenant le staff */
#staff_pa {
  height: 50%;
  width: 100%;
/* Couleur de fond du staff */
  background-color: #BFBFBF;
}

/* Mise en forme de l'image du staff. Les images carrés sont redimmensionnées automatiquement, mais il FAUT qu'elles soeint carrées. */
.contour_staff_pa .img_staff_pa {
  width: 50px;
  border-radius: 50%;
  opacity: 1;
  transition: all 0.5s ease-in-out 0s;
}

/* Permet de réduire l'opacité de l'image du staff au passage de la souris. */
.contour_staff_pa:hover .img_staff_pa {
  opacity: 0.5;
  transition: all 0.5s ease-in-out 0s;
}

/* Permet de placer correctement les images du staff */
.contour_staff_pa {
  position: relative;
  display: inline-block;
  margin: auto;
  margin-left: 20px;
  width: 50px;
  height: 50px;
  overflow: visible;
  margin-top: 4px;
}
 
/* Mise en forme de l'Infobulle */
.contour_staff_pa div {
/* Placement de l'infobulle par rapport à l'image du staff. */
  position: absolute;
  top: 20px;
  left: 20px;
/* Couleur de fond et d'écriture de l'infobulle. */
  background-color: white;
  color: black;
/* Largeur et hauteur de l'infobulle. */
  width: 100px;
  height: 50px;
  overflow: auto;
  text-align: center;
/* Bordure de l'infobulle. */
  border: 2px solid black;
  border-radius: 20px;
  padding: 8px;
/* Permet de rendre l'infobulle invisible lorsque la souris n'est pas là. */
  opacity:0;
  transition: all 0.5s ease-in-out 0s;
  z-index: 999;
  visibility: hidden;
}

 /* Fait apparaître l'infobulle du staff au passage de la souris ou au clic. */
.contour_staff_pa:hover div, .contour_staff_pa:focus div {
  opacity:1;
  transition: all 0.5s ease-in-out 0s;
  visibility: visible;
}

/* Div contenant les news. */
#news_pa {
  height: 50%;
  width: 100%;
/* Couleur de fond des news. */
  background-color: #898989;
}

/* Permet de créer le triangle du bas. */
#triangle_bas_pa {
  width: 0;
 height: 0;
 border-left: 300px solid transparent;
  border-right: 300px solid transparent;
/* La couleur du triangle est déterminée ici. */
  border-top: 150px solid #1C1C1C;
}

/* Mise en forme et placement du titre des Partenaires */
#partenaires_pa {
  position: absolute;
  bottom: 120px;
  left: 0;
  whitespace: no-wrap;
  width: 600px;
  text-align: center;
  font-family: Diplomata;
  font-size: 18pt;
  color: white;
  text-shadow: 1px 1px black;
}

/* Placement des partenaires. */
#position_part_pa {
  position: absolute;
  bottom: 60px;
  left: 175px;
}

/* Permet de limiter la largeur et hauteur des partenaires. */
#partenaires_deroulement_pa {
  position: relative;
  width: 250px;
  height: 50px;
  overflow: hidden;
  margin: auto;
}

/* Mise en forme des trois titres du centre. */
.titre_pa {
  width: 100%;
  text-align: center;
/* Police des titres. */
  font-family: Diplomata;
  font-size: 20pt;
/* Couleur des titres */
  color: black;
}

/* Mise en forme du contexte */
#contenu_conexte_pa {
  width: 97%;
  height: 85%;
  padding: 5px;
  text-align: justify;
  font-size: 10pt;
  overflow: auto;
}

/* Mise en forme des news. */
#contenu_news_pa {
  width: 97%;
  height: 70%;
  padding: 5px;
  text-align: justify;
  font-size: 10pt;
  overflow: auto;
}

/* Bloc de défilement des partenaires */
#marquee_pa {
  height: 100%;
  position: absolute;
  top: 10px;
  left: 0;
/* Modifier ici le nombre de secondes (les deux fois) pour accélérer ou ralentir le défilement. Plus le chiffre est gros, plus l'animation est lente. */
  -webkit-animation: marqueelike 30s linear infinite;
  animation: marqueelike 30s linear infinite;
  white-space:nowrap;
}

/* Permet d'arrêter l'animation au passage de la souris */
#marquee_pa:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Permettent tous deux le déplacement des partenaires, donc l'animation. Modifiez si nécessaire la seconde valeur (à 100%) */
@-webkit-keyframes marqueelike {
  0%    { -webkit-transform: translateX(280px); }
  100%  { -webkit-transform: translateX(-100%); }
}

@keyframes marqueelike {
  0%    { transform: translateX(280px); }
  100%  { transform: translateX(-100%); }
}
/***** FIN PA *******/

Modifications supplémentaires

• Avoir d'autres effets sur l'infobulle pour son apparition, disparition (CSS à modifier: .contour_staff_pa div et .contour_staff_pa:hover div, .contour_staff_pa:gocus div
  [/i]
  
• Avoir des effets sur les images de staff (CSS à modifier: .contour_staff_pa .img_staff_pa et .contour_staff_pa:hover .img_staff_pa)