Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens. You can view all of your templates, or learn more in the documentation.

Screenshot

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <html>
    <head>
   <meta charset="UTF-8" /> 
   <title>HP&M Partenariat
      </title>
      
  <style>
     
/* liens */
a:hover,
a:active,
a:visited,
a:link {
  text-decoration: none !important;
}
a:hover,
a:active {
  color: black;
  transition: 1s;
}

/*scrollbar*/

::-webkit-scrollbar {
  width: 10px;
  height: 5px;
  background-color: #f9f9f9;
}

::-webkit-scrollbar-track {
  background-color: #f9f9f9; /*couleur du fond */
}

::-webkit-scrollbar-thumb {
  background-color: #c0c0c0; /*couleur de l'ascenseur*/
}
    
    .pubfond{
    width:600px;
    height:800px;
    background: url(https://zupimages.net/up/19/04/z4yr.png);
    }
    
    .pubcontenu{
    width:90%;
    height:90%;
    padding:5%;
    text-align:justify;
    font-style:'Satisfy';
    }
    
    .pubforum{
    text-align:center;
    font-family:'Arvo';
    font-size:40px;
    }
    
    .pubcadre{
    width:230px;
    height:180px;
    padding:1em;
    border:solid 2px grey;
    font-family:'Verdana';
    font-size:12px;
    background-color:#f9f9f9;
    }
    
    .pubtitre{
    font-size:15px;
    border-bottom:solid 1px grey
    }
    
    .contexte{
    width: 400px;
    height: 250px;
    overflow: hidden;
    background-color: #f9f9f9;
    }
    
    .contexte_img {
    position: relative;
    z-index: 2;
    width: 400px;
    height: 220px;
    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;
    }
    
    .contexte:hover .contexte_img{
    margin-top: -250px;
    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;
    }
    
    .contexte_description{
    position: relative;
    z-index: 1;
    width: 400px;
    height: 220px;
    text-align: justify;
    font-family:'Verdana';
    font-size: 12px;
    color: #000000;
    margin-top:30px;
    }
    
    .onglet {
      cursor:pointer;
      }
      
      .onglet_0{background:transparent;}
      
      .onglet_1{background:transparent;}
      
      .contenu_onglet {
      display:none;
      width: 90%;
      padding: 10px;
      height: 140px;
      overflow:auto;
      text-align: justify;   
      font-size: 12px;
    margin-top:10px;
      }      
      
      .imagescenarios {
      height: 204px;
      margin-left: -30px;
      margin-top: -160px;
      position: absolute;
      width: 50px;
      }
    
    .imagescenarios2 {
      height: 204px;
      margin-left: 500px;
      margin-top: -160px;
      position: absolute;
      width: 50px;
      }
    
    .pubcadre2{
    width:97%;
    height:180px;
    border:solid 2px grey;
    font-family:'Verdana';
    font-size:12px;
    background-color:#f9f9f9;
    margin-left:-8px;
    
    }
    
</style> 
      <link href="https://fonts.googleapis.com/css?family=Arvo|Satisfy" rel="stylesheet" />
        </head>
 
  <body>
    
    
    <center>
      <div class="pubfond">
        <div class="pubcontenu">
          <div class="pubforum">
            <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Ϟ Repello Muggletum Ϟ</a>
          </div>
          <br/>
          <center>
            <div class="contexte">
              <div class="contexte_img">
                <img src="https://nsm09.casimages.com/img/2019/01/22//1901220959008388816087824.png" />
              </div>
              <div class="contexte_description">
                <p class="texte" style="width:380px;height:230px;overflow:auto;padding:10px;">
                  <a href="http://repellomuggletum.forumactif.com/t3-contexte#3" target="_blank">[...]</a><br />
                  La paix commença donc à faire son grand retour sur l’Europe. Une paix étrange
                  puisque peu de né-moldus avaient survécus. Le premier enfant de chaque famille
                  voyait un corbeau se faire graver sur son épaule à sa majorité, quand il
                  obtenaient son diplôme magique. Les seconds enfants de chaque famille devaient
                  quant à eux aller étudier à Durmstrang, quelque soit leur nationalité. Le
                  Bulgare était d’ailleurs la langue qui dominait le monde sorcier. Les familles
                  de sang-pur devant dominer le monde, une loi imposait à ces familles d’arranger
                  des mariages dès la naissance de leur enfant. Seule les filles étaient promises
                  à leur naissance à un sorcier de sang-pur ; généralement le plus vieux de la «
                  liste ». Car une liste d’enfants de sang-pur était tenue au Secrétariat. Et les
                  mariages étaient donc arrangés de cette manière. Même les familles ne
                  choisissaient pas avec quelle autre famille le mariage pourrait s’arranger.
                  Quant aux pauvres enfants moldus qui naissaient avec des pouvoirs, ils
                  pouvaient enfin souffler : des sorciers avaient ouvert un Orphelinat pour les
                  recueillir. Ils les enlevaient à leur famille, avant qu'ils ne se fassent
                  attraper par les Pozhiratelis, et étaient donc élevés dans l'Orphelinat. Ces
                  enfants n'étaient pas inscrits automatiquement sur les registres des écoles. Un
                  accord était donc passé entre les sorciers tenant l'Orphelinat et les
                  Directeurs de Beauxbatons et Poudlard : ils ajoutaient les enfants sur leur
                  registre pour leur permettre de suivre des études. Bien sûr ces enfants
                  grandissaient dans l'ignorance totale de leur origine : fils / fille de moldu.
                  <br /><br />
                  Septembre 2133 est donc arrivé. Tout le monde semblait avoir changé. L’Europe
                  n’était plus la même qu’ils avaient connus. Comment cela allait-il se passer
                  maintenant ? Vous seuls pouvez nous le dire. Mais ne tentez pas de vous dérober
                  à l’une de ces nouvelles lois, car la sanction est bien pire qu’Azkaban : cette
                  sanction est la mort.
                </p>
              </div>
            </div>
          </center>
          <br/>
          <table width="100%">
            <tr>
              <td>
                <div class="pubcadre">
                  <div class="pubtitre">
                    Liens utiles
                  </div>
                  <p style="height:140px;">
                    Ϟ <a href="http://repellomuggletum.forumactif.com/t2-reglement#2" target="_blank">Règlement</a>, pour suivre les mêmes règles.<br/>
                    Ϟ <a href="http://repellomuggletum.forumactif.com/t4-annexe-1-chronologie#4" target="_blank">Chronologie</a>, pour qu'on construise la suite de notre histoire.<br/>
                    Ϟ <a href="http://repellomuggletum.forumactif.com/t5-annexe-2-les-ecoles-l-orphelinat#5" target="_blank">Ecoles & 
                    Orphelinat</a>, qui sont ces gens qui protègent les né-moldus ?<br/>
                    Ϟ <a href="http://repellomuggletum.forumactif.com/t6-annexe-3-tour-du-monde-des-metiers#13" target="_blank">Métiers</a>, ces adultes sorciers qui vivent d'incroyables vies.<br/>
                    Ϟ <a href="http://repellomuggletum.forumactif.com/t9-annexe-6-les-pozhiratelis#44" target="_blank">Pozhiratelis</a>, ceux aux pouvoirs.<br/>
                  </p>
                </div>
              </td>
              <td>
                <div class="pubcadre">
                  <div class="pubtitre">
                    Statistiques
                  </div>
                  <p style="height:140px;overflow:auto;">
                    <em>
                      Ouverture de la 6ème version le 31 Janvier 2019, pour les 9 ans de notre communauté !
                    </em>
                    <br />
                    <br />
                    La version 1 a ouverte le 31 Janvier 2010 : nous sommes passés de Poudlard & Magie (1 forum) à Harry Potter & Magie (4 forums) puis nous voici à Repello Muggletum (1 forum) ! Contexte simplifié !
                    <br />
                    <br/>
                  </p>
                </div>
              </td>
            </tr>
          </table>
          <center>
            <div class="pubcadre2"><div class="contenu_onglet" id="contenu_onglet_NomOnglet0">   
              <div class="pubtitre">Nos scénarios</div><br/>
              Passez votre souris sur les images pour découvrir les scénarios que nous recherchons =D<br/><br/>
              Nous avons hâte de vous voir débarquer sous le visage d'un de ces poulets très attendus ! Rassurez-vous, vous ne ferez pas un seul heureux, mais bien plusieurs =D
              </div>
              <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
                <div style="text-align:center;">
                  <i><font size=5px><font color=#E0612F>ϟ Bronislav Volchine ϟ</font></font><br/>
                    K.J. Apa</i><br/><br/>
                  <b>17 ans ϟ Sang Pur<br/>
                    Durmstrang ϟ 7ème année ϟ Voda</b></div>
                <p style="text-align:justify;">
                  Fier de ses origines et du statut de son sang, Bronislav fut réparti à Voda lors de l'Initiation. Élève brillant dont on a jamais eu à se plaindre, il cache cependant bien son jeu et use de ruse pour s'en prendre aux "plus faibles". Couardise ? Non, juste un plaisir malsain. Des trois enfants, c'est lui qui a développé le plus d’intérêt pour la magie dite démonstrative et les duels. Comme sa mère, il souhaite étudier l'art des baguettes magiques et nourrit le désir de créer une nouvelle baguette plus puissante que toutes les autres. <br/><br/>
                  Le jeune homme avait déposé son nom dans la coupe de feu dans l'espoir de participer au Tournoi. Cependant, il a développé un intérêt à l'égard de la championne de Durmstrang en regardant son ancienne camarade de maison participer aux épreuves du tournoi mythique. Comme son père, il soutient les Pozhiratelis haut et fort.
                </p>
                Personnage très attendu pour cette saison, grand rôle à jouer =D<br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3488-f-wanheda-belov-zemlya-ft-emily-kinney" target="_blanck">En savoir plus</a>
              </div>
              <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
                <div style="text-align:center;">
                  <i><font size=5px><font color=#EDC396>ϟ Borya Anakine ϟ</font></font><br/>
                    Richard Madden</i><br/><br/>
                  <b>Environ 30 ans ϟ Sang Moldu ou Mêlé<br/>
                    Secrétaire Sportif</b></div>
                <p style="text-align:justify;">
                  Enfance libre, adolescence libre. Borya est, comme son nom l'indique, d'origine slave et aura donc étudié à Durmstrang ou dans l'école russe, ou autre. En 2123, il devient l'adjoint / assistant de Kathleen June Twarby, l'ancienne Secrétaire Sportif. En 2132, quand Kathleen est nommée à la tête du Secrétariat, il prend sa place et nomme Elena Larisa Belov, une stagiaire à peine sortie des études, comme adjointe à son poste (enfin, il a été forcé, Elena étant la fille unique de Kathleen). À part ces deux points, l'histoire est totalement libre. <br/><br/>
                  Côté caractère, il est libre également, mais le point de vue de Kathleen le décrit comme quelqu'un d'empoté, serviable, réactif mais un poil long à la détente, intelligent... Elle n'aurait laissé son poste à personne d'autre que lui, elle le tenait en grande estime, ce qui veut dire qu'il n'est pas bête, qu'il est débrouillard, qu'il a de bonnes idées...<br/><br/>
                </p>
                Personnage très attendu pour cette saison, grand rôle à jouer =D<br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3723-m-borya-anakine-secretaire-sportif-ft-richard-madden#82640" target="_blanck">En savoir plus</a>
              </div>
              <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
                <div style="text-align:center;">
                  <i><font size=5px><font color=#EDC396>ϟ Aïna Parvan-Dimitrov ϟ</font></font><br/>
                    Mamie Gummer</i><br/><br/>
                  <b>40 ans ϟ Sang Moldu<br/>
                    Enseignante de langues dans un lycée moldu</b></div>
                <p style="text-align:justify;">
                  Aïna est une crème, littéralement. Douce, gentille, compréhensive, à l'écoute, discrète, elle est ce genre de fille qu'on ne remarque pas, qu'on ne considère pas comme une fille mais comme une pote. Timide, elle n'a jamais eu beaucoup d'amis et encore moins de petits copains, mais elle était généreuse avec ses proches, souriante et toujours pleine de joie de vivre. Sans aucune connaissance du monde magique, elle vivait sa petite vie tranquille, avec ses rêves et ses envies, attendant son prince charmant sur son cheval blanc.<br/><br/>
                  L'enfance d'Aïna fut heureuse, tranquille et sans magie. Elle a grandit avec ses parents et son frère aîné de deux ans, a été à l'école moldue pour y apprendre les math, l'histoire, les sciences... Passionnée de langues et littératures, elle devint bilingue à douze ans, trilingue à quinze. Elle n'était pas très sociable, les joues toujours rouges quand un beau garçon lui parlait et le vocabulaire bredouillant quand elle leur répondait. Elle était une ado typique, parlant garçons avec ses copines, étudiant les soirs après les cours et aimant le shopping. Puis, à seize ans, son frère lui fit rencontrer un ami d'un ami, vague connaissance... Lazhar Dimitrov. Ce fut le coup de foudre des deux côtés et leur amour lui apporta plus que du bonheur : il fit entrer la magie dans sa vie. Elle eut du mal à croire qu'il était sorcier, du mal à accepter que ça existait. Il lui prouva ses pouvoirs pendant des semaines avant qu'elle n'y croie, et ça scella leur amour plus fort que la demande en mariage qui vint juste après. Elle s'en voulu d'être la cause de rupture entre Lazhar et ses parents, voulu le quitter pour qu'il ne souffre pas, mais il la persuada qu'il préférait être avec elle que ces intolérants. Alors elle lui donna un fils en 2118, Petar, puis une fille en 2120, Rosica. Elle était devenue prof d'anglais et français au lycée de Sofia et aimait enseigner puis rentrer chez elle et trouver ses enfants et son mari. Elle aimait sa vie.<br/><br/>              
                </p>
                Personnage très attendu pour cette saison, grand rôle à jouer =D<br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3722-famille-dimitrov#82633" target="_blanck">En savoir plus</a>
              </div>
              <div class="contenu_onglet" id="contenu_onglet_NomOnglet4">
                <div style="text-align:center;">
                  <i><font size=5px><font color=#9C7D67>ϟ Andreas Legrand ϟ</font></font><br/>
                    Benedict Cumberbatch</i><br/><br/>
                  <b>42 ans ϟ Né-moldu<br/>
                    Métier libre</b></div>
                <p style="text-align:justify;">
                  Andreas est né de l'union d'une Anglaise et d'un Français. Ses parents se sont rencontrés dans le cadre d'un échange scolaire Erasmus et sa mère n'est plus repartie de France. Bien qu'ils aient tenté d'aller vivre en Angleterre durant 5 ans (dont l'année où Andreas est né), la vie n'a pas plus au patriarche qui a donc décidé de repartir en France. Sa femme a accepté à une condition : que chacun de leur enfant est un nom qui rappel son pays - héritage qu'Andreas a gardé en appelant chacun de ses enfants avec un nom d'origine anglo-saxon.<br/><br/>
                  Andreas grandit donc en France où il apprend à vivre avec les autres. Jusqu'au jour où des choses étranges commencent à se produire. Ses parents n'étant que des moldus, difficile pour eux d'expliquer tout ça... De 9 à 10 ans, Andreas sera envoyé dans divers hôpitaux pour comprendre ce qu'il se passait. Puis un jour, une lettre de l'Académie de Beauxbatons est arrivée, expliquant le monde magique caché aux yeux des moldus. Lui, il allait devenir un sorcier...<br/><br/>
                  Ses années à Beauxbatons se passèrent plutôt bien. Il n'excellait pas vraiment dans tous les domaines mais il se démarqua bien vite dans quelques trucs. Son diplôme en poche, il se lança dans (au choix) et bientôt il fit une incroyable rencontre...<br/><br/>
                  A 20 ans, Andreas allait devenir papa. Un agréable accident, il fallait l'avouer, puisqu'il lui permit de demander en mariage la mère de cet enfant : Abigaël. La famille s'agrandit bien vite et tout le monde vivait en paix. Jusqu'à ce jour...<br/><br/>
                  Assit dans les gradins de l'Amphithéâtre de Beauxbatons, où il suivait avec attention la finale du Tournoi avec sa petite dernière, étudiante dans cette école, quelque chose de fou se produisit. Andreas n'eut pas le temps de se défendre qu'on l'emportait lui et Emery. Il fut libéré deux jours plus tard, en apprenant que sa femme avait du plier le genoux devant les Pozhiratelis... Jamais Andreas ne s'était engagé dans le conflit magique mais aujourd'hui c'était décidé : il serait prêt à tout pour protéger sa famille, quitte à se faire tatouer un serpent sur l'avant bras. Idée qui ne plaît pas trop à Abigaël mais... parfois il faut faire des sacrifices pour arriver à ses fins.<br/><br/>
                </p>
                Personnage très attendu pour cette saison, grand rôle à jouer =D<br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3719-famille-legrand#82618" target="_blanck">En savoir plus</a>
              </div>
              <div class="contenu_onglet" id="contenu_onglet_NomOnglet5">   
                <div style="text-align:center;">
                  <i><font size=5px><font color=#EDC396>ϟ Megan Ryan ϟ</font></font><br/>
                    Aimee Teegarden</i><br/><br/>
                  <b>15 ans ϟ Sang Mêlé<br/>
                    Durmstrang ϟ 5ème année ϟ Zemlya</b></div>
                <p style="text-align:justify;">
                  Quand Megan est arrivée au monde, elle combla ses parents de bonheur. Ensemble ils étaient la parfaite famille, même si elle ne voyait pas beaucoup son père. Mais elle l'admirait quand même, après tout il était le Ministre de la Magie Anglais !<br/><br/>
                  Megan a donc toujours évolué dans la magie, malgré le métier de sa mère très proche de celui des moldus. Le statut de son père lui permit d'avoir un professeur particulier, si bien que lorsqu'elle reçu sa lettre pour Poudlard, elle connaissait déjà l'école dans ses moindres recoins et l'histoire du monde magique.<br/><br/>
                  Elle avait 10 ans quand Kat est venue au monde. Malheureusement, elle ne passa qu'un an en compagnie de sa petite soeur - jouant le rôle de grande soeur à fond - car elle du partir pour Poudlard. Et oui, l'internat vous fait vous retrouver moins longtemps avec votre famille.<br/><br/>
                  Elle fut envoyée à Serdaigle, comme son père lorsqu'il y était étudiant. Très vite elle sorti du lot et réussi ses 4 premières années avec brio. Parfois elle avait des petites baisses de régime, surtout quand son moral n'était pas au beau fixe. Il faut dire qu'elle n'avait pas l'habitude d'être loin de sa famille, elle qui avait passé 11 ans sans les quitter. Mais elle finit par s'y faire et trouver dans certains Serdaigle assez de compagnie pour remplacer sa famille.<br/><br/>
                  Alors qu'elle devait entrer en 5ème année à Poudlard, le monde changea. Les Pozhiratelis au pouvoir, Megan du subir leurs nouvelles règles : ce n'est plus à Poudlard qu'elle irait étudier mais à Durmstrang. Cette nouvelle la déchira au plus profond. Une blessure qui ne se refermera peut-être jamais, surtout si elle ne retrouve personne qu'elle ne connait. Le stage qu'elle dû subir en Août lui permet d'apprendre le Bulgare mais... pourrait-elle encore parler dans sa langue maternelle ?<br/><br/>
                  Qu'est-ce qui va l'attendre à Durmstrang ? Va-t-elle pouvoir retrouver des amis ? Bonne question...<br/><br/>
                </p>
                Personnage très attendu pour cette saison, grand rôle à jouer =D<br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3718-famille-ryan#82614" target="_blanck">En savoir plus</a>
              </div>
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet6">   
                <div style="text-align:center;">
                  <i><font size=5px><font color=#E0612F>ϟ Kathleen June Twarby ϟ</font></font><br/>
                    Candice Swanepoel</i><br/><br/>
                  <b>Née le 12/07/2092 ϟ Sang Moldu<br/>
                    Ancienne de Beauxbatons ϟ Secrétaire Sportif</b></div>
                <p style="text-align:justify;">
                  • De 2092 à 2103 : Sa mère est morte à la naissance et son père l'a élevée en Russie avec l'aide d'une nourrice que Kathleen détestait. Elle a vécu comme une parfaite moldue, adorée de tous les gens qui l'entouraient.<br/>
                  • 12/07/2103 : Elle reçoit deux lettres : une de Beauxbâtons et une de Durmstrang. Son ère est dubitatif mais il décide de rencontrer la directrice de BB qui finit par le convaincre. Ils déménagent en France.<br/>
                  • 2106 : Elle devient mannequin pour une société très populaire et devient une star à seulement 14 ans. Ses études à BB se font avec facilité, elle dirige toutes les filles de l'école.<br/>
                  • 2110 : Elle obtient son diplôme avec des très belles notes. L'été, elle part en tournée de défilés avec son agence de mannequina et rencontre Dimitrov Belov dont elle tombe amoureuse. Ils vont vivre en Russie. Dimitrov parle de politique à Kathleen, ce qui lui donne envie de devenir Secrétaire Européenne. Elle prend un job comme prof de sport à Durmstrang en attendant de pouvoir se lancer dans la politique. Le Ministre bulgare des sports repère Kathleen et décide qu'elle lui succédera à sa retraite, il la prend sous son aile pendant deux ans.<br/>
                  • 2112 : Kathleen devient Ministre bulgare des sports et tombe enceinte. Dimitrov la quitte dès qu'elle le lui annonce. Elle hésite à faire adopter son enfant mais son père l'en dissuade. <br/>
                  • 2113 : Elle accouche seule en mai.<br/>
                  • 2122 : Le Secrétaire Sportif décède de la main de Mangemorts, on lui cherche un remplaçant. <br/>
                  • 2123 : Kathleen est élue pour le remplacer et devient donc Secrétaire Sportif. Elle emménage avec Elena dans un appartement à la Grande Ville.<br/><br/>
                  • 2132 : Après une rencontre avec von Roppelt, Kathleen accepte de rejoindre les Pozhiratelis en échange du poste de Secrétaire Européenne.<br/><br/>
              </p>
                Son lien : <a href="http://mondeandmagiev5.forumactif.org/u240" target="_blanck">Elena L. Belov</a>, sa fille<br/><br/>
                <a href="http://mondeandmagiev5.forumactif.org/t3382-f-kathleen-june-twarby-secretaire-ft-candice-swanepoel#74964" target="_blanck">En savoir plus</a>
              </div>
              
                <script type="text/javascript">
                  //<!--
                  function change_onglet(name)
                  {
                  document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                  document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                  document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                  document.getElementById('contenu_onglet_'+name).style.display = 'block';
                  anc_onglet = name;
                  }
                  //-->
                </script>
                <div class="systeme_onglets">
                  <span class="onglet_0 onglet" id="onglet_NomOnglet0" onmouseover="javascript:change_onglet('NomOnglet0');"></span>
                  <div class="imagescenarios">
                  <span class="onglet_0 onglet" id="onglet_NomOnglet1" onmouseover="javascript:change_onglet('NomOnglet1');"><img src="https://redcdn.net/hpimg11/pics/208839Sanstitre12.png" style="height:50px; border-radius:30%;"/></span>
                  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onmouseover="javascript:change_onglet('NomOnglet2');"><img src="https://images2.imgbox.com/28/f0/ieqhdKvK_o.png" style="height:50px; border-radius:30%;"/></span>
                  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onmouseover="javascript:change_onglet('NomOnglet3');"><img src="https://redcdn.net/hpimg11/pics/777043Sanstitre38.png" style="height:50px; border-radius:30%;"/></span>
                  </div>
                  <div class="imagescenarios2">
                  <span class="onglet_0 onglet" id="onglet_NomOnglet4" onmouseover="javascript:change_onglet('NomOnglet4');"><img src="https://i.pinimg.com/236x/09/ab/d2/09abd2dd6e9be110beca109b4797faff--sort-benedict-cumberbatch.jpg" style="height:50px; border-radius:30%;"/></span>
                  <span class="onglet_0 onglet" id="onglet_NomOnglet5" onmouseover="javascript:change_onglet('NomOnglet5');"><img src="https://www.resizup.com/images/2017/06/09/4.png" style="height:50px; border-radius:30%;"/></span>
                    <span class="onglet_0 onglet" id="onglet_NomOnglet6" onmouseover="javascript:change_onglet('NomOnglet6');"><img src="https://redcdn.net/hpimg15/pics/713182candiceswanepoel8.png" style="height:50px; border-radius:30%;"/></span>
                  </div>
                </div>
                <script type="text/javascript">
                  //<!--
                  var anc_onglet = 'NomOnglet0';
                  change_onglet(anc_onglet);
                  //-->
                </script>
              </div>
          </center><br/>
          <div style="font-size:10px;color:#000000;text-align:center;"><a href="http://cophirende-academie.forumactif.com/" target="_blank">Loukoum sur CA</a></div>
        </div>
      </div>
    </center>      
  </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px
Old programmers never die; they just lose some of their functions.

Console