<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous"><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: 13px;} .rs_hazel header {position: relative; background: url(https://i.imgur.com/3XwfJ9K.png); height: 382px; width: 100%; overflow: hidden;} .h_titres {transition: .5s; background: url(https://i.imgur.com/06xwNIm.png) no-repeat center; width: 50%; padding: 19% 0 20%; margin: 3% 0 0 0; text-align: center; color: #fff; text-transform: uppercase;} .rs_hazel h2 {font-family: Arial, sans-serif; font-size: 36px; font-style: italic; font-weight: normal; margin: 0; letter-spacing: -3px; text-shadow: 1px 1px #000; line-height:37px; color:#6eff80;} .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: #fff; padding: 1% 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 .fa-quote-left, .rs_hazel_wanted h4 .fa-quote-left, .fa-star {color: #000;} .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_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://i.imgur.com/eA6CpuC.jpg); padding: 10%; box-sizing: border-box; margin: 7% 0 0;} .en_bref h4 {color: #6eff80; margin: 0 0 0 10%;} .en_bref_content {background: #fff; padding: 8%; text-align: justify;} .en_bref p {margin: 0; width: 100%; height: 180px;} .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: 13px;} .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: #000!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: #000; font-size: 35px; margin: 3% 0 0 10%;} .rs_hazel_wanted p {width: 60%; margin: 2% 2% 0 8%;} .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 #000; padding: 1%; float: right; margin: 10% 5% 0 0;} .rs_hazel footer {position: relative; display: block; content: ""; clear: both; background: url(https://i.imgur.com/gEd8b4c.png) no-repeat bottom; width: 100%; height: 140px;} a.credits {color: #fff; text-decoration: none; text-align: center; display: block; position: absolute; top: 60%; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; left: 45%;}</style>
<div class="rs_hazel"><header><div class="h_titres"><h2>Prenume Nume</h2><h3>"*citat*"</h3></div><div class="h_infos"><h4><i class="fas fa-quote-left"></i> Informatii</h4>
<ul><li>★Varsta: *text*</li><li>★ Tip RPG: *text*</li><li>★ Specie: *text*</li><li>★ Puteri: *text*</li><li>★ Specialitate: *text*</li><li>★ Altele: *text*</li></ul></div></header>

<div class="rs_hazel_img"><img src="https://i.imgur.com/GGTQoPz.png" id="img_1" alt="" /> <img src="https://i.imgur.com/lfNO1KE.png" alt="" id="img_2" /> <img src="https://imgur.com/GMCkr68.gif" alt="" id="img_3" /></div>

<div class="en_bref"><h4>Istoric</h4><div class="en_bref_content"><p>*text*</p></div></div>

<div class="rs_hazel_rp"><a href="#">Titlu RPG</a> <a href="#">Titlu RPG</a> <a href="#">Titlu RPG</a></div>

<div class="rs_hazel_wanted"><h4><i class="fas fa-quote-left"></i>Personalitate</h4>
<div class="wanted_content"><p><i class="fas fa-star"></i> <span>Calitati:</span> *text*</div>
<div class="wanted_content"><p><i class="fas fa-star"></i> <span>Defecte:</span> *text*</p></div></div><img src="https://i.imgur.com/wetKlvi.png" alt="" id="wanted_img" />
<footer><a href="profil" class="credits">Owner: *text*</a></footer></div>