les grandes lignes, des pistes, des traits de caractère. les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère... .
les liens.
NOM/PRÉNOM.ft NOM DE LA CÉLÉBRITÉ. nature du lien ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
NOM/PRÉNOM.ft NOM DE LA CÉLÉBRITÉ. nature du lien ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
NOM/PRÉNOM.ft NOM DE LA CÉLÉBRITÉ. nature du lien ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
<link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'><style type="text/css"> #bonds { width: 500px; -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: #E7E6E4; margin: auto; width: 500px; 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: 500px; text-align:center; margin: 0 auto; } #corpse { width: 500px; 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">[color=#cc0000]“ Prénom P² Nom ”[/color]</div><div id="line" style="background-color: #CF0E13;"></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://i.imgur.com/r8VZEWa.jpg')"><div id="details"><br><div class="infos">âge</div><div class="infos">nationalité</div><div class="infos">situation</div><div class="infos">avatar</div><div class="infos">avatar</div></div></div></td></tr><tr style="background-color:white;"><td id="stuff"><div class="title">qui est-ce?</div><div style="height: 130px; overflow-y: scroll;"><div style="padding-right: 10px;">[size=11]les grandes lignes, des pistes, des traits de caractère. les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...les grandes lignes, des pistes, des traits de caractère...[/size] .</div></div><br><div class="title"> les liens.</div><div style="height: 60px; overflow-y: scroll;"><div style="padding-right: 10px;"> [b]NOM/PRÉNOM[/b].ft NOM DE LA CÉLÉBRITÉ. [i]nature du lien[/i] ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
[b]NOM/PRÉNOM[/b].ft NOM DE LA CÉLÉBRITÉ. [i]nature du lien[/i] ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
[b]NOM/PRÉNOM[/b].ft NOM DE LA CÉLÉBRITÉ. [i]nature du lien[/i] ▬ explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages. explication du lien, l'histoire entre vos deux personnages.
UN PETIT MOT. UN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOT. .
Code:
<div><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: 500px; height: 320px;} .headbond { font-family: 'Dorsa', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 50px; text-transform: uppercase; background-color: #E7E6E4; margin: auto; width: 500px; 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: 500px; 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: 500px;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="https://media.giphy.com/media/2fxCslRsC4EEM/giphy.gif" class="nb" style="position:absolute;"><div class="bond"><div class="headbond">[color=#990000]MOT DU CRÉATEUR[/color].</div><div id="nb" class="linebond" style="background-color: #CF0E13;"></div><div class="txtbond"><div style="padding-right:1px;">[size=12] UN PETIT MOT. UN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOTUN PETIT MOT[/size]. .</div></td></div></table>