<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Présentation des PVs</title>
<style>
/* PRESENTATION DES PVS */
.presentation {
margin-top:-10px;
padding:13px;
width:510px;
border: 1px #f7ebc8 solid;
background: rgba(243, 231, 194, 0.6);
}
.presentation2 {
background:#7aa9ce;
font-family: 'Titillium Web', sans-serif;
font-size: 20px;
text-transform:uppercase;
text-align:center;
font-weight : bold;
letter-spacing:1px;
color: #f0e3cc;
padding:5px;
}
.presentation3 {
text-align:justify;
}
.pvpresentation8 {
text-align:justify;
height:200px;
overflow:auto;
}
.presentation6{
background: none repeat #ebc170;
padding-top: 30px;
padding-bottom: 30px;
width: 540px;
border-radius: 200px 200px 200px 200px;
box-shadow: 0px 0px 10px #ebc170;
}
.presentation4{
letter-spacing:1px;
font-size: 12px;
text-transform: uppercase;
text-align:center;
color:#675850;
font-family: 'BenchNine', sans-serif;
text-shadow: 1px 1px #e0c791;
text-decoration:underline;
}
.presentation10{
letter-spacing:1px;
font-size: 12px;
}
.imagepv{
cursor : nw-resize;
opacity:1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity:1.0;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-khtml-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
margin: 1px;
-moz-box-shadow: 0 0 5px #cdb66e;
-webkit-box-shadow: 0 0 5px #cdb66e;
box-shadow: 0 0 5px #cdb66e;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
width:500px;
}
.imagep1{
cursor : nw-resize;
opacity:1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity:1.0;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-khtml-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
margin: 1px;
-moz-box-shadow: 0 0 5px #cdb66e;
-webkit-box-shadow: 0 0 5px #cdb66e;
box-shadow: 0 0 5px #cdb66e;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
height: 80px;
width: 80px;
}
/* STRUCTURE DES ONGLETS */
body{
background-color:transparent;
}
#en_tete{
width:510px;
min-height:400px;
height:auto;
color:#1a3a2f;
font-family: Verdana;
margin:auto;
}
#en_tete tr{
vertical-align:top;
}
#en_tete img{
border:0;
}
span.onglet{
float:left;
}
span.onglet img:hover{
cursor:pointer;
}
#en_tete .bloc_texte{
position:absolute;
margin-top:0;
width:800px;
margin-left:50%;
left:-400px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>
<body>
<div id="en_tete">
<span class="onglet">
<div class="navigation"><img src="http://img6.imageshack.us/img6/4584/sanstitre1hrf.png" class="imagep1" alt="Mon onglet 1" onMouseOver="this.src ='http://img11.hostingpics.net/pics/420758joe.png';" onMouseOut="this.src = 'http://img6.imageshack.us/img6/4584/sanstitre1hrf.png';" /></div>
<div class="bloc_texte" id="onglet1">
<div class="infos">
<p><br>
<div align=center><div class="presentation6"><div class="presentation"><div align=center><div class="presentation2"> Esteban Andreani </div></div><br>
<img src="http://img15.hostingpics.net/pics/123927Sanstitre2.png" class="imagepv"><center><table style="margin-top: -15px;"><tr><td><form>
<br><select style="width: 140px; border: 1px solid #d6cfc2; background : #f7f5f1; padding:5px; margin:8px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">Qualité</option>
<option>Honnête</option>
<option>Digne de confiance</option>
<option>Observateur</option>
<option>Charismatique</option>
<option>Franc</option>
<option>Généreux</option>
<option>Fonceur</option>
<option>Tenace</option>
<option>Fidèle</option>
</select>
</form></td><td><form><br>
<select style="width: 140px; border: 1px solid #d6cfc2; background : #f7f5f1; padding:5px; margin:8px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">Défaut</option>
<option>Exigeant</option>
<option>Dominant</option>
<option>Impulsif</option>
<option>Trop protecteur</option>
<option>Jaloux</option>
<option>Rancunier</option>
<option>Têtu</option>
<option>Rentre dedans</option>
<option>Macho</option>
</select>
</form></td></tr></table></center>
<div class="presentation3"><span class="presentation4"><b>Nom et Prénom(s) :</b></span><span class="presentation10"> Esteban Andreani </span><br>
<span class="presentation4"><b>Âge :</b></span><span class="presentation10"> 32 ans<br></span>
<span class="presentation4"><b>Lieu de naissance :</b></span><span class="presentation10"> Corleone Italie (Sicile)<br></span>
<span class="presentation4"><b>Métier/Étude :</b></span><span class="presentation10"> N'en a pas, fugitif.<br></span>
<span class="presentation4"><b>Groupe :</b></span><span class="presentation10"> Rebelles<br></span>
<span class="presentation4"><b>Poste :</b></span><span class="presentation10"> Chef de la Rebellion<br></span>
<span class="presentation4"><b>Don :</b></span><span class="presentation10"> Manipulation mentale (il entend ce qu'on pense, peut parler dans notre tête et nous faire faire ce qu'il veut).<br></span>
<span class="presentation4"><b>Petit plus :</b></span><span class="presentation10"> Il a une drôle de cicatrice au coin de l'œil (la même que sur son daemon) et il est sujet au vertige.<br><br></span>
<span class="presentation4"><b>Avatar :</b></span> <span class="presentation10">Joe Manganiello (non négociable)</span><br><br>
</div></div><br><br>
<div class="presentation"><div align=center><div class="presentation2">Dæmon & Histoire</div></div><br>
<div class="pvpresentation8"><span class="presentation4"><b>Espèce du Dæmon/Précision :</b></span><span class="presentation10"> Lionne</span><br>
<span class="presentation4"><b>Petit plus :</b></span><span class="presentation10"> Son caractère est plutôt l'inverse de celui d'Esteban. Elle est douce, calme et s'inquiète énormément des conséquences de la rébellion. Ce qui ne l’empêche pas de suivre son humain jusqu'au bout, elle n’essaie pas de remplacer sa conscience.
</span><br><br>
<span class="presentation4"><b>Histoire :</b></span><br><span class="presentation10">
Vous êtes libre sur ce point, il faut bien ajouter votre touche au personnage ^^. Sachez quand même qu'il est le fils d'un grand parrain de la mafia sicilienne et qu'il entend constamment les pensées des êtres vivants. Quand les daemoniens se sont révélés au monde il a eu vent de l'implication du conseil dans le recensement (volontaire ou forcé), depuis il se bat contre eux. Il est rapidement devenu une cible, sa tête est mise à prix. Il a rejoint Merkeley en pensant que jamais on ne le chercherait dans un lieu aussi médiatisé. À présent il tente de créer une véritable rébellion contre le conseil et organise des réunions dans la cache secrète des rebelles.
</span></div></div><br><br>
<div class="presentation"><div align=center><div class="presentation2">Liens</div></div><br><br><div class="pvpresentation8">
<span class="presentation10"><img src="http://img11.hostingpics.net/pics/762141kal.png" class="imagep1" align="left" style="margin-right:5px;"><u>Kalhan Xénia •</u><br>
Quand je l'ai rencontré, mon pouvoir s’est heurté à un mur, il est devenu totalement inefficace et cela m'a beaucoup troublé étant donné que j’entends constamment les pensées des gens. Je n'aime pas qu'on me cache des choses et elle a l'air d'avoir beaucoup de secrets... Dans l'université on m'a dit qu'elle avait un pouvoir très puissant, mais aussi très dangereux. Je l'espionne pour savoir qui elle est vraiment, car son pouvoir pourrait être très utile à notre cause. Il y a quelque chose qui me dérange chez elle, mais je ne peux pas m’empêcher de m'y intéresser.
<br><br><br>
<img src="http://i36.tinypic.com/v77441.jpg" class="imagep1" align="left" style="margin-right:5px;"><u>Logan Harrington •</u> <br>
Lui c'est le genre d'homme qu'on ne peut pas détester et pourtant... je m’intéresse à lui à cause de Kalhan, ils ont une relation bizarre, elle est toujours en train de lui piquer sa moto et l'autre ne dit rien ! C'est un gentil, un vrai et je n'aime pas ça même s'il a l'air vraiment cool. Je pense qu'il est là clé pour l'atteindre elle. En plus son pouvoir est très intéressant...
<br><br><br>
<img src="http://img11.hostingpics.net/pics/395238iron.png" class="imagep1" align="left" style="margin-right:5px;"><u>Daniel Anderson •</u> <br>
Ce petit gars c'est pas un rigolo, il sait ce qu'il veut et je sais que je peux lui faire confiance. Mais il est jeune et a des idées un peu trop radicales. La patience il l'a mais la retenue ça non ! <br><br>
</span></div></div>
</div></div></p>
</div>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://nsa34.casimages.com/img/2013/04/07/mini_130407080553227381.jpg" class="imagep1" alt="Mon onglet 2" onMouseOver="this.src ='http://nsa34.casimages.com/img/2013/04/07/mini_130407080639810600.jpg';" onMouseOut="this.src = 'http://nsa34.casimages.com/img/2013/04/07/mini_130407080553227381.jpg';" /></div>
<div class="bloc_texte" id="onglet2">
<div class="infos">
<p><br>
<div align=center><div class="presentation6"><div class="presentation"><div align=center><div class="presentation2"> Colonel Thomas Jarvis </div></div><br>
<img src="http://img15.hostingpics.net/pics/884496Sanstitre5.png" class="imagepv"><center><table style="margin-top: -15px;"><tr><td><form>
<br><select style="width: 140px; border: 1px solid #d6cfc2; background : #f7f5f1; padding:5px; margin:8px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">Qualité</option>
<option>Patient</option>
<option>Calme</option>
<option>Leader</option>
<option>A l’écoute</option>
<option>Sécuritaire</option>
</select>
</form></td><td><form><br>
<select style="width: 140px; border: 1px solid #d6cfc2; background : #f7f5f1; padding:5px; margin:8px;" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">Défaut</option>
<option> Râleur </option>
<option>Strict</option>
<option>Dominant</option>
<option>Macho</option>
<option>Orgueilleux</option>
</select>
</form></td></tr></table></center>
<div class="presentation3"><span class="presentation4"><b>Nom et Prénom(s) :</b></span><span class="presentation10"> Thomas Jarvis </span><br>
<span class="presentation4"><b>Âge :</b></span><span class="presentation10"> 34 ans<br></span>
<span class="presentation4"><b>Lieu de naissance :</b></span><span class="presentation10"> Atlanta (USA)<br></span>
<span class="presentation4"><b>Métier/Étude :</b></span><span class="presentation10"> Chargé de la sécurité de Merkeley <br></span>
<span class="presentation4"><b>Groupe :</b></span><span class="presentation10"> Pro-Conseil<br></span>
<span class="presentation4"><b>Poste :</b></span><span class="presentation10"> Rien de plus pour l’instant<br></span>
<span class="presentation4"><b>Don :</b></span><span class="presentation10"> Vision d’aigle + nyctalope <br></span>
<span class="presentation4"><b>Petit plus :</b></span><span class="presentation10"> Il a le grade de colonel et souffre de problème mentaux car il est resté traumatisé par la guerre...<br><br></span>
<span class="presentation4"><b>Avatar :</b></span> <span class="presentation10"> Joe Flanigan (non négociable)</span><br><br>
</div></div><br><br>
<div class="presentation"><div align=center><div class="presentation2">Dæmon & Histoire</div></div><br>
<div class="pvpresentation8"><span class="presentation4"><b>Espèce du Dæmon/Précision :</b></span><span class="presentation10"> Aigle pécheur d’afrique. Femelle. Nom à définir.</span><br>
<span class="presentation4"><b>Petit plus :</b></span><span class="presentation10"> Une vrai trouillarde ! Non je vous jure ! Si son humain n’était pas constamment en danger à la guerre il irait vite fait se cacher. Mais voilà, son humain ne fait rien comme les autres alors mademoiselle fait son possible pour lui dégager la voix. Un aigle ça voit de loin, de trèèèès loin, et ça ne fait pas de bruit. Super comme espion pendant la guerre non ? Elle accepte ce job uniquement pour aider son humain à ne pas se faire étriper, et ça lui est arrivé plus d’une fois. Elle aussi a été prise pour cible assez souvent. Autant vous dire qu’elle est vraiment heureuse d’avoir atterrit à Merkeley ! Plus besoin de rester loin de lui, plus besoin de se cacher, plus besoin de jouer les sentinelles ! Elle est heureuse et ça se voit ! Maintenant elle compte bien rendre la pareille à son humain et fait de son mieux pour lui trouver une femelle bien à lui !
</span><br><br>
<span class="presentation4"><b>Histoire :</b></span><br><span class="presentation10">
Alors on s’en doute, monsieur Thomas est un militaire ! Mais qu’est-ce qu’un militaire vient faire à Merkeley ? La grande révélation voyons ! Il s’est fait recenser alors qu’il venait juste d’atteindre le grade de colonel, un exploit à son âge et surtout dus à ses hauts faits pendant la guerre. Il a été partout dans le monde, partout où l’armée l’envoyait. Un vrai leader ! Douée d’une faculté à deviner les agissements de l’ennemi... mais on sait bien que c’était son daemon tout là-haut qui lui racontait tout ça. Sa crédibilité à faillit en prendre un coup, mais c’est un bon gars alors on a caché tout ça en l’envoyant à Merkeley comme remerciement ! Chargé d’assurer la sécurité comme un flic ! Flics qui sont rares ici alors on embauche des étudiants pour qu’ils se fassent un peu d’argent... Tout ça pour que des crétins laissent la ville tranquille. Et ça c’est sûr il y a de quoi faire. Et ça ne plait pas du tout à Thomas d’avoir été relégué ici. Est-ce qu’il a été marqué par la guerre ? Oui, il a même de nombreux troubles psychologiques qu’il soigne (enfin disons que l’infirmière de l’université est plutôt jolie alors on va voir la psychologue dans le bureau d’à côté...). Il n’est pas rare de se retrouver avec le canon de son arme sous le nez si on le surprend. Il se réveille souvent la nuit en proie à ses cauchemars. </span></div></div><br><br></div></div>
</div></div></div></p>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img15.hostingpics.net/pics/507751imagenonclique.jpg" class="imagep1" alt="Mon onglet 3" onMouseOver="this.src ='http://img15.hostingpics.net/pics/331894imageclique.jpg';" onMouseOut="this.src = 'http://img15.hostingpics.net/pics/507751imagenonclique.jpg';" /></div>
<div class="bloc_texte" id="onglet3">
<div class="infos">
<p>Ceci est l'onglet 3</p>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img15.hostingpics.net/pics/507751imagenonclique.jpg" class="imagep1" alt="Mon onglet 4" onMouseOver="this.src ='http://img15.hostingpics.net/pics/331894imageclique.jpg';" onMouseOut="this.src = 'http://img15.hostingpics.net/pics/507751imagenonclique.jpg';" /></div>
<div class="bloc_texte" id="onglet4">
<div class="infos">
<p>Ceci est l'onglet 4</p>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img15.hostingpics.net/pics/507751imagenonclique.jpg" class="imagep1" alt="Mon onglet 5" onMouseOver="this.src ='http://img15.hostingpics.net/pics/331894imageclique.jpg';" onMouseOut="this.src = 'http://img15.hostingpics.net/pics/507751imagenonclique.jpg';" /></div>
<div class="bloc_texte" id="onglet5">
<div class="infos">
<p>Ceci est l'onglet 5</p>
</div>
</div>
</span>
<span class="onglet">
<div class="navigation"><img src="http://img15.hostingpics.net/pics/507751imagenonclique.jpg" class="imagep1" alt="Mon onglet 6" onMouseOver="this.src ='http://img15.hostingpics.net/pics/331894imageclique.jpg';" onMouseOut="this.src = 'http://img15.hostingpics.net/pics/507751imagenonclique.jpg';" /></div>
<div class="bloc_texte" id="onglet6">
<div class="infos">
<p>Ceci est l'onglet 6</p>
</div>
</div>
</span>
</div>
</body>
</html>
Sam 30 Mar 2024, 22:07 par 
Merci d'ouvrir un nouveau sujet dans le cas où votre problème serait toujours d'actualité.
