← Back to Layouts
test layout

Name: FriendRewind
Author: FriendRewind
Author: someonerando
Category: Classic
Created: September 7, 2026
it looks shitty
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":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","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 */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>
/* PROFILE TUNES COLORS */

/* whole music player */
.profile-playlist-widget {
    background: black !important;
    color: black !important;
    border: 2px solid #570000 !important;
}

/* "Profile Tunes" heading */
.profile-playlist-widget h3 {
    color: #311438 !important;
}

/* individual songs */
.profile-playlist-widget li {
    background: #fff0f6 !important;
    color: #5c3b4a !important;
    border-color: #ffb6d2 !important;
}

/* links/song titles */
.profile-playlist-widget a {
    color: blue !important;
}

/* buttons */
.profile-playlist-widget button {
    background: #ff8fbc !important;
    color: white !important;
    border-color: #c94f82 !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style><div class="custom-spotify-widget-scaled">
  <a href="YOUR%20PLAYLIST%20LINK%20HERE" target="_blank" rel="noopener noreferrer">
    <div class="player-body-scaled">
    
      <div class="static-layer"></div>
      
      <div class="player-top-row">
        <img src="YOUR%20COVER%20IMAGE%20URL%20HERE" class="player-art-scaled" alt="Playlist Cover">
        
        <div class="player-details-scaled">
          <div class="playlist-title-scaled">PLAYLIST NAME HERE</div>
          <div class="playlist-author-scaled">by YOUR NAME HERE</div>
          <div class="spotify-status-tag-scaled">▶ Click to Stream</div>
        </div>
      </div>
      
      <div class="fake-tracklist-scaled">
        <div class="fake-track-line"><span>1</span> FIRST TRACK NAME HERE</div>
        <div class="fake-track-line"><span>2</span> SECOND TRACK HERE</div>
        <div class="fake-track-line"><span>3</span> THIRD TRACK HERE</div>
        <div class="fake-track-line"><span>4</span> FOURTH TRACK HERE</div>
        <div class="fake-track-line"><span>5</span> FIFTH TRACK HERE</div>
      </div>

    </div>
  </a>
</div><style>
  .custom-spotify-widget-scaled {
    position: fixed !important;   
    left: -340px !important;         
    top: 400px !important;         
    z-index: 2147483647 !important; 
    width: 320px !important;       
  }

  .custom-spotify-widget-scaled a {
    text-decoration: none !important;
    display: block !important;
  }

  .player-body-scaled {
    position: relative !important;
    overflow: hidden !important;
    background: #000100 !important; /* Soft pastel pink */
    border: 1px solid #311438 !important; /* Light rose border */
    border-radius: 12px !important;       
    padding: 14px !important;             
    display: flex !important;
    flex-direction: column !important;   
    gap: 14px !important;                 
    box-shadow: 0 12px 32px rgba(244, 194, 194, 0.4) !important;
    transition: all 0.3s ease-in-out !important;
  }

  .player-body-scaled:hover {
    border-color: #ffb7c5 !important;
    box-shadow: 0 12px 36px rgba(255, 183, 197, 0.6) !important;
    transform: translateY(-2px) !important;
  }

  .player-top-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .player-art-scaled {
    width: 85px !important;         
    height: 85px !important;       
    border-radius: 8px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .player-details-scaled {
    display: flex !important;
    flex-direction: column !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    text-align: left !important;    
    overflow: hidden !important;
  }

  .playlist-title-scaled {
    color: #610315 !important; /* Deep dark rose/wine tone */
    font-size: 16px !important;     
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .playlist-author-scaled {
    color: #2c2675 !important; 
    font-size: 13px !important;     
    margin-top: 4px !important;
  }

  .spotify-status-tag-scaled {
    color: #602861 !important; 
    font-size: 13px !important;     
    margin-top: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .fake-tracklist-scaled {
    border-top: 1px solid #fce4ec !important; 
    padding-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;                      
  }

  .fake-track-line {
    color: #6e5057 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .fake-track-line span {
    color: #c09f9f !important;
    margin-right: 8px !important;
    display: inline-block !important;
    width: 12px !important;
  }

 /
  .static-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.04 !important; 
    pointer-events: none !important; 
    z-index: 10 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
    animation: static-motion 0.2s infinite alternate !important;
  }

  @keyframes static-motion {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-10px, 10px); }
  }

  @media (max-width: 1300px) {      
    .custom-spotify-widget-scaled {
      display: none !important;
    }
  }
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style id="fr-vb2">

@font-face {
font-family:'yipes';
src: url(https://dl.dropbox.com/s/qrdm3wived8sm66/Yipes.ttf); 
}

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
src: url(https://dl.dropbox.com/s/1fln6ooh5ffwf32/Neurock%20Solid.ttf);
font-family: Neurock;
}

/* FR_MANUAL_EXTRAS */
body {
  font-family: windows;
  background-image: url(https://i.pinimg.com/736x/e4/b2/a3/e4b2a3d3e7c9c3b9ac7f19854c450e3e.jpg);
  background-attachment: fixed;
  background-repeat: repeat;
}

nav {
  margin: 20px auto !important; 
  max-width: 960px;             
  position: relative;
  z-index: 10;
  
  background: rgba(245, 40, 145, 0.1) !important;
  padding: 50px;
  border-radius: 80px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

  animation: floatAnimation 3s ease-in-out infinite;
}

.master-container {
  margin-top: 50px !important;
  margin-left: auto;
  margin-right: 40px; 
  max-width: 800px;

  background-color: rgba(255, 255, 255, 0.9); 
  padding: 1px;                               
  border-radius: 12px;                         
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);  
  margin-bottom: 50px;                         

  animation: floatAnimation 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0px);
  }
}

      a {
    color: #573241;
    text-decoration: wavy underline;
  }
  
  a:hover {
    color: #550000;
    text-decoration-style: double;
    font-style:italic;
  }

