Fiche Parto #1

<div class="fond_principal"><div class="titre_principal">NEW FREEDOM</div><!--

--><table width="100%"><tr><td width="220">
<!--
--><div class="titre1">Statistiques</div><div class="titre2">Liberty Powa ♥</div><div id="slides"><div><!--
--><b>NOM</b> - écrire ici
<b>PRÉNOM</b> - écrire ici
<b>AGE</b> - écrire ici

<b>ORIENTATION</b> - écrire ici
<b>PARTICULARITE</b> - écrire ici
<!--
--> <img alt="Mon image" src="http://i80.servimg.com/u/f80/17/91/78/26/sunhae10.png" /></div></div></td> <td>
<!--
--><div class="titre1">Liens Utiles</div>
<div class="bloc_texte1"> <b>CONTEXTE</b>
<b>STAFF</b>
<b>RÈGLEMENT</b>
<b>QUESTIONS & SUGGESTIONS</b>
<b>PARTENARIAT</b>
<b>PUBLICITÉ</b>
</div>
<!--
--><div class="titre1">Bouton</div>
<div class="bloc_texte1"> Ecrire ici
</div> </td></tr></table><!--

-->
<div class="titre1">Contexte</div><!--
-->
<div class="bloc_texte2">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit arcu nec augue faucibus, sit amet consequat elit lacinia. In suscipit gravida magna, sit amet pretium neque vehicula vel. Proin egestas nibh quis metus convallis, vel elementum quam volutpat. Curabitur consequat justo sed tincidunt suscipit. Mauris quis tempus enim. Etiam lobortis lectus libero, vel egestas lectus tincidunt a. Sed id ligula vel felis tincidunt tincidunt. Sed euismod ac arcu in iaculis. Fusce et ultricies odio. Duis faucibus venenatis eros molestie interdum. Nulla euismod vitae ante consequat congue. Nullam ut urna et felis interdum condimentum eget vitae nisi.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit arcu nec augue faucibus, sit amet consequat elit lacinia. In suscipit gravida magna, sit amet pretium neque vehicula vel. Proin egestas nibh quis metus convallis, vel elementum quam volutpat. Curabitur consequat justo sed tincidunt suscipit. Mauris quis tempus enim. Etiam lobortis lectus libero, vel egestas lectus tincidunt a. Sed id ligula vel felis tincidunt tincidunt. Sed euismod ac arcu in iaculis. Fusce et ultricies odio. Duis faucibus venenatis eros molestie interdum. Nulla euismod vitae ante consequat congue. Nullam ut urna et felis interdum condimentum eget vitae nisi.
</div><div class="titre2">(c) fiche crée par rits-u sur epicode</div><!--

--></div>

/* FICHE DE PRESENTATION AVEC SLIDE PAR RITS-U SUR EPICODE */

.fond_principal{          /*    est le fond  général  */       
padding:5px;
margin: 10px;
font-family: sans-serif,Verdana,Arial,Helvetica;
font-size: 10px;
width:500px;
  color:#72AA80;
background-color:#E9E589;
}

.titre_principal{              /* le titre principal */
  padding:10px;
  font-family: Times New Roman;
text-shadow: #fff 0px 1px 0px;
  text-transform: uppercase;
color:#72AA80;
  font-size: 40px;
text-align:center;
  background-color:#C9E07E;
}

.titre1{                /* sous titre */
  font-family: Times New Roman;
text-shadow: #fff 0px 1px 0px;
  text-transform: uppercase;
color:#72AA80;
  font-size: 20px;
text-align:center;
  background-color:#C9E07E;}
.titre2{                      /* credits */
font-size: 8px;
text-align:center;
  text-transform: uppercase;
}

.bloc_texte1{                  /* informations & caractère */
  background: #C9E07E;
        padding: 10px;
font-family: sans-serif,Verdana,Arial,Helvetica;
font-size: 10px;
        text-align: justify;
  height: 130px;
        overflow:auto;
        border: 1px solid #638F6B;
}


.bloc_texte2{                  /* biographie  */
  background: #C9E07E;
        padding: 10px;
font-family: sans-serif,Verdana,Arial,Helvetica;
font-size: 10px;
        text-align: justify;
  height: 250px;
        overflow:auto;
        border: 1px solid #638F6B;
}

/* EFFET AVATAR */

#slides div {    /* physionomie */
  background: #C9E07E;
        padding: 10px;
font-family: sans-serif,Verdana,Arial,Helvetica;
font-size: 10px;
        text-align: justify;
  height: 335px;
  margin: 5px;
        overflow:hidden;
  position: relative;
        border: 1px solid #72AA80;
  width: 180px;
}

#slides div img {
  left: 0;  top: 0;
  position: absolute;
  transition: transform 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s ease-in-out;
  -o-transition: -o-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

#slides div:hover img {
  transform: translateX(-200px);
  -moz-transform: translateX(-200px);
  -o-transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
}