← Back to Layouts
quack

Name: FriendRewind
Author: FriendRewind
Author: Diwi3
Category: :D
Created: August 2, 2026
Comments (0)

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

<style>
<style>
<!-- Original Pink Layout by ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
 <!-- https://friendrewind.com/layouts/preview.php?id=2781 --> 

<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: -100px !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: #fff0f5 !important; /* Soft pastel pink */
    border: 1px solid #f4c2c2 !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: #4a2c34 !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: #a6858d !important; 
    font-size: 13px !important;     
    margin-top: 4px !important;
  }

  .spotify-status-tag-scaled {
    color: #ff8da1 !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>
  /* BEGIN WEBPAGE DESIGN */
  
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap & https://fonts.googleapis.com/css2?family=Chewy&family=Sarina&display=swap');

.general-about .profile-pic img,
.profile-pic img,
#profile-pic-container img,
profile .profile-pic img {
  -webkit-mask-image: url(https://files.catbox.moe/rra6vz.png) !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  border-radius: 0px !important;
  object-fit: cover !important;
}

@keyframes monitorFlicker {
  0% { opacity: 0.015; } 
  50% { opacity: 0.025; } 
  100% { opacity: 0.015; } 
}

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

  .profile-info {
    border: 3px dotted #e5afbc !important;
    background-image: url('https://i.pinimg.com/736x/6c/84/7b/6c847b7eb1223d6f839510d6bab73384.jpg') !important; 
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 5px !important;
    margin-bottom: 15px !important;
    border-radius: 16px !important;
    box-shadow: 0px 0px 10px #ffe3ec !important;
}
 .contact a, 
.contact td a, 
.contact .inner a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.contact img, 
.contact td img, 
.contact .inner img {
    content: url('https://64.media.tumblr.com/204cfeb8f36b1dd06763d6810e01946b/0ff21daacf0346e3-32/s75x75_c1/c15d4967e1400e05a3feaf2363c9cb9f02ddb084.gifv') !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: none !important;
} 
  
body {
  font-family: 'Chewy', Arial, sans-serif !important;
  font-size: 18px; 
  background-color: #ffb3c6 !important; 
  background-image: url('https://i.pinimg.com/736x/3f/8b/f2/3f8bf209d3b37d0cb2be5f510590f9b4.jpg') !important;    
  background-size: cover !important;    
  background-repeat: no-repeat !important;  
  background-attachment: fixed !important;   
  overflow-x: hidden; 
  position: relative;
  padding-top: 10% !important;
  padding-bottom: 10% !important;
  padding-left: 12% !important;
  padding-right: 12% !important;
  box-sizing: border-box !important;
  min-height: 100vh;
}

html {
  position: relative;
}
html::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: url('https://64.media.tumblr.com/748aa4dadf40de0fa36b8cde0ec1d1b8/e90e8bfaaced2d14-97/s500x750/a914bd186a7ad8a02ef616136757519d3195d009.pnj');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999999; 
  pointer-events: none; 
}

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(255, 227, 236, 0.04) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(rgba(93, 70, 78, 0) 50%, rgba(93, 70, 78, 0.015) 50%); 
  background-size: 100% 100%, 100% 4px; 
  z-index: 9999; 
  pointer-events: none;
}

body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(93, 70, 78, 0.005); 
  z-index: 9998;
  pointer-events: none;
  animation: monitorFlicker 0.12s infinite; 
}

a, a:link, a:visited, a:active, a:hover {
    color: #5d464e !important; 
    text-decoration: none !important;
    outline: none !important; 
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.container, main, #main {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  background: transparent !important;
  animation: globalFloat 4s ease-in-out infinite !important;
}

main {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px auto 10px auto;
}

.top {
    display: flex !important;
    opacity: 1 !important;
    height: auto !important;
    background: #f7d6df !important;
    border: 3px dotted #e5afbc !important; 
    border-radius: 16px !important;
    padding: 10px 20px !important;
    margin: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0px 0px 10px #ffe3ec !important;
    gap: 15px !important;
}

.top .left, .top .center, .top .right {
    display: flex !important;
    align-items: center !important;
    font-family: 'Chewy', Arial, sans-serif !important;
    color: #5d464e !important;
}

.top .left img, .top .logo-img {
    max-height: 35px !important;
    filter: drop-shadow(0px 0px 2px #ffe3ec) !important;
}

.search-wrapper {
    display: flex !important;
    opacity: 1 !important;
    height: auto !important;
    background: #ffffff !important;
    border: 2px dotted #e5afbc !important; 
    border-radius: 12px !important;
    padding: 4px 10px !important;
}

.search-wrapper input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-family: 'Chewy', Arial, sans-serif !important;
    color: #5d464e !important;
    font-size: 14px !important;
}

