COMMANDES | Max's codes
Aller à la page : Précédent  1, 2
Paul Nyllis
Paul Nyllis
Région d'origine : Johto
Âge : 19
Niveau : 56
Jetons : 9909
Points d'Expériences : 1646
Todresseur Stratège
Sujet: Re: COMMANDES | Max's codes   Dim 10 Fév - 1:59
Commande de Paul Nyllis

Type de code : Thèse
Maquette ou explications du code souhaité : Je voudrais créer un journal de stratégie pour les prochaines thèses de Paul et pour cela, il me faudrait un codage qui puisse faire défiler les images avec mon texte and co. Ce serait donc des sortes d'onglets (un peu comme pour la fiche de préza d'Inaya, mais mis en page façon journal). Il pourrait donc y avoir l'endroit où cliquer pour changer de page et une bordure qui courrait autour de mes images pour les unifier.
Autres : J'ai rien d'hyper précis en tête, je te fais totalement confiance pour les couleurs et la forme du truc, des onglets,... (en sachant que c'est du format portrait).
Police à utiliser : sur dafont, tu peux trouver la police de Coca-Cola (je l'ai au pire, je te la passe). C'est pas du tout obligatoire, mais je me dis que ça pourrait être sympa de caler quelque part un petit Cat-Thèse quelque part :3
Acceptez vous que le code finisse en libre service ? Non


SCHEMA DU TRUC

_________________
Moodboard:
 
Sirius B. Powell
Sirius B. Powell
Région d'origine : Algatia - Hoenn
Âge : 18 yo
Niveau : 51
Jetons : 2520
Points d'Expériences : 1534
Coordinateur Mode
Sujet: Re: COMMANDES | Max's codes   Lun 4 Mar - 14:39


et voilà pour paul ! j'ai fait au plus simple mais n'hésite pas si tu as une question/besoin particulier Wink


Cat-Thèse


Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"><style>.ongletp{ cursor: pointer;}.ongletcontp{display: none;}.zone_ongletp input{display: none;}input:checked + .ongletcontp{display: block;}.btn{padding: 10px;background-color:black;font-size: 20px;border-radius:100%;}.mr10{margin-right:10px;}.cbbtn{color:white;}.cadrep{ border:5px solid black; background:black; height:760px; width:550px; box-sizing:border-box;box-shadow:1px 1px 1px #000;}.titrep{ font-family:Roboto; font-size:40px; font-weight:bold; font-style:italic; color:white; letter-spacing:-3px; text-transform:uppercase;padding:15px;}</style>

<center><div class="cadrep"> <div class="titrep">Cat-Thèse</div> <div class="zone_ongletp"> <input id="p1" type="radio" name="ongletp" checked="" /><div class="ongletcontp"><img src="IMAGE EN 500X650"><div style="margin-top:20px;"><label for="p2" class="ongletp btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><input id="p2" type="radio" name="ongletp"/><div class="ongletcontp"><img src="IMAGE EN 500X650"><div style="margin-top:20px;"><label for="p1" class="ongletp btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="p3" class="ongletp btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div><!-- nouvel onglet--></div></div></center>

Pour ajouter une page c'est assez simple, tu vas juste avant la balise "nouvel onglet" et tu copie colle ceci :

Code:
<input id="p2" type="radio" name="ongletp"/><div class="ongletcontp"><img src="IMAGE EN 500X650"><div style="margin-top:20px;"><label for="pNUMEROPAGEPRECEDENTE" class="ongletp btn mr10"><i class="fas fa-chevron-circle-left cbbtn"></i></label><label for="pNUMEROPROCHAINEPAGE" class="ongletp btn"><i class="fas fa-chevron-circle-right cbbtn"></i></label></div></div>

et voilà ! tout simple ;D si tu as des questions/soucis, n'hésite pas ok ?

_________________
sirius
liens
atelier
Sirius B. Powell
Sirius B. Powell
Région d'origine : Algatia - Hoenn
Âge : 18 yo
Niveau : 51
Jetons : 2520
Points d'Expériences : 1534
Coordinateur Mode
Sujet: Re: COMMANDES | Max's codes   Lun 4 Mar - 15:56
BON On s'attaque à un gros morceau avec yuna !!

la tcard :
Code:
<style>.scroll_y::-webkit-scrollbar {width:5px;height:0;} .scroll_y::-webkit-scrollbar-track {background:transparent; } .scroll_y::-webkit-scrollbar-thumb {background:var(--dm-color);}/*Lucida Handwriting*/@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;} .ongletfy2{cursor: pointer;} .ongletconty2{display: none;} .zone_onglety2 input {display: none;} input:checked + .ongletconty2{display: block;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.t1_yuna{ font-family:Lucida; color:white; text-align:center; font-size:30px;}.t2_yuna{ font-family:Source Sans Pro; color:white; line-height:25px; font-size:20px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px;}.fl_yuna{ display:flex; background:white; padding:10px; border:1px solid var(--dm-color);}.ic3_yuna{ margin-right:10px;}.ic3_yuna div{ width:100px; height:100px; margin-bottom:5px; padding:1px; border:1px solid var(--dm-color);}.ic3_yuna div img{ width:100px; height:100px;}.cont_yuna{ width:422px;}.znbtn_yuna{ display:flex;}.btn_yuna{ background:var(--main-color); width:101px; height:40px; margin-right:5px; box-sizing:border-box; border:1px solid var(--dm-color); color:white; font-family:Source Sans Pro; text-transform:uppercase; font-size:13px; font-weight:bold; font-style:italic; text-align:center; padding-top:10px; transition: all 0.3s linear;}.btn_yuna:hover{ background:var(--sub-color); border:1px solid var(--ds-color); transition: all 0.3s linear;}.btna_yuna{ background:var(--sub-color); border:1px solid var(--ds-color);}.box3_yuna{ margin-top:5px; height:386px; padding-right:5px; width:414px; font-family:Source Sans Pro; font-size:12px; text-align:justify;overflow:auto;}.box3_yuna span{ text-transform:uppercase; font-weight:bold;}.t3_yuna{ font-family:Lucida; font-size:15px; color:var(--dm-color); border-bottom:1px solid var(--dm-color); margin-bottom:5px;}</style>

<div class="bg_yuna"> <div class="t1_yuna">Yuna Frostheart</div> <div class="t2_yuna">Légende</div> <div class="fl_yuna"> <div class="ic3_yuna"> <div> <img src="https://66.media.tumblr.com/21503ebc4370bfef40d6bdb323d71a40/tumblr_inline_p7h215Zqdt1rvimnb_100.png"/> </div> <div> <img src="https://66.media.tumblr.com/21503ebc4370bfef40d6bdb323d71a40/tumblr_inline_p7h215Zqdt1rvimnb_100.png"/> </div> <div> <img src="https://66.media.tumblr.com/21503ebc4370bfef40d6bdb323d71a40/tumblr_inline_p7h215Zqdt1rvimnb_100.png"/> </div> <div style="margin-bottom:0;"> <img src="https://66.media.tumblr.com/21503ebc4370bfef40d6bdb323d71a40/tumblr_inline_p7h215Zqdt1rvimnb_100.png"/> </div> </div> <div class="cont_yuna"> <div class="zone_onglety2"> <input id="y1" type="radio" name="ongletfy2" checked="" /> <div class="ongletconty2"> <div class="znbtn_yuna"> <label for="y1" class="ongletfy2"> <div class="btn_yuna btna_yuna"> Description </div> </label> <label for="y2" class="ongletfy2"> <div class="btn_yuna"> Progression </div> </label> <label for="y3" class="ongletfy2"> <div class="btn_yuna"> Sac </div> </label> <label for="y4" class="ongletfy2"> <div class="btn_yuna"> Infos </div> </label> </div> <div class="box3_yuna scroll_y"> <div class="t3_yuna">titre 1</div> <span>pour mettre en valeur</span> content</div> </div> <input id="y2" type="radio" name="ongletfy2"/> <div class="ongletconty2"> <div class="znbtn_yuna"> <label for="y1" class="ongletfy2"> <div class="btn_yuna"> Description </div> </label> <label for="y2" class="ongletfy2"> <div class="btn_yuna btna_yuna"> Progression </div> </label> <label for="y3" class="ongletfy2"> <div class="btn_yuna"> Sac </div> </label> <label for="y4" class="ongletfy2"> <div class="btn_yuna"> Infos </div> </label> </div> <div class="box3_yuna scroll_y"> content </div> </div> <input id="y3" type="radio" name="ongletfy2"/> <div class="ongletconty2"> <div class="znbtn_yuna"> <label for="y1" class="ongletfy2"> <div class="btn_yuna"> Description </div> </label> <label for="y2" class="ongletfy2"> <div class="btn_yuna"> Progression </div> </label> <label for="y3" class="ongletfy2"> <div class="btn_yuna btna_yuna"> Sac </div> </label> <label for="y4" class="ongletfy2"> <div class="btn_yuna"> Infos </div> </label> </div> <div class="box3_yuna scroll_y"> content </div> </div> <input id="y4" type="radio" name="ongletfy2"/> <div class="ongletconty2"> <div class="znbtn_yuna"> <label for="y1" class="ongletfy2"> <div class="btn_yuna"> Description </div> </label> <label for="y2" class="ongletfy2"> <div class="btn_yuna"> Progression </div> </label> <label for="y3" class="ongletfy2"> <div class="btn_yuna"> Sac </div> </label> <label for="y4" class="ongletfy2"> <div class="btn_yuna btna_yuna"> Infos </div> </label> </div> <div class="box3_yuna scroll_y"> content </div> </div> <!--onglet--> </div></div></div></div>

les relations :
Code:
<style>.scroll_y::-webkit-scrollbar {width:5px;height:0;} .scroll_y::-webkit-scrollbar-track {background:transparent; } .scroll_y::-webkit-scrollbar-thumb {background:var(--dm-color);}/*Lucida Handwriting*/@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.t1_yuna{ font-family:Lucida; color:white; text-align:center; font-size:30px;}.t2_yuna{ font-family:Source Sans Pro; color:white; line-height:25px; font-size:20px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px;}.rel_yuna{ display:flex; padding:5px; border:1px solid var(--dm-color); background:white; margin-bottom:5px;}.ic1_yuna{ width:100px; height:100px; margin-right:5px; border:1px solid var(--dm-color); padding:1px;}.ic2_yuna{ margin-right:0px; margin-left:5px;}.ic1_yuna img{ width:100px;height:100px;}.relbox_yuna{ width:435px; height:102px; border:1px solid var(--dm-color);}.relbox_yuna:hover .reldesc_yuna{ opacity:1; transition:all 1s linear;}.relname_yuna{ height:102px; box-sizing:border-box; font-family:Lucida; padding-top:30px; text-align:center; font-size:20px;}.relname_yuna div{ font-family:Source Sans Pro; font-size:12px; color:black;}.reldesc_yuna{ height:102px; overflow:auto; box-sizing:border-box; position:relative; top:-102px; opacity:0; transition:all 1s linear; padding:10px; background:white; font-family:Source Sans Pro; text-align:justify; font-size:12px;}</style>
<div class="bg_yuna"> <div class="t1_yuna">Relations</div> <div class="t2_yuna">Légende</div> <div class="rel_yuna"> <div class="ic1_yuna"> <img src="ICON"/> </div> <div class="relbox_yuna"> <div class="relname_yuna"> nom prénom <a href="LIEN"><div>lien musical</div></a> </div> <div class="reldesc_yuna scroll_y"> TXT</div> </div> </div> <div class="rel_yuna"> <div class="relbox_yuna"> <div class="relname_yuna"> nom prénom <a href="LIEN"><div>lien musical</div></a> </div> <div class="reldesc_yuna scroll_y"> TXT</div> </div> <div class="ic1_yuna ic2_yuna"> <img src="ICON"/> </div> </div> <!--ajouter une relation ici--></div>

pour ajouter deux relations, il faut placer ceci avant la balise "ajouter une relation ici" :

Code:
<div class="rel_yuna"> <div class="ic1_yuna"> <img src="ICON"/> </div> <div class="relbox_yuna"> <div class="relname_yuna"> nom prénom <a href="LIEN"><div>lien musical</div></a> </div> <div class="reldesc_yuna scroll_y"> TXT</div> </div> </div> <div class="rel_yuna"> <div class="relbox_yuna"> <div class="relname_yuna"> nom prénom <a href="LIEN"><div>lien musical</div></a> </div> <div class="reldesc_yuna scroll_y"> TXT</div> </div> <div class="ic1_yuna ic2_yuna"> <img src="ICON"/> </div> </div>

Le listing :
Code:
<style>/*Lucida Handwriting*/@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.t1_yuna{ font-family:Lucida; color:white; text-align:center; font-size:30px;}.t2_yuna{ font-family:Source Sans Pro; color:white; line-height:25px; font-size:20px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px;}.ongletfy{cursor: pointer;} .ongletconty{display: none;} .zone_onglety input {display: none;} input:checked + .ongletconty{display: block;}.box1_yuna{ background:white; padding:10px; margin-top:5px; font-family:Source Sans Pro; font-size:12px; color:black;}.t3_yuna{ font-family:Lucida; font-size:15px; color:var(--dm-color); border-bottom:1px solid var(--dm-color); margin-bottom:5px;}.box2_yuna{ padding:10px;}</style>
<div class="bg_yuna"> <div class="t1_yuna">Listing Rp</div> <div class="t2_yuna">Légende</div> <div class="zone_onglety"> <input id="f1" type="radio" name="ongletfy" checked="" /> <div class="ongletconty"> <div class="box1_yuna"> <label for="f1" class="ongletfy"><div class="t3_yuna">Semestre 1</div></label> <div class="box2_yuna"> rp avec truc s1 </div> <label for="f2" class="ongletfy"><div class="t3_yuna">Semestre 2</div></label><!--ajouter un bouton --> </div> </div> <input id="f2" type="radio" name="ongletfy"/> <div class="ongletconty"> <div class="box1_yuna"> <label for="f1" class="ongletfy"><div class="t3_yuna">Semestre 1</div></label> <label for="f2" class="ongletfy"><div class="t3_yuna">Semestre 2</div></label> <div class="box2_yuna"> rp avec truc s2 </div> <!--ajouter un bouton --> </div> </div> <!--nouvel onglet--> </div></div>

pour ajouter un semestre il faut faire deux trucs :
ajouter ceci après les balises "ajouter un nouveau bouton" :
Code:
<label for="fNUMERO DU SEMESTRE" class="ongletfy"><div class="t3_yuna">Semestre X</div></label>
puis ajouter ceci avant la balise "nouvel onglet" :
Code:
<input id="fNUMERODUSEMESTRE" type="radio" name="ongletfy"/> <div class="ongletconty"> <div class="box1_yuna"> <label for="f1" class="ongletfy"><div class="t3_yuna">Semestre 1</div></label> <label for="f2" class="ongletfy"><div class="t3_yuna">Semestre 2</div></label> <!--ajouter les boutons --><label for="fNUMERO DU SEMESTRE" class="ongletfy"><div class="t3_yuna">Semestre X</div></label><div class="box2_yuna"> rp avec truc dans ce semestre </div> <!--ajouter un bouton --> </div> </div>
attention cependant, pour l'esthétisme du code, il faudra penser, à l'ajout de tes nouveaux semestres, à ajouter les anciens boutons (avant la balise ajouter les boutons) si tu as des questions hésite pas, c'est l'aspect un peu complexe :c

les pokémons :
Code:
<style> .ongletfy3{cursor: pointer;} .ongletconty3{display: none;} .zone_onglety3 input {display: none;} input:checked + .ongletconty3{display: block;}.scroll_y::-webkit-scrollbar {width:5px;height:0;} .scroll_y::-webkit-scrollbar-track {background:transparent; } .scroll_y::-webkit-scrollbar-thumb {background:var(--dm-color);}/*Lucida Handwriting*/@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.t1_yuna{ font-family:Lucida; color:white; text-align:center; font-size:30px;}.t2_yuna{ font-family:Source Sans Pro; color:white; line-height:25px; font-size:20px; text-transform:uppercase; font-weight:bold; font-style:italic; letter-spacing:-1px;}.t3_yuna{ font-family:Lucida; font-size:15px; color:var(--dm-color); border-bottom:1px solid var(--dm-color); margin-bottom:5px;}.fl2_yuna{ display:flex;}.spr_yuna{ background:white; padding:10px; border:1px solid var(--dm-color); margin-right:5px; height:213px; overflow:auto; width:32px;}.spr_yuna img{ width:32px; height:32px;}.pk_yuna{ width:480px;}.imgpk_yuna{width:104px;}.imgpk_yuna div { padding:1px; border:1px solid var(--dm-color);}.imgpk_yuna img{ width:100px; height:100px;}.cnpk_yuna{ width:371px; margin-right:5px; height:212px; overflow:auto; font-family: Source Sans Pro; font-size: 12px; text-align: justify;}.cnpk_yuna span { text-transform: uppercase; font-weight: bold;}.fl_yuna{ display:flex; background:white; padding:10px; border:1px solid var(--dm-color);}</style>
<div class="bg_yuna"> <div class="t1_yuna">équipe</div><div class="t2_yuna">Légende</div><div class="fl2_yuna"><div class="spr_yuna scroll_y"> <label for="pk1" class="ongletfy3"> <div> <img src="MINISPRITE 1"> </div> </label><label for="pk2" class="ongletfy3"> <div> <img src="MINI SPRITE 2"> </div> </label> <!--ajouter un bouton--></div><div class="fl_yuna pk_yuna"><div class="zone_onglety3"><input id="pk1" type="radio" name="ongletfy3" checked="" /><div class="ongletconty3"><div class="fl2_yuna"><div class="cnpk_yuna scroll_y"><div class="t3_yuna">wow</div>info pkm<span>mettre en valeur</span></div><div class="imgpk_yuna"><div style="margin-bottom:5px;"><img src="ICON"></div><div><img src="ICON"></div></div></div></div> <input id="pk2" type="radio" name="ongletfy3"/> <div class="ongletconty3"><div class="fl2_yuna"><div class="cnpk_yuna scroll_y"><div class="t3_yuna">wow 2</div>info pkm<span>mettre en valeur</span></div><div class="imgpk_yuna"><div style="margin-bottom:5px;"><img src="ICON"></div><div><img src="ICON"></div></div></div></div> <!-- nouvel onglet--></div></div></div></div>

pour ajouter un pokemon, c'est deux étapes :
ajouter le bouton avant la balise "ajouter un nouveau bouton" :
Code:
<label for="pkNUMERODUPOKEMON" class="ongletfy3"> <div> <img src="MINI SPRITE"> </div> </label>
ajouter l'onglet avant la balise "nouvel onglet" :
Code:
<input id="pkNUMERODUPOKEMON" type="radio" name="ongletfy3"/> <div class="ongletconty3"><div class="fl2_yuna"><div class="cnpk_yuna scroll_y"><div class="t3_yuna">wow 2</div>info pkm<span>mettre en valeur</span></div><div class="imgpk_yuna"><div style="margin-bottom:5px;"><img src="ICON"></div><div><img src="ICON"></div></div></div></div>

le rp :
Code:
<style>/*Lucida Handwriting*/@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.fl2_yuna{ display:flex;}.ic4_yuna{ width:100px; height:100px; margin-right:5px; border:1px solid white; padding:3px;}.ic4_yuna img{ width:100px;height:100px;}.t4_yuna{ font-family: Lucida; color: white; text-align: center; font-size: 17px; width:327px; margin-right:10px;}.t4_yuna span{ font-family:Source Sans pro; text-transform:uppercase; font-weight:bold; font-size:15px;}.rp_yuna{ background:white; padding:10px; border:1px solid var(--dm-color); font-family: Source Sans Pro; font-size: 12px; text-align: justify; margin-top:10px;}</style>
<div class="bg_yuna"> <div class="fl2_yuna"> <div class="ic4_yuna"> <img src="IMG"> </div> <div class="t4_yuna">Titre
 <span>info supplémentaire</span> </div> <div class="ic4_yuna"> <img src="IMG"> </div> </div> <div class="rp_yuna"> rprp </div></div>

et en bonus si ça t'intéresse une pseudo signature :
Code:
<style>@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;} :root{ --main-color: #a1c4fd; --sub-color: #c2e9fb; --dm-color:#9bc1fd;--ds-color: #b7e5fa;}.bg_yuna{ margin:auto; width:600px; padding:20px; box-sizing:border-box; background-image: linear-gradient(160deg, var(--main-color) 0%, var(--sub-color) 100%); border:1px solid var(--dm-color);}.fl2_yuna{ display:flex;}.ic4_yuna{ width:100px; height:100px; margin-right:5px; border:1px solid white; padding:3px;}.ic4_yuna img{ width:100px;height:100px;}.t5_yuna{ font-family: Lucida; color: white; text-align: center; font-size: 17px;}.t5_yuna span{ font-family:Source Sans pro; text-transform:uppercase; font-weight:bold; font-size:15px;}</style>
<div class="bg_yuna"> <div class="fl2_yuna"> <div class="ic4_yuna"> <img src="IMG"> </div> <div class="t5_yuna">ce que tu veux !
<span>un autre style</span> </div> </div></div>

pfiou et voilà ! si tu as la moindre question, n'hésite surtout pas, de même si tu veux des changements ou autre Smile zoubi !

_________________
sirius
liens
atelier
Erika Uchida
Erika Uchida
Région d'origine : Née à Johto, a passée son adolescence à Kalos
Âge : 29
Niveau : 30
Jetons : 2148
Points d'Expériences : 625
Adulte Artiste Geisha
Sujet: Re: COMMANDES | Max's codes   Mar 21 Mai - 14:57
Commande d'Erika

Type de code : T-Card
Maquette ou explications du code souhaité : Alors une refonte de ma T-Card s'impose et j'avoue que à force je commence à faire le tour de mes propres capacités...
Il me faut trois codes pour trois parties distinctes.

Première partie / Premier code : le moodboard
L'idée c'est de regrouper toutes les infos concernant Erika en un moodboard géant. Une case avec des infos généralistes comme la date de naissance, lieu de naissance, couleurs favorite.
Une case concernant sa maison avec l'image de cette dernière et quelques explications sur le lieu.
Une case concernant son actualité people (avec ta magnifique interview).
Une case inventaire.
Une case historique (achat/vente, un secrétariat en bref).
Une case vers les boutiques geishas.
Une case vers le théâtre (?) à voir comment on peut amener ça.
Je ne suis pas contre décliné le nombre de case, mettre des trucs en plus. En bref fait péter ton imagination en un tableau d'image et de texte qui explique tout sur mon Erika **

Deuxième code : Le listing Rp
J'aime beaucoup mon codage en lui-même car il est très simple mais à force ça commence à faire très long. Peut-être des titres déroulant selon la période. Aide moi à rendre ça plus joli et pratique pour ceux qui veulent lire ma chrono T-T

Troisième code : Team Code
J'aime beaucoup mon propre codage mais j'ai quelques soucis d'optimisation. J'aime beaucoup le code que tu as fait pour Ana avec les minis sprites. Peut-être qu'on peut mixer nos codages sur ce principe. Autre chose j'aimerais bien que l'on puisse faire un code couleur. Erika va avoir plusieurs équipes de prédilections pour les concours, les combats spé eau, les combats spé élec ou encore pour le soutien (recherche, plantatation). Un moyen rapide de savoir qui est dans quel équipe serait un code couleur.
PS : Tu peux très bien retoucher tout mon codage, je veux juste garder mes "cases/catégories" que je trouve assez simple de compréhension pour moi lol

Police à utiliser : Je te laisse voir.
Images à utiliser : Celle de la maison d'Erika car elle fixe le lieu (ici)
Autres : Je te demande la lune mais je sais que tu en es capable car tu es une vraie étoile.
Acceptez vous que le code finisse en libre service ? Oui


_________________
Love is always in season.
COMMANDES | Max's codes - Page 2 1560019036-miniat-team03

⚡️ La vie ce n'est pas d'attendre que les orages passent, c'est d'apprendre comment danser sous la pluie - Sénèque
Sirius B. Powell
Sirius B. Powell
Région d'origine : Algatia - Hoenn
Âge : 18 yo
Niveau : 51
Jetons : 2520
Points d'Expériences : 1534
Coordinateur Mode
Sujet: Re: COMMANDES | Max's codes   Ven 7 Juin - 15:13


erika uchida
infos
texte
inventaire
texte
secretariat
texte
comptabilité
texte
Texte texte
Texte texte
Texte texte
Texte texte
Texte texte
Texte texte
texte maison
le quartier du théatre
chez erika
texte boutique
titre de la news people
texte
titre de la news people
texte
type de geisha 1
les infos toussa toussa
type de geisha 2
tu connais les bails
 


on commence gentiment par la première partie du code, j'espère que ça conviendra à l'idée que tu en avais ahaha

le code est juste ici :

Code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css?family=Comfortaa|Roboto&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://www.aht.li/3382319/erika.css" type="text/css"><style>.scrollt::-webkit-scrollbar {width:2px;height:0;} .scrollt::-webkit-scrollbar-track {background:transparent;} .scrollt::-webkit-scrollbar-thumb {background:var(--c7);}.scroll_e::-webkit-scrollbar {width:5px;height:0;} .scroll_e::-webkit-scrollbar-track {background:transparent;} .scroll_e::-webkit-scrollbar-thumb {background:var(--c1);border-bottom:8px solid var(--c2);}:root{ --c1: #e3a6ae; --c2: #eecece; --c3: #f7f7f7; --c4: #fefefe; --c5: #d9d9d9; --c6: #f8ecec; --c7: #e6e6e6; --w: #fff; --b: #000;}</style>

<div class="tope"> <div class="iconse"> <label for="f1" class="onglete"> <div class="icone"> <i class="fas fa-user"></i> <span class="infobulle_e">profil</span> </div> </label> <label for="f2" class="onglete"> <div class="icone"> <i class="fas fa-home"></i> <span class="infobulle_e">maison & théatre</span> </div> </label> <label for="f3" class="onglete"> <div class="icone"> <i class="fas fa-book"></i> <span class="infobulle_e">actualité people</span> </div> </label> <label for="f4" class="onglete"> <div class="icone"> <i class="fab fa-pagelines"></i> <span class="infobulle_e">geisha</span> </div> </label> </div> <div class="trie"></div> <div class="namee">erika uchida</div></div><div class="zone_onglete"> <input id="f1" type="radio" name="onglete" checked="" /> <div class="ongletconte"> <div class="bote"> <div class="infoe scroll_e"> <div class="t1e">infos</div> <div class="b1e scroll_e">texte</div> <div class="t1e">inventaire</div> <div class="b1e scroll_e">texte</div> <div class="t1e">secretariat</div> <div class="b1e scroll_e">texte</div> <div class="t1e">comptabilité</div> <div class="b1e scroll_e">texte</div><!--ajouter une boite--> </div> <div class="icoe"> <div class="icee"> <img src="https://66.media.tumblr.com/9f6601ab6086f054478190f7be1843dd/tumblr_inline_pbh36oZ8xV1rvimnb_100.png"/> </div> <div class="b2e scrollt"> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <div class="eke"> <div> <b>Texte</b> texte </div> </div> <!--ajouter une info--></div> </div> </div> </div><!--nouvel onglet--> <input id="f2" type="radio" name="onglete"/> <div class="ongletconte"> <div class="bote"> <div> <div class="b3e"> <div class="scroll_e"> texte maison </div> </div> <div class="bi1"> <img src="https://i.imgur.com/OjWKDTX.png"> <div>le quartier du théatre</div> </div> </div> <div> <div class="bi1"> <img src="https://i.imgur.com/OjWKDTX.png"> <div style="top:55px;">chez erika</div> </div> <div class="b3e"> <div class="scroll_e"> texte boutique </div> </div> </div> </div> </div><!--nouvel onglet--> <input id="f3" type="radio" name="onglete"/> <div class="ongletconte"> <div class="bote"> <div class="bi2"> <img src="https://sig.grumpybumpers.com/host/ErikaUchida.gif"> </div> <div class="infoe scroll_e"> <div class="t1e">titre de la news people</div> <div class="b1e scroll_e">texte</div> <div class="t1e">titre de la news people</div> <div class="b1e scroll_e">texte</div><!--ajouter une boite--> </div> </div> </div><!--nouvel onglet--> <input id="f4" type="radio" name="onglete"/> <div class="ongletconte"> <div class="bote"> <div class="bi2"> <img src="https://i.imgur.com/AlvRieb.png"> </div> <div class="infoe scroll_e"> <div class="t1e">type de geisha 1 </div> <div class="b1e scroll_e">les infos toussa toussa</div> <div class="t1e">type de geisha 2</div> <div class="b1e scroll_e">tu connais les bails </div><!--ajouter une boite-->  </div> </div> </div> </div><!--nouvel onglet--></div>

maintenant pour les custo dans la balise "style" tout au début, tu vas retrouver une "root", là dedans, c'est les variables des couleurs, tu peux les changer si tu veux. je conseille c1 la plus foncée, c2 intermédiaire et c3 la plus claire, le tout dans des nuances d'une même teinte pour un rendu optimal ~
ensuite, l'icone du profil est en 100x100 normal, tranquille, les images de la partie maison et théâtre sont en 324x164px enfin les deux autres images de activité people et geisha sont en 320x200px la taille standard des avatars pc
ensuite, dans la partie profil, si tu souhaites ajouter un bloc c'est avec ceci avant la balise "ajouter une boite" (ça sera la même chose si tu veux ajouter une boite dans les sections people et geisha
Code:
<div class="t1e">titre</div> <div class="b1e scroll_e">texte</div>
et pour ajouter une info sur le profil à droite sous l'icone c'est avant la balise "ajouter une info" et c'est ce bout de code :
Code:
<div class="eke"> <div> <b>Texte</b> texte </div> </div>

voilà voilà, si tu as des questions sur ce bout de code n'hésite pas et le reste arrive soon Smile

_________________
sirius
liens
atelier
Compte PNJ
Compte PNJ
Région d'origine : -
Âge : -
Niveau : 0
Jetons : 0
Points d'Expériences : 11825
PNJs
Sujet: Re: COMMANDES | Max's codes   Dim 9 Juin - 21:32



yuna frostheart
infos
texte
service
texte
Client
texte
Lucifer
Textetexte
Textetexte
Textetexte
Textetexte
Textetexte


bon lel, ça prend les trucs d'erika mais promis ça marchera comme il faut sur ton sujet à toi xDD

du coup le code est ici :

Code:
<link rel="stylesheet" href="https://www.aht.li/3382985/yuna.css" type="text/css">
<style>@font-face { font-family: 'lucida'; src: url('https://files.jcink.net/uploads/font/LHANDW_TTF.ttf'); font-weight: normal; font-style: normal;}.scrollt::-webkit-scrollbar {width:2px;height:0;} .scrollt::-webkit-scrollbar-track {background:transparent;} .scrollt::-webkit-scrollbar-thumb {background:var(--c7);}.scroll_e::-webkit-scrollbar {width:5px;height:0;} .scroll_e::-webkit-scrollbar-track {background:transparent;} .scroll_e::-webkit-scrollbar-thumb {background:var(--c1);border-bottom:8px solid var(--c2);}:root{ --c1: #a1c4fd; --c2: #c2e9fb; --c3: #f7f7f7; --c4: #fefefe; --c5: #d9d9d9; --c6: #e6effe; --c7: #e6e6e6; --w: #fff; --b: #000;}</style>

<div class="tope"> <div class="iconse"><label for="f1" class="onglete"><div class="icone"><i class="fas fa-home"></i><span class="infobulle_e">pension</span></div></label><label for="f2" class="onglete"><div class="icone"><i class="fas fa-book"></i><span class="infobulle_e">services & tarif</span></div></label><label for="f3" class="onglete"><div class="icone"><i class="fab fa-pagelines"></i><span class="infobulle_e">clients</span></div></label></div><div class="trie"></div><div class="namee">yuna frostheart</div></div><div class="bote"><div class="zone_onglete"><input id="f1" type="radio" name="onglete" checked="" /><div class="ongletconte"><div class="infoe scroll_e"><div class="t1e">infos</div><div class="b4e scroll_e">texte</div></div></div><input id="f2" type="radio" name="onglete"/><div class="ongletconte"><div class="infoe scroll_e"><div class="t1e">service</div><div class="b1e scroll_e">texte</div> <!--nouvelle boite--></div></div><input id="f3" type="radio" name="onglete" checked=""/><div class="ongletconte"><div class="infoe scroll_e"><div class="t1e t2e"> <div>Client</div> <img src="https://i.servimg.com/u/f89/19/48/36/03/yunaqu20.png"/></div><div class="b1e scroll_e">texte</div> <!--nouvelle boite--></div></div></div><div class="icoe"><div class="icee"><img src="https://i.servimg.com/u/f89/19/48/36/03/yunaqu20.png"/></div><div class="b2e scrollt"><div class="eke"><div><b>Lucifer</b><img src="https://i.servimg.com/u/f89/19/48/36/03/lucife13.png"/></div></div><div class="eke"><div><b>Texte</b>texte</div></div><div class="eke"><div><b>Texte</b>texte</div></div><div class="eke"><div><b>Texte</b>texte</div></div><div class="eke"><div><b>Texte</b>texte</div></div><div class="eke"><div><b>Texte</b>texte</div></div> <!--nouveau client--></div></div></div>

pour ajouter une boite c'est avant les commentaires "nouvelle boite ici"
avec le client :
Code:
<div class="t1e t2e"> <div>Client</div> <img src="https://i.servimg.com/u/f89/19/48/36/03/yunaqu20.png"/></div><div class="b1e scroll_e">texte</div>
sans le client :
Code:
<div class="t1e">service</div><div class="b1e scroll_e">texte</div>
nouveau client à droite :
Code:
<div class="eke"><div><b>Texte</b><img src="ICONE"/></div></div>

_________________
COMMANDES | Max's codes - Page 2 7z5c
Enzo White
Enzo White
Région d'origine : Hoenn - Pacifiville
Âge : 23 ans
Niveau : 10
Jetons : 1120
Points d'Expériences : 171
Adulte Blogueur
Sujet: Re: COMMANDES | Max's codes   Lun 24 Juin - 15:18
petit code de thèse pour salomé Smile





salome.pc/theses/nomdelathese


Grand Titre
petit titre
gras souligné italique
texte
texte
texte
wow 2


Code:
<link rel="stylesheet" href="https://www.aht.li/3388667/salome.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap" rel="stylesheet">
<style>.scrolls::-webkit-scrollbar {width:5px;height:0;} .scrolls::-webkit-scrollbar-track {background:transparent;} .scrolls::-webkit-scrollbar-thumb {background:black;}.s1{margin-bottom:5px;}</style>

<div class="tops"> <div class="ics" style="margin-right:10px;"> <i class="fas fa-caret-left"></i> <i class="fas fa-caret-right"></i> </div> <div class="url"> salome.pc/theses/nomdelathese </div> <div class="ics" style="margin-top:3px;margin-left:10px;"> <i class="fas fa-times"></i> </div></div><div class="bots"> <div class="lefts"><div class="icos"><img src="ICON 100X100"/></div><div class="btns"><label for="s1" class="onglets">partie 1</label></br><label for="s2" class="onglets">partie 2</label></br><!--nouveau bouton--></div> </div><div class="zone_onglets"><input id="s1" type="radio" name="onglets" checked=""/> <div class="ongletconts"> <div class="rights scrolls"> TEXTE PARTIE 1</div> </div><input id="s2" type="radio" name="onglets"/> <div class="ongletconts"> <div class="rights scrolls"> TEXTE PARTIE 2</div> </div><!--nouvel onglet--></div></div>

pour ajouter une partie :
- ajoute un bouton avant la balise "nouveau bouton"
Code:
<label for="s2" class="onglets">partie 2</label></br>
remplace le s2 par snumérodelapartie
- ajoute un onglet avant la balise "nouvel onglet"
Code:
<input id="s2" type="radio" name="onglets"/> <div class="ongletconts"> <div class="rights scrolls"> TEXTE PARTIE 2</div> </div>
remplace s2 par snumérodelapartie

là où y'a le gros TEXTE PARTIE tu vas pouvoir utiliser des petits outils pour agrémenter ta présentation :
- un gros titre
Code:
<div class="s1">Grand Titre</div>
- un sous titre
Code:
<div class="s2">Sous Titre</div>
- texte en gras
Code:
<b>gras</b>
- texte en italique
Code:
<i>italique</i>
- texte souligné
Code:
<u>souligné</u>
- image centrée (largueur max 447px)
Code:
<div class="is1"><img src="urlimage"/></div>
- image à droite
Code:
<div class="is2"><img src=""urlimage"/></div>
- image à gauche
Code:
<div class="is3"><img src=""urlimage"/></div>
et tu peux mettre du texte normal, évidement. ça scroll tout seul

n'oublie de changer l'url de ta thèse !!
et si tu as le moindre soucis, n'hésite pas Smile

_________________


traveller
Hagawa Haru
Hagawa Haru
Région d'origine : Unys
Âge : 15
Niveau : 51
Jetons : 3190
Points d'Expériences : 1732
Coordinateur Performer
Sujet: Re: COMMANDES | Max's codes   Jeu 27 Juin - 16:05
Commande de Haru

Type de code : T-Card complète
Maquette ou explications du code souhaité : Blblblb, je m'en sort plus avec ma T-card, du coup je passe par ici ! J'aimerais que se soit quelque chose que je puisse utiliser sur mes trois persos, pour pas me casser la tête ! xD  Honnêtement j'ai pas vraiment d'idée de ce que j'aimerais, donc désoler si c'est assez vague... Du coup je vais m'aider de ce que je trouve le plus cool dans ta galerie !  Quoi qu'il en soit, je sais que ce sera cool ! /PAN/

1. Information de perso : Quelque chose d'assez simple, et qu'on puisse facilement accéder à toutes les info avec les onglets, sans que se trop cafouillis, avec un onglet info, inventaire, progression et divers ( pour pouvoir mettre les CS, ou un lien pour une boutique.. ). Dans l'idée, j'aime beaucoup par exemple ce que t'a fait avec Enzo  ! www

2. Pokémon : Quelque chose qui se rapproche un peu la t-card de Cael www

3.Listing RP : Un code simple, avec juste des titres Vacances, Semestre 1/2 pour pouvoir différencier les rps dans le temps.  

4. Liens : Euh... J'en sais rien, fait comme il te plait ! Tu as carte blanche ! o/


Police à utiliser : Je te laisse géré !
Images à utiliser : Du coup j'aimerais surtout que se soit pour Haru à la base, donc si tu veux tester avec des images de Nagisa, ça me va ! Après c'est surtout pour pouvoir utiliser ce code pour mes trois persos donc osef ! xD
Autres : Je vais aller prier, devant l'hôtel à paillette, ne t'en fait pas ! Et désoler pour donner aussi peu d'info pour ce que je veux... Dans tout les cas, je sais que ce sera génial, donc je m'en fait pas ! Ahah
Acceptez vous que le code finisse en libre service ? Yep bien sûre !


_________________




PHYL THE POWER ! ≈ On part à l'aventuuuuure !
Dakoy Ra
Dakoy Ra
Région d'origine : Sinnoh - Joliberges
Âge : 15
Niveau : 10
Jetons : 1422
Points d'Expériences : 103
Pokeathlète Novice
Sujet: Re: COMMANDES | Max's codes   Jeu 3 Oct - 22:25
Commande de Dakoy

Type de code : T-Card

Maquette ou explications du code souhaité : Coucou toi ! Je fais une demande suite aux magnifiques et inégalables idées que nous avions eu à Montpellier.
De ce que je me souviens, on avait parlé d'une T-Card genre dossier médical, où chaque fiche est une sorte de fiche de suivi de patient. On avait parlé d'un bloc avec les feuilles et des bitoniaux de couleur avec une petite image du pokémon pour passer d'une fiche à l'autre (juste la dimension d'un tout petit sprite) Il faudrait également de quoi mettre une image un peu plus grande (genre sprite normal) sur chaque fiche du coup, et éventuellement une image d'encore plus grande dimension pour la 1e fiche vu que ce sera celle de Dakoy. A part ça, le style devrait être plutôt "classique" pour que ça fasse un peu pro.

Police à utiliser : Celle de base c'est bien, j'imagine mal un dossier médical écrit avec une police My Little Pony (stp le fais pas, même si je sais que tu vas essayer du coup)

Images à utiliser : Que pouic

Autres : Voilà ce dont je me souviens, n'hésite pas à rajouter et personnaliser si tu aimerais rajouter des idées ou fioritures. Je te fais entièrement confiance là-dessus, je sais d'avance que tu feras du très bon travail  Cool  Et pour le délai t'inquiète pas hein, tu te doutes bien que je vais pas te presser :p

Acceptez vous que le code finisse en libre service ? Oui !

Contenu sponsorisé
Sujet: Re: COMMANDES | Max's codes   
COMMANDES | Max's codes
Page 2 sur 2
Aller à la page : Précédent  1, 2
Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
Sauter vers:  
Outils de modération :