Modèle de fiche de relation #2

<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed|Marvel" rel="stylesheet"/><div id="inso-cont"><div class="inso_relation"> <div class="name_relation">nom du membre</div><div class="subtitle_relation">âge physique - groupe - single/engaged - pouvoir - information</div><div class="txt_relation"><span></span> <b>lien recherché :</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span></span> <b>lien recherché :</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="total_relationship"><div class="blok_relation"><div class="img_relation"><img src="http://placehold.it/250x100/"/></div><div class="relation_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="blok_relation"><div class="img_relation"><img src="http://placehold.it/250x100/"/></div><div class="relation_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="blok_relation"><div class="img_relation"><img src="http://placehold.it/250x100/"/></div><div class="relation_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div><div class="blok_relation"><div class="img_relation"><img src="http://placehold.it/250x100/"/></div><div class="relation_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis mollis neque eget dignissim. Etiam vel facilisis sapien. Praesent commodo lacus eleifend purus ornare varius. Pellentesque ullamcorper molestie nunc, id eleifend arcu ultrices id. Suspendisse lobortis venenatis risus, non blandit nulla consectetur vitae. Maecenas faucibus eleifend vulputate. Integer convallis a metus vitae feugiat. Integer sagittis justo magna, ac lobortis sapien ultrices sed. Proin sit amet bibendum lacus. Nulla vestibulum imperdiet magna, sed pellentesque urna posuere a. Quisque bibendum egestas diam. Pellentesque et iaculis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div></div></div><div class="fwaha"><a href="http://somuchgravity.forumsrpg.com/">epsilon</a></div>
<style>#inso-cont{margin:auto;background:#212121;width:550px;}.inso_relation{width:550px; margin:0 auto; height:350px; background-image:url(https://zupimages.net/up/19/13/9w7v.png); background-size:100%;}.name_relation{padding:50px 0px 0px 150px; font:50px philosophy; letter-spacing:1px; background: -webkit-linear-gradient(#f2f2f2, #7c5535); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom:-10px;}.subtitle_relation{color:#ccc; font:11px calibri; padding-left:150px; text-transform:uppercase; text-shadow:1px 1px 2px black;}.txt_relation{padding:20px; margin:25px auto; width:450px; background-color:rgba(250, 250, 250, 0.7); color: #555; font-size: 11px; font-family: helvetica; text-align: justify; line-height: 17px; height:138px; overflow:auto; color:black;}.txt_relation span{border-bottom: 1px solid black; display: inline-block; line-height: 0px; height: 0px; padding-left: 48px; position: relative;}.txt_relation b{font:20px Barlow condensed; letter-spacing:1px; text-transform:uppercase;}.total_relationship{display:flex; flex-wrap:wrap; justify-content:center; width:550px; margin:0 auto;}.blok_relation{background: #080808; height: 320px; width:250px; border-top: 1px solid #594f31; margin:12px;}.img_relation img{width:250px; height:100px;}.relation_description{margin:0 auto; width:200px; height:180px; text-align:justify; padding:15px 10px; overflow:auto; color:#777777; font:12px calibri;}.fwaha{text-align:center;}.fwaha a{font-family:calibri; text-decoration:none; color:#222; font-size:9px; letter-spacing:6px; text-transform:uppercase; }</style>