Codes utiles

LIENS DANS TOOLBAR

Code Java:

$(function(){$(function(){

$('#fa_search').after('<span class="fa_tbMainElement"><div id="menutest">
<a href="/">accueil</a>
<a href="/faq">FAQ</a>
<a href="/search">Rechercher</a>
<a href="/memberlist">Ilotiens</a>
<a href="/groups">Groupes</a>
<a href="/privmsg?folder=inbox">messagerie</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Préférences</a>
<a href="/statistics">Stats</a>
<a href="/#top">Haut</a>
<a href="/#bottom">Bas</a>
<a href="/register">Rejoindre la communauté</a>
<a href="/login">Connexion</a>
</div></span>');

})});

CSS:

*Toolbar fa*/
#fa_toolbar, #fa_toolbar_hidden {
background-color: #8FD633 !important;
}

/*elements cachés*/
#fa_rss, #fa_mail, #fa_gp {
display:none !important;
}

#fa_share_text, #fa_service, #fa_welcome, #fa_notifications, #menu {
font-size: 14px;
color: #FFF;
font-weight: 400;
text-shadow: 1px 1px 0px #000;
text-transform: lowercase;
}
div#fa_search {display:none!important;}
#menutest a
{
padding: 0 5px;
}

div#fa_toolbar div, div#fa_toolbar span {
margin: 0 15px; /* Repositionne correctement le contenu de la toolbar */
}

test

ok

@Admin test

QEEL

<!-- BEGIN disable_viewonline -->
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'><div id="qeel_fond"><div id="qeel_img"></div><div class="titre_qeel">Quelles aventures ont eu lieu sur L'îlot...</div>
<table id="qeel_position">
 <tr>

<span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/messages/,"missives ont été envoyées.");
document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/," ");</script></span>

     <span id="nb_membres">{TOTAL_USERS}<script type="text/javascript">document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/Nous avons/,"L'îlot recense");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membres enregistrés/,"administrés.");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membre enregistré/,"administré.");</script></span>

     <span id="new_user">{NEWEST_USER}<script type="text/javascript">document.getElementById('new_user').innerHTML=document.getElementById('new_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier naufragé est");</script></span>


   <span id="tot_user">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateurs en ligne/,"âmes qui se promènent dans la jungle");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateur en ligne/,"âme qui se promène dans la jungle");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistrés/,"Ilotiens");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistré/,"Ilotien");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisibles/,"Spectres");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisible/,"Spectre");
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invités/,"Vagabonds")
document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invité/,"Vagabond");</script></span><br />
     {RECORD_USERS}<br />
     <br />
     <span id="logged">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('logged').innerHTML=document.getElementById('logged').innerHTML.replace(/Utilisateurs enregistrés :/,"Les Ilotiens présents sont");</script>

FOOTER BEGIN

<span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/messages/,"bafouilles");
document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/,"Nos prolixes autochtones ont déclamé");</script></span>
</div>
<div class="statistics-item">
<span id="nb_membres">{TOTAL_USERS}<script type="text/javascript">document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/Nous avons/,"L'Ilot recense");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membres enregistrés/,"administrés");
document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membre enregistré/,"administré");</script></span>
</div>
<div class="statistics-item">
<span id="new_user">{NEWEST_USER}<script type="text/javascript">document.getElementById('new_user').innerHTML=document.getElementById('new_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier naufragé est");</script></span>
</div>

<div class="qeel-welcome" id="welcome"><div id="welcome-img"></div>{NEWEST_USER}</div>
</div>
<script>
document.getElementById('welcome').innerHTML = document.getElementById('welcome').innerHTML.replace(/L'utilisateur enregistré le plus récent est /, "Bienvenue à");
let lastUser = document.querySelector('.qeel-welcome > strong > a').getAttribute("href");
console.log(lastUser);
fetch(window.location.origin + lastUser)
.then(function(response) {
return response.text()
})
.then(function(html) {
let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
let img = doc.getElementById('avatar');
if($(img).find('img').length > 0) {
$(img).find('img').appendTo('#welcome-img');
}
});
</script>

.qeel-welcome {
align-items: center;
background-color: #1f1928;
color: #bdb1d0;
display: flex;
flex-direction: column;
font-size: 0.7em;
font-weight: bold;
margin-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
width: 100px;
}
.qeel-welcome > div {
background-color: #bdb1d0;
margin-bottom: 5px;
padding: 5px;
}
.qeel-welcome img {
width: 100%;
}

div#bloc1 {
float: left;
border: 1px solid #c5c5c5;
width: 300px;
text-transform: uppercase;
font-size: 8px;
text-align: center;
height: 50px;
margin-top: 10px;
line-height: 35px;
color: #a7a7a7;
box-sizing: border-box;
background: #fff;
}
div#bloc2 {
display: flex;
border: 1px solid #c5c5c5;
width: 350px;
text-transform: uppercase;
font-size: 8px;
text-align: center;
height: 50px;
margin-left: 20px;
line-height: 35px;
color: #a7a7a7;
box-sizing: border-box;
background: #fff;
}

