codage fiche de liens Hannah/Eléa

<style>#fond{background:url('http://img.tatler.co.uk.s3.amazonaws.com/600x400/a_c/2504785-sophie-turner-tatler-17mar14_James-Meakin_b_600x400.jpg'); width:430px;background-repeat: no-repeat;} .b1, .b2, .b3, .b4{background:#fff;opacity:0.8;} .partiedroite{background-color:#f1f1f1;} #fond{width: 450px; height: 250px; border: 1px solid #668280; margin: 0px auto; position: relative; overflow: hidden;} .b1{width: 430px; height: 55px; position: absolute; top: 12px; right: -500px; -webkit-transition: 2s; transition: 2s; -moz-transition: 2s; -o-transition: 2s;} .b2{width: 430px; height: 55px; position: absolute; top: 67px; right: 500px; -webkit-transition: 2s; transition: 2s; -moz-transition: 2s; -o-transition: 2s;} .b3{width: 430px; height: 55px; position: absolute; top: 122px; right: -500px; -webkit-transition: 2s; transition: 2s; -moz-transition: 2s; -o-transition: 2s;} .b4{width: 430px; height: 55px; position: absolute; top: 177px; right: 500px; -webkit-transition: 2s; transition: 2s; -moz-transition: 2s; -o-transition: 2s;} #fond:hover .b1, #fond:hover .b2,#fond:hover .b3,#fond:hover .b4{position: absolute; right: 10px;} #fond:hover .bordure{ opacity: 1;} .bordure{width: 410px; height: 195px; position: absolute; right: 17px; top: 20px; border: 4px double #661435; opacity: 0; -webkit-transition: 1s; transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition-delay: 1.7s; -moz-transition-delay: 1.7s; -o-transition-delay: 1.7s; -webkit-transition-delay: 1.7s;} .bback{width: 390px; height: 175px; background-color:#fff; position: absolute; top: 10px; right: 10px;} .image{width: 120px; height: 120px; position: absolute; right: 250px; top: 10px;} .partiedroite{width: 180px; height: 115px; position: absolute; right: 10px; top: 10px; padding: 20px; font: normal normal 11px/13px calibri, sans-serif; letter-spacing: 0px; color:#333; text-align: justify; overflow-y: auto;} .partiegauche{width: 125px; height: 80px; position: absolute; right: 250px; top: 110px; font: normal normal 11px/12px calibri, sans-serif; text-align: center; color:#333; margin-top:-10px;} .partiegauche h1{font: italic; font-size:18px; letter-spacing: -1px; color: #333; text-align: center; text-transform:uppercase; margin-bottom:1px; margin-top:-10px;}</style>

<center><div id='fond'><div style="background-color:#e9cbc7; opacity:0.5;margin-top:200px;font-size:10px;color:#000; text-align:center;text-transform:uppercase">Une citation ici pour faire joli</div><div class='b1'></div><div class='b2'></div><div class='b3'></div><div class='b4'></div> <div class='bordure'><div class='bback'><div class='image'><img src='https://33.media.tumblr.com/f4f78831dabb70dc61fcc667cae1f60a/tumblr_mtn4gk5oTA1qmwkmmo2_250.gif' style='width:75px;height:75px;'></div><div class='partiegauche'><h1>Prénom + Nom</h1>Surnom & Âge<BR>Orientation sexuelle<br>Situation amoureuse<br> Disponibilité RP: oui / non <br><br>Fiche // RPs</div> <div class='partiedroite'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div>
<div style="font-size:7px; margin-left:400px;margin-top:-23px;"> © Nalex</div></center>

<style>.flop{width: 200px; height: 320px; background-color: #fff; overflow: hidden} .flip{width: 200px; height: 320px; -webkit-perspective:1000; -o-perspective:1000; -moz-perspective:1000;} .flippin{-moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out;} .flip:hover .flippin{-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);} .sousavatar{width: 200px; height: 320px; background-color: #fff; overflow: hidden; opacity: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; overflow: auto;} .flip:hover .sousavatar{opacity: 1;}</style>

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<center><table><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(https://2img.net/h/i1115.photobucket.com/albums/k548/scatteredthorns/Avatars%20200x320/jlaw053.png);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr></table></center>