← Back to Layouts
y kant tori code

Name: FriendRewind
Author: FriendRewind
Author: schmata
Category: Classic
Created: October 17, 2026
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"https://friendrewind.com/uploads/gallery/34900/img_6ad2e8d6317853.30420091.webp","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"Playfair Display","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://friendrewind.com/uploads/gallery/34900/img_6ad2eaba9002a7.92079755.webp","pageBgMode":"cover","heroImageUrl":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ef175f51e8.88992561.webp","profileRowBgImage":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ea0b91f049.75992076.webp","profileRowBgMode":"tile","navBgColor":"#2e646b","navBgImage":"","navBgMode":"cover","navLinkColor":"#641222","navLinkHover":"#d81313","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#691b1b","contactHeaderText":"#228776","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":2,"contactBorderRadius":8,"contactBoxAnimation":"","interestsHeaderBg":"#6a1b1b","interestsHeaderText":"#228776","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":2,"interestsBorderRadius":8,"contentBoxAnimation":"","textBody":"#3b1907","textHeading":"#25738d","textLink":"#19b3be","headingShadowColor":"#ffc800","headingShadowBlur":25,"headingShadowEnable":true,"moduleImages":{"contact":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ebf239a1f1.28594758.gif","urlInfo":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","tableSection":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","tunes":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","blogPreview":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","blurbs":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","friends":"","Comments Background":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp","comments":"https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp"}} */
/* Generated by FriendRewind.com Visual Builder */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

