Mar 27 Juin - 20:47
Pardon je m'exprime mal 
Dim 9 Juil - 17:52 Dim 9 Juil - 20:26
C'est qui Cel' ? Que je le/la mette dans les crédits après 
Dim 9 Juil - 20:53
Accueil
/*Fait disparaître la colonne des widgets*/
#left {
display: none;
}
.infobulle {
display: inline-block;
text-align: center;
margin: 0 1%;
}
.infobulle > div {
position: absolute;
margin-top: -50px;
margin-left: -5px;
opacity: 0;
visibility: hidden;
width: 400px;
background: #CECEC8;
text-align: center;
}
.infobulle > div img {
width: 30%;
}
.infobulle:hover > div {
opacity: 1;
padding: 1%;
visibility: visible;
}
.infobulle2 {
display: inline-block;
text-align: center;
}
.infobulle2 > div {
position: absolute;
margin-top: -10px;
margin-left: -5px;
opacity: 0;
visibility: hidden;
width: 300px;
background: #E9E9E6;
text-align: center;
}
.infobulle2:hover > div {
opacity: 1;
visibility: visible;
}
#pa {
background-color: #E9E9E6;
width: 94%;
padding: 3%;
font-size: 11px;
font-family: 'Julius Sans One', sans-serif;
}
#colonne_gauche {
float: left;
width: 45%;
margin: auto;
display: block;
}
#colonne_droite {
float: right;
width: 45%;
margin: auto;
display: block;
}
#pa h2 {
color: #151515;
border: 0;
text-align: center;
font-family: 'Julius Sans One', sans-serif;
}
.boutons_pa {
width: 95%;
padding: 2%;
margin: 1% 0;
text-align: center;
background: #CECEC8;
}
.boutons_pa a {
color: #4A4949 !important;
display: block;
width: 90%;
}
.boutons_pa:hover {
background: #888888;
}
.boutons_pa a:hover {
color: #4A4949 !important;
}
.liens_rapides {
float: left;
display: block;
margin: auto;
text-align: center;
font-size: 12px;
}
.liens_rapides a {
display: block;
}
.liens_rapides img {
width: 50%;
text-align: center;
margin: auto;
display: block;
}
.blocs_pa {
float: left;
display: block;
width: 44%;
padding: 2%;
margin: 5% 1% 0 1%;
background: #CECEC8;
color: #4A4949;
text-align: justify;
height: 200px;
overflow: auto;
}
.news {
font-size: 13px;
position: absolute;
top: 170px;
right: 10px;
width: 178px;
height: 250px;
padding: 0px;
background: #CECEC8;
border: 10px solid #41686C;
overflow: auto;
list-style-type: none;
}
.sf {
width: 390px;
height: 149px;
overflow: hidden;
position: relative;
top: 0em;
background-color: #D5D2D2;
}
.sf_img {
position: relative;
z-index: 2;
width: 390px;
height: 149px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sf:hover .sf_img {
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sf_description {
position: relative;
z-index: 1;
width: 385px;
height: 100px;
margin-top: -140px;
font-size: 11px;
color: #8c8c8c;
padding: 15px;
overflow: auto;
}
.contenu_staff {
position: relative;
background: url('https://img15.hostingpics.net/pics/193322Staff.png');
width: 394px;
height: 209px;
}
#staff1 {
/*margin-top: 90px;*/
position: absolute;
top: 100px;
}
#staff2 {
margin-left: 0px;
margin-top: 0px;
}
#staff3 {
margin-left: 270px;
margin-top: -20px;
}
.staff_pa {
width: 120px;
height: 120px;
border-radius: 100px;
overflow: hidden;
position: relative;
top: 0em;
background-color: #D5D2D2;
}
.staff_pa_img {
position: relative;
z-index: 2;
width: 120px;
height: 120px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.staff_pa:hover .staff_pa_img {
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.staff_pa_description {
position: relative;
z-index: 1;
width: 90px;
height: 100px;
margin-top: -90px;
font-size: 11px;
color: #8c8c8c;
text-align: center;
padding: 15px;
overflow: auto;
}
.contenu_paonglets img {
width: 50px !important;
float: left;
padding: 2% 4% 2% 2%;
}
.paonglet {
padding: 10px;
cursor: pointer;
background-color: #888888;
color: #e9e9e6;
}
.paonglet.active {
background-color: #e9e9e6;
color: #888;
}
.contenu_paonglet {
padding: 2%;
text-transform: normal;
text-align: left;
margin-top: 5%;
}
<div id="pa">
<div id="colonne_gauche">
<div class="boutons_pa">
<a href="#"> Règlement </a>
</div>
<div class="boutons_pa">
<a href="#"> Histoire </a>
</div>
<div class="boutons_pa">
<a href="#"> Système de jeu </a>
</div>
<div class="boutons_pa">
<a href="#"> Guide </a>
</div>
<div class="boutons_pa">
<a href="#"> Aide </a>
</div>
<br /><br />
<div class="liens_rapides">
<a href="#">Partenaires<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Prédéfinis<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Concours<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Crédits<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> </a>
</div><br /><br />
<div class="blocs_pa">
<h2>
Nouveautés
</h2>
<img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br /> <img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br /> <img src="http://emoji.fileformat.info/gemoji/syringe.png" style="width: 20px;" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />
</div>
<div class="blocs_pa">
<h2>
Nouveaux messages
</h2>
<marquee direction="up" scrolldelay="170" onmouseover="this.stop();" onmouseout="this.start();">
<div id="derniers_sujets">
</div>
</marquee>
</div>
</div>
<div id="colonne_droite">
<div class="sf">
<div class="sf_img">
<img src="https://img4.hostingpics.net/pics/230000ozdkewdxxjupaulgilmore.jpg" />
</div>
<div class="sf_description">
<span id="subforums" class="gensmall">Lorsque les éléments se déchaînèrent sur Terre, il n'y eut nulle autre issue que celle d'essayer de survivre. La faune et la flore disparurent, ne laissant là que les Hommes abattus, abandonnés par leurs dieux. La population fut de moins en moins nombreuse, jusqu'à s'éparpiller, semblant disparaître en même temps que tout ce qu'ils avaient connu jusqu'ici. Les villes tombèrent en lambeaux, les villages en ruine, la nature recouvrant toutes traces humaines. Petit à petit, la planète se recouvrit d'une nouvelle flore et d'une dangereuse faune. Pour s'en prémunir, la civilisation renaquît de ses cendres, parcourant des kilomètres pour rejoindre Tadryon: la ville de tous les espoirs. Si l'Homme pensait pouvoir se protéger en se rassemblant, les siècles passés firent évoluer certains gênes. Des dons naquirent naturellement au sein de la population: plus forts, plus résistants aux nouvelles maladies ou pouvant percevoir leur environnement comme aucun autre, ils furent chassés par les plus croyants, s'octroyant le nom de Fils d'Ohibaan. Tandis que la guerre est déclarée entre les deux peuples, les Spectres guettent la moindre opportunité qui pourrait rendre leur survie plus agréable. <a href="http://dysnomie.forumactif.com/t5-histoire">Plus ?</a></span>
</div>
</div>
<br /><br />
<div class="contenu_staff">
<div id="staff1" class="staff_pa">
<div class="staff_pa_img">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
<div id="staff2" class="staff_pa">
<div class="staff_pa_img">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
<div id="staff3" class="staff_pa">
<div class="staff_pa_img">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/24537610.jpg" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
</div><br /><br />
<div class="infobulle">
<span style="color: #6673b5;">Tadryon</span> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/tadryo10.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 1</span> <span class="paonglet">Catégorie 2</span> <span class="paonglet">Catégorie 3</span>
</div>
<div class="contenu_paonglets">
<div style="display: block;" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none;" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none;" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
<div class="infobulle">
<span style="color: #4e996c;">Fils d'Ohibaan</span> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 4</span> <span class="paonglet">Catégorie 5</span> <span class="paonglet">Catégorie 6</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
<div class="infobulle">
<span style="color: #a84343;">Spectre</span> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/tadryo10.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 7</span> <span class="paonglet">Catégorie 8</span> <span class="paonglet">Catégorie 8</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none;" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div style="display: none;" class="contenu_paonglet">
<img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" alt="" class="groupes_img_pa" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
</div>
<div class="clear">
</div><link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" />
</div> Lun 10 Juil - 13:17 Lun 10 Juil - 13:25 Lun 10 Juil - 18:46 
Mar 29 Aoû - 17:43
<div id="pa">
<div style="" id="colonne_gauche">
<div class="boutons_pa">
<a href="#"> Règlement </a>
</div>
<div class="boutons_pa">
<a href="#"> Histoire </a>
</div>
<div class="boutons_pa">
<a href="#"> Système de jeu </a>
</div>
<div class="boutons_pa">
<a href="#"> Guide </a>
</div>
<div class="boutons_pa">
<a href="#"> Aide </a>
</div>
<br /><br />
<div class="liens_rapides">
<a href="#">Partenaires<br /><img src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Prédéfinis<br /><img src="https://img15.hostingpics.net/pics/723954prdf.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Concours<br /><img src="https://img15.hostingpics.net/pics/896049concours.png" /> </a>
</div>
<div class="liens_rapides">
<a href="#">Crédits<br /><img src="https://img15.hostingpics.net/pics/274506crdit.png" /> </a>
</div><br /><br />
<div class="blocs_pa">
<h2>
Nouveautés
</h2>
<img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br /> <img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br /> <img style="width: 20px;" src="http://emoji.fileformat.info/gemoji/syringe.png" /> <strong>Nouveautés :</strong> Je suis une nouveauté, aimez-moi bande de sagouins è.é <a href="#">www</a><br /><br />
</div>
<div class="blocs_pa">
<h2>
Nouveaux messages
</h2>
<marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="170" direction="up">
<div id="derniers_sujets">
</div>
</marquee>
</div>
</div><span class="gensmall" id="subforums"> </span>
<div style="" id="colonne_droite">
<div class="sf">
<div class="sf_img">
<img src="https://img15.hostingpics.net/pics/515759crit.jpg" />
</div>
<div class="sf_description">
<span id="subforums" class="gensmall">Lorsque les éléments se déchaînèrent sur Terre, il n'y eut nulle autre issue que celle d'essayer de survivre. La faune et la flore disparurent, ne laissant là que les Hommes abattus, abandonnés par leurs dieux. La population fut de moins en moins nombreuse, jusqu'à s'éparpiller, semblant disparaître en même temps que tout ce qu'ils avaient connu jusqu'ici. Les villes tombèrent en lambeaux, les villages en ruine, la nature recouvrant toutes traces humaines. Petit à petit, la planète se recouvrit d'une nouvelle flore et d'une dangereuse faune. Pour s'en prémunir, la civilisation renaquît de ses cendres, parcourant des kilomètres pour rejoindre Tadryon: la ville de tous les espoirs. Si l'Homme pensait pouvoir se protéger en se rassemblant, les siècles passés firent évoluer certains gênes. Des dons naquirent naturellement au sein de la population: plus forts, plus résistants aux nouvelles maladies ou pouvant percevoir leur environnement comme aucun autre, ils furent chassés par les plus croyants, s'octroyant le nom de Fils d'Ohibaan. Tandis que la guerre est déclarée entre les deux peuples, les Spectres guettent la moindre opportunité qui pourrait rendre leur survie plus agréable. <a href="http://dysnomie.forumactif.com/t5-histoire">Plus ?</a> </span>
</div>
</div>
<br /><br />
<div class="contenu_staff">
<div class="staff_pa" id="staff1">
<div class="staff_pa_img">
<img src="https://img15.hostingpics.net/pics/850755581.jpg" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
<div class="staff_pa" id="staff2">
<div class="staff_pa_img">
<img src="https://img15.hostingpics.net/pics/717117572.jpg" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
<div class="staff_pa" id="staff3">
<div class="staff_pa_img">
<img src="https://img15.hostingpics.net/pics/779591870685122709adam.png" />
</div>
<div class="staff_pa_description">
Nom Prénom<br /><a href="#">Profil</a> | <a href="#">MP</a>
</div>
</div>
</div><br /><br />
<div class="infobulle">
<span style="color: #6673b5;">Tadryon</span> <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 1</span> <span class="paonglet">Catégorie 2</span> <span class="paonglet">Catégorie 3</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet" style="display: block;">
<img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none;">
<img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none;">
<img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
<div class="infobulle">
<span style="color: #4e996c;">Fils d'Ohibaan</span> <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 4</span> <span class="paonglet">Catégorie 5</span> <span class="paonglet">Catégorie 6</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
<div class="infobulle">
<span style="color: #a84343;">Spectre</span> <br /> <img src="https://img11.hostingpics.net/pics/2749246512.png" /> <br />nombre d'habitants
<div>
<div class="paonglets">
<span class="paonglet">Catégorie 7</span> <span class="paonglet">Catégorie 8</span> <span class="paonglet">Catégorie 8</span>
</div>
<div class="contenu_paonglets">
<div class="contenu_paonglet">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none;">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
<div class="contenu_paonglet" style="display: none;">
<img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/yycolo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit. <br /> <br /> <img class="groupes_img_pa" alt="" src="https://i58.servimg.com/u/f58/15/39/85/01/logo10.png" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget dui molestie, tempus diam sed, pellentesque tortor. Nunc nec eros ut nisl condimentum rutrum id accumsan elit.
</div>
</div>
</div>
</div>
</div>
<div class="clear">
</div><link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" />
</div> /*Fait disparaître la colonne des widgets*/
#left {
display: none;
}
.infobulle {
display: inline-block;
text-align: center;
margin: -15% 5% ;
}
.infobulle > div {
position: absolute;
margin-top: -50px;
margin-left: 5px;
opacity: 0;
visibility: hidden;
width: 400px;
background: #CECEC8;
text-align: center;
}
.infobulle > div img {
width: 30%;
}
.infobulle:hover > div {
opacity: 1;
padding: 1%;
visibility: visible;
}
.infobulle2 {
display: inline-block;
text-align: center;
}
.infobulle2 > div {
position: absolute;
margin-top: -10px;
margin-left: -5px;
opacity: 0;
visibility: hidden;
width: 300px;
background: #E9E9E6;
text-align: center;
}
.infobulle2:hover > div {
opacity: 1;
visibility: visible;
}
#pa {
background-color: #E9E9E6;
width: 93%;
padding: 3%;
font-size: 11px;
font-family: 'Julius Sans One', sans-serif;
}
#colonne_gauche {
float: left;
width: 48%;
margin: auto;
display: block;
}
#colonne_droite {
float: right;
width: 48%;
margin: auto;
display: block;
}
#pa h2 {
color: #151515;
border: 0;
text-align: center;
font-family: 'Julius Sans One', sans-serif;
}
.boutons_pa {
width: 95%;
padding: 2%;
margin: 1% 0;
text-align: center;
background: #CECEC8;
}
.boutons_pa a {
color: #4A4949 !important;
display: block;
width: 90%;
font-family:Julius Sans One;
}
.boutons_pa:hover {
background: #41686C;
}
.boutons_pa a:hover {
color: #FFFFFF !important;
font-family:Julius Sans One;
}
.liens_rapides {
float: left;
display: block;
margin: -3% 2%;
text-align: center;
font-size: 12px;
}
.liens_rapides a {
display: block;
}
.liens_rapides img {
width: 50%;
text-align: center;
margin: auto;
display: block;
}
.blocs_pa {
float: left;
display: block;
width: 44%;
padding: 2%;
margin: 5% 1% 0 1%;
background: #CECEC8;
color: #4A4949;
text-align: justify;
height: 200px;
overflow: auto;
}
.news {
font-size: 13px;
position: absolute;
top: 170px;
right: 10px;
width: 178px;
height: 250px;
padding: 0px;
background: #CECEC8;
border: 10px solid #41686C;
overflow: auto;
list-style-type: none;
}
.sf {
width: 400px;
height: 150px;
overflow: hidden;
position: relative;
top: 4px;
margin-right:4px
background-color: #D5D2D2;
}
.sf_img {
position: relative;
z-index: 2;
width: 400px;
height: 150px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sf:hover .sf_img {
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sf_description {
position: relative;
z-index: 1;
width: 384px;
height: 110px;
margin-top: -150px;
font-size: 11px;
color: #8c8c8c;
padding: 15px;
overflow: auto;
right: 5px;
}
.contenu_staff {
position: relative;
background: url('https://img15.hostingpics.net/pics/193322Staff.png');
width: 400px;
height: 209px;
top: -25px;
}
#staff1 {
/*margin-top: 90px;*/
position: absolute;
top: 79px;
left: 20px;
}
#staff2 {
top: 20px;
right:3px;
margin-left: 0px;
margin-top: 0px;
}
#staff3 {
margin-left: 240px;
margin-top: -18px;
}
.staff_pa {
width: 100px;
height: 100px;
border-radius: 100px;
overflow: hidden;
position: relative;
top: 0em;
background-color: #D5D2D2;
}
.staff_pa_img {
position: relative;
z-index: 2;
width: 120px;
height: 120px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
right: 10px;
}
.staff_pa:hover .staff_pa_img {
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.staff_pa_description {
position: relative;
z-index: 1;
width: 90px;
height: 100px;
margin-top: -90px;
font-size: 11px;
color: #8c8c8c;
text-align: center;
padding: 15px;
overflow: auto;
right: 10px;
top: -5px;
}
.contenu_paonglets img {
width: 50px !important;
float: left;
padding: 2% 4% 2% 2%;
}
.paonglet {
padding: 10px;
cursor: pointer;
background-color: #888888;
color: #e9e9e6;
}
.paonglet.active {
background-color: #e9e9e6;
color: #888;
}
.contenu_paonglet {
padding: 2%;
text-transform: normal;
text-align: left;
margin-top: 5%;
} |
|
|