.search-wrapper button, .logout-btn {
    display: inline-block !important;
    opacity: 1 !important;
    height: auto !important;
    background: #f1c2cf !important;
    border: 2px dotted #e5afbc !important; 
    border-radius: 10px !important;
    color: #5d464e !important;
    padding: 4px 12px !important;
    font-family: 'Chewy', Arial, sans-serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.search-wrapper button:hover, .logout-btn:hover {
    background: #ff477e !important;
    color: #ffffff !important;
}

p, span, td, .inner, .profile-info, footer p {
    font-family: 'Chewy', Arial, sans-serif !important; 
    color: #5d464e !important; 
}

h1, h2, h3, h4, h5, h6, .heading {
    font-family: 'Chewy', Arial, sans-serif !important; 
    font-size: 15px !important; 
    color: #5d464e !important; 
}

b, strong {
    font-weight: bolder;
    color: #5d464e !important;
}

div.profile .w-40 h1, 
div.profile .col.w-40.left h1,
.w-40 h1, 
.col.w-40.left h1 {
  font-family: 'Sarina', sans-serif !important; 
  font-size: 65px !important; 
  text-align: center !important;
  background: -webkit-linear-gradient(#ffa6c9, #ffe3ec) !important; 
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.5px #5d464e !important; 
  border-bottom: 3px solid #e5afbc !important; 
  padding-bottom: 5px !important;
  margin-bottom: 15px !important;
  filter: drop-shadow(0px 3px 4px #ffe3ec) !important;
}

nav {
    margin: 10px;
}

nav .links {
    border: 3px dotted #e5afbc !important; 
    border-radius: 16px !important;
    padding: 6px !important;
    background: #f7d6df !important; 
    box-shadow: 0px 0px 10px #ffe3ec !important;
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 10px;
}

nav .links a, 
nav .links a:link, 
nav .links a:visited, 
nav .links a:active {
    font-family: 'Chewy', Arial, sans-serif !important;
    font-size: 13px !important;
    color: #5d464e !important; 
    padding: 7px 12px;
    text-decoration: none !important;
    display: inline-block;
    outline: none !important; 
    box-shadow: none !important;
}

nav .links a:hover {
    color: #ff477e !important; 
    text-shadow: 1px 1px 0px #ffe3ec !important;
    outline: none !important;
}

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests, .comments-table, .blog-preview, .friends, .home-actions,
footer, .footer, #footer { 
    background: #f7d6df !important; 
    border: 3px dotted #e5afbc !important; 
    border-radius: 16px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    margin-top: 15px !important;
    box-shadow: 0px 0px 10px #ffe3ec !important;
    box-sizing: border-box !important;
}

.profile h1, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading, .table-section h4, .module h4, .blurbs h4, .section h4, .contact .heading, .table-section .heading, .home-actions .heading, .blog-preview h4, .friends .heading {
    border-bottom: 2px dotted #e5afbc !important; 
    background: #f1c2cf !important; 
    padding: 6px 12px !important;
    margin: -15px -15px 15px -15px !important; 
    font-family: 'Chewy', Arial, sans-serif !important; 
    font-size: 14px !important;
    color: #5d464e !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.table-section h4 a, .module h4 a, .blurbs h4 a, .section h4 a, .heading a {
    color: #5d464e !important; 
    text-shadow: 1px 1px 0px #ffe3ec;
}

 .friend-space, .friends {
    background-image: url('https://i.pinimg.com/736x/6c/84/7b/6c847b7eb1223d6f839510d6bab73384.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 3px dotted #e5afbc !important; 
    border-radius: 16px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    box-shadow: 0px 0px 10px #ffe3ec !important;
    box-sizing: border-box !important;
} 
  
.profile .friends .person img:not(.icon) {
    -webkit-mask-image: url(https://64.media.tumblr.com/9c93df2a47ec2fe3ca75307000c565eb/e25352d4f9ac015a-83/s2048x3072/0c5f8d9115263e84b403fe609f1c998270c51794.pnj) !important;
    -webkit-mask-size: 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    border-radius: 0px !important;
    object-fit: cover !important;
}

.comments-table td :first-child img:not(.icon),
.comments-table td:first-child img:not(.icon) {
    -webkit-mask-image: url(https://64.media.tumblr.com/9c93df2a47ec2fe3ca75307000c565eb/e25352d4f9ac015a-83/s2048x3072/0c5f8d9115263e84b403fe609f1c998270c51794.pnj) !important;
    -webkit-mask-size: 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    border-radius: 0px !important;
    object-fit: cover !important;
}

.interests table, .interests .inner {
    border-collapse: collapse !important;
    width: 100% !important;
}

.interests td {
    border-bottom: 2px dotted #e5afbc !important; 
    padding: 8px 4px !important;
}

.interests tr:last-child td,
.interests td:last-child {
    border-bottom: none !important;
}

.interests p {
    border-bottom: 2px dotted #e5afbc !important; 
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
}
.interests p:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

div#profile-playlist-container {
    width: 100% !important; 
    display: block !important;
    max-width: 100% !important;
} 

  /* Profile PLaylist Customized */
.profile-playlist-widget {
    background-image: url('https://i.pinimg.com/736x/6c/84/7b/6c847b7eb1223d6f839510d6bab73384.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important; 
    color: #5d464e !important; 
    box-shadow: 0px 0px 10px #ffe3ec !important;
    max-width: 100% !important;
    font-family: 'Chewy', Arial, sans-serif !important;
    font-size: 13px !important;
    border-radius: 16px !important; 
    padding: 12px !important;
    margin: 5px 0 !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
    user-select: none;
}

.profile-playlist-widget h3 {
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    color: #5d464e !important;
    font-family: 'Chewy', Arial, sans-serif !important;
}

.profile-playlist-widget .song-info {
    font-family: 'Chewy', Arial, sans-serif !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0px !important;
    line-height: 1.2 !important;
    color: #5d464e !important;
}

.profile-playlist-widget .song-artist {
    font-family: 'Chewy', Arial, sans-serif !important;
    font-weight: normal !important;
    color: #ff477e !important; 
    font-size: 12px !important;
}

.profile-playlist-widget .pp-drag {
    width: 19px !important;
    min-width: 8px !important;
    color: #5d464e !important;
    cursor: grab !important;
}

.profile-playlist-widget button {
    background: #f1c2cf !important; 
    border: none !important; 
    color: #5d464e !important;
    font-family: 'Chewy', Arial, sans-serif !important;
    font-size: 13px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    transition: all 0.2s !important;
    margin-left: auto !important;
}

.profile-playlist-widget button:hover {
    background: #ff477e !important;
    color: #ffffff !important;
}

.profile-playlist-widget li.current {
    color: #ffffff !important;
    background: #ff477e !important; 
    border-radius: 10px !important;
    padding: 4px 8px !important;
}

.profile-playlist-widget li.current .song-info,
.profile-playlist-widget li.current .song-artist {
    color: #ffffff !important;
}

.profile-playlist-widget li.profile-playlist-item:hover {
    color: #5d464e !important;
    background: #f1c2cf !important; 
    border-radius: 10px !important;
}

.profile-playlist-widget li.profile-playlist-item {
    border-radius: 10px !important;
    padding: 4px 8px !important;
    transition: background 0.2s ease !important;
}

li.profile-playlist-empty {
    border-radius: 10px !important;
    color: #5d464e !important;
    font-family: 'Chewy', Arial, sans-serif !important;
}

.pp-equalizer {
    display: none !important;
}
  /* End Playlist Customize */
<style>
/* Custom Cursor */
  <style>* {cursor: url(https://external-media.spacehey.net/media/swFB45eLHtxoo5WISoNMw6lviM4kE2Daq7mMcNPJBVOk=/https://64.media.tumblr.com/tumblr_m2wj5jgL671qfamg6.gif), url(https://external-media.spacehey.net/media/swFB45eLHtxoo5WISoNMw6lviM4kE2Daq7mMcNPJBVOk=/https://64.media.tumblr.com/tumblr_m2wj5jgL671qfamg6.gif), auto !important;}
/* End Custom Cursor */
</style><div class="fixed-profile-frame-img"></div><style>
.fixed-profile-frame-img {
  position: fixed !important;
  top: 100% !important;        
  left: 1000px !important;      
  width: 175px !important;    
  height: 175px !important;   
  background-image: url('https://64.media.tumblr.com/54ebbd011ef99f8ebf802a242eb948f2/fca6d2a68f08ad0b-9d/s2048x3072/c42d4d391f62153edaa510fab886dde3fd6b2700.pnj') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 1000 !important;   
  pointer-events: none !important; 
  animation: localFloatLeft 4s ease-in-out infinite !important;
}

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

<style>
<!-- Original Layout base by ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
<!-- https://friendrewind.com/layouts/element.php?id=48 ★ -->

.col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes float {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 8px); }
    100% { transform: translate(0, -0px); }
}

.online {
    content: url("https://64.media.tumblr.com/d2863315fefd3c68e6a0c9a7860e097f/737b41cb0e7fa116-2a/s100x200/2474ddf828924bf534fd0042c327732e271c69a8.gifv");
}
</style>
<style>
/* --- CUSTOM PINK SCROLLBAR --- */


::-webkit-scrollbar {
  width: 12px !important;               
  height: 12px !important;              
}

::-webkit-scrollbar-track {
  background: #fff0f5 !important;       
  border-left: 1px solid #fce4ec !important; 
}


::-webkit-scrollbar-thumb {
  background-color: #f4c2c2 !important; 
  border-radius: 10px !important;       
  border: 3px solid #fff0f5 !important; 
  transition: background-color 0.2s ease-in-out !important;
}


::-webkit-scrollbar-thumb:hover {
  background-color: #ffb7c5 !important; 
}


* {
  scrollbar-width: thin !important;     
  scrollbar-color: #f4c2c2 #fff0f5 !important; 
}</style></style>