* { cursor: url(https://friendrewind.com/uploads/gallery/34900/img_6ad2e8d6317853.30420091.webp), auto !important; }

body, body.profile-page {
  background-image: url("https://friendrewind.com/uploads/gallery/34900/img_6ad2eaba9002a7.92079755.webp") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #3b1907 !important;
  font-family: 'Playfair Display', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

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

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://friendrewind.com/uploads/gallery/34900/img_6ad2ef175f51e8.88992561.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://friendrewind.com/uploads/gallery/34900/img_6ad2ea0b91f049.75992076.webp") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top center !important;
}

.myspace-header .top-nav {
  background: #2e646b;
}

.myspace-header .main-nav-wrapper {
  background: #2e646b;
}

.myspace-header .main-nav li a {
  color: #641222;
}

.myspace-header .main-nav li a:hover {
  color: #d81313;
}

.contact {
    border: 2px solid #691b1b !important;
    border-radius: 8px !important;
  }

.contact .heading {
    background-color: #691b1b !important;
    color: #228776 !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 2px solid #6a1b1b !important;
    border-radius: 8px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #6a1b1b !important;
    color: #228776 !important;
  }

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #3b1907 !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #25738d !important;
  text-shadow: 0 0 25px #ffc800 !important;
}

a, .profile a, .table-section a, .module a { color: #19b3be !important; }

.contact {
  background-image: url("https://friendrewind.com/uploads/gallery/34900/img_6ad2ebf239a1f1.28594758.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info, .table-section, .tunes, .blog-preview, .blurbs, #comments, .comments-table td {
  background-image: url("https://friendrewind.com/uploads/gallery/34900/img_6ad2ec931aa968.83628531.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style><style>


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


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


#profile-playlist-container,
#profile-playlist-mount {
  overflow: visible !important;
}

/* ==========================================
   TURNTABLE BASE
   ========================================== */

#profile-playlist-container .profile-playlist-widget {
  --deck: #e8e1d5;
  --wood: #956d50;
  --ink: #272a2c;
  --paper: #f3eee5;
  --rust: #ac6548;

  position: relative !important;
  isolation: isolate !important;

  box-sizing: border-box !important;

  width: 250px !important;
  max-width: 100% !important;

  margin: 13px 0 18px 3px !important;
  padding: 12px 13px 17px !important;

  border: 2px solid #3a3632 !important;
  border-radius: 9px !important;

  overflow: visible !important;
  transform: none !important;

  background:
    linear-gradient(
      to bottom,
      transparent 0 199px,
      #9b8e7d 199px 200px,
      #cec4b7 200px 205px,
      transparent 205px
    ),
    linear-gradient(
      135deg,
      #f0e9dc,
      #d9d0c2
    ) !important;

  box-shadow:
    inset 0 0 0 5px var(--wood),
    inset 0 0 0 7px rgba(58,45,37,.35),
    3px 5px 0 #5a4134,
    7px 11px 15px rgba(0,0,0,.20)
    !important;
}

/* ==========================================
   VINYL RECORD + METAL PLATTER
   ========================================== */

#profile-playlist-container
.profile-playlist-widget::before {

  content: "" !important;

  position: absolute !important;

  top: 20px !important;
  left: 15px !important;

  width: 172px !important;
  height: 172px !important;

  box-sizing: border-box !important;

  border: 5px solid #35383c !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      #17191c 0 2px,
      #d5c6a8 2.5px 4px,
      var(--rust) 4.5px 20px,
      #dbbf9d 20.5px 22px,
      #161619 22.5px 27px,
      transparent 27.5px
    ),
    conic-gradient(
      from 25deg,
      rgba(255,255,255,.09) 0 12deg,
      transparent 12deg 115deg,
      rgba(255,255,255,.06) 115deg 122deg,
      transparent 122deg 360deg
    ),
    repeating-radial-gradient(
      circle,
      #111215 0 3px,
      #292a2d 3.5px 4.5px,
      #121317 5px 7px
    ) !important;

  box-shadow:
    0 0 0 2px #838788,
    0 0 0 5px #3e4143,
    2px 5px 8px rgba(0,0,0,.22)
    !important;

  z-index: 1 !important;
  pointer-events: none !important;

  transform: none !important;
  animation: none !important;
}

/* ==========================================
   INVISIBLE HEADING / TOP DECK SPACE
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3,

#profile-playlist-container
.profile-playlist-widget .pp-header h3 {

  position: relative !important;
  display: block !important;

  width: 100% !important;
  height: 190px !important;

  box-sizing: border-box !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;

  z-index: 3 !important;
  pointer-events: none !important;
}

/* ==========================================
   SILVER TONEARM
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3::before {

  content: "" !important;

  position: absolute !important;

  top: 13px !important;
  right: 10px !important;

  width: 20px !important;
  height: 116px !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background:
    radial-gradient(
      circle at 50% 10px,
      #373b3d 0 3px,
      #d9dcd9 3.5px 7px,
      #51575a 7.5px 10px,
      transparent 10.5px
    ),
    linear-gradient(
      90deg,
      #45494b,
      #cbd0cd 34%,
      #f8f6ed 55%,
      #777d7e
    ) center 18px / 7px 75px no-repeat,
    linear-gradient(
      90deg,
      #25282a,
      #858b8d 55%,
      #313436
    ) center 90px / 14px 14px no-repeat,
    linear-gradient(
      #242426,
      #242426
    ) center 103px / 2px 8px no-repeat
    !important;

  box-shadow: none !important;

  z-index: 5 !important;
  pointer-events: none !important;

  transform-origin: 50% 10px !important;
  transform: rotate(-9deg) !important;

  transition:
    transform .65s cubic-bezier(.2,.72,.25,1)
    !important;
}

/* ==========================================
   ROTARY SPEED / POWER DIAL
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3::after {

  content: "" !important;

  position: absolute !important;

  top: 143px !important;
  right: 6px !important;

  width: 29px !important;
  height: 29px !important;

  padding: 0 !important;

  border: 2px solid #4b4b4a !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 50% 24%,
      #a75b43 0 2px,
      transparent 2.5px
    ),
    radial-gradient(
      circle,
      #d1d2d0 0 9px,
      #888b8a 10px 12px,
      #36393a 13px 100%
    ) !important;

  box-shadow:
    1px 3px 3px rgba(0,0,0,.2) !important;

  z-index: 3 !important;
  pointer-events: none !important;

  transform: rotate(-32deg) !important;
  transition: transform .65s ease !important;
}

/* ==========================================
   RECESSED SONG LIST PANEL
   ========================================== */

#profile-playlist-container
.profile-playlist-widget ul {

  position: relative !important;
  z-index: 3 !important;

  box-sizing: border-box !important;

  width: 100% !important;
  height: 116px !important;
  max-height: 116px !important;

  margin: 0 !important;
  padding: 5px !important;

  list-style: none !important;

  border: 3px solid #3b3d3d !important;
  border-radius: 5px !important;

  background: #d9d2c5 !important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.26),
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 1px 0 #fff7e8
    !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin !important;
  scrollbar-color: #80786e #d9d2c5 !important;

  transform: none !important;
}

/* ==========================================
   SPEAKER GRILLE / MESH OVERLAY
   ========================================== */

#profile-playlist-container
.profile-playlist-widget ul::after {

  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  border-radius: 2px !important;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(45,45,45,.11) 0 1px,
      rgba(255,255,255,.04) 1px 3px,
      transparent 3px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(45,45,45,.09) 0 1px,
      rgba(255,255,255,.03) 1px 3px,
      transparent 3px 6px
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,.08),
      rgba(0,0,0,.03)
    ) !important;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18)
    !important;

  pointer-events: none !important;
  z-index: 4 !important;
}

