MESSAGES ▲ : 139 DATE D'INSCRIPTION ▲ : 03/04/2014
Sujet: Fiches en Libre Service ϟ Sam 13 Déc - 22:10
Libre Service de Fiches Relationship
Si vous aussi, vous êtes un néophyte en matière de codage : pas de soucis, nous avons la solution ! A la suite, vous trouverez quelques codes en libre service réalisés par nos soins ou ceux de nos membres : tout le monde peut poster un code dans ce sujet et ainsi, agrandir notre galerie des arts. Servez-vous ! ♥
Les codes présents ici n'appartiennent à personne d'autres que leurs créateurs, qui ont la bonté de vous en offrir l'usage. Ainsi, vous ne pouvez les utiliser qu'ici et en aucun cas vous en servir sur un forum tiers.
Pour poster un code, il vous suffit d'envoyer à la suite de ce sujet un message constitué de cette façon : la fiche puis en spoiler, le code et si vous le souhaitez, des explications quand à son utilisation de manière optimale (ou encore la personnalisation).
Sahara
conscience vouée à l'errance
MESSAGES ▲ : 405 DATE D'INSCRIPTION ▲ : 05/05/2014 AVATAR ▲ : panty ; panty & stocking DIT ▲ : le canari ANECDOTE ▲ : elle se garde bien d'avouer qu'elle est une vagabonde, bravo l'honnêteté. FICHE RS ▲ : i'll worship like a dog at the shrine of your lies
Sujet: Re: Fiches en Libre Service ϟ Mer 24 Déc - 16:57
C'était censé être une jolie histoire
faite d'argent et d'ivoire, une bien jolie histoire
Pseudonyme
âge physique - groupe - ville métier - tribut/naissance
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
• nom du lien - description du lien (disponibilité) • nom du lien - description du lien (disponibilité) • nom du lien - description du lien (disponibilité) • nom du lien - description du lien (disponibilité)
• Si vous souhaitez changer l'image bleue, trouvez ce lien https://i.imgur.com/KRpql5A.png et remplacez le par l'image de votre choix. Sachez qu'ici, l'image fait du 535*180px. Vous pouvez également l'enlever très facilement en vous débarassant du :
• Le fond gris clair est en #e8e8e8, les textes sont en #999, les blocs bleus sont en #9acbda et enfin, le sous-titre courier new est en #7bbcd0. Si vous souhaitez changez une couleur, faites CTRL+F avec la couleur de votre choix, et remplacez toutes les données trouvées.
• Les liens sont modifiables en remplaçant tout simplement les "lien" dans les balises a.
• De même, si vous n'arrivez pas à trouver un élément dans le codage, faites CTRL+F avec une partie de la phrase et vous atterrirez au bon endroit.
• Faites attention à ne pas faire des sauts de lignes superflus !
Code:
<img src="http://i.imgur.com/KRpql5A.png" alt="header rs" /><div style="background: #e8e8e8; color: #999; font-family: Arial, Helvetica, sans-serif; line-height: 1; width: 535px; height: 293px;"><div style="width: 515px; height: 1px; background: #999; position: absolute; margin: 20px 0px 0px 10px;"><div style="position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; letter-spacing: -2px; text-transform: uppercase; text-align: center; width: 515px; margin: auto; margin-top: -10px;"><span style="background: #e8e8e8; padding: 0px 10px;">C'était censé être une jolie histoire</span></div><div style="font-family: 'Courier New', Courier, monospace; color: #7bbcd0; font-size: 11px; margin-top: 13px; width: 515px; letter-spacing: 2px; text-align: center;">faite d'argent et d'ivoire, une bien jolie histoire</div><div style="margin: 10px 0px;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" class="imggris" /> <img src="http://s4.postimg.org/i17xruh6h/L24.png" class="imggris" /></div><div style="position: absolute; margin: -236px 0px 0px 110px; height: 213px; width: 6px; background: #9acbda;"></div><div style="position: absolute; background: #fff; width: 390px; height: 213px; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; margin: -236px 0px 0px 126px;"><div style="padding: 10px;"><div style="background: #9acbda; width: 176px; height: 20px; font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: -2px; color: #fff; text-align: center; padding: 5px 0px;">Pseudonyme</div><div style="border: 1px solid #dadada; border-top: none !important; width: 174px !important; max-width: 174px; max-height: 18px; height: 18px !important; overflow: auto; text-align: center; font-size: 9px; font-weight: bold; padding: 5px 0px 6px 0px;">âge physique - groupe - ville métier - tribut/naissance</div><div style="border-top: 5px solid #9acbda; width: 176px; margin-top: 10px; text-align: justify; overflow: auto; height: 105px;"><div style="padding: 5px 0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><div style="background: #dadada; width: 1px; height: 179px; position: absolute; margin: -180px 0px 0px 186px;"></div><div style="position: absolute; margin: -180px 0px 0px 196px;"><div style="width: 176px; text-align: justify; height: 87px; overflow: auto;">• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div style="border: 1px solid #dadada; border-left: 4px solid #9acbda; margin-top: 10px; height: 80px; width: 171px;"><div style="padding: 5px;; overflow: auto; height: 71px;">• <strong>nom du lien</strong> - description du lien (disponibilité) • <strong>nom du lien</strong> - description du lien (disponibilité) • <strong>nom du lien</strong> - description du lien (disponibilité) • <strong>nom du lien</strong> - description du lien (disponibilité) </div></div></div><div style="background: #9acbda; width: 390px; height: 13px; position: absolute; margin: 8px 0px 0px -10px; font-weight: bold; color: #fff; text-align: center; padding: 1px 0px; font-family: 'Courier New', Courier, monospace;">+ <a href="lien" target="_blank" style="color: #fff !important;">présentation</a> ; + <a href="lien" target="_blank" style="color: #fff !important;">rps</a> ; + <a href="lien" target="_blank" style="color: #fff !important;">boîte aux lettres</a></div></div></div><div style="color: #999; letter-spacing: 3px; font-style: italic; font-size: 9px; font-family: Arial, Helvetica, sans-serif; width: 515px; text-align: center; margin-top: -14px;">codage par sahara sur blindfolded.forumsrpg.com</div></div></div><style>.imggris { -webkit-filter: grayscale(100%); transition-duration: 0.70s; -moz-transition-duration: 0.70s; -webkit-transition-duration: 0.70s; -o-transition-duration: 0.70s; margin-bottom: 13px;} .imggris:hover { -webkit-filter: grayscale(0%); filter: none;}</style>
pseudonyme ; âge ; groupe ; métier ; ville ;
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
pseudonyme ; âge ; groupe ; métier ; ville ;
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
NOM DU LIEN - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
CODE + EXPLICATIONS:
• Je vous conseille de faire un post par groupe, mais cela ne tient qu'à vous. Pareil si vous préférez faire homme/femme plutôt que trier par groupe.
• Les codes ci-dessous équivalent à une seule ligne, vous pouvez cependant les multiplier à votre envie pour avoir le nombre de liens souhaité.
CODE POUR LES SAUVES :
Code:
<div style="position: relative;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #48d9e0; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto; line-height: normal;">pseudonyme ; âge ; groupe ; métier ; ville ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div style="position: absolute; margin-top: -216px; margin-left: 277px;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #48d9e0; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto; line-height: normal;">pseudonyme ; âge ; groupe ; métier ; ville ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div></div></div></div></div>
CODE POUR LES DAMNES :
Code:
<div style="position: relative;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #e14949; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto;line-height: normal;">pseudonyme ; âge ; groupe ; métier ; tribut / naissance ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div style="position: absolute; margin-top: -216px; margin-left: 277px;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #e14949; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto; line-height: normal;">pseudonyme ; âge ; groupe ; métier ; tribut / naissance ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div></div></div></div></div>
CODE POUR LES VAGABONDS :
Code:
<div style="position: relative;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #F5BF4C; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto;line-height: normal;">pseudonyme ; âge ; groupe ; métier ; tribut / naissance ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div style="position: absolute; margin-top: -216px; margin-left: 277px;"><img src="http://s4.postimg.org/i17xruh6h/L24.png" style="background-color: #000; width: 100px; height: 100px;"/><div style="position: absolute; margin-left: 8px; width: 150px; height: 100px; background: #F5BF4C; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: italic; letter-spacing: 2px; display: inline-block; text-align: right;"><div style="padding: 15px 10px 10px 10px; height: 80px; overflow: auto;line-height: normal;">pseudonyme ; âge ; groupe ; métier ; tribut / naissance ;</div></div><div style="margin-top: 8px;width: 250px; height: 100px; background: #fff; border: 4px solid #e8e8e8; font-size: 11px; font-family: Tahoma, Geneva, sans-serif; line-height: 1; color: #999; text-align: justify; overflow: auto;"><div style="padding: 8px;"><strong>NOM DU LIEN</strong> - ★★★☆☆ ; 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 beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div></div></div></div></div>
Pan-Pan
coeur souillé de noirceur
MESSAGES ▲ : 213 DATE D'INSCRIPTION ▲ : 15/01/2015 AVATAR ▲ : madotsuki 【yume nikki】(par Silas) DIT ▲ : le lapin rouge FICHE RS ▲ : www
Sujet: Re: Fiches en Libre Service ϟ Jeu 22 Jan - 1:17
Name Group Age Price/Birth
that's the best title you've known
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
i want
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
codes + explications:
Yosh c'est la première fois que je fais du libre service alors je ne sais pas trop comment adapter le code pour des tiers (surtout des tiers qui savent pas/mal coder) alors on va dire que ce code n'est pas optimisé et que vous pouvez d'ores et déjà me taper dessus pour ça. Je me suis juste permise d'éviter un ou deux raccourcis que je fais couramment.
Le premier bloc concrètement c'est tout le style, c'est concrètement le truc qui fait tout. Vous verrez sûrement des trucs du genre
Code:
#header > div
cela veut dire que le style qui suivra s'appliquera au div qui se trouve directement dans le contenant qui aura comme "header" comme id (et aucun autre div).
Code:
#section > .title
ici, le style s'appliquera au contenant de class "title" compris dans le contenant d'id "section" Pitit exemple :
Code:
<div id=secsion><div class=title>aura l'apparence de ce que j'aurai décidé par #secsion > .title</div></div>
Pourquoi ai-je procédé de cette façon ? Ça alourdit le code et tout, ça semble inutile. Mais ça permet de comprendre où les id class seront situés dans la rs. Tel div sera obligatoirement dans le header, tel titre dans la grande section blanche, mes boîtes dans la grande section blanche aussi... De plus, les id et class sont rangés par ordre d'apparition. Tout ça pour s'y retrouver un peu dans ce pâté de style impressionnant...
Un autre pâté de style un peu moins conséquent est situé cette fois tout en bas. Il gère uniquement l'animation infinie des quatre icons. D'ailleurs, vous ne pouvez mettre que quatre icons (voilà le lien de celle par défaut : https://i.imgur.com/VrFNk0j.png ) à défiler, ni plus ni moins, sinon l'animation s'en trouvera contrariée.
Pour modifier l'header, ctrf-f sur ça :
Code:
http://i.imgur.com/vGDoA14.jpg
. À cause du hover qui s'applique dessus, le header doit obligatoirement faire 500*150. Si vous voulez modifier les couleurs et tout ça, le mieux encore serait de rajouter les propriétés voulus directement dans les balises en ajoutant le "style=" comme vous faites d'habitude, ça sera prioritaire sur ce qui est défini par défaut. Sinon par ordre d'apparition dans le code (si je ne fais pas erreur), le fond derrière le header est #212428, la couleur du texte derrière le header est #eee, le grand fond est #eee, la couleur des titres hors header est #a0a0a0 (avec une ombre #000), le fond des boîtes est #fff, la couleur du texte dans les boîtes est #999 et je crois n'avoir rien oublié.
Soyez libres bien sûr de me mpoter pour personnalisation ou changement de détails uniquement.
<div id="header"><div><span>Name</span> Group Age Price/Birth</div></div> <div id="section"> <div id="title1" class="title">that the best title you've known</div> <div id="left_box" class="box"><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div> <div id="right_box" class="box"><div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div></div>
<div style="clear:both"></div> <div id="title2" class="title">i want</div> <div id="icon_container"><div id="icon_translation"><img src="http://i.imgur.com/VrFNk0j.png" alt="icon1" /><img src="http://i.imgur.com/VrFNk0j.png" alt="icon2" /><img src="http://i.imgur.com/VrFNk0j.png" alt="icon3" /><img src="http://i.imgur.com/VrFNk0j.png" alt="icon4" /></div></div> <div id="do_want">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</div> <style>#section > #icon_container > #icon_translation { width: 100px; height: 306px; position: relative; animation: imgtranslation 10s linear 1s infinite; -moz-animation: imgtranslation 10s linear 1s infinite; -webkit-animation: imgtranslation 10s linear 1s infinite; -o-animation: imgtranslation 10s linear 1s infinite; } @keyframes imgtranslation { from {top: 150px;} to {top: -456px;} } @-moz-keyframes imgtranslation { from {top: 150px;} to {top: -456px;} } @-o-keyframes imgtranslation { from {top: 150px;} to {top: -456px;} } @-webkit-keyframes imgtranslation { from {top: 150px;} to {top: -456px;} } #icon_translation img { margin: 5px; }</style>
people i know
name
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
name
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
codes + explications:
Tout ce que j'ai dit plus haut compte aussi ici. Les couleurs sont les mêmes, les icons aussi (rappel : https://i.imgur.com/VrFNk0j.png ). Il vaut mieux prendre les relations par duo puisqu'elles sont alignées différemment. Il y a possibilité d'ajouter un header au besoin (500px de large) et wala.
<div class="content"> <div id="title1" class="title">people i know</div>
<div id="left_icon" class="icon" style="background: url('http://i.imgur.com/VrFNk0j.png');"><div>name</div></div> <div id="right_desc" class="desc"><div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div></div>
<div id="right_icon" class="icon" style="background: url('http://i.imgur.com/VrFNk0j.png');"><div>name</div></div> <div id="left_desc" class="desc"><div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div></div>
</div>
Icare
corps éthéré de pureté
MESSAGES ▲ : 113 DATE D'INSCRIPTION ▲ : 18/05/2014 AVATAR ▲ : #Finn #AdventureTime DIT ▲ : Le débile ANECDOTE ▲ : Dernier Iphone en poche et plus de followers sur twitter que Vincent McDoom, Icare c'était le kikoo que vous aviez toujours détesté. FICHE RS ▲ : you know who I am
Sujet: Re: Fiches en Libre Service ϟ Jeu 19 Fév - 14:55
pseudo et surnom
you tell me that you always needed a ‘‘little’’ quote just here
nom du lien ♦ ♦ ♦ ♦ ♦
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibu lum maxi mus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum.
nom du lien ♦ ♦ ♦ ♦ ♦
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibu lum maxi mus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Ali quam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est.
nom du lien ♦ ♦ ♦ ♦ ♦
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Aliquam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est. Phasellus sit amet est dictum, iaculis urna ut, mollis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
en quelques mots
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Aliquam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est. Phasellus sit amet est dictum, iaculis urna ut, mollis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ullamcorper in est in feugiat.
Morbi porttitor urna non lacinia fringilla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet lectus cursus, ultricies mi sed, iaculis ex.
Ce code est normalement optimisé pour les novices en code mais à quelques conditions :
✖ Ne rajoutez pas de sauts de lignes ou n'en enlevez pas en dehors des blocs de texte. Cela pourrait modifier la structure du code. De toute manière je l'ai codé tel qu'il y soit de base déjà assez espacé et aéré pour qu'on puisse s'y retrouver.
✖ Les couleurs et seulement les couleurs sont modifiables, mis à part pour tout ce qui est gris. Il vous suffit de repérer les "style" dans le code qui seront précédés par un code couleur que vous pourrez modifier.
✖ Vous disposez de trois emplacements pour icônes, que vous retrouverez sous ce lien :
✖ Pour remplacer les liens, il vous suffit de remplacer les "liens" par les vôtres. (et uniquement ces "liens" encore une fois)
✖ N'oubliez pas (Sahara) : De même, si vous n'arrivez pas à trouver un élément dans le codage, faites CTRL+F avec une partie de la phrase et vous atterrirez au bon endroit.
✖ Évitez de dépasser d'une ligne dans les titres et citation. Ces derniers sont modifiables, bien sûr, mais l'aspect du code sera modifié si vous ne respectez pas l'emplacement délimité.
✖ Pour finir, ma boîte MP reste ouverte pour n'importe quel problème ! Le code vient d'être achevé alors il y aura sûrement quelques modifications à effectuer. Dans tous les cas, n'hésitez pas à me contacter (après avoir essayé de rectifier votre problème un minimum bien sûr).
Code:
<link href="https://dl.dropboxusercontent.com/s/k8mewkzs5022yki/RS%20LS.css" rel="stylesheet" type="text/css" /><div class="cadrers"><div class="bloctitle" style="background-color:#c38bfc;">pseudo et surnom</div><div class="rectanglecolor" style="background-color:#88c9f7;"></div><div class="blocquote">you tell me that you always needed a ‘‘little’’ quote just here</div>
<div class="blocliens" style="border: 8px solid #c38bfc;"><div class="tinytitle" style="border-bottom: 1px solid #c38bfc;color:#c38bfc;">nom du lien ♦ ♦ ♦ <span class="affiliate">♦ ♦</span></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibu lum maxi mus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum.
<div class="tinytitle" style="border-bottom: 1px solid #c38bfc;color:#c38bfc;">nom du lien ♦ <span class="affiliate">♦ ♦ ♦ ♦</span></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibu lum maxi mus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Ali quam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est.
<div class="tinytitle" style="border-bottom: 1px solid #c38bfc;color:#c38bfc;">nom du lien ♦ ♦ ♦ ♦ <span class="affiliate">♦</span></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Aliquam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est. Phasellus sit amet est dictum, iaculis urna ut, mollis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
<div class="blocresume" style="border: 8px solid #88c9f7;"><div class="tinytitle" style="border-bottom: 1px solid #88c9f7;color:#88c9f7;">en quelques mots</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus gravida tempor. Vivamus egestas eros a metus sodales, vel auctor felis rutrum. Aliquam erat volutpat. Nam sed metus fringilla, tristique augue eget, imperdiet est. Phasellus sit amet est dictum, iaculis urna ut, mollis quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ullamcorper in est in feugiat.
Morbi porttitor urna non lacinia fringilla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet lectus cursus, ultricies mi sed, iaculis ex. </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.
pseudo
surnom Ϟ lien possédé
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.
pseudo
surnom Ϟ lien possédé
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.
pseudo
surnom Ϟ lien possédé
code + explications :
✖ Ici seule la couleur de fond du bloc "surnom + lien possédé" est modifiable, le reste étant associé à la couleur des groupes. Encore une fois, il vous suffit de changer le code couleur qui suit le "style"
✖ Veillez à ne pas écrire trop dans le bloc "surnom + lien possédé", une seule ligne est utilisable.
✖ Encore une fois le code se doit d'être un minimum aéré et espacé, rajoutez des lignes ou en enlever serait inutile voire contraignant.
✖ Je vous conseille de réserver un post par groupe ! Et encore une fois, n'hésitez pas à me MP en cas de problème.
Code:
<link href="https://dl.dropboxusercontent.com/s/k8mewkzs5022yki/RS%20LS.css" rel="stylesheet" type="text/css" /> <div class="cadrelien"><table cellspacing=8><tr><td><img src="http://image.noelshack.com/fichiers/2015/08/1424349339-coincoin.png" class="iconelien" alt="iconeperso" /></td><td><div class="friend">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.</div></td></tr> <tr><td><div class="namesauve">pseudo</div></td><td><div class="infoslien" style ="background-color:#bcea7a;"><strong>surnom Ϟ </strong>lien possédé</div></td></tr></table></div>
<div class="cadrelien"><table cellspacing=8><tr><td><img src="http://image.noelshack.com/fichiers/2015/08/1424349339-coincoin.png" class="iconelien" alt="iconeperso" /></td><td><div class="friend">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.</div></td></tr> <tr><td><div class="namedamne">pseudo</div></td><td><div class="infoslien" style ="background-color:#bcea7a;"><strong>surnom Ϟ </strong>lien possédé</div></td></tr></table></div>
<div class="cadrelien"><table cellspacing=8><tr><td><img src="http://image.noelshack.com/fichiers/2015/08/1424349339-coincoin.png" class="iconelien" alt="iconeperso" /></td><td><div class="friend">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a cursus mi, id volutpat ante. Maecenas pellentesque massa velit, et congue velit ultrices ac. Etiam non efficitur nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla massa leo, accumsan ac dui id, varius suscipit ipsum. Nulla auctor urna semper diam pulvinar convallis. Aenean sed tellus vel metus faucibus dapibus eget ut nibh.
Nulla congue rhoncus mi id pulvinar. Fusce sapien sapien, mattis tempus augue vitae, vehicula fringilla augue. Sed diam sapien, eleifend vel semper eu, tristique ac nisi. Maecenas semper efficitur metus, a semper justo semper at. In varius ornare mattis. Nunc id est imperdiet sapien iaculis porttitor vitae vitae mauris. Ut nunc eros, scelerisque vitae molestie quis, varius vitae est. Ut consequat venenatis luctus. Etiam dictum tellus lorem, ac semper quam convallis dictum. Proin semper accumsan risus ac facilisis. Aenean ornare diam pulvinar ex porttitor, sed bibendum quam dapibus.</div></td></tr> <tr><td><div class="namevagabond">pseudo</div></td><td><div class="infoslien" style ="background-color:#bcea7a;"><strong>surnom Ϟ </strong>lien possédé</div></td></tr></table></div>