<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"><style>.rs_hazel ::-webkit-scrollbar-thumb {background: #1f292e; border-radius: 0;} .rs_hazel ::-webkit-scrollbar {background: #d9d9d9; width: 5px;} .rs_hazel {position: relative; background: #fff; width: 500px; margin: auto; color: #1f292e; font-family: 'Heebo', sans-serif; font-size: 12px;} .rs_hazel header {position: relative; background: url(https://zupimages.net/up/19/30/x3l0.png); height: 382px; width: 100%; overflow: hidden;} .h_titres {transition: .5s; background: url(https://zupimages.net/up/19/30/r7m5.png) no-repeat center; width: 50%; padding: 24% 0 20%; margin: 3% 0 0 0; text-align: center; color: #707076; text-transform: uppercase;} .rs_hazel h2 {font-family: Arial, sans-serif; font-size: 36px; font-style: italic; font-weight: normal; margin: 0; letter-spacing: -6px; text-shadow: 1px 1px #fff;} .rs_hazel h3 {font-size: 10px; font-weight: normal;} .h_infos {transition: .5s margin-left; background: url(https://i.imgur.com/BdhZz6K.png) no-repeat; margin: -291px 0 0 -500px; height: 382px; color: #707076; padding: 8% 0 0 8%; box-sizing: border-box;} .rs_hazel:hover .h_infos {margin: 0; transition: .5s margin-left;} .rs_hazel:hover .h_titres {display: none; transition: .5s all;} .h_infos h4::before, .rs_hazel_wanted h4::before {content: "“ "; font-family: Georgia, sans-serif; font-size: 100px; float: left; margin: 5% 4% 0 0;} .rs_hazel h4 {font-family: Arial, sans-serif; font-size: 30px; text-transform: lowercase; font-style: italic; font-weight: normal; letter-spacing: -2px; margin: 3% 0;} .rs_hazel ul {margin: 0; text-transform: uppercase; font-size: 10px; padding: 0;} .rs_hazel ul li {list-style: none;} .rs_hazel ul li::before {content: "★ "; margin: 0 2% 0 0;} .rs_hazel_img img {width: 100px; height: 100px; border-radius: 100px; border: 4px solid #fff; object-fit: cover; position: absolute;} .rs_hazel_img {height: 100px; margin: -35% 0 0 0; position: relative; z-index: 2;} #img_1 {left: 5%;} #img_2 {left: 40%; top: 35%;} #img_3 {right: 10%; width: 60px; height: 60px; top: 85%;} .en_bref {background: url(https://zupimages.net/up/19/30/1ztr.png); padding: 10%; box-sizing: border-box; margin: 7% 0 0;} .en_bref h4 {color: #e3e3e3; margin: 0 0 0 10%;} .en_bref_content {background: #e3e3e3; padding: 8%; text-align: justify;} .en_bref p {margin: 0; width: 100%; height: 120px; overflow: hidden;} .en_bref p:hover {transition: .2s all; overflow: auto; padding: 0 5% 0 0; box-sizing: border-box;} .en_bref p span {font-weight: bold; text-transform: uppercase; font-family: Arial, sans-serif; font-size: 11px;} .rs_hazel_rp {width: 90%; margin: auto;} .rs_hazel_rp a {border: 2px solid !important; margin: 0 2%; padding: 1% 2%; min-width: 100px; display: inline-block; text-align: center; font-style: italic; transition: .5s all; color: #e3e3e3 !important;} .rs_hazel_rp a:hover {transition: .5s all; border: 2px solid #5DB36A !important; color: #5DB36A !important;} .rs_hazel_wanted {float: left; width: 60%;} .rs_hazel_wanted h4 {color: #e3e3e3; font-size: 35px; margin: 3% 0 0 10%;} .rs_hazel_wanted p {width: 60%; margin: 2% 2% 0 8%;} .wanted_content::before {content: "★ "; font-size: 25px; color: #e3e3e3; float: left; margin: 2% 1% 0 0;} .wanted_content {width: 100%; margin: 0 0 0 7%;} .wanted_content p {width: 90%; height: 67px; overflow: auto; box-sizing: border-box; text-align: justify; padding: 0 5% 0 2%;} .wanted_content p span {font-weight: bold; text-transform: uppercase; font-family: Arial, sans-serif;} #wanted_img {border: 1px solid #e3e3e3; padding: 1%; float: right; margin: 10% 5% 0 0;} .rs_hazel footer {position: relative; display: block; content: ""; clear: both; background: url(https://zupimages.net/up/19/30/hcqm.jpg) no-repeat bottom; width: 100%; height: 140px;} a.credits {color: #e3e3e3; text-decoration: none; text-align: center; display: block; position: absolute; top: 60%; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; left: 45%;}</style>
<div class="rs_hazel"><header><div class="h_titres"><h2>NOM/PRENOM</h2><h3>Une citation qui envoie du pâté</h3></div><div class="h_infos"><h4>Détails</h4>
<ul><li>Age</li><li>Sexe</li><li>Orientation S.</li><li>Alter</li><li>Metier/etude</li><li>Surnom</li></ul></div></header>

<div class="rs_hazel_img"><img src="https://zupimages.net/up/19/30/akdo.png" id="img_1" alt="" /> <img src="https://zupimages.net/up/19/30/r7m5.png" alt="" id="img_2" /> <img src="https://pbs.twimg.com/media/DUK8ym_W4AAbOm_.jpg" alt="" id="img_3" /></div>

<div class="en_bref"><h4>en bref ...</h4><div class="en_bref_content"><p><span>Caractère ; </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</p></div></div>

<div class="rs_hazel_rp"><a href="#">Nom du rp</a> <a href="#">Nom du rp</a> <a href="#">Nom du rp</a></div>

