Home
Browse
Blog
Forum
Videos
More ▾
Groups Gallery Artists Bulletins Favorites About Brand Invite Downloads Log In Sign Up

← Back to Layouts

Layout Preview

player

Author: aheartwellmaddie

Category: ?

Created: June 30, 2026

Comments (0)

No comments yet. Be the first!

You must log in to comment.

×

CSS Code

<style>
<style>
.cd-player{

width:330px;
padding:20px;

background:
linear-gradient(
145deg,
#eeeeee,
#777,
#222
);

border-radius:25px;

box-shadow:

0 20px 40px black,
inset 0 0 20px white;

margin:50px auto;

font-family:Arial;

color:white;

}



/* screen */

.player-screen{

background:#111;

border-radius:8px;

padding:10px;

text-align:center;

box-shadow:
inset 0 0 10px #000;

}


.player-screen span{

font-size:10px;
color:#b46cff;

}


.player-screen h3{

margin:5px;

font-size:16px;

}



/* CD area */

.disc-area{

height:180px;

display:flex;

justify-content:center;

align-items:center;

}



/* CD */

.cd-disc{

width:150px;
height:150px;

border-radius:50%;

position:relative;

overflow:hidden;

box-shadow:

0 0 20px #b46cff;

animation:spin 4s linear infinite;

}



.cd-disc img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;

}



/* CD hole */

.cd-disc:after{

content:"";

position:absolute;

width:25px;
height:25px;

background:#ddd;

border-radius:50%;

top:50%;
left:50%;

transform:
translate(-50%,-50%);

box-shadow:
0 0 5px black;

}



/* shiny reflection */

.cd-disc:before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent,
rgba(255,255,255,.6),
transparent
);

animation:shine 2s infinite;

}



@keyframes spin{

to{
transform:rotate(360deg);
}

}



@keyframes shine{

from{
transform:translateX(-100%);
}

to{
transform:translateX(100%);
}

}



/* buttons */

.player-buttons{

display:flex;

justify-content:center;

gap:15px;

}



button{

width:45px;
height:35px;

border-radius:10px;

background:#222;

color:white;

border:1px solid #aaa;

}



.play{

background:#a855f7;

box-shadow:
0 0 15px #a855f7;

}



/* lights */

.lights{

text-align:center;

margin-top:15px;

letter-spacing:8px;

color:#c084fc;

text-shadow:
0 0 15px #c084fc;

}
</style>

<div class="cd-player">

  <div class="player-screen">
    <span>NOW PLAYING</span>
    <h3>Heartwell Ending</h3>
    <p>Track 04 • 3:42</p>
  </div>


  <div class="disc-area">

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

  </div>


  <div class="player-buttons">

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

  </div>


  <div class="lights">
    ● ● ●
  </div>

</div></style>

×

Enlarged Preview

Disclaimer: This project is not affiliated with MySpace® in any way.

FriendRewind - Free retro social network with HTML/CSS profiles, built-in music player, blogs, groups with voice chat, and bulletins. No algorithms, no tracking, no ads.

Live Stats
Rules
Safety
Privacy Policy
Uptime
Contact

© 2026 FriendRewind. All rights reserved.

Now Playing: Nothing playing

0:00

0:00