<link rel='stylesheet' type='text/css'>
<style>a:link{text-decoration: none; color: #000000;} a:visited{text-decoration: none; color: #000000;} a:hover{text-decoration: none; color: #8C7433; -moz-transition: all 200ms; -webkit-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms;} .cadre{position: absolute; width: 550px; height: 689px; background-image: url("http://i19.servimg.com/u/f19/18/64/66/00/fond2_10.png"); border: 1px solid #000000;} .coin {float: left; margin: -23px 20px 0px 0px; height: 138px; width: 138px; background-image: url(http://i19.servimg.com/u/f19/18/64/66/00/coin10.png); -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out;} .coin:hover {-webkit-transform: rotate(30deg); transform: rotate(30deg);} .cat {width: 282px; height: 97px; margin: -15px 0px -64px 150px; font-family: Pristina, "Monotype Corsiva", "Lucida Calligraphy"; text-align: center; font-size: 25px;} #titre {font-size: 45px;} .change{position: relative; top: 119px; left: 169px; width: 211px; color: #000000; font-size: 20px; text-align: center;} .onglet {border-width: 1px 1px 0px 1px; border-style: solid; border-color: black; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; padding: 0px 2px 0px 2px;} .onglet_0 {position: relative; top: -1px; border-bottom: 1px solid black; cursor: pointer;} #onglet_un {background-image: url("http://i19.servimg.com/u/f19/18/64/66/00/fond_o10.png");} #onglet_deux {background-image: url("http://i19.servimg.com/u/f19/18/64/66/00/fond_o11.png");} .contenu_onglet {display:none; height: 499px; width: 339px; margin-top: 111px; margin-left: 30px; border: 1px solid #ffffff;} .contenu_onglet a{color: #928442; font-weight: bold;} .contenu_onglet a:hover{color: #000000;} .section {font-size: 20px; font-weight: bold; border-bottom: 1px dashed #000000; width: 150px; padding: 0px 0px 0px 10px;} .texte {padding: 2px 5px 2px 5px; text-align: justify; font-size: 14px;} .news {width: 300px; margin: auto; text-align: center; padding-top: 5px;} table {height: 100px; margin: auto; text-align: center;} td {width: 100px; height: 100px; padding: 0px 3px 0px 3px;} .ch-item {width: 100%; height: 100%; border-radius: 50%; border: 1px solid black; position: relative; cursor: default; box-shadow: none; transition: all 0.4s ease-in-out;} .ch-img-1 {background-image: url(http://i55.servimg.com/u/f55/18/64/66/00/ajar1010.jpg);} .ch-img-2 {background-image: url(http://i68.servimg.com/u/f68/18/64/66/00/joel_p10.png);} .ch-img-3 {background-image: url(https://i58.servimg.com/u/f58/18/64/66/00/leanne10.png);} .ch-info {position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden;} .admin {color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 15px; margin-top: 20px; font-family: 'Open Sans', Arial, sans-serif;} .ch-info p {color: #fff; padding: 5px; font-style: italic; font-size: 12px; border-top: 1px solid rgba(255, 255, 255, 0.5); margin-top: 5px;} .ch-info p a {display: block; color: rgba(255, 255, 255, 0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif;} .ch-info p a:hover {color: rgba(34, 34, 34, 0.8);} .ch-item:hover {box-shadow: inset 0 0 0 110px rgba(34, 34, 34, 0.4), inset 0 0 0 10px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);} .ch-item:hover .ch-info {opacity: 1; transform: scale(1);}</style>
<div class="cadre">
<div class="change">
<span class="onglet_0 onglet" id="onglet_un" onclick="javascript:change_onglet('un');">Présentation</span>
<span class="onglet_0 onglet" id="onglet_deux" onclick="javascript:change_onglet('deux');">Nouveautés</span>
</div>
<div class="coin"></div>
<div class="cat"><span id="titre">C.A.T.</span>
<br/>
<a href="http://cat-rpg.forumactif.org/" target="_blank">http://cat-rpg.forumactif.org/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_un">
<div class="section" style="margin-top: 5px;">En Bref</div>
<div class="texte">La CAT est un RPG de style fantastique-contemporain qui vous permet d'incarner une créature parmi un choix de 5 races (Anges, Elfes, Fées, Sorciers et Vampires) et de faire évoluer votre personnage dans un monde cohérent avec notre réalité.</div>
<div class="section" style="margin-top: 5px; width:200px;">Contexte <a href="http://cat-rpg.forumactif.org/f5-contexte" target="_blank"><span style="font-size:13px;">[En savoir plus...]</span></a></div>
<div class="texte" style="height: 208px; overflow: auto;">À la suite des attentats terroristes du World Trade Center le 11 septembre 2001, un génocide à grande échelle est dirigé contre les différentes races magiques peuplant la Terre. La W.E.F., une organisation secrète mondiale qui recherche activement à détruire tout ce qui pourrait représenter une menace pour la population mondiale grandissante d’êtres humains en est l’instigatrice.<br/>
Après ces évènements, en 2003, Onoma fonde les Créatures Anonymes de la Terre (aussi connue sous le nom de C.A.T. ), une organisation regroupant des êtres de toutes les races magiques connues. Depuis ce jour, des Anges, des Elfes, des Fées, des Sorciers et des Vampires de partout à travers le monde sont sauvés par les membres de la C.A.T. et reconduits à la base secrète de l’organisation pour les protéger. C’est dans cette base que sont formés les futurs agents du groupe qui cherche à créer un monde où les humains et les êtres magiques pourront vivre en paix.</div>
<div class="section" style="margin-top: 5px; margin-bottom: 5px;">Administrateurs</div>
<table>
<tr>
<td><div class="ch-item ch-img-1">
<div class="ch-info">
<div class="admin">Ajartiel</div>
<p>Chef des Anges <a href="http://cat-rpg.forumactif.org/t4-les-personnes-a-contacter-en-cas-de-problemes" target="_blank">Contact</a></p>
</div>
</div></td>
<td><div class="ch-item ch-img-3">
<div class="ch-info">
<div class="admin">Léanne</div>
<p>Chef des Fées <a href="http://cat-rpg.forumactif.org/t4-les-personnes-a-contacter-en-cas-de-problemes" target="_blank">Contact</a></p>
</div>
</div></td>
</tr>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_deux">
<div class="news">NOUVEAUTÉS<br/>
19 mars 2017</div>
<div class="section">Sur le forum...</div>
<div class="texte">
La C.A.T. possède désormais une <a href="http://cat-rpg.forumactif.org/t215-une-fiche-de-publicite-pour-la-c-a-t#1534" target="_blank">fiche de pub</a> ! [19/03/2017]<br/><br/>
La C.A.T. vous souhaite une <a href="http://cat-rpg.forumactif.org/t211-2017-nous-voici" target="_blank">Bonne année 2017 !</a> [02/01/2017]<br /><br />
Pour la nouvelle année, <a href="http://cat-rpg.forumactif.org/t209-la-cat-se-fait-une-beaute" target="_blank">la C.A.T. se fait une beauté</a> ! [29/12/2016]</div>
<div class="section" style="margin-top: 5px;">Dans les RP...</div>
<div class="texte">Alors que Nihil et Clo se font (ou pas) <a href="http://cat-rpg.forumactif.org/t201-la-revanche-de-gustave-ou-pas" target="_blank">remonter les bretelles</a> par Ajartiel pour avoir embêté Gustave, la petite Fée s'attirera-t-elle d'autres ennuis ? Tout est possible, <a href="http://cat-rpg.forumactif.org/t208-la-fievre-du-samedi-soir-pv-clo" target="_blank">à la discothèque</a>.<br/><br/>
Entre temps, l'Ange Dieter cherche à <a href="http://cat-rpg.forumactif.org/t213-vive-le-calme-la-tranquillite-et-zut" target="_blank">apprivoiser un Vampire</a>. Courage, Dieter !</div>
<div class="section" style="margin-top: 5px;">Statistiques</div>
<div class="texte"><script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
Nous avons un total de <strong><span class="FORUMCOUNTUSER"></span></strong> membres.<br />
<strong><span class="FORUMCOUNTPOST"></span></strong> messages ont été échangés dans <strong><span class="FORUMCOUNTOPIC"></span></strong> sujets.<br />
Bienvenue à <strong><span class="FORUMLASTUSER"></span></strong>, le dernier membre à nous avoir rejoint !</div>
</div>
</div>
Accueil 
