<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>card ls</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
</head>
<style>
/* COULEUR A CHANGER EN FONCTION DU GROUPE :
PULSAR : #E03D45
NOVA : #6386FF
PLEIADE : #4BA659
ECLIPSE : #9362CC
METEORE : #ED9C39
*/
.groupe {
background: #E03D45 !important; /* A CHANGER PAR COULEUR GROUPE */
color: white !important;
}
.triangle {
position: absolute;
top: 0px;
left: 200px;
width: 0px;
height: 0px;
border-bottom: 380px solid transparent;
border-right: 0px solid transparent;
border-left: 80px solid #E03D45; /* A CHANGER PAR COULEUR GROUPE */
}
.container {
width: 680px;
padding: 15px;
background: white;
border: 1px solid #ddd;
margin: 0 auto;
position: relative;
height: 350px;
}
.forme {
background: #E03D45;
position: absolute;
width: 200px;
height: 380px;
top: 0;
left: 0;
}
.card {
position: relative;
z-index: 9;
}
.avatar {
background: #eee;
padding: 10px;
width: 200px;
float: left;
margin-right: 10px;
}
.info {
width: 450px;
float: left;
}
.info .nom {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 35px;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
color: #2c2c2c;
}
.info .bloc .minisprite {
width: 42px;
float: left;
}
.info .bloc .minisprite span {
background: #eee;
border: 1px solid #ddd;
padding: 2px;
border-radius: 100px;
margin-top: 10.5px;
margin-left: -3px;
height: 32px;
width: 32px;
display: block;
}
.info .bloc .contenu {
background: #eee;
border: 1px solid #ddd;
width: 265px;
float: left;
padding: 10px;
margin-right: 10px;
height: 267px;
}
.info .bloc .droite {
width: 110px;
float: left;
}
.info .bloc .droite .icon {
background: #2c2c2c;
padding: 5px;
width: 100px;
margin-bottom: 5px;
}
.info .bloc .droite .onglet span {
background: #eee;
border: 1px solid #ddd;
font-family: roboto;
color: black;
text-align: center;
padding: 4px;
display: block;
margin-bottom:3px;
text-transform: uppercase;
font-size: 11px;
}
.info .bloc .contenu .element {
width: 49%;
float: left;
margin-right: 1.5%;
margin-bottom: 10px;
}
.info .bloc .contenu .element span {
background: #E03D45;
border: 1px solid #ddd;
display: block;
margin-bottom: 2px;
padding: 2px 10px;
color: white;
font-family: roboto;
font-size: 10px;
text-align: right;
}
.info .bloc .contenu .reponse {
width: 49%;
float: left;
margin-bottom: 10px;
}
.info .bloc .contenu .reponse span {
border: 1px solid #ddd;
display: block;
margin-bottom: 2px;
padding: 2px 10px;
color: black;
font-family: roboto;
font-size: 10px;
text-align: left;
}
.info .bloc .contenu .badge {
clear: both;
background: #ddd;
margin-top: 10px;
border: 1px solid #c2c2c2;
padding: 5px;
height: 82px;
overflow: auto;
}
.info .bloc .contenu .badge img {
width: 25px;
}
.clear {
clear: both;
}
.onglet {
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
}
.onglet_1
{
background: #2c2c2c !important;
border: 1px solid #2c2c2c !important;
color: #eee !important;
}
.contenu_onglet
{
display:none;
}
.info .bloc .contenu .conso {
border: 1px solid #ddd;
padding: 8px;
width: 43.5%;
float: left;
margin-bottom: 5px;
margin-right: 1.9%;
height: 114px;
}
.info .bloc .contenu .rare {
border: 1px solid #ddd;
padding: 8px;
width: 41%;
float: left;
height: 114px;
margin-bottom: 5px;
}
.info .bloc .contenu .capacites {
border: 1px solid #ddd;
padding: 8px;
clear: both;
height: 112px;
}
.contenu .conso span, .contenu .rare span, .contenu .capacites span {
font-family: roboto;
font-size: 12px;
text-align: center;
display: block;
text-transform: uppercase;
border-bottom: 1px solid #ddd;
}
.contenu .conso p, .contenu .rare p, .contenu .capacites p {
font-size: 12px;
margin: 0;
color: #525252;
height: 106px;
width: 112%;
overflow: auto;
margin-left: -5px;
}
.contenu .conso p img, .contenu .rare p img, .contenu .capacites p img {
width: 15px;
position: relative;
bottom: -3px;
margin-right: 5px;
}
.contenu .pc span {
width: 48%;
display: inline-block;
font-family: roboto;
font-size: 12px;
}
.contenu .pc span img {
position: relative;
bottom: -10px;
}
.poke {
background: #f8f8f8;
padding: 10px;
width: 105px;
float: left;
height: 95px;
margin-bottom: 18px;
text-align: center;
}
.poke .type {
text-align: center;
background: #eee;
border-radius: 10px;
width: 80%;
padding: 5px 8px;
display: block;
margin-top: -5px;
margin-bottom: -5px;
}
.pokeinfo {
width: 128px;
float: left;
margin-left: 10px;
}
.pokeinfo .surnom {
font-family: 'Roboto', sans-serif;
font-weight: bold;
font-size: 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 5px;
color: #2c2c2c;
}
.pokeinfo span {
border: 1px solid #ddd;
display: block;
margin-bottom: 2px;
padding: 2px 10px;
color: black;
font-family: roboto;
font-size: 10px;
text-align: center;
}
.attaques img {
position: relative;
bottom: -3px;
margin-right: 5px;
}
.attaques {
font-size: 12px;
margin: 0;
color: #525252;
height: 112px;
overflow: auto;
background: #ddd;
border: 1px solid #c2c2c2;
padding: 5px;
margin-top: 10px;
}
</style>
<body>
<div class="container">
<div class="card"><!--
AVATAR
-->
<div class="avatar"><img src="http://i.imgur.com/zRQhOKA.png" alt="avatar"></div>
<div class="info"><!--
NOM ET PRENOM
-->
<div class="nom">Zachary Hazel</div>
<div class="bloc systeme_onglets">
<div class="minisprite onglets"><!--
MINI SPRITE POKEMON
-->
<span class="onglet_0 onglet" id="onglet_pokeun" onclick="javascript:change_onglet('pokeun');"><img src="https://www.zupimages.net/up/17/33/q77c.png" alt="poke"></span>
<span class="onglet_0 onglet" id="onglet_pokedeux" onclick="javascript:change_onglet('pokedeux');"><img src="http://www.pokepedia.fr/images/4/4d/Miniat_6_x_566.png" alt="poke"></span>
<span class="onglet_0 onglet" id="onglet_poketrois" onclick="javascript:change_onglet('poketrois');"><img src="http://www.pokemontrash.com/pokedex/images/minixy/187.png" alt="poke"></span>
<span class="onglet_0 onglet" id="onglet_pokequatre" onclick="javascript:change_onglet('pokequatre');"><img src="http://www.pokepedia.fr/images/5/55/Miniat_7_s_747.png" alt="poke"></span>
<span class="onglet_0 onglet" id="onglet_pokecinq" onclick="javascript:change_onglet('pokecinq');"><img src="http://www.pokepedia.fr/images/9/9a/Miniat_6_x_149.png" alt="poke"></span>
<span class="onglet_0 onglet" id="onglet_pokesix" onclick="javascript:change_onglet('pokesix');"><img src="http://www.pokepedia.fr/images/0/0b/Miniat_6_x_036.png" alt="poke"></span>
</div>
<div class="contenu contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_identite">
<div class="element">
<span class="groupe">Sexe</span>
<span class="groupe">Age</span>
<span class="groupe">Née le</span>
<span class="groupe">Originaire de</span>
<span class="groupe">ville de</span>
<span class="groupe">Groupe</span>
<span class="groupe">Metier</span>
<span class="groupe">orientation</span>
</div>
<div class="reponse">
<span>masculin</span>
<span>28 ans</span>
<span>11 Novembre</span>
<span>Lumiris</span>
<span>Windoria</span>
<span>Pulsar</span>
<span>chomage</span>
<span>hétéro</span>
</div><!--
BADGES
-->
<div class="badge">
<img src="https://www.zupimages.net/up/17/29/8ayj.gif" alt="badge"> <img src="https://www.zupimages.net/up/17/30/97by.gif" alt="badge"> <img src="https://www.zupimages.net/up/17/29/8ayj.gif" alt="badge">
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_inventaire">
<div class="conso"><!--
OBJETS CONSOMMABLES
-->
<span>Consommables</span>
<p>
<img src="https://www.zupimages.net/up/17/11/ldfl.png" alt="ball ">x5 Pokéball <br/>
<img src="https://www.zupimages.net/up/17/13/kna8.png" alt="ball ">x2 Laits <br/>
</p>
</div>
<div class="rare"><!--
OBJETS RARES
-->
<span>Objets rares</span>
<p>
<img src="http://www.pokepedia.fr/images/e/e7/Bicyclette.png" alt="ball ">x1 vélo <br/>
</p>
</div>
<div class="capacites"><!--
CTS ET CS
-->
<span>Capacités</span>
<p>
<img src="https://www.pokebip.com/pages/icones/objets/ct_psy.png" alt="ball ">CT03 Choc Psy <br/>
<img src="https://www.pokebip.com/pages/jeuxvideo/pokemon_soleil_lune_sun_moon/images/objets/ct_eau.png" alt="ball ">x2 CS05 Surf <br/>
</p>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pc"><!--
BOITE PC
-->
<div class="pc">
<span><img src="http://www.pokepedia.fr/images/9/95/Miniat_7_s_745d.png" alt="pc"> Fenrir lv25</span>
<span><img src="http://www.pokepedia.fr/images/7/7a/Miniat_6_x_548.png" alt="pc"> Blanche lv5</span>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pokeun"><!--
VOTRE 1ER POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="http://www.pokemontrash.com/pokedex/images/noir-blanc/157.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Kamui</div>
<span>Typhlosion</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pokedeux"><!--
VOTRE 2EME POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="http://www.pokemontrash.com/pokedex/images/noir-blanc/566.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Nuito</div>
<span>Akéapti</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_poketrois"><!--
VOTRE 3EME POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="http://www.pokemontrash.com/pokedex/images/noir-blanc-female/187.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Calin</div>
<span>Grainivol</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pokequatre"><!--
VOTRE 4EME POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="https://www.zupimages.net/up/17/11/d91b.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Stassie</div>
<span>Vorastérie</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pokecinq"><!--
VOTRE 5EME POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="http://www.pokemontrash.com/pokedex/images/noir-blanc/149.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Yugo</div>
<span>Dracolosse</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_pokesix"><!--
VOTRE 6EME POKEMON
-->
<div class="poke"><!--
SPRITE
-->
<img src="http://www.pokemontrash.com/pokedex/images/noir-blanc/36.png" alt="sprite">
<span class="type"><!--
IMG TYPE
-->
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat">
</span>
</div>
<div class="pokeinfo"><!--
INFOS
-->
<div class="surnom">Princesse</div>
<span>Mélodelfe</span>
<span>mâle </span>
<span>timide </span>
<span>Brasier </span>
<span class="groupe">Niveau 100 </span>
</div>
<div class="clear"></div><!--
ATTAQUES
-->
<div class="attaques">
<img src="https://www.pokebip.com/pokedex/images/gen6_types/6.png" alt="feu"> Flammèche <br/>
<img src="https://www.pokebip.com/pokedex/images/gen6_types/2.png" alt="combat"> Combo-griffe <br/>
</div>
</div>
</div>
<div class="droite onglets">
<div class="icon"><img src="https://l-userpic.livejournal.com/104089380/30284756" alt="icon"></div>
<div class="onglet">
<span class="onglet_0 onglet" id="onglet_identite" onclick="javascript:change_onglet('identite');">identité</span>
<span class="onglet_0 onglet" id="onglet_inventaire" onclick="javascript:change_onglet('inventaire');">inventaire</span>
<span class="onglet_0 onglet" id="onglet_pc" onclick="javascript:change_onglet('pc');">Boite PC</span>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="forme groupe"></div>
<div class="triangle"></div>
</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>
<script type="text/javascript">
//<!--
var anc_onglet = 'identite';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Rejoins la famille !
Accueil
Dernières images
Rechercher
S'enregistrer
Connexion
t-card