Code:
<center><div style="width: 480px; padding: 5px; border: 1px solid #fff;"><div style="width:440px; padding: 20px; background-color:#fff;"><div style="margin-top: 20px; font-family: autumn_chantregular; font-size: 20px; color: #000; text-align: center; width:400px;">Commande de Nom</div>
<div style="width: 300px; font-family: verdana; font-size: 10px; color:#000; text-align: justify;">[b]Type de code :[/b] ici
[b]Maquette ou explications du code souhaité :[/b] Lien ou explications
[b]Police à utiliser :[/b] ici (google font est préféré mais on peut s'arranger pour d'autres)
[b]Images à utiliser :[/b] si nécessaire
[b]Autres :[/b] tout ce que vous pourriez avoir à rajouter
[b]Acceptez vous que le code finisse en libre service ?[/b] Oui / Non</div>
</div></div></center>
Code:
<center><div style="width: 480px; padding: 5px; border: 1px solid #fff;"><div style="width:440px; padding: 20px; background-color:#fff;"><div style="margin-top: 20px; font-family: autumn_chantregular; font-size: 20px; color: #000; text-align: center; width:400px;">Challenge de Nom</div>
<div style="width: 300px; font-family: verdana; font-size: 10px; color:#000; text-align: justify;">[b]Type de code :[/b] ici
[b]Éléments imposés :[/b] explications</div>
</div></div></center>
titre 1 bella Vivamus rutrum auctor congue. Curabitur faucibus at erat vel luctus. In rhoncus sollicitudin nulla at aliquet. Etiam in lobortis purus, sed ultricies libero. In ante nulla, ultrices nec enim eu, dictum pretium metus. Ut luctus dapibus lacus, eget elementum erat pretium quis. Morbi enim eros, posuere ac mattis nec, maximus ut purus. Ut turpis metus, pretium in sem sed, euismod sagittis dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce pharetra malesuada nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu arcu volutpat, maximus nisi ut, convallis risus. Nullam nec purus sem. Etiam nec bibendum felis, non maximus ipsum. Nam condimentum malesuada eros. Sed placerat facilisis risus, pellentesque aliquet quam tincidunt in. Praesent condimentum eu quam vel molestie. Mauris facilisis auctor tellus, nec porttitor metus accumsan vehicula. Maecenas sit amet tincidunt urna. Cras nisi risus, convallis id elementum et, facilisis ac felis. Sed eget diam turpis. Ut at nunc faucibus, vehicula lectus a, finibus orci. Vivamus suscipit orci et nunc pulvinar, nec consequat magna sollicitudin. |
Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" /><style>.iris_scroll::-webkit-scrollbar {width: 6px; height:6px;}.iris_scroll::-webkit-scrollbar-track {background-color: #fff;}.iris_scroll::-webkit-scrollbar-thumb {background-color: #FFBE40;} .ongletf{cursor: pointer;} .ongletcont{display: none;} .zone_onglet input {display: none;} input:checked + .ongletcont{display: block;} .zone_onglet{width:340px; padding: 5px; border: 1px solid lightgrey;} .ongletpkm{cursor: pointer;} .ongletcontpkm{display: none;} .zone_ongletpkm input {display: none;} input:checked + .ongletcontpkm{display: block;} .zone_ongletpkm{width:340px; padding: 5px; border: 1px solid lightgrey;} .header_iris{width:550px; height:150px; background-image:url('http://www.plixup.com/pics_core3/15265643891431iris.png'); background-repeat: no-repeat; background-position:top right;background-color:#FFBE40;} .name_iris{position:relative; top: 100px; left:200px; width: 100px; padding: 5px; background-color: white;font-family:Roboto; text-transform:uppercase; letter-spacing: 2px; font-size: 17px;color: black; text-align: right;} .fond_iris{width:530px; padding:10px;background-color: white;display:flex;} .boutons_iris{width:160px; padding: 5px;margin-right: 10px;border: 1px solid lightgrey;} .btn_iris{width:150px; padding: 5px; background-color:#FFBE40; color: white; font-family:Roboto; text-transform:uppercase; letter-spacing: 2px; font-size: 17px; text-align: center;margin-bottom:5px;} .minicon_iris{width:45px; height:45px; border:1px solid lightgrey; padding: 2px; margin-right: 2px;margin-bottom: 2px;display:inline-block;} .minimg_iris{width:45px; height:45px;} .info_iris{width:320px; height: 100px; padding: 10px; overflow:auto;background-color: lightgrey; color:black; font-family: Roboto; font-size: 11px; text-align:justify;margin-bottom:5px;}.inventaire_iris{width:340px; height:150px;} .inventaire_titre{padding: 5px; border: 1px solid #FFBE40; color: #FFBE40; font-family: Roboto; text-align:center; font-size: 20px; letter-spacing: 2px;} .inventaire_txt{height: 115px;columns:2;font-family: Roboto; text-align:justify; font-size: 11px; color:black; overflow:auto;margin-bottom:5px;} .cont_iris{display:flex; width:340px;} .box_iris{width:155px; height: 155px; padding: 5px; margin-right:10px; background-color:#FFBE40; } .borderbox_iris{height: 143px; overflow: auto; border: 1px solid white; padding: 5px; font-family: Roboto; font-size: 11px; color: white;text-align:justify;} .rp_iris{height: 100px; padding: 5px; font-family: Roboto; color: white; font-size: 11px;overflow: auto; text-align: justify;} .bg_rp{padding: 5px; background-color:#FFBE40; margin-bottom: 5px;} .rp_titre{padding: 5px; border: 1px solid white; color: white; font-family: Roboto; text-align:center; font-size: 20px; letter-spacing: 2px;margin-bottom:5px;} .icon_iris{width:100px; height:100px;padding: 2px; border: 1px solid lightgrey;margin-right: 5px;} .img_iris{width:100px; height:100px;} .rela_iris{width: 220px; border: 1px solid lightgrey;font-family: Roboto; text-align:justify; font-size: 11px; color:black;height: 94px;padding: 5px;overflow:auto;} .postbody a{font-family: Roboto; font-weight: bold; font-size: 11px; color:#b37700;} .postbody strong{font-family: Roboto; font-weight: bold; font-size: 11px; color:#FFBE40;} .postbody i{font-family: Roboto; font-size: 11px; color:#FFBE40;} .mb{margin-bottom:5px;} .titre_iris{font-family: Roboto; font-size: 20px; color:#FFBE40; text-transform:uppercase; letter-spacing: 2px;} .pkmname_iris{width:280px;height: 34px;padding-top: 15px;border: 1px solid lightgrey;display:table-cell;vertical-align:middle; font-family: Roboto; font-size: 20px; text-transform:uppercase; color: black;text-align:center;} .boxs_iris{width:173px;margin-right:5px; padding:5px; border:1px solid lightgrey;} .attaque_iris{width:137px;height: 160px;padding:5px;border:1px solid lightgrey;} .att_iris{width:137px;height: 160px; background-image: url('http://www.plixup.com/pics_core3/15266327301928chu.png');} .txt_att{width:127px;height: 150px; padding:5px; text-align:justify; background-color: lightgrey; color: black; font-family: Roboto; font-size: 11px; transition: all 0.70s; -webkit-transition: all 0.70s; -moz-transition: all 0.70s; -ms-transition: all 0.75s; -o-transition: all 0.70s; opacity: 0; margin: auto; overflow:auto;} .txt_att:hover{opacity: 0.8;} .minibox_iris{width:163px; padding:5px; background-color: lightgrey; font-family: Roboto; font-size: 11px; text-align:justify; height:67px; margin-bottom:5px; overflow:auto;} .minipkm_iris{width:45px; height:39px; border:1px solid lightgrey; padding: 5px; margin-right: 5px; margin-bottom: 5px;}</style>
Code:
<center><div class="header_iris"><div class="name_iris">iris</div></div><div class="fond_iris"><div class="boutons_iris"><label for="profil" class="ongletf"><div class="btn_iris">Profil</div></label><label for="rp" class="ongletf"><div class="btn_iris">Événement</div></label><label for="relation" class="ongletf"><div class="btn_iris">Amis</div></label><div class="minicon_iris"><img src="ICON1" class="minimg_iris"></div></div><div class="zone_onglet"><input id="profil" type="radio" name="ongletf" checked="" /><div class="ongletcont"><div class="info_iris iris_scroll">info ici </div><div class="inventaire_iris"><div class="inventaire_titre">inventaire</div><div class="inventaire_txt iris_scroll">les items [b]bold[/b] [i]italic[/i] <a href="http://pokemoncommunity.forumactif.org/t4919-code-de-max-libre-service">lien</a> </div></div><div class="cont_iris"><div class="box_iris"><div class="borderbox_iris iris_scroll">prog </div></div><div class="box_iris" style="margin-right: 0;"><div class="borderbox_iris iris_scroll">secret </div></div></div></div><input id="rp" type="radio" name="ongletf" /><div class="ongletcont"><div class="bg_rp"><div class="rp_titre">semestre 1 x année 1</div><div class="rp_iris iris_scroll"><a href="LIENDU RP">nom du rp</a> avec machin</div></div><!-- AJOUTER UN RP JUSTE AVANT CETTE BALISE --></div><input id="relation" type="radio" name="ongletf" /><div class="ongletcont"><div class="cont_iris mb"><div class="icon_iris"><img src="ICONRELATION" class="img_iris"></div><div class="rela_iris iris_scroll"><span class="titre_iris">relation</span>txt rela</div></div><!-- AJOUTER UNE RELATION JUSTE AVANT CETTE BALISE --></div></div></div></center>
Code:
<div class="cont_iris mb"><div class="icon_iris"><img src="ICONRELATION" class="img_iris"></div><div class="rela_iris iris_scroll"><span class="titre_iris">relation</span>txt rela</div></div>
Code:
<div class="ongletcont"><div class="bg_rp"><div class="rp_titre">semestre 1 x année 1</div><div class="rp_iris iris_scroll"><a href="LIENDU RP">nom du rp</a> avec machin</div></div>
Code:
<center><div class="header_iris"><div class="name_iris">iris</div></div><div class="fond_iris"><div class="boutons_iris"><label for="POKEMON1" class="ongletpkm"><div class="btn_iris">Pokémon 1</div></label><label for="POKEMON2" class="ongletpkm"><div class="btn_iris">Pokémon 2</div></label><label for="POKEMON3" class="ongletpkm"><div class="btn_iris">Pokémon 3</div></label><!-- AJOUTER UN BOUTON POKEMON AVANT CETTE BALISE --><div class="minicon_iris"><img src="ICON1" class="minimg_iris"></div></div><div class="zone_ongletpkm"><input id="POKEMON1" type="radio" name="ongletpkm" checked="" /><div class="ongletcontpkm"><div class="cont_iris"><div class="minipkm_iris"><img src="MINIICON"></div><div class="pkmname_iris">nom x espèce x ♂ x </div></div><div class="cont_iris"><div class="boxs_iris"><div class="minibox_iris iris_scroll">desc </div><div class="minibox_iris iris_scroll" style="margin-bottom:0;">stats </div></div><div class="attaque_iris"><div class="att_iris"><div class="txt_att iris_scroll"> attaque ici </div></div></div></div></div><input id="POKEMON2" type="radio" name="ongletpkm" /><div class="ongletcontpkm"><div class="cont_iris"><div class="minipkm_iris"><img src="MINIICON"></div><div class="pkmname_iris">nom x espèce x ♂ x </div></div><div class="cont_iris"><div class="boxs_iris"><div class="minibox_iris iris_scroll">desc </div><div class="minibox_iris iris_scroll" style="margin-bottom:0;">stats </div></div><div class="attaque_iris"><div class="att_iris"><div class="txt_att iris_scroll"> attaque ici </div></div></div></div></div><input id="POKEMON3" type="radio" name="ongletpkm" /><div class="ongletcontpkm"><div class="cont_iris"><div class="minipkm_iris"><img src="MINIICON"></div><div class="pkmname_iris">nom x espèce x ♂ x </div></div><div class="cont_iris"><div class="boxs_iris"><div class="minibox_iris iris_scroll">desc </div><div class="minibox_iris iris_scroll" style="margin-bottom:0;">stats </div></div><div class="attaque_iris"><div class="att_iris"><div class="txt_att iris_scroll"> attaque ici </div></div></div></div></div><!-- AJOUTER UN POKEMON AVANT CETTE BALISE --></div></div></center>
Code:
<label for="POKEMON1" class="ongletpkm"><div class="btn_iris">Pokémon 1</div></label>
Code:
<input id="POKEMON1" type="radio" name="ongletpkm" /><div class="ongletcontpkm"><div class="cont_iris"><div class="minipkm_iris"><img src="MINIICON"></div><div class="pkmname_iris">nom x espèce x ♂ x </div></div><div class="cont_iris"><div class="boxs_iris"><div class="minibox_iris iris_scroll">desc </div><div class="minibox_iris iris_scroll" style="margin-bottom:0;">stats </div></div><div class="attaque_iris"><div class="att_iris"><div class="txt_att iris_scroll"> attaque ici </div></div></div></div></div>
Code:
<style>.scrollr::-webkit-scrollbar {width:5px;}.scrollr::-webkit-scrollbar-track {background:#92253a; border:2px solid #020202;}.scrollr::-webkit-scrollbar-thumb {background:#020202; border:1px solid #92253a;}@font-face {font-family: 'I_Still_Know';src: url('https://files.jcink.net/uploads/font/I_Still_Know.ttf');font-weight: normal;font-style: normal;} .bgr{margin:auto;outline:7px solid black; border:20px solid #f4f4f4;width:460px;box-sizing:border-box;} .bgrr{width:400px;margin:auto;background-color:#2c0406;box-shadow: 0 0 8px #92253a;}.namer{text-align:center;font-family:I_Still_Know;text-transform:uppercase;color:white;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:20px;} .tradr{text-align:center;font-family:Times New Roman;color:white;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:12px;font-style:italic;} .sepr{margin-top:5px;height:2px;background-color:#7d080d;box-shadow: 0 0 8px #92253a;}.flexr{background-color:#020202;display:flex;padding:10px;} .infor{width:195px;height:180px;color:white;font-family:Verdana;overflow:auto;margin-right:5px;line-height:30px;} .imgr{border:1px solid #941f25; height:180px;width:180px;} .imgr img{height:180px;width:180px;} .inforr{font-family:I_Still_Know;text-transform:uppercase;color:#92253a;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:17px;} .txtr{background:#020202;padding:10px;color:white;font-family:Verdana;text-align:center;} .inforp{width:80px;font-family:I_Still_Know;text-transform:uppercase;color:#92253a;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:17px;} .txtrp{background:#020202;padding-right:10px;color:white;font-family:Verdana;text-align:right;}</style>
<div class="bgr"><div class="bgrr">
<div class="namer">raudhr akai</div><div class="tradr">"Rouge"</div><div class="sepr"></div><div class="flexr"><div class="infor scrollr"><span class="inforr">test info</span> test</div><div class="imgr"><img src="IMAGE EN 180x180"></div></div><div class="txtr">texte</div><div class="txtr"><span class="inforr">inventaire</span>
item</div></div></div>
Code:
<style>.scrollr::-webkit-scrollbar {width:5px;}.scrollr::-webkit-scrollbar-track {background:#92253a; border:2px solid #020202;}.scrollr::-webkit-scrollbar-thumb {background:#020202; border:1px solid #92253a;}@font-face {font-family: 'I_Still_Know';src: url('https://files.jcink.net/uploads/font/I_Still_Know.ttf');font-weight: normal;font-style: normal;} .bgr{margin:auto;outline:7px solid black; border:20px solid #f4f4f4;width:460px;box-sizing:border-box;} .bgrr{width:400px;margin:auto;background-color:#2c0406;box-shadow: 0 0 8px #92253a;}.namer{text-align:center;font-family:I_Still_Know;text-transform:uppercase;color:white;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:20px;} .tradr{text-align:center;font-family:Times New Roman;color:white;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:12px;font-style:italic;} .sepr{margin-top:5px;height:2px;background-color:#7d080d;box-shadow: 0 0 8px #92253a;}.flexr{background-color:#020202;display:flex;padding:10px;} .infor{width:195px;height:180px;color:white;font-family:Verdana;overflow:auto;margin-right:5px;line-height:30px;} .imgr{border:1px solid #941f25; height:180px;width:180px;} .imgr img{height:180px;width:180px;} .inforr{font-family:I_Still_Know;text-transform:uppercase;color:#92253a;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:17px;} .txtr{background:#020202;padding:10px;color:white;font-family:Verdana;text-align:center;} .inforp{width:80px;font-family:I_Still_Know;text-transform:uppercase;color:#92253a;text-shadow:#ff000b 2px 2px 10px, #ff000b -2px -2px 10px;font-size:17px;} .txtrp{background:#020202;padding-right:10px;color:white;font-family:Verdana;text-align:right;}</style>
<div class="bgr"><div class="bgrr" style="box-shadow: 0 0 8px #fac525;">
<div class="namer" style="text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">pokemon</div><div class="tradr" style="text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">"traduction"</div><div class="sepr" style="background-color:#fac525;box-shadow: 0 0 8px #fac525;"></div><div class="flexr"><div class="infor scrollr"><span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">test info</span> test
<span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">test info</span> test</div><div class="imgr" style="border: 1px solid #fac525;"><img src="https://2img.net/u/2617/37/54/58/avatars/849-82.jpg"></div></div><div class="txtrp"><span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">talent :</span> info</div><div class="txtr">texte</div></div></div>
Code:
<div class="bgr"><div class="bgrr" style="box-shadow: 0 0 8px #fac525;">
<div class="namer" style="text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">pokemon</div><div class="tradr" style="text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">"traduction"</div><div class="sepr" style="background-color:#fac525;box-shadow: 0 0 8px #fac525;"></div><div class="flexr"><div class="infor scrollr"><span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">test info</span> test
<span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">test info</span> test</div><div class="imgr" style="border: 1px solid #fac525;"><img src="https://2img.net/u/2617/37/54/58/avatars/849-82.jpg"></div></div><div class="txtrp"><span class="inforp" style="color:#fac525;text-shadow:#fac525 2px 2px 10px, #fac525 -2px -2px 10px;">talent :</span> info</div><div class="txtr">texte</div></div></div>
Code:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>.scrollm::-webkit-scrollbar {width:5px;} .scrollm::-webkit-scrollbar-track {background:red; border:2px solid white;} .scrollm::-webkit-scrollbar-thumb {background:white; border:1px solid red;} .u1{text-transform:uppercase; font-family:Roboto; letter-spacing:2px; text-shadow:1px 1px red; font-size:20px; color:white; font-style:italic;line-height:25px;} .p2{ width:390px; background:#dedede; background-image:url(http://www.plixup.com/pics_core3/15340820125882ika.png); background-repeat:no-repeat; } .zz{margin-left:10px; margin-bottom:10px; box-sizing:border-box; padding:10px; font-size:12px; background:white; width:370px; }.ongletf{cursor: pointer;} .ongletcont{display: none;} .zone_onglet input {display: none;} input:checked + .ongletcont{display: block;} .sup{position:relative;top:150px;text-align:right;font-size:30px;margin-right:10px;}</style>
<div style="margin:auto;width:600px;"> <div style="display:flex;"> <div style="width:180px;padding:10px;margin-right:10px;background:#dedede;"> <div style="background:white;height:190px;margin-bottom:10px;box-sizing:border-box;padding:10px;overflow:auto;"> <label for="INTRO" class="ongletf"><div class="u1">intro</div></label> <label for="SAC" class="ongletf"><div class="u1">inventaire</div></label> <label for="PROG" class="ongletf"><div class="u1">progression</div></label> <label for="SEC" class="ongletf"><div class="u1">secrétariat</div></label> <label for="DIVERS" class="ongletf"><div class="u1">divers</div></label> </div> <div style="display:flex;"> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> </div> </div> <div class="p2"> <div class="u1 sup">surnom</div> <div class="zone_onglet" style="margin-top:190px;"><input id="INTRO" type="radio" name="ongletf" checked="" /><div class="ongletcont"><div class="zz scrollm"><div class="u1">titre</div>gneh</div><div class="zz scrollm"><div class="u1">titre</div>gneh</div><!--ICI--></div><input id="SAC" type="radio" name="ongletf" /><div class="ongletcont"><div class="zz scrollm"><div class="u1">titre sac</div>gneh</div><!--ICI--></div><input id="PROG" type="radio" name="ongletf" /><div class="ongletcont"><div class="zz scrollm"><div class="u1">titre progression</div>gneh</div><!--ICI--></div><input id="SEC" type="radio" name="ongletf"/><div class="ongletcont"><div class="zz scrollm"><div class="u1">titre secrétariat</div>gneh</div><!--ICI--></div><input id="DIVERS" type="radio" name="ongletf"/><div class="ongletcont"><div class="zz scrollm"><div class="u1">titre divers</div>gneh</div><!--ICI--></div><!--ici la suite--></div></div></div>
Code:
<div class="zz scrollm"><div class="u1">titre divers</div>gneh</div>
Code:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style> .scrollm::-webkit-scrollbar {width:5px;} .scrollm::-webkit-scrollbar-track {background:red; border:2px solid white;} .scrollm::-webkit-scrollbar-thumb {background:white; border:1px solid red;} .u1{text-transform:uppercase; font-family:Roboto; letter-spacing:2px; text-shadow:1px 1px red; font-size:20px; color:white; font-style:italic;line-height:25px;} .p2{padding-bottom:10px; width:390px; background:#dedede; background-image:url(http://www.plixup.com/pics_core3/15340820125882ika.png); background-repeat:no-repeat; } .zzp{margin-right:10px;margin-left:10px; margin-bottom:5px; box-sizing:border-box; padding:10px; font-size:12px; background:white; max-height:200px;overflow:auto;}.ongletp{cursor: pointer;} .ongletcontp{display: none;} .zone_ongletp input {display: none;} input:checked + .ongletcontp{display: block;} .zzpk{height:112px; box-sizing:border-box; padding:5px; font-size:12px; background:white; width:253px;overflow:auto;}.sup{position:relative;top:150px;text-align:right;font-size:30px;margin-right:10px;} .dispo{display:flex;margin-right:10px;margin-left:10px;margin-bottom:5px;margin-top:190px;} .spripo{width:100px;height:100px;border:2px solid white;padding:4px; margin-right:5px;} </style>
<div style="margin:auto;width:600px;"> <div style="display:flex;"> <div style="width:180px;padding:10px;margin-right:10px;background:#dedede;"> <div style="background:white;height:190px;margin-bottom:10px;box-sizing:border-box;padding:10px;overflow:auto;"> <label for="POKEMON1" class="ongletp"><div class="u1">pokemon 1</div></label> <label for="POKEMON2" class="ongletp"><div class="u1">pokemon 2</div></label> <!--NOUVEAU BOUTON--> </div> <div style="display:flex;"> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> </div> </div> <div class="zone_ongletp"><input id="POKEMON1" type="radio" name="ongletp" checked="" /><div class="ongletcontp"><div class="p2" style="background-image:url(IMAGE EN 390X200);"> <div class="u1 sup">surnom</div><div class="dispo"><div class="spripo"><img src="SPRITE OU 100X100" style="width:100px;height:100px;"></div><div class="zzpk scrollm"><div class="u1">titre divers</div>gneh</div></div><div class="zzp scrollm"><div class="u1">titre divers</div>gneh</div><!--ICI--></div></div><input id="POKEMON2" type="radio" name="ongletp" /><div class="ongletcontp"><div class="p2" style="background-image:url(IMAGE EN 390X200);"> <div class="u1 sup">surnom 2</div><div class="dispo"><div class="spripo"><img src="SPRITE OU 100X100" style="width:100px;height:100px;"></div><div class="zzpk scrollm"><div class="u1">titre divers</div>gneh</div></div><div class="zzp scrollm"><div class="u1">titre divers</div>gneh</div><!--ICI--></div></div><!-- NOUVEL ONGLET--></div></div></div> </div>
Code:
<label for="POKEMON2" class="ongletp"><div class="u1">pokemon 2</div></label>
Code:
<input id="POKEMON2" type="radio" name="ongletp" /><div class="ongletcontp"><div class="p2" style="background-image:url(IMAGE EN 390x200);"> <div class="u1 sup">surnom 2</div><div class="dispo"><div class="spripo"><img src="SPRITE OU IMAGE 100 x 100" style="width:100px;height:100px;"></div><div class="zzpk scrollm"><div class="u1">titre divers</div>gneh</div></div><div class="zzp scrollm"><div class="u1">titre divers</div>gneh</div><!--ICI--></div></div>
Code:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>.u1{text-transform:uppercase; font-family:Roboto; letter-spacing:2px; text-shadow:1px 1px red; font-size:20px; color:white; font-style:italic;line-height:25px;} .p2{padding-bottom:10px; width:390px; background:#dedede; background-image:url(http://www.plixup.com/pics_core3/15340820125882ika.png); background-repeat:no-repeat; } .zzp{margin-right:10px;margin-left:10px; margin-bottom:5px; box-sizing:border-box; padding:10px; font-size:12px; background:white; max-height:200px;overflow:auto;}.ongletr{cursor: pointer;} .ongletcontr{display: none;} .zone_ongletr input {display: none;} input:checked + .ongletcontr{display: block;}.sup{position:relative;top:150px;text-align:right;font-size:30px;margin-right:10px;} .scrollm::-webkit-scrollbar {width:5px;} .scrollm::-webkit-scrollbar-track {background:red; border:2px solid white;} .scrollm::-webkit-scrollbar-thumb {background:white; border:1px solid red;}</style>
<div style="margin:auto;width:600px;"> <div style="display:flex;"> <div style="width:180px;padding:10px;margin-right:10px;background:#dedede;"> <div style="background:white;height:190px;margin-bottom:10px;box-sizing:border-box;padding:10px;overflow:auto;"> <label for="RELA1" class="ongletr"><div class="u1">rela 1</div></label> <label for="RELA2" class="ongletr"><div class="u1">rela 2</div></label> <!--NOUVEAU BOUTON --> </div> <div style="display:flex;"> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> <div style="border:2px solid white;padding:4px; margin-right:5px;"> <img src="https://78.media.tumblr.com/d207f4f19c3bdf96cd3d5d4f0a112b7d/tumblr_inline_ntjv4khQBH1ruuzjz_100.png" style="width:45px;height:45px;"> </div> </div> </div> <div class="zone_ongletr"><input id="RELA1" type="radio" name="ongletr" checked="" /><div class="ongletcontr"><div class="p2" style="background-image:url(IMAGE EN 390X200);"> <div class="u1 sup">surnom</div><div class="zzp scrollm" style="margin-top:190px;"><div class="u1">titre divers</div>gneh </div><!--ICI--></div></div><input id="RELA2" type="radio" name="ongletr" /><div class="ongletcontr"><div class="p2" style="background-image:url(IMAGE EN 390X200);"> <div class="u1 sup">surnom 2</div><div class="zzp scrollm" style="margin-top:190px;"><div class="u1">titre divers</div>gneh</div><!--ICI--></div></div><!-- NOUVEL ONGLET--></div></div></div>
Code:
<div class="zzp scrollm"><div class="u1">titre divers</div>gneh</div>
Code:
<label for="RELA2" class="ongletr"><div class="u1">rela 2</div></label>
Code:
<input id="RELA2" type="radio" name="ongletr" /><div class="ongletcontr"><div class="p2" style="background-image:url(IMAGE EN 390X200);"> <div class="u1 sup">surnom 2</div><div class="zzp scrollm" style="margin-top:190px;"><div class="u1">titre divers</div>gneh</div><!--ICI--></div></div>
Code:
:root{--main-color: red; --white-color: #fff; --font-color: #1a1a1a;}
Code:
<label for="pX" class="ongletfde"><div class="ic_de"><img src="MINI SPRITE"></div></label>
Code:
<input id="pX" type="radio" name="ongletfde"/><div class="ongletcontde"><div class="fond_de"><div class="surnom_de">SURNOM X</div><div class="scrolldes info_de">INFOS DIVERSES</div><div class="bordertop_de"></div><div class="scrolldes desc_de">DESCRIPTION POKEMON</div><div class="borderbot_de"></div><div style="display:flex;margin-top:10px;"><div class="scrolldes stat_de">PV : 78
ATT : 65
ATT S : 112
DEF : 68
DEF S : 154
VIT : 75</div><div class="scrolldes comp_de">Recherche : 1
Duel : 0
Beauté : 3
Athlétisme : 0 </div></div><div class="scrolldes att_de">ATTAQUES</div><div class="img_de"><img src="SPRITE DU POKEMON EN 100x100" style="width:100px;height:100px;"></div></div></div>
Code:
<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet"><style> .carte_ongletf{cursor: pointer;} .carte_ongletcont{display: none;} .carte_zone_onglet input {display: none;} input:checked + .carte_ongletcont{display: block;} @font-face {font-family: 'arthur'; src: url('https://files.jcink.net/uploads/maxmax/King_Arthur_Legend.ttf'); font-weight: normal;font-style: normal;} .carte_border{ background:#1a0000; width:550px; height:700px; margin:auto; } .carte_bg{ background:#330000; position:relative;top:20px;left:20px; height:660px;width:510px; border-radius:2%; } .carte_h1{ font-family:Arthur; color:white; text-align:center; position:relative; top:30px; font-size: 25px; } .carte_bg_img { position:relative;top:50px;left:25px; } .carte_zonebtn{ width:240px;height:50px; position:relative;left:140px;top:40px; display:flex; } .carte_btn{ border-radius: 100%;height:50px;width:50px; margin-right:10px;box-sizing:border-box;box-shadow:3px 3px #1a0000; background:white;padding:15px;text-align:center; font-family:Garamond;color:#800000;font-weight:bold;font-size:17px; } .carte_txt{ height:500px;width:480px;overflow:auto; position:relative; top:40px;left:10px; margin-bottom:12px;padding-right:10px; } .carte_item{ display:flex;margin-bottom:5px; border-bottom:3px double #1a0000; } .carte_img{ width:50px; height:80px; margin-right:10px;margin-bottom:5px; } .carte_img img{ width:50px; height:80px; } .carte_itemtxt{ width:480px;height:80px; overflow:auto; color:white; font-family:Garamond;font-size:12px;text-align:justify; } .carte_h2{ font-weight:bold; font-style:italic; text-transform:uppercase; letter-spacing: 2px; } .carte-botbo{background:#1a0000;width:550px;margin:auto;height:180px;} .carte-bottxt{ color:white;overflow:auto;font-family:Garamond;font-size:12px; text-align:justify;height:100px;background:#330000; position:relative;top:20px;left:20px;width:470px;border-radius:4%;padding:20px } .carte_scroll::-webkit-scrollbar {width: 4px;} .carte_scroll::-webkit-scrollbar-track {background-color: #330000;} .carte_scroll::-webkit-scrollbar-thumb {background-color: white;}</style><div class="carte_zone_onglet"> <input id="couv" type="radio" name="carte_ongletf" checked="" /> <div class="carte_ongletcont"> <div class="carte_border"> <div class="carte_bg"> <div class="carte_h1">The Vestal Forgiveness</div> <img src="http://www.plixup.com/pics_core3/15387349596282ffBlason_Reece.png" class="carte_bg_img"> <div class="carte_zonebtn"> <label for="couv" class="carte_ongletf"><div class="carte_btn">I</div></label> <label for="f1" class="carte_ongletf"><div class="carte_btn">II</div></label> <label for="f2" class="carte_ongletf"><div class="carte_btn">III</div></label> <label for="f3" class="carte_ongletf"><div class="carte_btn">IV</div></label> </div> </div> </div> </div> <!-- fin du premier onglet--> <input id="f1" type="radio" name="carte_ongletf"/> <div class="carte_ongletcont"> <div class="carte_border"> <div class="carte_bg"> <div class="carte_h1">Game 1</div> <div class="carte_txt carte_scroll"> <div class="carte_item"> <div class="carte_img"><img src="https://via.placeholder.com/350x150"></div> <div class="carte_itemtxt carte_scroll"> <span class="carte_h2">titre1</span> prix
effet
desc </div> </div> <!--Nouvel item ici --> </div> <div class="carte_zonebtn"> <label for="couv" class="carte_ongletf"><div class="carte_btn">I</div></label> <label for="f1" class="carte_ongletf"><div class="carte_btn">II</div></label> <label for="f2" class="carte_ongletf"><div class="carte_btn">III</div></label> <label for="f3" class="carte_ongletf"><div class="carte_btn">IV</div></label> </div> </div> </div> </div> <!-- fin du deuxième onglet--> <input id="f2" type="radio" name="carte_ongletf"/> <div class="carte_ongletcont"> <div class="carte_border"> <div class="carte_bg"> <div class="carte_h1">Game 2</div> <div class="carte_txt carte_scroll"> <div class="carte_item"> <div class="carte_img"><img src="https://via.placeholder.com/350x150"></div> <div class="carte_itemtxt carte_scroll"> <span class="carte_h2">titre1</span> prix
effet
desc </div> </div> <!--Nouvel item ici --> </div> <div class="carte_zonebtn"> <label for="couv" class="carte_ongletf"><div class="carte_btn">I</div></label> <label for="f1" class="carte_ongletf"><div class="carte_btn">II</div></label> <label for="f2" class="carte_ongletf"><div class="carte_btn">III</div></label> <label for="f3" class="carte_ongletf"><div class="carte_btn">IV</div></label> </div> </div> </div> </div> <!-- fin du troisième onglet--> <input id="f3" type="radio" name="carte_ongletf"/> <div class="carte_ongletcont"> <div class="carte_border"> <div class="carte_bg"> <div class="carte_h1">Game 3</div> <div class="carte_txt carte_scroll"> <div class="carte_item"> <div class="carte_img"><img src="https://via.placeholder.com/350x150"></div> <div class="carte_itemtxt carte_scroll"> <span class="carte_h2">titre1</span> prix
effet
desc </div> </div> <!--Nouvel item ici --> </div> <div class="carte_zonebtn"> <label for="couv" class="carte_ongletf"><div class="carte_btn">I</div></label> <label for="f1" class="carte_ongletf"><div class="carte_btn">II</div></label> <label for="f2" class="carte_ongletf"><div class="carte_btn">III</div></label> <label for="f3" class="carte_ongletf"><div class="carte_btn">IV</div></label> </div> </div> </div> </div> <!-- fin du quatrième onglet--></div><br><div class="carte-botbo"> <div class="carte-bottxt carte_scroll"> info diverses </div></div>
Code:
<div class="carte_item"> <div class="carte_img"><img src="https://via.placeholder.com/350x150"></div> <div class="carte_itemtxt carte_scroll"> <span class="carte_h2">titre1</span> prix
effet
desc </div> </div>
Code:
<style>.ongletf{cursor: pointer;} .ongletcont{display: none;} .zone_onglet input {display: none;} input:checked + .ongletcont{display: block;}</style>
<center><div style="width: 500px; background-image:url('http://www.plixup.com/pics_core3/15309728378780dd.jpg'); background-position:center; background-repeat: repeat;">
<div style="width: 470px; background-color: #FEFEFE;">
<div class="titregrand">Equipe</div>
<div style="width:420px;border:1px solid #DFF2FF; padding:5px;margin-bottom:5px;"><label for="PKM1" class="ongletf"><img src="http://pokemontrash.com/pokedex/images/minixy/671.png"></label><label for="PKM2" class="ongletf"><img src="http://pokemontrash.com/pokedex/images/minixy/676.png"></label><!--NOUVEAU BOUTON ICI--></div><div class="zone_onglet"><input id="PKM1" type="radio" name="ongletf" checked="" /><div class="ongletcont"><div class="titregrand">Surnom du pokemon</div>
<table><td><div class="icon"><img src="http://pldh.net/media/pokemon/gen5/blackwhite/282.png"/></div></td><td><div class="pokemonboxbleu ; escalier"><div class="titrepokemonclair">Espèce pokemon</div>
<div class="titrepokemonclair">Nature pokemon </div>
<div class="titrepokemonclair">Type </div></div></td><td><div class="pokemonboxblanc ; escalier"><div class="titrepokemon">Talent</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></table>
<table><td><div class="pokemonboxblanche ; escalier"><div class="titrepokemonlala">Description</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></td><td><div class="pokemonboxbleu ; escalier"><img src="http://www.pokepedia.fr/images/b/ba/Miniat_type_normal_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/2/26/Miniat_type_psy_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/94/Miniat_type_eau_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/e3/Miniat_type_plante_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/3/32/Miniat_type_insecte_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/96/Miniat_type_feu_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/7/7b/Miniat_type_dragon_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/4/44/Miniat_type_%C3%A9lectrik_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/f/f8/Miniat_type_combat_5_n.png"/> - Nom de l'attaque
<img src="https://www.pokebip.com/pokedex/images/gen6_types/18.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/1/17/Miniat_type_poison_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a4/Miniat_type_glace_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a0/Miniat_type_sol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/b/b4/Miniat_type_t%C3%A9n%C3%A8bres_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/0/01/Miniat_type_roche_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/9a/Miniat_type_spectre_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/5/54/Miniat_type_vol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/ee/Miniat_type_acier_5_n.png"/> - Nom de l'attaque</div></td></table>
</div><!--NOUVEL ONGLET ICI--><input id="PKM2" type="radio" name="ongletf"/><div class="ongletcont"><div class="titregrand">Surnom du pokemon 2</div>
<table><td><div class="icon"><img src="http://pldh.net/media/pokemon/gen5/blackwhite/282.png"/></div></td><td><div class="pokemonboxbleu ; escalier"><div class="titrepokemonclair">Espèce pokemon</div>
<div class="titrepokemonclair">Nature pokemon </div>
<div class="titrepokemonclair">Type </div></div></td><td><div class="pokemonboxblanc ; escalier"><div class="titrepokemon">Talent</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></table>
<table><td><div class="pokemonboxblanche ; escalier"><div class="titrepokemonlala">Description</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></td><td><div class="pokemonboxbleu ; escalier"><img src="http://www.pokepedia.fr/images/b/ba/Miniat_type_normal_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/2/26/Miniat_type_psy_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/94/Miniat_type_eau_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/e3/Miniat_type_plante_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/3/32/Miniat_type_insecte_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/96/Miniat_type_feu_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/7/7b/Miniat_type_dragon_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/4/44/Miniat_type_%C3%A9lectrik_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/f/f8/Miniat_type_combat_5_n.png"/> - Nom de l'attaque
<img src="https://www.pokebip.com/pokedex/images/gen6_types/18.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/1/17/Miniat_type_poison_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a4/Miniat_type_glace_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a0/Miniat_type_sol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/b/b4/Miniat_type_t%C3%A9n%C3%A8bres_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/0/01/Miniat_type_roche_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/9a/Miniat_type_spectre_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/5/54/Miniat_type_vol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/ee/Miniat_type_acier_5_n.png"/> - Nom de l'attaque</div></td></table>
</div><!--NOUVEL ONGLET ICI--></div>
</div>
</div></center>
Code:
<label for="PKM2" class="ongletf"><img src="http://pokemontrash.com/pokedex/images/minixy/676.png"></label
Code:
<input id="PKM2" type="radio" name="ongletf"/><div class="ongletcont"><div class="titregrand">Surnom du pokemon 2</div>
<table><td><div class="icon"><img src="http://pldh.net/media/pokemon/gen5/blackwhite/282.png"/></div></td><td><div class="pokemonboxbleu ; escalier"><div class="titrepokemonclair">Espèce pokemon</div>
<div class="titrepokemonclair">Nature pokemon </div>
<div class="titrepokemonclair">Type </div></div></td><td><div class="pokemonboxblanc ; escalier"><div class="titrepokemon">Talent</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></table>
<table><td><div class="pokemonboxblanche ; escalier"><div class="titrepokemonlala">Description</div> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto, eaque ipsa quae ab illo inventore veritatis et quasi architecto</div></td><td><div class="pokemonboxbleu ; escalier"><img src="http://www.pokepedia.fr/images/b/ba/Miniat_type_normal_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/2/26/Miniat_type_psy_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/94/Miniat_type_eau_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/e3/Miniat_type_plante_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/3/32/Miniat_type_insecte_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/96/Miniat_type_feu_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/7/7b/Miniat_type_dragon_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/4/44/Miniat_type_%C3%A9lectrik_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/f/f8/Miniat_type_combat_5_n.png"/> - Nom de l'attaque
<img src="https://www.pokebip.com/pokedex/images/gen6_types/18.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/1/17/Miniat_type_poison_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a4/Miniat_type_glace_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/a/a0/Miniat_type_sol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/b/b4/Miniat_type_t%C3%A9n%C3%A8bres_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/0/01/Miniat_type_roche_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/9/9a/Miniat_type_spectre_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/5/54/Miniat_type_vol_5_n.png"/> - Nom de l'attaque
<img src="http://www.pokepedia.fr/images/e/ee/Miniat_type_acier_5_n.png"/> - Nom de l'attaque</div></td></table>
</div>
Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Charmonman|EB+Garamond" rel="stylesheet"><style>.onglets{cursor: pointer;} .ongletconts{display: none;} .zone_onglets input {display: none;} input:checked + .ongletconts{display: block;} .btn{padding: 10px; background-color:black;font-size: 20px;border-radius:100%;} .mr10{margin-right:10px;} .cbbtn{color:white;} .titre_TR{font-size:25px; font-family:Charmonman;} .img_r{float:right;margin-left:5px;} .img_l{float:left;margin-right:5px;} .scroll::-webkit-scrollbar {width: 6px;}.scroll::-webkit-scrollbar-track {background-color: white;} .scroll::-webkit-scrollbar-thumb {background-color: black;} .page_r{width:500px;height:600px;box-sizing:border-box;background:white;text-align:justify;padding:20px;font-family:EB Garamond;font-size:12px; overflow:auto;}</style>
<center><div class="zone_onglets"><input id="f1" type="radio" name="onglets" checked="" /><div class="ongletconts"><div style="width:500px;height:600px;box-sizing:border-box;background:black;text-align:center;display:table-cell;vertical-align:middle; color:white;font-family:Charmonman;font-size:30px;">hey</div>
<div style="margin-top:20px;"><label for="f2" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f2" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll"><div class="titre_TR">Un joli titre</div><img src="https://images3.imgbox.com/5a/1f/PxO3vgMH_o.jpg" class="img_r">hey Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with flat side of silver dagger, releases juice better than cutting. Full moon Whomping Willow three turns should do it lemon drops. Locomotor trunks owl treats that will be 50 points, Mr. Potter. Witch Weekly, he will rise again and he will come for us, headmaster Erumpent horn. Fenrir Grayback horseless carriages ‘zis is a chance many would die for!
Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost Hermione spell bezoar Scabbers. Peruvian-Night-Powder werewolf, Dobby pear-tickle half-moon-glasses, Knight-Bus. Padfoot snargaluff seeker: Hagrid broomstick mischief managed. Snitch Fluffy rock-cake, 9 ¾ dress robes I must not tell lies. Mudbloods yew pumpkin juice phials Ravenclaw’s Diadem 10 galleons Thieves Downfall. Ministry-of-Magic mimubulus mimbletonia Pigwidgeon knut phoenix feather other minister Azkaban. Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden forest grindylows wool socks.
Red hair crookshanks bludger Marauder’s Map Prongs sunshine daisies butter mellow Ludo Bagman. Beaters gobbledegook N.E.W.T., Honeydukes eriseD inferi Wormtail. Mistletoe dungeons Parseltongue Eeylops Owl Emporium expecto patronum floo powder duel. Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. Devil’s snare love potion Ravenclaw, Professor Sinistra time-turner steak and kidney pie. Cabbage Daily Prophet letters from no one Dervish and Banges leg.<img src="https://images3.imgbox.com/5a/1f/PxO3vgMH_o.jpg" class="img_l">Squashy armchairs dirt on your nose brass scales crush the Sopophorous bean with flat side of silver dagger, releases juice better than cutting. Full moon Whomping Willow three turns should do it lemon drops. Locomotor trunks owl treats that will be 50 points, Mr. Potter. Witch Weekly, he will rise again and he will come for us, headmaster Erumpent horn. Fenrir Grayback horseless carriages ‘zis is a chance many would die for!
Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost Hermione spell bezoar Scabbers. Peruvian-Night-Powder werewolf, Dobby pear-tickle half-moon-glasses, Knight-Bus. Padfoot snargaluff seeker: Hagrid broomstick mischief managed. Snitch Fluffy rock-cake, 9 ¾ dress robes I must not tell lies. Mudbloods yew pumpkin juice phials Ravenclaw’s Diadem 10 galleons Thieves Downfall. Ministry-of-Magic mimubulus mimbletonia Pigwidgeon knut phoenix feather other minister Azkaban. Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden forest grindylows wool socks.
Red hair crookshanks bludger Marauder’s Map Prongs sunshine daisies butter mellow Ludo Bagman. Beaters gobbledegook N.E.W.T., Honeydukes eriseD inferi Wormtail. Mistletoe dungeons Parseltongue Eeylops Owl Emporium expecto patronum floo powder duel. Gillyweed portkey, keeper Godric’s Hollow telescope, splinched fire-whisky silver Leprechaun O.W.L. stroke the spine. Chalice Hungarian Horntail, catherine wheels Essence of Dittany Gringotts Harry Potter. Prophecies Yaxley green eyes Remembrall horcrux hand of the servant. Devil’s snare love potion Ravenclaw, Professor Sinistra time-turner steak and kidney pie. Cabbage Daily Prophet letters from no one Dervish and Banges leg.</div>
<div style="margin-top:20px;"><label for="f1" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f3" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f3" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 3</div>
<div style="margin-top:20px;"><label for="f2" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f4" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f4" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 4</div>
<div style="margin-top:20px;"><label for="f3" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f5" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f5" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 5</div>
<div style="margin-top:20px;"><label for="f4" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f6" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f6" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 6</div>
<div style="margin-top:20px;"><label for="f5" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f7" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f7" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 7</div>
<div style="margin-top:20px;"><label for="f6" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="f8" class="onglets btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="f8" type="radio" name="onglets"/><div class="ongletconts"><div class="page_r scroll">page 8</div>
<div style="margin-top:20px;"><label for="f7" class="onglets btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label></div></div><!--NOUVEL ONGLET--></div></center>
Code:
<div class="titre_TR">Un joli titre</div>
<img src="IMG" class="img_r">(une image à droite)
<img src="IMG" class="img_l">(une image à gauche)
Code:
<link href="https://fonts.googleapis.com/css?family=Lato|Romanesco" rel="stylesheet"><style> :root{ --main-color:#FFE4BA; --sub-color:rgba(216, 188, 145, 0.7); } .bgcard_ed{ width:600px; height:320px; background-color:var(--main-color); background-image:url(https://cdnw.nickpic.host/BAsjZX.png); margin:auto; color:black;} .naca_ed{ line-height:30px; font-family:Romanesco; font-size:30px; text-align:right; padding-right:30px; padding-top:140px; } .fr_ed{ width:600px; height:320px; background-color:var(--main-color); background-image:url(https://cdnw.nickpic.host/BAs55b.png); opacity:0; position:relative; top:-262px; transition:2s ease; } .fr_ed:hover{ transition:2s ease; opacity:1; } .fr_ed:hover .stamp_ed{ opacity:1; transition:2s ease; } .stamp_ed{ background-image:url(https://cdnw.nickpic.host/BAsqsp.png); width:122px; height:116px; position:relative; top:140px; margin:auto; opacity:0; transition:2s ease; } .onglet_ed{cursor: pointer;} .ongletcont_ed{display: none;} .zone_onglet_ed input {display: none;} input:checked + .ongletcont_ed{display: block;} .bgfi_ed{ width:600px; height:1470px; background-color:var(--main-color); background-image:url(https://cdnw.nickpic.host/BAsSMf.md.png);margin:auto; color:black;} .nafi_ed{ font-family:Romanesco; font-size:40px; position:relative; left:20px; top:20px; } .info_ed{ background:var(--sub-color); width:380px; height:95px; padding:10px; margin-left:15px; margin-top:38px; margin-bottom:10px;overflow:auto; font-family:Lato; font-size:12px; text-align:justify; } .info_ed span{ text-transform:uppercase; font-weight:bold; } .ic_ed{ float:right; width:150px; height:150px; margin-top:20px; margin-right:20px; } .ic_ed img{ width:150px; height:150px; } .ti_ed{ width:580px; font-family:Romanesco; font-size:39px; text-align:left; margin-left:20px; margin-bottom:10px;} .bo_ed{ margin:auto; width:540px; background-color:var(--sub-color); padding:10px; height:200px; overflow:auto; font-size:12px; font-family:Lato; text-align:justify; margin-bottom:10px;} .flex_ed{ display:flex; width:560px; margin-top:20px; margin-left:20px; } .sp_ed{width:100px;height:100px;border-radius:100%;margin-right:10px;} .sp_ed img {width:100px;height:100px;border-radius:100%;} .txt_ed{ width:430px; height:80px; padding:10px; background:var(--sub-color); overflow:auto; font-size:12px; font-family:Lato; text-align:justify; } .txt_ed span{ text-transform:uppercase; font-weight:bold; } .m_ed{ margin-right:0; margin-left:10px; } .re_ed{ font-family:Lato; font-size:10px; text-align:right; padding-right:20px; margin-top:10px; }.scroll_ed::-webkit-scrollbar {width: 6px;}.scroll_ed::-webkit-scrollbar-track {background-color: transparent;}.scroll_ed::-webkit-scrollbar-thumb {background-color: #d8bc91;}</style>
<div class="zone_onglet_ed"> <input id="enveloppe" type="radio" name="onglet_ed" checked=""/> <div class="ongletcont_ed"> <div class="bgcard_ed"> <div class="naca_ed"> Nom Prénom
adresse complètement fausse mais fun
sur genre 3 lignes
comme ça </div> <div class="fr_ed"> <label for="fiche" class="onglet_ed"><div class="stamp_ed"></div> </label> </div> </div> </div> <input id="fiche" type="radio" name="onglet_ed"/> <div class="ongletcont_ed"> <div class="bgfi_ed"> <div class="ic_ed"> <img src="ICON DU PERSO 150x150"> </div> <div class="nafi_ed">Nom Prénom</div> <div class="info_ed scroll_ed"><span>info sur le perso</span> info</div> <div style="clear:both;"></div> <div class="ti_ed">Évolution Envisagée </div> <div class="bo_ed scroll_ed">boite 1 (évolution)</div> <div class="ti_ed">Description</div> <div class="bo_ed scroll_ed">boite 2 (description)</div> <div class="ti_ed">Histoire</div> <div class="bo_ed scroll_ed">boite 3 (histoire)</div> <div class="flex_ed"> <div class="sp_ed"> <img src="SPRITE PKM 1"> </div> <div class="txt_ed scroll_ed"><span>info pkm 1</span> réponse </div> </div> <div class="flex_ed"> <div class="txt_ed scroll_ed"><span>info pkm 2</span> réponse </div> <div class="sp_ed m_ed"> <img src="SPRITE PKM 2"> </div> </div> <div class="flex_ed"> <div class="sp_ed"> <img src="SPRITE PKM 3"> </div> <div class="txt_ed scroll_ed"><span>info pkm3</span> réponse </div> </div> <div class="flex_ed"> <div class="txt_ed scroll_ed"><span>info sur toi</span> réponse </div> <div class="sp_ed m_ed"> <img src="ICON DE TOI"> </div> </div> <div class="re_ed"><label for="enveloppe" class="onglet_ed">retour</label></div> </div> </div></div><a href="http://pokemoncommunity.forumactif.org/u531"><div style="width:600px;margin:auto;text-align:right;font-size:10px;">merci sirius !</div></a>
Code:
<style>:root{ --tenebre: #71574A; --normal: #B4B392; --feu: #F47E41; --combat: #A74B4C; --eau: #9CB8F0; --vol: #C7B8F0; --plante: #A3DB96; --poison: #A3429B; --elek: #FACF53; --sol: #E2BF74; --psy: #FD5686; --roche: #B99F4A; --glace: #BAE6E6; --insecte: #C5D07B; --dragon: #7240EE; --spectre: #A392B9; --acier: #B8B8CE; --fee: #F298AB; --white:#fff; --black:#000; } .zonebtn_ikr{ width:530px; margin:auto; display:flex; flex-wrap:wrap; } .btn_ikr{ border-radius:100%; width:30px; height:30px; background:var(--white); padding:10px; display:block; margin-right:10px; margin-bottom:10px; } .btn_ikr img{width:30px;height:30px;} .onglet_ikr{cursor: pointer;} .ongletcont_ikr{display: none;} .zoneonglet_ikr input {display: none;} input:checked + .ongletcont_ikr{display: block;} .zoneonglet_ikr{ width:530px; margin:auto; color:var(--black); } .flex_ikr{ width:530px; display:flex; margin-bottom:10px; } .sprite_ikr{ width:100px; height:100px; padding:10px; margin-right:10px; background-color:var(--white); background-image:url(http://www.plixup.com/pics_core3/15415088938213Sans_titre_2.png); } .sprite_ikr img{ width:100px; height:100px; } .na_ikr{ background-color:var(--white); width:400px; text-align:right; font-family:Roboto; font-size:20px; box-sizing:border-box; padding:20px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px; margin-bottom:10px; } .in_ikr{ width:400px; box-sizing:border-box; padding:10px; background:var(--white); height:45px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px; font-family:Roboto; font-size:12px; overflow:auto; } .st_ikr{ width:120px; margin-right:10px; height:120px; background:var(--white); box-sizing:border-box; overflow:auto; padding:10px; font-family:Roboto; font-size:12px; } .st_ikr span{ font-weight:bold; font-style:italic; text-transform:uppercase; letter-spacing:-1px; } .de_ikr{ width:400px; background:var(--white); height:120px; overflow:auto; box-sizing:border-box; padding:10px; font-family:Roboto; font-size:12px; } .cp_ikr{ width:120px; margin-right:10px; height:120px; background:var(--white); box-sizing:border-box; overflow:auto; padding:10px; font-family:Roboto; font-size:13px; line-height:20px; } .cp_ikr span{ font-weight:bold; font-style:italic; text-transform:uppercase; letter-spacing:-1px; } .ob_ikr{ width:400px; height:40px; background:var(--white); box-sizing:border-box; padding:10px; font-family:Roboto; font-weight:bold; font-style:italic; letter-spacing:-1px; text-align:center; text-transform:uppercase; margin-bottom:10px; } .at_ikr{ width:400px; background:var(--white); height:70px; box-sizing:border-box; padding:10px; overflow:auto; font-family:Roboto; text-transform:uppercase; font-weight:bold; font-size:11px; display:flex; flex-wrap:wrap; color:var(--white); } .att_ikr{ margin-right:5px; margin-bottom:5px; padding:5px; } .scroll_ikr::-webkit-scrollbar {width: 6px;} .scroll_ikr::-webkit-scrollbar-track {background-color: var(--white);} .scroll_ikr::-webkit-scrollbar-thumb {background-color:var(--black);}</style>
<div class="zonebtn_ikr"> <label for="pkm1" class="onglet_ikr btn_ikr"><img src="MINI SPRITE PKM1"></label> <label for="pkm2" class="onglet_ikr btn_ikr"><img src="MINI SPRITE PKM2"></label><!--NOUVEAU BOUTON AVANT CETTE BALISE--></div><div class="zoneonglet_ikr"> <input id="pkm1" type="radio" name="onglet_ikr" checked="" /> <div class="ongletcont_ikr"> <div class="flex_ikr"> <div class="sprite_ikr"><img src="SPRITE 100x100"></div> <div> <div class="na_ikr"> name </div> <div class="in_ikr scroll_ikr"> INFO</div> </div> </div> <div class="flex_ikr"> <div class="st_ikr scroll_ikr"> <span>statistiques</span>
<span>ATT :</span> 10
<span>ATT Spé :</span> 10
<span>def :</span> 10
<span>def spé :</span> 10
<span>vit :</span> 10
<span>pv :</span> 10 </div> <div class="de_ikr scroll_ikr"> DESCRIPTION AVEC SCROLL</div> </div> <div class="flex_ikr"> <div class="cp_ikr"> <span>Compétences</span>
<span>Prestance :</span> 10
<span>Recherche :</span> 10
<span>Athlétisme :</span> 10
<span>Duel :</span> 10 </div> <div> <div class="ob_ikr scroll_ikr"> objet tenu : l'objet tenu c'est ça </div> <div class="at_ikr scroll_ikr"> <div class="att_ikr" style="background:var(--TYPE);">ATTAQUE</div> <!--NOUVELLE ATTAQUE ICI--> </div> </div> </div> </div> <input id="pkm2" type="radio" name="onglet_ikr"/> <div class="ongletcont_ikr"> <div class="flex_ikr"> <div class="sprite_ikr"><img src="SPRITE 100X100"></div> <div> <div class="na_ikr"> SURNOM </div> <div class="in_ikr scroll_ikr"> INFO AVEC SCROLL</div> </div> </div> <div class="flex_ikr"> <div class="st_ikr scroll_ikr"> <span>statistiques</span>
<span>ATT :</span> 10
<span>ATT Spé :</span> 10
<span>def :</span> 10
<span>def spé :</span> 10
<span>vit :</span> 10
<span>pv :</span> 10 </div> <div class="de_ikr scroll_ikr">DESCRIPTION AVEC SCROLL </div> </div> <div class="flex_ikr"> <div class="cp_ikr"> <span>Compétences</span>
<span>Prestance :</span> 10
<span>Recherche :</span> 10
<span>Athlétisme :</span> 10
<span>Duel :</span> 10 </div> <div> <div class="ob_ikr scroll_ikr"> objet tenu : l'objet tenu c'est ça </div> <div class="at_ikr scroll_ikr"> <div class="att_ikr" style="background:var(--TYPE);">ATTAQUE</div> <!--NOUVELLE ATTAQUE ICI--></div> </div> </div> </div> <!--NOUVEL ONGLET AVANT CETTE BALISE--></div>
Code:
<label for="pkmX" class="onglet_ikr btn_ikr"><img src="MINI SPRITE PKM2"></label>
Code:
<input id="pkmX" type="radio" name="onglet_ikr"/> <div class="ongletcont_ikr"> <div class="flex_ikr"> <div class="sprite_ikr"><img src="SPRITE 100X100"></div> <div> <div class="na_ikr"> SURNOM </div> <div class="in_ikr scroll_ikr"> INFO AVEC SCROLL</div> </div> </div> <div class="flex_ikr"> <div class="st_ikr scroll_ikr"> <span>statistiques</span>
<span>ATT :</span> 10
<span>ATT Spé :</span> 10
<span>def :</span> 10
<span>def spé :</span> 10
<span>vit :</span> 10
<span>pv :</span> 10 </div> <div class="de_ikr scroll_ikr">DESCRIPTION AVEC SCROLL </div> </div> <div class="flex_ikr"> <div class="cp_ikr"> <span>Compétences</span>
<span>Prestance :</span> 10
<span>Recherche :</span> 10
<span>Athlétisme :</span> 10
<span>Duel :</span> 10 </div> <div> <div class="ob_ikr scroll_ikr"> objet tenu : l'objet tenu c'est ça </div> <div class="at_ikr scroll_ikr"> <div class="att_ikr" style="background:var(--TYPE);">ATTAQUE</div> <!--NOUVELLE ATTAQUE ICI--></div> </div> </div> </div>
Code:
<div class="att_ikr" style="background:var(--TYPE);">ATTAQUE</div>