[ Expediente ] Khamil

<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet"> <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Rozha+One&display=swap" rel="stylesheet"> <div class="total-hor"> <div class="horizon">   <div class="yourname">Zhang dongxi</div>   <div class="photosita" style="background-image: url(https://cdn.discordapp.com/attachments/366398422695018506/783803882287136788/unknown.png);"></div>   <hr class="lin"/>   <span class="th th-circle"></span>      <div class="textreal">     <div class="realpete"><span class="tititu">Historia. —</span> Lorem ipsum dolor sit amet tetur adipiscing, elit accumsan odio fermentum nisl netus risus, bibendum placerat semper lectus neque. Aliquam habitasse rutrum litora id magna feugiat consequat sem lacinia porta bibendum, tempus dignissim lectus sollicitudin imperdiet vestibulum arcu ut ultrices. Bibendum velit arcu libero fringilla sem sociosqu vestibulum feugiat sodales facilisis, penatibus gravida condimentum dis ultrices per facilisi inceptos. <br><br> <span class="tititu">Personalidad. —</span> Taciti himenaeos proin integer nam arcu eget ultricies, cum suscipit congue sed ac lectus, parturient morbi per duis cursus quam. Aenean nostra urna fusce enim lectus phasellus integer elementum faucibus iaculis maecenas venenatis in auctor eleifend potenti, proin hac nibh pretium porttitor suspendisse curabitur non sem natoque laoreet porta malesuada ridiculus eu. Sociis ornare nostra maecenas class platea sed purus rutrum lectus, blandit cras et tortor metus odio luctus pretium ultrices, fames porta volutpat lacus mattis id tincidunt litora. <br><br><span class="tititu">Gustos y disgustos. —</span> Lorem ipsum dolor sit amet tetur adipiscing, elit accumsan odio fermentum nisl netus risus, bibendum placerat semper lectus neque. Aliquam habitasse rutrum litora id magna feugiat consequat sem lacinia porta bibendum, tempus dignissim lectus sollicitudin imperdiet vestibulum arcu ut ultrices. Bibendum velit arcu libero fringilla sem sociosqu vestibulum feugiat sodales facilisis, penatibus gravida condimentum dis ultrices per facilisi inceptos. <br><br><span class="tititu">Extras. —</span> Lorem ipsum dolor sit amet tetur adipiscing, elit accumsan odio fermentum nisl netus risus, bibendum placerat semper lectus neque. Aliquam habitasse rutrum litora id magna feugiat consequat sem lacinia porta bibendum, tempus dignissim lectus sollicitudin imperdiet vestibulum arcu ut ultrices. Bibendum velit arcu libero fringilla sem sociosqu vestibulum feugiat sodales facilisis, penatibus gravida condimentum dis ultrices per facilisi inceptos.<br><br><span class="tititu">Físico. —</span> Lorem ipsum dolor sit amet tetur.</div>   </div>      <div class="datos-chinos">     <div class="datos-pepe">Lorem ipsum dolor sit amet tetur adipiscing, elit accumsan odio fermentum nisl netus risus, bibendum placerat semper lectus neque. Aliquam habitasse rutrum litora id magna feugiat consequat sem lacinia porta bibendum, tempus dignissim lectus sollicitudin imperdiet vestibulum arcu ut ultrices. Bibendum velit arcu libero fringilla sem sociosqu vestibulum feugiat sodales facilisis, penatibus gravida condimentum dis ultrices per facilisi inceptos. Bibendum velit arcu libero fringilla sem sociosqu vestibulum feugiat sodales facilisis, penatibus gravida condimentum dis ultrices per facilisi inceptos.</div>   </div>      <center><h5 id="cyala-sign"><a target="_blank" href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center> </div> </div>

<style>.horizon {background: #eee; height: 300px; width: 600px; position: relative;}  .yourname {font-family: 'Rozha One', serif; font-size: 50px; text-transform: uppercase; font-style: italic; line-height: 100%; letter-spacing: 2px; color: #222; position: absolute; top: 10px; left:20px; z-index: 2;text-shadow: 0px 0px 40px #fff;}  .photosita {height: 350px; width: 250px; position: absolute; top: 10px; left: 15px; background-size: cover; z-index: 1}  .lin {width: 625px; position: absolute; top: 50px; border:0; height: 1px; background: #222; }  .horizon .th {color: #dd8244; position: absolute; right: -25px; height: 25px; width: 25px; top: 33px; display: flex; justify-content: center; align-items: center; font-size: 15px;}  .textreal {background: #ccc; height: 500px; width: 300px; position: absolute; top: 80px; right: 20px;}  .realpete {margin: 20px; color: #444; height: 460px; overflow: auto; padding-right: 10px; margin-right: 15px!important; font-size: 12px; line-height: 135%; font-family: 'Source Sans Pro', sans-serif; text-align: justify;}  .realpete::-webkit-scrollbar { width: 4px; } .realpete::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .realpete::-webkit-scrollbar-thumb { background: #444;}  .tititu {color: #eee; font-style:italic;}  .datos-chinos {background: #dd8244; height: 220px; position: absolute; width: 280px; left: 0px; top: 300px;}  .datos-pepe {height: 135px; overflow: auto; margin: 10px; color: #333; font-size: 11px; line-height: 145%; font-family: 'Source Sans Pro', sans-serif; text-align: justify; padding-right: 7px; font-style: italic; margin-top: 70px!important;}  .datos-pepe::-webkit-scrollbar { width:2px; } .datos-pepe::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .datos-pepe::-webkit-scrollbar-thumb { background: #ddd;}  #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px; position: absolute; left:115px; top: 525px;} #cyala-sign a { text-decoration: none!important;}  .total-hor {height: 600px; margin: auto; width: 600px;}</style>