[dohtml] <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"> <style>  #soundtrackcontainer {    position: relative;    width: 350px;    height: 450px;    background: var(--dark);    overflow: hidden;    border-radius: 10px;        --light: #faf9f9;        --dark: #242424;        --accent: #f2efa0;      }    .scimg1a {   position: absolute;       top: 80px;       left: 100px;       width: 150px;       height: 150px;       border-radius:5px;       border:1px solid var(--accent);        background: transparent;    opacity: 1;  }    .scimg1a .scimg1 {   position: absolute;       top: 9px;       left: 9px;       width: 130px;       height: 130px;       border-radius:5px;        border: px solid var(--accent);       background-image:url(https://64.media.tumblr.com/c46aa50b05dccf0e3a77b570f563b89d/tumblr_pynn3xAwto1xpjiuvo7_100.png);       background-size: cover;  }    .sctitle {    position: absolute;    top: 245px;    left: 50px;    width: 250px;    height: 30px;    border: 0px;    font-family: poppins;    font-size: 18px;    font-style: italic;    font-style: bold;    font-weight: 700;    letter-spacing: 4px;    padding-bottom: 0px;    color: var(--light);    opacity: 1;  }    #soundtrackcontainer label {    position: absolute;    height: 50px;    width: 50px;    font-size: 40px;    background: transparent;    color: var(--accent);    top: 320px;    left: calc(50% - 25px);    z-index: 9;      justify-content: center;    align-items: center;    border-radius: 50%;    transition: 0.8s;    opacity: 1}  #soundtrackcontainer input {display: none;}  #soundtrackcontainer input:checked+label ~ .scimg1a {opacity: 0;transition-delay:0s; transition: opacity 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .sctb {opacity: 1;transition-delay: 0.9s; transition: all 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .sctb .sctb1 {opacity: 1;transition-delay: 0.9s; transition: all 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .np {opacity: 1;transition-delay: 0.9s; transition: all 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .npimg {opacity: 1;transition-delay: 0.9s; transition: all 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .nptext {opacity: 1;transition-delay: 0.9s; transition: all 0.5s ease-in}  #soundtrackcontainer input:checked+label ~ .sctitle { opacity: 0; transition: opacity 0.5s ease-in}  #soundtrackcontainer input:checked+label  {top: 405px; left: 280px; font-size: 28px;}    .sctb {   opacity: 0;   border: none;       border-radius: 5px;       background: var(--dark);       width: 320px;       height: 350px;       padding: 10px;       overflow: hidden;       position: absolute;       top: 10px;       left: 5px;   transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -webkit-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; } .sctb .sctb1 {   border: none;       width: 320px;       height: 350px;       padding: 0px;       padding-right: 27px;       overflow: auto;       transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -webkit-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; }    .playlistimg {       width: 80px;       height: 80px;       border-radius:0px;           background-image:url(https://64.media.tumblr.com/c46aa50b05dccf0e3a77b570f563b89d/tumblr_pynn3xAwto1xpjiuvo7_100.png);       background-size: cover;  }    .playlisttitle {    width: 200px;    height: 50px;    padding-left: 30px;    font-family: poppins;    font-weight: 800;    color: var(--light);    line-height: 15px;    font-size: 18px;    margin-top: -10px;  }    .plc {    width: 200px;    height: 40px;    border-left: 2px solid var(--accent);    padding-left: 20px;    padding-top: 0px;    margin-left: 10px;    font-family: DM Sans;    font-size: 10px;    color: var(--light);    line-height: 20px;    letter-spacing: 3px;    text-transform: lowercase;  }    .np {    position: absolute;    top: 385px;    left: 0px;    width: 300px;    height: 2px;    border-left: 190px solid var(--accent);    background: var(--light);    opacity: 0;  }    .npimg {   position: absolute;       top: 392px;       left: 20px;       width: 50px;       height: 50px;       border-radius:0px;         background-image:url(https://i.scdn.co/image/ab67616d0000b273a6ddd404c4a4f1091148e749);       background-size: cover;    opacity: 0;  }    .nptext {    position: absolute;    top: 395px;    left: 70px;    width: 200px;    height: 40px;    padding-left: 20px;    padding-top: 3px;    margin-left: 10px;    font-family: DM Sans;    font-size: 13px;    color: var(--light);    line-height: 20px;    letter-spacing: 3px;    text-transform: lowercase;    text-align: justify;    opacity: 0;  }        .fangcred, .fangcred a {      font-family: DM sans;      font-size: 8px;      text-transform: lowercase;      letter-spacing: 3px;      padding-top: 5px;      color: var(--accent);  } </style> <head><script src="https://kit.fontawesome.com/2fb6be3e7f.js" crossorigin="anonymous"></script></head> <center>  <div id="soundtrackcontainer">      <input type="checkbox" id="toggle-label">  <label for="toggle-label"><i class="fas fa-play"></i></label>    <div class="scimg1a"><div class="scimg1"></div></div>    <div class="sctitle">namehere's soundtrack</div>        <div class="sctb"><div class="sctb1">      <table>        <tr>          <td><div class="playlistimg"></div></td>          <td><div class="playlisttitle">namehere's soundtrack            <br> <p style="color: var(--accent); letter-spacing: 20px; text-align: justify; font-size: 20px;"><i class="fas fa-heart"></i> <i class="fas fa-long-arrow-alt-down"></i> <i class="fas fa-random"></i></p></div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://f4.bcbits.com/img/a2993211705_10.jpg" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>lemon boy</b> <br/> cavetown            </div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://images.genius.com/d06461e778d0245d049ed5d241240139.1000x1000x1.jpg" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>stars and moons</b> <br/> dizzy            </div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://i.scdn.co/image/ab67616d0000b2730a9d383073ff5a26851c65a6" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>sweet tooth</b> <br/> cavetown            </div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://i.scdn.co/image/ab67616d0000b273a6ddd404c4a4f1091148e749" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>lonely star</b> <br/> oh wonder            </div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://images.genius.com/44d8c2a6cfe4f9fb3cb70daebf5781fc.1000x1000x1.png" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>soleil soleil</b> <br/> pomme            </div></td>        </tr>      </table>      <br/>      <table>        <tr>          <td><img src="https://images.genius.com/88f7aad9edebb34be5f6541bbb79bc1a.1000x1000x1.jpg" style="width: 52px;height: 52px;"></td>          <td><div class="plc"><b>talk to me</b> <br/> cavetown            </div></td>        </tr>      </table>    </div></div> <div class="np"></div>    <div class="npimg"></div>    <div class="nptext"><b>lonely star</b> <br/> oh wonder</div>  </div>  <div class="fangcred"><a href="http://cttw.jcink.net/index.php?showuser=27999" ><i class="far fa-heart"></i></a></div> </center> [/dohtml] [dohtml]