:: hors jeu :: créations :: graphisme & codage
(blue) libre service
(blue) libre service Lun 12 Sep - 20:38
inscription : 01/08/2022
Messages : 69
avatar : maya hawke.
gif :
blue's thingies
Comme j'ai récemment participé à un challenge où il fallait coder une page de fiche personnage, j'ai récupéré quelques morceaux de la page en question pour les adapter sur tts : ils iront dans les codes plus "officiels" du forum quand j'aurais rendu le code plus aéré pour poster, mais je les mets là pour l'instant
Tout est personnalisable, of course
Les icons viennent de cappuccicons et peuvent donc être changées avec les codes indiqués sur la page
Tout est personnalisable, of course
Les icons viennent de cappuccicons et peuvent donc être changées avec les codes indiqués sur la page
Petit inventaire pour ce que les personnages ont toujours sur eux ; leurs véhicules, ce que contient leur sac, leurs poches, tout ça. (Les balises span sont pour les descriptions courtes d'une ou deux phrases, la balise p pour les descriptions plus longues.)
never without..
item
short description, quote or sentence item
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel labore animi distinctio debitis harum quaerat aperiam, error est nemo voluptas.
item
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel labore animi distinctio debitis harum quaerat aperiam, error est nemo voluptas.
item
short description, quote or sentence- Code:
<div class="oc-inventory"><div class="oc-title" id="inventory">never without..</div><div class="content"><div class="item"><div class="name"><i class="cp cp-scooter-o"></i> item</div><span>short description, quote or sentence</span></div><div class="item"><div class="name"><i class="cp cp-camera-o"></i> item</div><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel labore animi distinctio debitis harum quaerat aperiam, error est nemo voluptas.</p></div><div class="item"><div class="name"><i class="cp cp-palette-o"></i> item</div><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel labore animi distinctio debitis harum quaerat aperiam, error est nemo voluptas.</p></div><div class="item"><div class="name"><i class="cp cp-wrench-o"></i> item</div><span>short description, quote or sentence</span></div></div></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quasi hic esse assumenda at magnam quidem ipsum minus minima numquam, nam labore pariatur ex architecto quo atque earum vitae excepturi.
- Code:
<div class="oc-fact"><div class="name"><xx>small</xx> <i class="imp-icon cp cp-balloons-o"></i> <xx>fact</xx></div><p><t1 class="medium-accent-bg">minititle</t1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quasi hic esse assumenda at magnam quidem ipsum minus minima numquam, nam labore pariatur ex architecto quo atque earum vitae excepturi.</p></div>
Pour les petits (ou grands) talents qu'ont les personnages, les trucs innés ou ce qu'iels ont appris par la vie, les hobbies, sports pratiqués..
talents & skills
- Code:
<div class="oc-skills"><div class="oc-title" id="skills">talents & skills</div><div class="skills"><div class="skill"><no>TALENT</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div><div class="skill"><no>TITLE</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div><div class="skill"><no>SKILL</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div><div class="skill"><no>A WORD</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div><div class="skill"><no>TITLE</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div><div class="skill"><no>TALENT</no> skill or talent <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis alias accusamus suscipit libero totam? Possimus!</span></div></div></div>
Voilà, c'est tout
|
|