.anniv {
display: block;
border: 1px solid #c5c5c5;
width: 500px;
height: 70px;
background: #92AB8C;
margin: auto;
text-align: center;
padding-top: 4px;
letter-spacing: 2px;
font-size: 11px;
text-transform: uppercase;
}

Aucun de nos indigènes

<table class="trans"> {L_WHOSBIRTHDAY_TODAY}
<span id="anniv">
</span>
{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Un joyeux anniversaire à").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours/,"texte2").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"texte3").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"texte4");
</script></table>

<div>
<script src="https://js01.fra.co/24922.js" type="text/javascript"></script><strong><span class="FORUMCOUNTOPIC"></span></strong><br /><span> Examens passés </span>
</div>

<strong><span><div class="FORUMCOUNTOPIC"></div>Topics</span></strong>

Ajouter topics:

CSS

.c4 span {
display: block;
border: 1px solid #F7F7F7;
background: #92AB8C;
text-transform: uppercase;
font-size: 12px;
font-weight: bold
margin: 0 0 23%;
text-align: center;
width: 90px;
height: 45px;
}

BODY (entre messages et utilisateurs)

<div class="topics">
<script src="https://js01.fra.co/24922.js" type="text/javascript"></script><span><strong><div class="FORUMCOUNTOPIC"></div></strong>Topics</span>
</div>

Couleur chamane: 0E0E8A

<div class="anniv" id="anni">{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
<script type="text/javascript">document.getElementById('anni').parentNode.innerHTML=document.getElementById('anni').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui :/,"Sacre bleu ! Qui empeste le rhum au piment au point de faire s'évanouir femmes et enfants ? ").replace(/Membres fêtant leur anniversaire dans les ([0-9]+) prochains jours /,"Bientôt un tonneau de plus dans les dents pour ").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Consternant ! Ce jour, pas de fripouille à charrier !").replace(/Aucun membre ne fête son anniversaire dans les ([0-9]+) prochains jours/,"Aucun indigène n'est en passe de tourner un printemps");
</script></div>

.headerbar {background-size:1800px 350px !important;}

.pa-staff {
margin: 10px 0px 0px;
display: flex;
justify-content: space-between;
flex: 100%;
}
.pa-staff > div {
height: 50px;
width: 100px;
position: relative;
overflow:hidden;
}
.pa-staff > div > div {
height: 100%;
width: 100%;
background: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 9px;
text-align: center;
text-transform: uppercase;
transform: translate(0,0);
transition: all 0.3s;
}
.pa-staff > div > div a {
color: #b28eb9;
transition: color 0.3s;
}
.pa-staff > div > div a:hover {
color: #C3A7CC;
}
.pa-staff > div > div b {
font-family: 'Montserrat', sans-serif;
font-size: 8px;
}
.pa-staff > div:hover > div {
transform: translate(0,-50px);
}
.pa-staff .statut {
color: green;
font-family: 'Cousine', monospace;
font-size: 8px;
letter-spacing: 1px;
}
.pa-staff .statut.absent {
color: red;
}

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mes supers badges</title>

</head>
<body>
<div id="badges-profil">
<img src="https://i.servimg.com/u/f54/20/31/88/33/bain10.png">
<img src="https://i.servimg.com/u/f54/20/31/88/33/beach10.png">
<img src="https://i.servimg.com/u/f54/20/31/88/33/creme10.png">
<img src="https://i.servimg.com/u/f54/20/31/88/33/flippe10.png">
<img src="https://i.servimg.com/u/f54/20/31/88/33/rose10.png" >
</div>
</body>
</html>
◆ ◆ ◆ ◆

<img src="https://i.servimg.com/u/f29/20/31/60/49/a04aa10.png" title="Créer 5 topics" class="pas_obtenue badge_0">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04bb10.png" title="10 topics créés" class="pas_obtenue badge_1">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04cc10.png" title="Auteur inspiré 2 500 fois" class="pas_obtenue badge_2">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04dd10.png" title="5 000 posts générés" class="pas_obtenue badge_3">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04ee10.png" title="Roman de 8 500 posts" class="pas_obtenue badge_4">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04ff10.png" title="Mène la barre: 10 likes sur un post" class="pas_obtenue badge_5">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04gg10.png" title="Fédérateur: 100 likes sur un topic" class="pas_obtenue badge_6">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04ii10.png" title="Explorateur de section (posté sur tous les topics)" class="pas_obtenue badge_7">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a04hh10.png" title="Jeté l'encre sur tous les topics du site" class="pas_obtenue badge_8">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a05aa10.png" title="Secouriste (5 conseils)" class="pas_obtenue badge_9">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a05bb10.png" title="Survivant (membre depuis 6 mois)" class="pas_obtenue badge_10">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a05cc10.png" title="Baroudeur (membre depuis 1 an)" class="pas_obtenue badge_11">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a01cc10.png" title="Epicurien: dépensé 500" class="pas_obtenue badge_12">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a01bb10.png" title="Acheteur compulsif: claqué 1 000" class="pas_obtenue badge_13">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a01hh10.png" title="Fou à lier: dilapidé 5 000" class="pas_obtenue badge_14">
 <img src="https://i.servimg.com/u/f29/20/31/60/49/a01ii10.png" title="Cultivateur (engrangé 2500 bananes)" class="pas_obtenue badge_15">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a01jj10.png" title="Banquier (économisé 5000)" class="pas_obtenue badge_16">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a01kk10.png" title="Picsou: 10K sur son compte" class="pas_obtenue badge_17">
     <img src="https://i.servimg.com/u/f29/20/31/60/49/a01dd10.png" title="Adepte du Repère" class="pas_obtenue badge_18">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a01ee10.png" title="Adepte de la bouteille" class="pas_obtenue badge_19">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a01ff10.png" title="Waouh! Gagné 2 jeux" class="pas_obtenue badge_20">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a01gg10.png" title="Roi du jeu (5 victoires)" class="pas_obtenue badge_21">
      <img src="https://i.servimg.com/u/f29/20/31/60/49/a06aa10.png" title="1 000 mots, Pavé César !" class="pas_obtenue badge_22">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a06bb10.png" title="L'assomoir ! 5 000 mots" class="pas_obtenue badge_23">
     <img src="https://i.servimg.com/u/f29/20/31/60/49/a06cc10.png" title="Bourrin: multiquoté 10 posts" class="pas_obtenue badge_24">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a06dd10.png" title="Enragé: multiquoté 20 posts" class="pas_obtenue badge_25">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a06ee10.png" title="Coucou! J'suis parti, j'suis revenu" class="pas_obtenue badge_26">
     <img src="https://i.servimg.com/u/f29/20/31/60/49/a02dd10.png" title="Chenapan : signalé 1x" class="pas_obtenue badge_27">
      <img src="https://i.servimg.com/u/f29/20/31/60/49/a02ee10.png" title="Sonnette d'alarme: signalé 5x" class="pas_obtenue badge_28">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a02ff10.png" title="Poison: signalé 10x" class="pas_obtenue badge_29">
     <img src="https://i.servimg.com/u/f29/20/31/60/49/a02aa10.png" title="Canaille bannie 1x" class="pas_obtenue badge_30">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a02bb10.png" title="Fripouille bannie 3x" class="pas_obtenue badge_31">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a02cc10.png" title="Bandit banni 5x" class="pas_obtenue badge_32">
  <img src="https://i.servimg.com/u/f29/20/31/60/49/a07aa10.png" title="Parrainer 1 ami" class="pas_obtenue badge_33">
  <img src="https://i.servimg.com/u/f29/20/31/60/49/a07dd10.png" title="Génie! (idée brillante pour le site)" class="pas_obtenue badge_34">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a07ee10.png" title="Impliqué! (3 avis constructifs)" class="pas_obtenue badge_35">
     <img src="https://i.servimg.com/u/f29/20/31/60/49/a07bb10.png" title="Crash" class="pas_obtenue badge_36">
   <img src="https://i.servimg.com/u/f29/20/31/60/49/a07cc10.png" title="Au charbon !" class="pas_obtenue badge_37">
<img src="https://i.servimg.com/u/f29/20/31/60/49/a08aa10.png" title="Mystère! Et boule de gomme" class="pas_obtenue badge_38">

BADGE --><span class="badgid"><span class="badge_details"><img src="https://2img.net/h/www.aht.li/2944440/abonne.png" alt="Abonné" /><span>Abonné</span>Je suis inscrit sur Never-Utopia depuis 6 mois.</span><img src="https://2img.net/h/www.aht.li/2944440/abonne.png" class="img_badge" alt="Abonné" data-badge="Abonné" /></span><!--
BADGE --><span class="badgid"><span class="badge_details"><img src="https://2img.net/h/www.aht.li/2944442/fidele.png" alt="Fidèle" /><span>Fidèle</span>Je suis inscrit sur Never-Utopia depui

<div class="pa-staff">

<div>
<img src="https://i.servimg.com/u/f54/20/31/88/33/ava110.jpg" />
<div class="chef">
<strong>Hic</strong>
<div>
<a target="_blank" href="https://lilotperdu.forumactif.com/u1">Profil</a> | <a target="_blank" href="https://lilotperdu.forumactif.com/privmsg?mode=post&u=1">MP</a>
</div>

<div>
Amiral
</div>

</div>

</div>

<div>
<img src="https://i.servimg.com/u/f54/20/31/88/33/ava210.jpg" />
<div class="chamane">
<strong>Léa</strong>
<div>
<a target="_blank" href="https://lilotperdu.forumactif.com/u9">Profil</a> | <a target="_blank" href="https://lilotperdu.forumactif.com/privmsg?mode=post&u=9">MP</a>
</div>

<div>
Commandante
</div>

</div>

</div>

<div>
<img src="https://i.servimg.com/u/f54/20/31/88/33/ava310.jpg" />
<div class="protecteur">
<strong>Herr Müller</strong>
<div>
<a target="_blank" href="https://lilotperdu.forumactif.com/u2">Profil</a> | <a target="_blank" href="https://lilotperdu.forumactif.com/privmsg?mode=post&u=2">MP</a>
</div>

<div>
Capitaine
</div>

</div>

</div>

<div>
<img src="https://i.servimg.com/u/f54/20/31/88/33/ava410.jpg" />
<div class="protecteur">
<strong>Chris Malice</strong>
<div>
<a target="_blank" href="https://lilotperdu.forumactif.com/u56">Profil</a> | <a target="_blank" href="https://lilotperdu.forumactif.com/privmsg?mode=post&u=56">MP</a>
</div>

<div>
Capitaine
</div>

</div>

</div>

</div>

.pa-staff {
margin: auto;
width: 500px;
display: flex;
justify-content: space-between;
flex: 100%;
}
.pa-staff > div {
height: 70px;
width: 70px;
border: 1px solid #F7F7F7;
position: relative;
overflow:hidden;
}
.pa-staff > div > div {
height: 100%;
width: 100%;
background: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 10px;
text-align: center;
text-transform: uppercase;
transform: translate(0,0);
transition: all 0.3s;
}
.pa-staff > div > div a {
color: #293B2F;
transition: color 0.3s;
}
.pa-staff > div > div a:hover {
color: #000080;
}
.pa-staff > div:hover > div {
transform: translate(0,-70px);
}
.pa-staff .chef {
color: green;
}
.pa-staff .chamane {
color: #4A0573;
}
.pa-staff .protecteur {
color: red;
}

GENERALITES:

<div class="page_accueil">

<div class="pa_liens">
<a href="#">Discutons ensemble</a><a href="#">Divertissements</a><a href="#">Actu</a><a href="#">Vie amoureuse</a><a href="#">Psycho</a><a href="#">Cher Journal</a><a href="#">Forum Technique</a>
</div>

<div class="pa_milieu">

<div class="pa_contexte">
Un titre sympa<br />Qu'est-ce qu'on pourrait mettre ici? Je ne sais pas. Peut-être que vous aurez plus d'idées que moi. Blah blah blah, ça peut servir à n'importe quoi. On verra bien.
</div>

<div class="pa_actus">
<span>XX/XX</span> Nouveau Topic 1<br /><span>XX/XX</span> Nouveau Topic 2<br /><span>XX/XX</span> Nouveau Topic 3<br />
</div>

<div class="pa_tops">
<a target="_blank" href="#">Un truc</a><a target="_blank" href="#">Un autre</a><a target="_blank" href="#">+ Plus ?</a>
</div>

<div class="clear">

</div>

</div>

<div class="pa_droite">

<div class="pa_staff">

<h2>
Votre équipe encadrante
</h2>

<div class="staff_bloc">
<img alt="" src="https://i.servimg.com/u/f54/20/31/88/33/ava110.jpg" class="staff_bloc_image" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img alt="" src="https://i.servimg.com/u/f54/20/31/88/33/ava210.jpg" class="staff_bloc_image" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img alt="" src="https://i.servimg.com/u/f54/20/31/88/33/ava310.jpg" class="staff_bloc_image" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img alt="" src="https://i.servimg.com/u/f54/20/31/88/33/ava410.jpg" class="staff_bloc_image" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

</div>

<div class="pa_staff">

<h2>
Membres de la semaine
</h2>

</div>

<div class="staff_bloc">
<img class="staff_bloc_image" src="https://i.servimg.com/u/f54/20/31/88/33/ex110.jpg" alt="" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img class="staff_bloc_image" src="https://i.servimg.com/u/f54/20/31/88/33/ex110.jpg" alt="" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img class="staff_bloc_image" src="https://i.servimg.com/u/f54/20/31/88/33/ex110.jpg" alt="" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

<div class="staff_bloc">
<img class="staff_bloc_image" src="https://i.servimg.com/u/f54/20/31/88/33/ex110.jpg" alt="" />
<div class="contenu_staff">

<h2>
pseudo
</h2>

<h3>
DC
</h3><a href="#">MP</a><a href="#">Profil</a>
</div>

</div>

</div>

</div>