Fiche de lien

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto" rel="stylesheet"><style>:root {--couleur-fond: #424242;--couleur-fond: #BFD5F5;--bordure-int: #8ca9b8;--bordure-bloc: #111;}.app {width: 550px;font-family: 'Roboto', sans-serif;background-color: #BFD5F5;padding: 10px;box-sizing: border-box;border: 1px solid #8ca9b8;margin: auto;position: relative;}.app h2,.app h3 {font-family: 'Montserrat', sans-serif;margin:0;text-transform: uppercase;letter-spacing: 2px;font-size: 12px;font-weight: bold;}.app h2 {background-color: var(--couleur-fond);text-align: center;color: #EDF8FA;padding: 30px 0;border: 1px solid var(--bordure-bloc);}.app h3 {color: var(--couleur-fond2);margin-bottom: 10px;}.app-basics, .joueur {display: -webkit-box;display: -ms-flexbox;display: flex;}.app-info {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 360px;}.app ul {border: 1px solid var(--bordure-bloc);border-top: 0;border-bottom: 0;padding:10px 15px;margin: 0;list-style-type: none;font-size: 10px;background: var(--couleur-fond2);color: #7D6262;height: 260px;overflow: auto;}.app ul li {border-bottom: 1px solid #2c2c2c;padding: 7px 0 7px;display: block;}.app ul li:last-child {border-bottom: 0;}.app ul li label {color: inherit;width: 30%;display: inline-block;font-weight: bold;text-transform: uppercase;font-family: 'Montserrat', sans-serif;}.app .app-avatar {padding: 20px;background: #BFD5F5;box-sizing: border-box;}.app .app-avatar img {vertical-align: middle;height: 320px;width: 200px;}.app-quote {line-height: 11px;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;background: #8ca9b8;display: inline-block;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #7D6262;vertical-align: top;padding: 20px;box-sizing: border-box;text-align: justify;}.app-story {background-color: var(--couleur-fond);border: 1px solid var(--bordure-bloc);padding: 10px;box-sizing: border-box;height: 300px;}.app-story + .app-story {border-top: 0;height: auto;}.app-story > div {background-color: #EDF8FA;border: 1px solid #393939;padding: 30px 50px;box-sizing: border-box;box-shadow: inset 6px 0 var(--bordure-int), inset 0 6px var(--bordure-int),inset -6px 0 var(--bordure-int), inset 0 -6px var(--bordure-int);height: 100%;}.app-story > div > div {font-size: 11px;text-align: justify;height: 100%;overflow: auto;padding-right: 10px;line-height: 14px;}.joueur .app-avatar {height: 100px;width: 100px;}.app-joueur {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}.app-joueur-head {font-family: 'Montserrat', sans-serif;background-color: var(--couleur-fond2);text-transform: uppercase;color: #EDF8FA;font-size: 10px;letter-spacing: 1px;padding: 10px;border: 1px solid var(--bordure-bloc);border-top: 0;}.app-joueur .infos {background-color: var(--couleur-fond);text-transform: none;color: #7D6262;font-family: "roboto";letter-spacing: 0px;height: 46px;overflow: auto;border: 1px solid var(--bordure-bloc);border-top: 0;padding: 10px;font-size: 11px;}.app-credit {position: absolute;bottom: -15px;left: 0;}.app-credit a {font-family: 'Montserrat', sans-serif;text-transform: uppercase;letter-spacing: 1px;font-size: 7px;font-weight: bold;text-decoration: none!important;color: #aaa;}</style>

<div class="app"><h2>Prénom P. Nom</h2><!--
--><div class="app-basics"><div class="app-info"><ul><!--
--><li><label>Nom</label>écrire ici</li><!--
--><li><label>Date de naissance</label> écrire ici</li><!--
--><li><label>Âge</label> écrire ici</li><!--
--><li><label>Métier</label> écrire ici</li><!--
--><li><label>Orientation Sexuelle</label> écrire ici</li><!--
--><li><label>Groupe</label> écrire ici</li><!--
--><li><label>Avatar</label> écrire ici</li></ul><!--

--><div class="app-quote">Citation ici</div><!--

--></div><div class="app-avatar"><img src="https://2img.net/u/4013/57/05/69/avatars/gallery/invite10.jpg"  /></div></div><!--


--><div class="joueur"><img src="https://i69.servimg.com/u/f69/19/60/40/89/invite10.jpg" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Des infos sur <b>MES LIENS</b></div><div class="infos">Dites nous en plus sur les sortes de lien que vous recherchez.</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>

<table class="modovert"><tr><td vertical-align="middle"></td><td vertical-align="middle"><div style="width: 550px;">
[center][size=24][u]Girls/Boys[/u][/size][/center]

[left]<b>Prénom</b> Nom</h3>
<img src="https://i69.servimg.com/u/f69/19/60/40/89/invite10.jpg">
<div><h3><label>Relationship + </label>[size=13][font=Times New Roman]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.[/font][/size][/left]

[right]<b>Prénom</b> Nom</h3>
<img src="https://i69.servimg.com/u/f69/19/60/40/89/invite10.jpg">
<div><h3><label>Relationship + </label>[size=13][font=Times New Roman]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.[/font][/size][/right]

</p></div></div></div>
</td></tr></table>