Taille : 500px de large Code modifiable : Non Image modifiable : Oui (90px de hauteur, 79px de largeur) /!\ Contenu modifiable : Oui
Conseil de modifications :
¤ Repérez les balises “START” et “END” pour ajouter de nouveaux liens.
¤ Les petites images doivent absolument faire 79px (largeur) * 90px (hauteur) !
¤ Evitez de passer des lignes là où il n’y en a pas de base, ça risque de déformer la fiche vu que forumactif ne compte pas ça comme du HTML.
¤ Vous pouvez modifier le code en live en cliquant sur “Edit on Codepen” (C’est même fort conseillé car le code est assez compliqué)
¤ /!\ NE PAS COPIER OU MODIFIER LE CSS : Normalement, vous pouvez pas le voir. Sinon, laissez le tranquille. Vous verrez, c'est magique. Copiez/collez juste le HTML.
¤ /!\ ET NE PAS ENLEVER LES CREDITS. Si j'en vois un qui enlève encore les crédits, je lui pète les jambes. (J'en ai vu, je n'aime pas ça ! J'vous ai à l'oeil O_O)
Code:
Code:
<link href='http://codepen.io/devnerdgirl/pen/myqyrr.css' rel='stylesheet' type='text/css'><div class="gly-fiche-02-wd-links"><div class="body"><div class="cat-title"><span class="title">Je suis un titre</span><br/><span class="blue-title">Un beau titre !</span></div><!-- START --><div class="identity-holder"><div class="left-panel"><div class="app"><span class="name">Profiler_App</span><span class="ver">v0.3.0.1</span></div><div class="img"><img src="http://img15.hostingpics.net/pics/65980020150127221755.jpg" alt="" /><div class="topleft-arrow"></div><div class="botright-arrow"></div></div><div class="flavour"><div class="primary"><a href="#">Profil</a> ♦ <a href="#">Fiche</a></div><div class="secondary"><a href="#">Liens</a></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ea eius iure omnis veritatis. Accusamus, amet aut debitis dolor dolores eaque est expedita hic itaque natus quis rerum sed voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque, autem debitis earum error in libero quisquam quod rem repellat repudiandae, soluta suscipit voluptate? Fugit hic inventore quam totam velit?</span></div></div><div class="name"><span class="text">Nom, prénom</span></div><div class="interest"><div class="arrow"></div><span class="text">Something you want to say</span></div><div class="stats"><div class="stats-desc"><span class="text-invert">Age: ??</span></div><div class="stats-desc"><span class="text-invert">Occupation: ...</span></div><div class="stats-desc"><span class="text-invert">Interests: ...</span></div></div></div><div class="clear"></div></div><!-- END --><!-- START --><div class="identity-holder"><div class="left-panel"><div class="app"><span class="name">Profiler_App</span><span class="ver">v0.3.0.1</span></div><div class="img"><img src="http://img15.hostingpics.net/pics/65980020150127221755.jpg" alt="" /><div class="topleft-arrow"></div><div class="botright-arrow"></div></div><div class="flavour"><div class="primary"><a href="#">Profil</a> ♦ <a href="#">Fiche</a></div><div class="secondary"><a href="#">Liens</a></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ea eius iure omnis veritatis. Accusamus, amet aut debitis dolor dolores eaque est expedita hic itaque natus quis rerum sed voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque, autem debitis earum error in libero quisquam quod rem repellat repudiandae, soluta suscipit voluptate? Fugit hic inventore quam totam velit?</span></div></div><div class="name"><span class="text">Nom, prénom</span></div><div class="interest"><div class="arrow"></div><span class="text">Something you want to say</span></div><div class="stats"><div class="stats-desc"><span class="text-invert">Age: ??</span></div><div class="stats-desc"><span class="text-invert">Occupation: ...</span></div><div class="stats-desc"><span class="text-invert">Interests: ...</span></div></div></div><div class="clear"></div></div><!-- END --></div><div class="credits">Fiche by <a href="http://devnerdgirl-rpgstuff.tumblr.com">Dev Nerd Girl</a></div></div>
Dernière édition par Maître de Jeu le Lun 2 Jan - 13:43, édité 1 fois
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ea eius iure omnis veritatis. Accusamus, amet aut debitis dolor dolores eaque est expedita hic itaque natus quis rerum sed voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque, autem debitis earum error in libero quisquam quod rem repellat repudiandae, soluta suscipit voluptate? Fugit hic inventore quam totam velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ea eius iure omnis veritatis. Accusamus, amet aut debitis dolor dolores eaque est expedita hic itaque natus quis rerum sed voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque, autem debitis earum error in libero quisquam quod rem repellat repudiandae, soluta suscipit voluptate? Fugit hic inventore quam totam velit?
Lun 2 Jan - 13:36
