← Back to Layouts
playefr

Name: FriendRewind
Author: FriendRewind
Author: aheartwellmaddie
Category: ?
Created: June 29, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
body{
background:#09050f;
font-family:Tahoma, Arial;
}


.media-player{

width:420px;
padding:12px;

background:
linear-gradient(#777,#222,#555);

border-radius:12px;

box-shadow:
0 0 30px #9b5cff,
inset 0 0 15px white;

color:white;

margin:50px auto;

}



.player-top{

height:25px;

display:flex;
justify-content:space-between;

background:#111;

padding:5px 10px;

font-size:12px;

}



.screen{

display:flex;

gap:15px;

padding:15px;

background:#050505;

}



.album{

width:120px;
height:120px;

}



.album img{

width:100%;
height:100%;

object-fit:cover;

animation:spin 5s linear infinite;

border-radius:50%;

}



@keyframes spin{

to{
transform:rotate(360deg);
}

}



.info h2{

font-size:16px;

}



.bar{

height:8px;

background:#333;

width:220px;

border-radius:10px;

overflow:hidden;

}



.bar div{

width:70%;

height:100%;

background:#b46cff;

}



.buttons{

display:flex;

justify-content:center;

gap:15px;

padding:15px;

}



button{

background:#222;

color:white;

border:1px solid #777;

border-radius:8px;

width:45px;
height:35px;

}



.play{

background:#9b5cff;

}



.equalizer{

height:60px;

display:flex;

align-items:end;

justify-content:center;

gap:5px;

}



.equalizer i{

width:8px;

height:30px;

background:#b46cff;

animation:eq .8s infinite alternate;

}



.equalizer i:nth-child(2){
animation-delay:.2s;
height:45px;
}

.equalizer i:nth-child(3){
animation-delay:.4s;
height:20px;
}

.equalizer i:nth-child(4){
animation-delay:.1s;
height:55px;
}

.equalizer i:nth-child(5){
animation-delay:.5s;
height:35px;
}



@keyframes eq{

to{
height:10px;
}

}



.playlist{

background:#111;

padding:10px;

font-size:12px;

}



.playlist span{

display:block;

padding:5px;

}



.playlist span:hover{

background:#9b5cff;

}
</style>

<div class="media-player">

  <div class="player-top">
    <span>♥ MADDIE PLAYER</span>
    <div>— □ ×</div>
  </div>


  <div class="screen">

    <div class="album">
      <img src="album.jpg">
    </div>


    <div class="info">
      <h2>Heartwell Ending</h2>
      <p>Favourite Song • 2008</p>


      <div class="bar">
        <div></div>
      </div>


      <div class="time">
        2:43 ━━━━━ 3:52
      </div>

    </div>


  </div>



  <div class="buttons">

    <button>◀◀</button>
    <button class="play">▶</button>
    <button>▶▶</button>

  </div>



  <div class="equalizer">

    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>

  </div>



  <div class="playlist">

    <p>♫ Track List</p>

    <span>01 Heartwell Ending</span>
    <span>02 This Armistice</span>
    <span>03 Trust Us We Lie</span>
    <span>04 New Heartbeat</span>

  </div>


</div></style>