/* ==========================================
   SONG ROWS
   ========================================== */

#profile-playlist-container
.profile-playlist-widget li {

  position: relative !important;
  z-index: 1 !important;

  box-sizing: border-box !important;

  margin: 1px 0 !important;
  padding: 5px 5px !important;

  border: 0 !important;
  border-bottom: 1px solid #beb4a5 !important;
  border-radius: 2px !important;

  background: rgba(243,238,229,.82) !important;
  color: var(--ink) !important;

  transform: none !important;
  box-shadow: none !important;

  transition: background .2s ease !important;
}

/* Song hover */

#profile-playlist-container
.profile-playlist-widget li:hover {

  background: rgba(213,226,228,.9) !important;
  transform: none !important;
}

/* Currently playing */

#profile-playlist-container
.profile-playlist-widget li.current {

  background: rgba(230,207,186,.92) !important;
  border-left: 3px solid var(--rust) !important;
}

/* ==========================================
   SONG TITLES
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .song-info,

#profile-playlist-container
.profile-playlist-widget .song-info a {

  color: var(--ink) !important;

  font: bold 10px/1.25 Arial, sans-serif !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* ==========================================
   ARTIST NAMES
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .song-artist,

#profile-playlist-container
.profile-playlist-widget .song-artist a {

  color: #777066 !important;

  font: 9px/1.2 Arial, sans-serif !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* ==========================================
   EXISTING SONG CONTROLS
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .pp-drag,

#profile-playlist-container
.profile-playlist-widget button {

  color: #715b51 !important;
}

/* Equalizer */

#profile-playlist-container
.profile-playlist-widget .pp-equalizer span {

  background: var(--rust) !important;
}

/* Empty playlist message */

#profile-playlist-container
.profile-playlist-widget .profile-playlist-empty {

  color: #71695f !important;
  font: italic 10px/1.3 Arial, sans-serif !important;
}

/* Remove old dividers */

#profile-playlist-container
.profile-playlist-widget hr {

  display: none !important;
}

/* ==========================================
   HOVER: START THE TURNTABLE
   ========================================== */

#profile-playlist-container
.profile-playlist-widget:hover {

  transform: none !important;
  filter: none !important;
}

#profile-playlist-container
.profile-playlist-widget:hover::before {

  transform: none !important;
  animation: mini-turntable-spin 2.4s linear infinite !important;
}

#profile-playlist-container
.profile-playlist-widget:hover h3::before {

  transform: rotate(35deg) !important;
}

#profile-playlist-container
.profile-playlist-widget:hover h3::after {

  transform: rotate(50deg) !important;
}

/* ==========================================
   RECORD ROTATION
   ========================================== */

@keyframes mini-turntable-spin {

  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #profile-playlist-container
  .profile-playlist-widget::before,

  #profile-playlist-container
  .profile-playlist-widget h3::before,

  #profile-playlist-container
  .profile-playlist-widget h3::after,

  #profile-playlist-container
  .profile-playlist-widget li {

    animation: none !important;
    transition: none !important;
  }

  #profile-playlist-container
  .profile-playlist-widget:hover::before {

    animation: none !important;
  }
}
</style>