<div class="rs_hazel_wanted"><h4>Wanted</h4>
<div class="wanted_content"><p><span>My dear friend ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</div>
<div class="wanted_content"><p><span>My dear friend ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque nulla, maximus a ullamcorper id, imperdiet id velit. Donec at facilisis ante. Duis nunc nisi, laoreet at lacus nec, scelerisque placerat diam. Etiam sit amet porttitor sem. Donec faucibus volutpat est, at convallis dolor lacinia ut. Vivamus mollis felis eget diam porta, viverra semper urna suscipit. Vestibulum laoreet congue felis, ut tempus massa cursus eget.</p></div></div><img src="https://zupimages.net/up/19/30/bl6b.png" alt="" id="wanted_img" />

<footer><a href="http://ls-halloween.fr/" class="credits">Halloween</a></footer></div>

<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"><style>.rs_hazel_2 ::-webkit-scrollbar-thumb {background: #1f292e; border-radius: 0;} .rs_hazel_2 ::-webkit-scrollbar {background: #d9d9d9; width: 5px;} .rs_hazel_2 {background: #fff; width: 500px; margin: auto; font-family: 'Heebo', sans-serif; color: #4d4d4d;} .rs_hazel_2 header {background: url(https://zupimages.net/up/19/30/hcqm.jpg); height: 157px; position: relative;} .rs_hazel_2 header h2 {color: #e3e3e3; font-family: Arial, sans-serif; font-size: 30px; margin: 0; font-style: italic; letter-spacing: -2px; font-weight: normal; padding: 12% 0 0 10%;} #icon_hazel {top: 40%; position: absolute; border-radius: 100px; width: 100px; height: 100px; object-fit: cover; border: 4px solid #fff; right: 10%;} .rs_hazel_2 .content::after {content: ""; clear: both; display: block;} .rs_hazel_bloc {width: 40%; margin: 5%; float: left; position: relative; background: #f9f5f5;} .hazel_bloc_img {position: absolute; width: 80px; height: 80px; border-radius: 100px; padding: 1%; border: 1px solid #a7a7a7; top: -1%; left: -20%; object-fit: cover;} .nega h2 {background: url(https://i.imgur.com/BVLdoDM.png) no-repeat top right; height: 48px;} .posi h2 {background: url(https://i.imgur.com/U8WJlVA.png) no-repeat top right; height: 48px;} .famille h2 {background: url(https://i.imgur.com/WR0Opda.png) no-repeat top right; height: 48px;} .neutre h2 {background: url(https://i.imgur.com/k4CGFKm.png) no-repeat top right; height: 48px;} .love h2 {background: url(https://i.imgur.com/KXVlFn0.png) no-repeat top right; height: 48px;} .rs_hazel_bloc h2 {font-family: Arial, sans-serif; text-align: center; color: #fff; font-size: 14px; font-style: italic; padding: 9% 0 0; margin: 0;} .rs_hazel_bloc h3 {font-family: Arial, sans-serif; font-size: 10px; text-align: center; text-transform: uppercase; margin: 0; font-weight: normal; letter-spacing: 2px;} .rs_hazel_bloc p {font-size: 11px; width: 90%; margin: 0 auto; text-align: justify; line-height: 1; height: 100px; overflow: hidden; padding: 0 5% 0 0; box-sizing: border-box;} .rs_hazel_bloc.nega {padding: 0 0 4% 0; border-bottom: 5px solid #cc1045;} .rs_hazel_bloc.posi {padding: 0 0 4% 0; border-bottom: 5px solid #5db36a;} .rs_hazel_bloc.famille {padding: 0 0 4% 0; border-bottom: 5px solid #e6cb61;} .rs_hazel_bloc.neutre {padding: 0 0 4% 0; border-bottom: 5px solid #47b6de;} .rs_hazel_bloc.love {padding: 0 0 4% 0; border-bottom: 5px solid #b273c7;} .rs_hazel_bloc p:hover {overflow: auto;} .rs_hazel_2 footer {position: relative; display: block; content: ""; clear: both; background: url(https://zupimages.net/up/19/30/hcqm.jpg) no-repeat bottom; width: 100%; height: 140px;} a.credits {color: #e3e3e3; text-decoration: none; text-align: center; display: block; position: absolute; top: 60%; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; left: 45%;} .content {width: 95%; margin: 0 0 0 5%;}</style>
<div class="rs_hazel_2"><header><h2>Relations positives</h2><img src="https://zupimages.net/up/19/30/bl6b.png" alt="" id="icon_hazel" /></header>
<div class="content"><div class="rs_hazel_bloc nega"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc posi"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc famille"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc neutre"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div> <div class="rs_hazel_bloc love"><img class="hazel_bloc_img" src="https://i.imgur.com/J0cLdMD.jpg" alt="" /><h2>Nom Prénom</h2><h3>Type</h3><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus massa eget elit rutrum egestas. Aenean lorem risus, finibus pulvinar maximus sed, tempus vitae sem. Cras nisi lectus, maximus id orci eu, pretium mattis nisl. Nulla enim elit, rhoncus vitae leo et, vestibulum iaculis velit. Fusce consequat nibh leo, non dapibus elit hendrerit euismod. Proin mauris ligula, tempus non feugiat ut, sodales at nibh. Vestibulum tempor congue erat, ac tempor tortor pellentesque quis. Duis pretium quis urna feugiat faucibus. Donec nec risus tristique, dictum mauris rutrum, fringilla enim. Donec et condimentum lacus. Ut massa lectus, consectetur nec ligula sed, ornare viverra purus. Fusce risus risus, interdum at odio et, blandit bibendum velit. Nullam ac rutrum ipsum, ac aliquet velit.</p></div></div><footer><a href="http://ls-halloween.fr/" class="credits">Halloween</a></footer></div>