PPG "Buttercup" - Cronología

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Raleway&display=swap" rel="stylesheet"><div class="ppgcontb" id="ppgb"> <div class="ppgcontit"> <div id="ppgcir"></div><div class="ppgtit1"> <div class="ppgtitb">Nombre y Apellido</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('https://via.placeholder.com/180x180');"></div></div><div class="ppgcontgen"> <div class="ppgcontc"> <div class="ppgsubcon1"> <div class="ppgsub1">Abiertos</div><div class="ppgsubc1"> <span><a href="#">Link del Post</a> con ### en ###.</span> <span><a href="#">Link del Post</a> con ### en ###.</span> <span><a href="#">Link del Post</a> con ### en ###.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> </div></div><div class="ppgsubcon1" style="margin-top:-30px;"> <div class="ppgsub1" style="text-align: right;">Cerrados</div><div class="ppgsubc1"> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> <span><a href="#">Link del Post</a> con texto.</span> </div></div></div><div class="ppgcontdat"> <span class="ppgdat1">10 años</span> <span class="ppgdat1">Dato aqui</span> <span class="ppgdat1">Superheroína</span> <span class="ppgdat1">Estudiante</span> </div><div class="ppgcont3"> <div class="ppgcont3img" style="background:url('https://via.placeholder.com/70x70')"></div><div class="ppgcont3img" style="background:url('https://via.placeholder.com/70x70')"></div><div class="ppgcont3img" style="background:url('https://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>#ppgb{--ppgfondo: #f0f0f0;--ppgfondo2: #fff; --ppg1: #7ed857; --ppgtit: #fff;}.ppgcontb{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;}.ppgcontgen{width:500px; margin-top: 110px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}.ppgcontc{width: 500px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.ppgsubc1{width: 450px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.ppgsub1{font: 40px 'Lobster'; color: var(--ppg1); width: 450px;}.ppgsubcro1{width: 400px; height: 100px; padding: 5px; border: 15px solid var(--ppgfondo2); background: var(--ppgfondo2); font: 13px 'Raleway'; overflow: auto; text-align: justify; display: flex; flex-direction: column;}.ppgsubcro1 span{border-left: 5px solid var(--ppg1); padding: 5px; margin-bottom: 5px;}.ppgsubcro1 span a{color: var(--ppg1); font-weight: 600; text-decoration: none; font-style: italic;}.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;}.ppgsubcro1::-webkit-scrollbar{width:4px; height: auto;}.ppgsubcro1::-webkit-scrollbar-thumb:vertical{width: 4px; height:10px; background-color: var(--ppg1);}</style>