[ Expediente ] Golden

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;800&display=swap" rel="stylesheet"> <div class="geekbase"> <div class="geekname">Palabra </div> <div class="space-geek"> <div class="linealmage"> <div class="tooltip"> <div class="fas fa-info-circle"></div> <span class="tooltiptext tt1"> <div class="title1-geek"> <div class="numimi">01.</div> <div class="dimeunnombre">Información Básica</div> <div class="descone">Lorem ipsum dolor sit amet consectetur adipiscing elit leo nec consequat, nostra.</div> </div> <div class="ronden1"> <div class="datacya"> <div class="quesdata">Nombre</div> <div class="esosdata">Cualquier apartado puede ser todo lo largo o corto que se te antoje poner. Lorem ipsum dolor sit amet consectetur adipiscing elit leo nec consequat, nostra.</div> </div> <div class="datacya"> <div class="quesdata">Raza</div> <div class="esosdata">Humano</div> </div> <div class="datacya"> <div class="quesdata">Edad</div> <div class="esosdata">Real y aparente</div> </div> <div class="datacya"> <div class="quesdata">Nacionalidad</div> <div class="esosdata">Vengo de Urano</div> </div> <div class="datacya"> <div class="quesdata">Ocupación</div> <div class="esosdata">Artista</div> </div> <div class="datacya"> <div class="quesdata">Orientación Sexual</div> <div class="esosdata">Bisexual</div> </div> </div> </span> </div> <div class="tooltip"> <div class="fas fa-heartbeat"></div> <span class="tooltiptext tt2"> <div class="title1-geek"> <div class="numimi">02.</div> <div class="dimeunnombre">Personalidad</div> <div class="descone">Lorem ipsum dolor sit amet consectetur adipiscing elit leo nec consequat, nostra.</div> </div> <div class="ronden1"> <div class="rondando">TEXTO VA AQUÍ</div> </div> </span> </div> <div class="tooltip"> <div class="fas fa-globe"></div> <span class="tooltiptext tt2 tt3"> <div class="title1-geek"> <div class="numimi">03.</div> <div class="dimeunnombre">Historia</div> <div class="descone">Lorem ipsum dolor sit amet consectetur adipiscing elit leo nec consequat, nostra.</div> </div> <div class="ronden1"> <div class="rondando">TEXTO VA AQUÍ</div> </div> </span> </div> <div class="tooltip"> <div class="fas fa-bars"></div> <span class="tooltiptext tt1 tt4"> <div class="title1-geek"> <div class="numimi">04.</div> <div class="dimeunnombre">Extras</div> <div class="descone">Lorem ipsum dolor sit amet consectetur adipiscing elit leo nec consequat, nostra.</div> </div> <div class="ronden1"> <div class="rondando"><ul><li>Lorem ipsum dolor sit amet consectetur adipiscing elit massa, curabitur erat accumsan orci facilisis velit proin ut primis, per tincidunt leo magnis nullam aliquam mollis.</li> <li>Lorem ipsum dolor sit amet consectetur adipiscing elit massa, curabitur erat accumsan orci facilisis velit proin ut primis, per tincidunt leo magnis nullam aliquam mollis.</li></ul></div> </div> </span> </div> </div> </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>

<style>:root { --cya-imagen: url(https://i.imgur.com/rUTaA89.png); --cya-border: #c09f65; --cya-palabra: #fff; --cya-textcolor: #999; --cya-iconos: #fff; --cya-fondo: rgba(0,0,0,0.7); } .geekbase {height: 500px; width: 500px; margin: auto; position: relative; background-size: cover; border: 50px solid var(--cya-border); font-family: 'Playfair Display', serif; background-image: var(--cya-imagen);} .geekname {color: var(--cya-palabra); font-size: 70px; text-transform: uppercase; font-style: italic; font-weight: 800; letter-spacing: -6px; position: absolute; bottom: 0; left: 10px; line-height: 70px;} .space-geek {background: ; height: 425px; width: 500px;} .linealmage {background: ; height: 425px; width: 70px; position: absolute; right: 0; top: 0;} .linealmage .fas {height: 70px; width: 70px; display: flex; justify-content: center; align-items: center; font-size: 40px; cursor: help; color: var(--cya-iconos);} .tooltip { position: relative; display: inline-block; } .tooltip .tt1 { top:10px;} .tooltip .tooltiptext { visibility: hidden; width: 420px; height: 415px; right: 70px; background-color: var(--cya-fondo); color: var(--cya-textcolor); text-align: center; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } .title1-geek {position: absolute; left: 0; top: 0; width: 420px; height: 130px; font-family: 'Montserrat', sans-serif; color: var(--cya-palabra); background: rgba(0,0,0,0.4);} .title1-geek .numimi {position: absolute; height: 130px; width: 130px; font-size: 80px; display: flex; justify-content: center; align-items: center; font-weight: 600; background-size: cover; right: 0; color:var(--cya-border);} .dimeunnombre {width: 280px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; height: 60px; display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 10px;} .descone {line-height: 120%; height: 40px; text-align: right; width: 270px; padding-left: 10px; font-size: 11px; top: 60px; position: absolute; font-style: italic; font-weight: 500; overflow: hidden; display: flex; align-items: center;} .ronden1 {height: 275px; width: 420px; position: absolute; bottom: 0; overflow: auto; padding-bottom: 10px;} .datacya {background: var(--cya-fondo); height: auto; width: 370px; margin: 10px auto 0px auto; font-family: Montserrat; line-height: 100%!important; text-align: left; padding: 7px; border-left: 5px solid var(--cya-border)} .quesdata {color: #ccc; font-size: 10px;text-transform: uppercase;} .esosdata {color: var(--cya-textcolor); font-size: 10px; font-family: Playfair Display; padding-top: 0;} .ronden1::-webkit-scrollbar { width: 5px; } .ronden1::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .ronden1::-webkit-scrollbar-thumb { background: var(--cya-border);} .tooltip .tt2 { top: -60px!important;} .tt2 .title1-geek {bottom: 0!important; top: unset!important;} .tt2 .ronden1 {bottom: unset!important; top: 0; background:rgba(0,0,0,0.4);} .tt2 .numimi {right: unset!important; left:0;} .tt2 .dimeunnombre {justify-content: flex-start; left: unset!important; right: 0; position: absolute; width: 270px!important;} .tt2 .descone {height: 40px; text-align: left; width: 280px; padding: 0!important; left: unset!important; right: 0;} .rondando {text-align: left; font-size: 12px; padding: 15px; line-height: 125%;} .gusydis {color: var(--cya-border); padding: 0px; font-weight: 800;} .tooltip .tt3 { top: -130px!important;} .tooltip .tt4 { top: -200px!important;} .tt4 .rondando ul {margin: 0; padding-left: 20px; list-style: none;} .tt4 ul li {margin-bottom: 10px;} .tt4 ul li::before { content: "\2022"; color: var(--cya-border); font-weight: bold; display: inline-block; width: 1em; margin-left: -11px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 1px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} ::selection {background: var(--cya-border); color: #fff;}</style>