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 SEARCH” et “END SEARCH” pour ajouter de nouveaux liens recherchés
¤ L'entête fait 450px de large mais elle est automatiquement redimensionnée. 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)
Dernière édition par Maître de Jeu le Lun 2 Jan - 13:43, édité 2 fois
Sujet: Re: Dev Nerd Girl #1 - Fiche de Liens (Intro) Lun 2 Jan - 13:33
Code:
<link href='http://codepen.io/devnerdgirl/pen/azymPp.css' rel='stylesheet' type='text/css'><div class="gly-fiche-02-wd"><div class="body"><div class="title-img"><!-- IMG ENTETE (450*??) --><img src="https://36.media.tumblr.com/e654334490cd5a73c25e30630010d620/tumblr_nco4sdPwBU1r4da47o1_1280.jpg" width="450px"/><!-- FIN IMG ENTETE (450*??) --></div><div class="title"><span class="primary">Citation</span><br/><span class="secondary">Fin de citation</span></div><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 (79*90) --><img src="http://img11.hostingpics.net/pics/96697620150128131922.jpg" /><!-- FIN IMG (79*90) --><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="#">Contact</a></div></div></div><div class="right-panel"><div class="description"><div class="desc-block"><span class="text-desc">Description courte du personnage</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 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><div class="title"><span class="primary">More</span><br/><span class="secondary">About Me</span></div><div class="block"><div class="block-text"><div style="max-height: 250px; padding: 0 5px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.</div></div></div><div class="title"><span class="primary">If you really want to know</span><br/><span class="secondary">I search them</span></div><div class="block"><div class="block-text"><!-- START SEARCH --><span style="color: #34dddd">Nom du lien</span><div style="max-height: 90px; padding: 0 5px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.</div><br/><!-- END SEARCH --><!-- START SEARCH --><span style="color: #34dddd">Nom du lien</span><div style="max-height: 90px; padding: 0 5px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.</div><!-- END SEARCH --></div></div></div><div class="credits">Fiche by <a href="http://devnerdgirl-rpgstuff.tumblr.com">Dev Nerd Girl</a></div></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.
If you really want to know I search them
Nom du lien
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.
Nom du lien
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cum ducimus earum, eius eos exercitationem explicabo, iure labore molestias nam neque nihil nobis odit praesentium quaerat repellat sed sequi, vero.
Lun 2 Jan - 13:33
