← Back to Layouts
teste

Name: FriendRewind
Author: FriendRewind
Author: mp3lynne
Category: Classic
Created: September 10, 2026
com musica
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://friendrewind.com/uploads/gallery/34148/img_6aa20984284563.75168443.webp","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#730d8c","navBgImage":"https://pin.it/4d0eAsEgG","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#ff00ff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

body, body.profile-page {
  background-image: url("https://friendrewind.com/uploads/gallery/34148/img_6aa20984284563.75168443.webp") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.myspace-header .top-nav {
  background: #730d8c;
  background-image: url("https://pin.it/4d0eAsEgG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav-wrapper {
  background: #730d8c;
  background-image: url("https://pin.it/4d0eAsEgG");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav li a:hover {
  color: #ff00ff;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

#disc-collection * {

    all: unset;

  }

 

  #disc-collection {

    all: initial!important;

    width: 100%!important;

    height: 240px!important;

    margin: 30px 0!important;

    display: flex!important;

    flex-direction: row!important;

    position: relative!important;

    margin-left: 2px!important;

  }

 

  #disc-collection .disc {

      all:unset!important;

    perspective: 500px !important;

    width: 20px!important;

    transition: width 0.5s!important;

  }

 

  #disc-collection .disc:hover {

    width: 180px!important;

  }



  #disc-collection img {

      all:unset!important;

    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

    width: 183px!important;

    height: 180px!important;

    transform: rotateX(0deg) rotateY(5deg)!important;

    transform-style: preserve-3d!important;

    border-radius: 4px!important;

    border: 2px solid rgba(0, 0, 0, 0.1)!important;

    margin-left: 20px!important;

object-fit: cover!important;

  }

 #disc-collection .disc:after {

content: "";

background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), 

linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, 

rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));

background-size: contain, cover;

position: absolute;

top: 0;

left: 0;

transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

    width: 210px!important;

    height: 183px!important;

    transform: rotateX(0deg) rotateY(5deg)!important;

    transform-style: preserve-3d!important;

    border: 0px solid rgba(0, 0, 0, 0)!important;

object-fit: cover!important;

}

  #disc-collection .disc:hover img {

    transform: rotateX(0deg) rotateY(1deg)!important;

    width: 183px!important;

    height: 180px!important;

    margin-top: -25px!important;

    margin-left: 20px!important;

  }

   #disc-collection .disc:hover:after {

    transform: rotateX(0deg) rotateY(1deg)!important;

    width: 210px!important;

    height: 183px!important;

    margin-top: -25px!important;

  }

  #disc-collection .title {

    color: #000000; /* here where it says color you can insert a diffrent color code for the title of your discs */

    display: block;

    visibility: hidden;

    position: absolute;

    bottom: 0px;

    text-align: center;

    width: 100%;

    padding-left: 6px;

  }

 

  #disc-collection .disc:nth-child(n):hover + .title {

    visibility: visible;

  }



</style><div id="disc-collection">



 <div class="disc">

    <img src="CoverURL"> /* where it says cover url, you paste the url of ur album cover and where it says artist and album you type in the name of the artist and album, also you can delete these instructions from the code */

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



 <div class="disc">

    <img src="CoverURL">

  </div>

  <div class="title">Artist - Album</div>



</div>