Baul sin JS :( Parte6

<link href="https://fonts.googleapis.com/css?family=Barlow:600|Great+Vibes&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<div class="fond"><div class="plantill" id="psix"><div class="costadoIzq"><div class="textt tttwo">There is no one who loves <span style="color:#E0CC9C">pain</span> itself.</div></div><div class="contplay"><div class="playun"><div class="cuadrado"><span class="lnr lnr-mic" id="icpla"></span></div><div class="bord"></div><div class="titplay">Starboy</div></div><div class="playun"><div class="playun"><div class="cuadrado"><span class="lnr lnr-mic" id="icpla"></span></div><div class="bord"></div><div class="titplay">Don't start now</div></div></div><div class="playun"><div class="playun"><div class="cuadrado"><span class="lnr lnr-mic" id="icpla"></span></div><div class="bord"></div><div class="titplay">Fix me</div></div></div><div class="playun"><div class="playun"><div class="cuadrado"><span class="lnr lnr-mic" id="icpla"></span></div><div class="bord"></div><div class="titplay">Let it be</div></div></div></div><div class="imgchiqu" style="background:url(http://via.placeholder.com/63);margin-top:-10px;"></div><div class="cred" style="margin-top:19px;"><a href="https://bettyleg.tumblr.com/">BettyLeg</a></div></div></div>

<style>.fond{ width:500px; height:355px; border:1px solid #eee; margin:20px auto; padding:10px; background:#FBFAFA; outline:1px solid #eee; outline-offset:8px; } .cred{font-family:arial; text-transform:uppercase; font-size:8px;} .cred a{color:#ccc!important; text-decoration:none;}.plantill{ width:440px; height:290px; background:#fff; padding:30px; outline:1px solid #eee;} .costadoIzq {width:60px; height:220px; background:#fafafa; outline:1px solid #eee; outline-offset:6px; margin-left:-2px;} .textt{font-size:8px; text-transform:uppercase;  width:340px; background:# ddd; margin:0px auto; position:relative; top:20px; color:#999;font-family: 'Barlow', sans-serif; letter-spacing:2px; font-weight:600;}.tttwo{transform: rotate(-90deg); width:200px!important; top:0px; margin-left:-70px; position:relative; top:100px; text-align:center; line-height:12px;}.imgchiqu{width:63px; height:63px; background:#ddd; float:left; top:-54px; position:relative; outline:1px solid #eee; outline-offset:6px; left:-3px;}.contplay{width:290px; padding:30px; outline:1px solid #eee; height:252px; margin-top:-230px; margin-left:95px; background:#fafafa; display:grid; grid-template-rows:auto auto auto auto;} .playun{height:60px; background:#E0CC9C; outline:1px solid #ddd;}.cuadrado{width:30px; height:30px; background:#fff;padding:15px; text-align:center;} .bord{ width: 0;height: 0;border-right: 20px solid transparent; border-top: 30px solid transparent; border-left: 20px solid #fff; border-bottom: 30px solid #fff; position:relative; top:-60px;left:60px;} .titplay{position:relative; width:150px; height:30px; background:#d dd; top:-96px; left:120px; text-align:right; font-family: 'Barlow', sans-serif; text-transform:uppercase; letter-spacing:2px; color:#fff; font-size:10px;} #icpla{font-size:25px;position:relative; top:3px; color:#E0CC9C;}  </style>