.links {
  background-color: #573241 !important;
}

.links a {
  color: #000100 !important;
  text-shadow: 5px 10px #5C0404 !important;
}

.row.profile{
 background: url(https://i.pinimg.com/1200x/20/75/a7/2075a7ef8f1489f01d73d874b76c90f1.jpg) center / cover repeat;
background-color: #ffffff;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -23px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border: 4px double silver;
border-radius: 50px;     
}

.w-40 h1{
-webkit-text-stroke: 0.5px black;
font-family: neurock;
font-size: 3em;
color: rgba(116, 48, 111, 0.45);
}

div.top {
   background: rgba(0, 89, 56, 77);
   border-top: 4px solid black;
   border-left: 4px solid black;
   border-right: 4px solid black;
   padding: 10px;
   margin-top: 10px;
}

.links {
   background: rgba(0, 154, 255, 0.55);
   border-bottom: 4px solid rgb(57,00,00);
   border-left: 4px solid rgb(57,00,00);
   border-right: 4px solid rgb(57,00,00);
   padding: 2px;
}

.blurbs, .comments-table, .url-info, .table-section, .general-about, .blog-preview, .friends-grid, .mood {
   background: rgba(0, 0, 0, 0.75);
   border: 4px solid rgb(57,00,00);
   padding: 20px;
}

.profile-pic img {
   width: 200px;
   padding: 10px;
}

.details {
   color: #fff;
}

.mood {
   color: #fff;
   margin-top: 15px;
   margin-bottom: 15px;
}

.contact {
   background: #000 !important;
}

.contact .inner a img {
   filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

.comments-table {
   color: #000;
}

.general-about {
   overflow: auto;
}

.profile-pic img {
   width: 200px;
   padding: 10px;
}

.online img {
  content: url(image here);
}

.offline img {
  content: url(http://www.coolspacetricks.com/images/myspaceicons/045.gif);
}

h1 {
   text-align: center;
   color: #000;
}

.logo {
   content: url(https://i.imgur.com/yeRU4Gt.png);
}

.profile .contact {
border: 2px solid rgb(57,00,00);
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 5px;
}

FOR THE URL BOX
.profile .url-info {
border: 2px solid rgb(57,00,00);
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 5px;
}

.profile .table-section { 
border: 2px solid rgb(57,00,00);
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 5px;
}

.profile .blurbs { 
border: 2px solid rgb(57,00,00);
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 5px;
}

.profile .friends { 
border: 2px solid rgb(57,00,00);
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border-radius: 5px;
}

.profile .contact .heading { 
background: pink;
}

.profile .table-section .heading { 
background: green;
}

.profile .blurbs .heading { 
background: green;
}

.profile .friends .heading { 
 background:
}

body.profile-page .mutual-friends-section {
    background-color: rgba(00,00,00,0.7) !important;
    border: 4px solid rgba(46,00,0, 0.9) !important;
}

.heading h4 {
border: solid #000;
box-shadow: 2px 0px 2px 1px rgb(0 0 255 / 0.2);
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	    content: url(https://i.imgur.com/6BhRejY.gif)
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    content: url(https://i.imgur.com/sRhIyyS.gif)
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    content: url(https://i.imgur.com/qfZdir2.gif)
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    content: url(https://i.imgur.com/1D2VdVh.gif)
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    content: url(https://i.imgur.com/tJWQdyO.gif)
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    content: url(https://i.imgur.com/11cAPuy.gif)
    }

.icon {
display: none; 
}

.details-table td {
border: double black;
box-shadow: 2px 10px 2px 1px rgb(45 0 25 / 0.6);
border-radius: 9px
}

  .interests .details-table tbody tr:nth-child(6) {
    display: none;
}

.profile .friends .person img:not(.icon) {
filter: grayscale(100%);
}

.comments-table tr td:first-child img {
  filter: grayscale(100%);
}

.comments-table td {
  background-color:  rgb(40 0 6 / 0.9);
}

.comments-table tr td:first-child {
  background-color:	black;
}

footer {
background-image: url(https://i.pinimg.com/736x/f1/1f/21/f11f21d573e81e32e0fceee316285b2a.jpg);
}

::selection {
/* Change highlight background color */
background: black;
/* Change highlight text color */
color: purple;
}

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem white);
}
.profile-pic: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;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none
}
.general-about .profile-pic img {
max-width: inherit;
}

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://i.pinimg.com/originals/fc/c0/04/fcc0048de86b87d079d6a6daf1534f64.gif);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<div style="float:  ; max-height: 300px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="/proxy/image.php?url=https%3A%2F%2Fimg1.picmix.com%2Foutput%2Fstamp%2Fnormal%2F6%2F7%2F6%2F3%2F2363676_b8259.gif" width="300" height="300"></div> 

<img src="/proxy/image.php?url=https%3A%2F%2Fpixelsafari.neocities.org%2Fdividers%2Fhorror%2Fchain.png">