Lan Wang Ji - Baul + Habilidades

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display&display=swap" rel="stylesheet"><link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><div class="myscont"><div class="myscont2"><div class="myscontimg" style="background:url('https://i.imgur.com/xgy91ZK.jpg');"></div><div class="myscontlink"> <a href="#"><span class="sf sf-user"></span></a> <a href="#"><span class="sf sf-envelope-3"></span></a> <a href="#"><span class="sf sf-book"></span></a> </div><div class="myscontlink"> <a href="#"><span class="sf sf-clock-3"></span></a> <a href="#"><span class="sf sf-heart-2"></span></a> <a href="#"><span class="sf sf-stars"></span></a> </div><div class="mystcont3"> <div class="mystcont4cont"> <div class="myscontitle">Lan Wang Ji</div><div class="mysconthab1"><div class="mysconthabtit">Fuerza</div><div class="mycontprinha"><div class="mycontprinha1" style="width: var(--vfuerz);">80%</div></div></div><div class="mysconthab1"><div class="mysconthabtit">Resistencia</div><div class="mycontprinha"><div class="mycontprinha1" style="width: var(--vresist);">70%</div></div></div><div class="mysconthab1"><div class="mysconthabtit">Agilidad</div><div class="mycontprinha"><div class="mycontprinha1" style="width: var(--vagild);">70%</div></div></div><div class="mysconthab1"><div class="mysconthabtit">Inteligencia</div><div class="mycontprinha"><div class="mycontprinha1" style="width: var(--vinte);">90%</div></div></div><div class="mysconthab1"><div class="mysconthabtit">Defensa</div><div class="mycontprinha"><div class="mycontprinha1" style="width: var(--vdefensa);">70%</div></div></div></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>

<style>.myscont{--color1: #497B9E; --color2: #A1C8E7; --color3: #EBFAFF; --color4: #335D7A; --color5: #000;}.mycontprinha1{--vfuerz: 80%; --vresist: 70%; --vagild: 70%; --vinte: 90%; --vdefensa: 70%;}.myscont{width: 500px; height: 300px; padding: 10px; background: var(--color2); margin: 0 auto;}.myscont2{width: 460px; height: 260px; padding: 10px; background: var(--color1); margin: 0 auto; margin-top: 10px;}.myscontimg{width: 150px; height: 150px; border: 2px solid var(--color2);}.myscontlink{margin-top: 20px; margin-left: 20px;}.myscontlink a{width: 50px; height: 50px; background: var(--color2); padding: 10px; margin: 0 auto; text-align: center; align-content: center; color: var(--color1); text-decoration: none; transition: all .5s linear;}.myscontlink a:hover{background: var(--color4); color: var(--color2); transition: all .5s linear;}.mystcont3{margin-top: -235px; margin-left: 165px; width: 295px; height: 262px; background: var(--color2);}.myscontitle{font-family:'Playfair Display'; font-style: italic; font-size: 30px; text-align: center; align-content: center; justify-content: center; color: var(--color4);}.mystcont4cont{position: absolute; margin-top: 4px; margin-left: 15px;}.mysconthab1{margin-top: 1px;}.mysconthabtit{font-family:'Open Sans'; font-size: 12px; font-weight: 800; color: var(--color5);}.mycontprinha{width: 255px; height: 15px; padding: 5px; border-radius: 10px; background: var(--color3);}.mycontprinha1{height: 15px; border-radius: 10px; margin-top: 0px; background: var(--color1); color: var(--color3); font-family:'Open Sans'; text-align: center; font-size: 10px;line-height: 15px;}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}</style>