Modèle de fiche liens [Libre service]

<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'><style type="text/css"> #bonds { width: 400px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; } #headname { font-family: 'Dorsa', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 60px; text-transform: uppercase; background-color: #111012; margin:  auto; width: 400px; padding-top: 60px; padding-bottom: 40px; text-align: center; text-shadow: 0 0 1px white; color: transparent; } #headname:hover { text-shadow: none; color: #CBCBCB; } #line { height: 4px; width: 400px; text-align:center; margin: 0 auto; } #corpse { width: 400px; height: 320px; border-collapse:collapse; border-spacing: 0px; margin: -1px; } .nb { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } #avatar1 { width: 200px; height: 320px; margin: 0px; } #anecdotes { width: 200px; height: 320px; } #details { opacity: 0; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; margin-top: 0px; height: 320px; } #details:hover { opacity: 1; -webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; margin-bottom: 6px; background-color: rgba(0, 0, 0, 0.26); } .infos { font-family: Helvetica; color: white; text-align: center; background-color: #111012; color: #CBCBCB; font-size: 8px; letter-spacing: 1px; line-height: 12px; margin: 20px; padding: 10px; text-transform: uppercase; } #histoire { padding: 30px; font-family: Helvetica; font-size: 10px; text-align: justify; line-height: 9px; } #stuff { vertical-align: top; padding-bottom: 20px; padding-left: 30px; padding-right: 20px; font-family: Helvetica; font-size: 10px; text-align: justify; line-height: 10px; } .title { padding-top: 20px; padding-bottom: 20px; font-family: Dorsa; font-size: 40px; text-transform: uppercase; text-align:center; color: #474747 } .title:hover { text-shadow: 0 0 1px #474747; color: transparent; } #sign { width: 400px; text-align: right; font-family: Helvetica; font-size: 7px;  line-height: 15px; letter-spacing: 1px; }
</style><center><div id="bonds"><div id="headname">“ Prénom P² Nom ”</div><div id="line" style="background-color: #E0367D;"></div><table id="corpse" border="0px" cellspacing="0px" cellpadding="0px" marginwidth="0px" marginheigth="0px" margin-left="0px" margin-top="0px"><tr><td rowspan="2"><div id="avatar1" class="nb" style="background-image: url('http://image.noelshack.com/fichiers/2016/17/1462047304-papylee.gif')"><div id="details"><br><div class="infos">âge</div><div class="infos">nationalité</div><div class="infos">situation</div><div class="infos">Orientation</div><div class="infos">groupe</div></div></div></td></tr><tr style="background-color:white;"><td id="stuff"><div class="title">who i am</div><div style="height: 130px; overflow-y: scroll;"><div style="padding-right: 10px;">[color=#000000]

Ici, vous disposez d'un modeste endroit libre pour vous exprimer. Vous pourrez y résumer la partie histoire de votre fiche, détailler le caractère de votre personnage ou lister ses anecdotes. Ici, vous disposez d'un modeste endroit libre pour vous exprimer. Vous pourrez y résumer la partie histoire de votre fiche, détailler le caractère de votre personnage ou lister ses anecdotes. Ici, vous disposez d'un modeste endroit libre pour vous exprimer. Vous pourrez y résumer la partie histoire de votre fiche, détailler le caractère de votre personnage ou lister ses anecdotes. Ici, vous disposez d'un modeste endroit libre pour vous exprimer.

[/color]</div></div><br><div class="title">i want you</div><div style="height: 60px; overflow-y: scroll;"><div style="padding-right: 10px;">[color=#000000]

(M/F) LIEN RECHERCHÉ Δ Description du lien recherché.<br>(M/F) LIEN RECHERCHÉ Δ Description du lien recherché.<br>(M/F) LIEN RECHERCHÉ Δ Description du lien recherché.

[/color]</div></div></td></tr></table></div><div id="sign">© GASMASK</div></center>

<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'><style type="text/css">.nb { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;} .avatar2 {width: 200px; height: 320px;} .headbond { font-family: 'Dorsa', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 50px; text-transform: uppercase; background-color: #111012; margin:  auto; width: 200px; padding-top: 30px; padding-bottom: 15px; text-align: center;text-shadow: 0 0 1px white; color: transparent; transition: all 0.5s ease-in 0s; } .headbond:hover { text-shadow: none;color: whitesmoke;transition: all 0.5s ease 0s; } .bond { position: absolute; width: 200px; height: 320px; opacity: 0;-webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; } .bond:hover { opacity: 1;-webkit-transition: opacity .6s ease-in-out; -moz-transition: opacity .6s ease-in-out; -o-transition: opacity .6s ease-in-out; background-color: rgba(0, 0, 0, 0.26); } .linebond {height: 2px;width: 200px;text-align: center; } .txtbond { line-height: 10px; color: black; margin: 15px; padding: 10px; height: 200px; background-color: white; font-family: Helvetica; opacity: 0.8; font-size: 10px; text-align: justify; overflow-y: scroll; }</style><center><table><tr><td><div class="avatar2"><img src="http://i.imgur.com/dZW3U1G.jpg" class="nb" style="position:absolute;"><div class="bond"><div class="headbond">“ Prénom P² Nom ”</div><div id="nb" class="linebond" style="background-color: #E0367D;"></div><div class="txtbond"><div style="padding-right:1px;">Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.</div></div></div></td><td><div class="avatar2"><img src="http://i.imgur.com/iyvSRqF.jpg" class="nb" style="position:absolute;"><div class="bond"><div class="headbond">“ Prénom P² Nom ”</div><div id="nb" class="linebond" style="background-color: #E0367D;"></div><div class="txtbond"><div style="padding-right:1px;">Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.</div></div></div></td></tr></table></center><br><center><table style="margin-top:-20px;"><tr><td><div class="avatar2"><img src="http://i.imgur.com/lrR48lc.jpg" class="nb" style="position:absolute;"><div class="bond"><div class="headbond">“ Prénom P² Nom ”</div><div id="nb" class="linebond" style="background-color: #E0367D;"></div><div class="txtbond"><div style="padding-right:1px;">Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.</div></div></div></td><td><div class="avatar2"><img src="http://i.imgur.com/HTW1gFZ.jpg" class="nb" style="position:absolute;"><div class="bond"><div class="headbond">“ Prénom P² Nom&nbsp;”</div><div id="nb" class="linebond" style="background-color: #E0367D;"></div><div class="txtbond"><div style="padding-right:1px;">Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.Ici, vous décrirez la nature du lien qui unit votre personnage au personnage présenté ici.</div></div></div></td></tr></table></center><br>