PPG "Powerpuff Girls" - Baúl

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Raleway&display=swap" rel="stylesheet"><script src="//pull.cappuccicons.com/cpf.js"></script><div class="ppgcontbel" id="ppgz"> <div class="ppgcontit"> <div id="ppgcir"></div><div class="ppgtit1"> <div class="ppgtitb">Powerpuff Girls</div><div class="ppgtitf">Marshmallow carrot cake wafer powder cotton candy sugar plum chocolate cake lollipop jelly. Toffee sesame snaps jelly-o muffin ice cream cookie.</div></div><div class="ppgimg" style="background:url('http://via.placeholder.com/180x180') center;"></div></div><div class="ppgcontgen"> <div class="ppgcontbaul"> <div class="ppginfo1"> <a href="#0" data-icon="&#xea88;">Mensaje Privado</a> <a href="#0" data-icon="&#xecf0;">Perfil</a> <a href="#0" data-icon="&#xeb21;">Expediente</a> <a href="#0" data-icon="&#xeb03;">Relaciones</a> <a href="#0" data-icon="&#xe9ff;">Cronología</a> <a href="#0" data-icon="&#xec84;">Redes Sociales</a> </div></div><div class="ppgcontdat"> <span class="ppgdat1">Bubbles</span> <span class="ppgdat1">Blossom</span> <span class="ppgdat1">Buttercup</span> </div><div class="ppgcont3"> <div class="ppgcont3img" style="background:url('http://via.placeholder.com/70x70');"></div><div class="ppgcont3img" style="background:url('http://via.placeholder.com/70x70');"></div><div class="ppgcont3img" style="background:url('http://via.placeholder.com/70x70');"></div><div class="ppgcont3fr">Marshmallow carrot cake wafer powder cotton candy sugar plum chocolate cake lollipop jelly. Toffee sesame snaps jelly-o muffin ice cream cookie.</div></div></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>
<style>#ppgz{--ppgfondo: #f0f0f0;--ppgfondo2: #fff; --ppg1: #dd3e7c; --ppgtit: #fff; --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);}.ppgcontbel{width: 500px; height: auto; margin: 0 auto; background: var(--ppgfondo); overflow: hidden;}#ppgcir{position: relative; height: 70px; width: 600px; background: var(--ppg1);}#ppgcir:before{content: "";display: block; position: absolute;border-radius: 30% 100%; width: 340px; height: 200px; background-color: var(--ppg1); right: 30px; top: 50px;}#ppgcir:after{content: ""; display: block; position: absolute; border-radius: 50% 50%; width: 390px; height: 200px; background-color: var(--ppg1); left:-50px;top: 10px;}.ppgcontit{width: 500px; height: 100px; background: var(--ppg1);}.ppgtit1{display: flex; flex-direction: column;justify-content: center;position: absolute; width: 300px; margin-top: -10px; margin-left: 5px;}.ppgtitb{font: 35px 'Lobster'; color: var(--ppgtit); text-align: center;}.ppgtitf{font: 10px 'Raleway'; color: var(--ppgtit); width: 250px; text-align: center; margin: 0 auto;}.ppgimg{width: 180px; height: 180px; border-radius: 200px; position: absolute; margin-left: 310px; margin-top: -50px; background-size: cover;}.ppgcontgen{width:500px; margin-top: 110px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}.ppgcontbaul{width: 500px; height: auto; margin-top: 20px; margin-bottom: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.ppginfo1{width: 450px; display: flex; flex-wrap: wrap; justify-content: center; font: 20px 'Lobster'; color: var(--ppgtit);}.ppginfo1 a{position: relative; display: block; width: 200px; text-align:center; padding: 10px; overflow: hidden; transition: color 0s 0.25s var(--timing-function); color: var(--ppg1); text-decoration: none;}.ppginfo1 a::before,.ppginfo1 a::after{position: absolute; left: 0; width: 100%;}.ppginfo1 a::before{content: ''; top: 50%; transform: translate(-101%, -50%); height: 5px; z-index: 1; background: var(--ppg1);transition: transform 0.5s var(--timing-function);}.ppginfo1 a::after{content: attr(data-icon);font-family: "Cappuccicons"; font-weight: 900; top: 0; display: flex; color: var(--ppg1); align-items: center; justify-content: center; height: 100%; opacity: 0; transition: opacity 0s 0.25s var(--timing-function);}.ppginfo1 a:hover{color: transparent;}.ppginfo1 a:hover::before{transform: translate(101%, -50%);}.ppginfo1 a:hover::after{opacity: 1;}.ppginfo1[data-animation="to-left"] a::before{transform: translate(101%, -50%);}.ppginfo1[data-animation="to-left"] a:hover::before{transform: translate(-101%, -50%);}.ppgcontdat{width: 500px; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}.ppgdat1{background: var(--ppg1); padding: 5px 20px; font: 12px 'Raleway'; color: var(--ppgtit);}.ppgcont3{width: 500px; height: 80px; background: var(--ppg1); display: flex; justify-content: space-around; align-items: center;}.ppgcont3img{width: 70px; height: 70px;}.ppgcont3img img{width: 70px; height: 70px;}.ppgcont3fr{width: 240px; height: 60px; padding: 5px; font: 10px 'Raleway'; color: var(--ppgtit); display: flex; align-items: center; text-align: justify;}.mystcred{width: 540px; margin: 5px auto; text-align: center;}.mystcred a{font: 11px 'Raleway'; text-decoration: none; color: #000; font-weight: 500;}</style>