← Back to Layouts
hippie 60s

Name: FriendRewind
Author: FriendRewind
Author: Am_i_real?⦻
Category: Classic
Created: November 12, 2026
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":"frame38","pageFont":"Chewy","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://www.pinterest.com/pin/521080619398135189/","pageBgMode":"cover","heroImageUrl":"https://media.tenor.com/S611y1SGX2MAAAAM/groovy-groovy-baby.gif","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#f09800","navBgImage":"","navBgMode":"cover","navLinkColor":"#ff0000","navLinkHover":"#e4d37c","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":"#260137","textHeading":"#75ff78","textLink":"#61edff","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"https://www.pinterest.com/pin/977562662893006050/","urlInfo":"https://www.pinterest.com/pin/742249582357168392/","tableSection":"https://www.pinterest.com/pin/423549539979086938/","tunes":"https://www.pinterest.com/pin/427279083407842266/","blogPreview":"https://www.pinterest.com/pin/720857484146329690/","blurbs":"https://www.pinterest.com/pin/1132585006306076279/","friends":"https://www.pinterest.com/pin/1016054365941851835/","Comments Background":"https://www.pinterest.com/pin/738660776422879240/","comments":"https://www.pinterest.com/pin/790241065923059044/"}} */
/* Generated by FriendRewind.com Visual Builder */

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

body, body.profile-page {
  background-image: url("https://www.pinterest.com/pin/521080619398135189/") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #260137 !important;
  font-family: 'Chewy', '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;
  }
}

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:8%!important;left:8%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:12px!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_69704d3bc43999.36134691.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://media.tenor.com/S611y1SGX2MAAAAM/groovy-groovy-baby.gif') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

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

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

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

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

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

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #75ff78 !important;
}

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

.contact {
  background-image: url("https://www.pinterest.com/pin/977562662893006050/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info {
  background-image: url("https://www.pinterest.com/pin/742249582357168392/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.table-section {
  background-image: url("https://www.pinterest.com/pin/423549539979086938/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.tunes {
  background-image: url("https://www.pinterest.com/pin/427279083407842266/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blog-preview {
  background-image: url("https://www.pinterest.com/pin/720857484146329690/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blurbs {
  background-image: url("https://www.pinterest.com/pin/1132585006306076279/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends {
  background-image: url("https://www.pinterest.com/pin/1016054365941851835/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#comments {
  background-image: url("https://www.pinterest.com/pin/738660776422879240/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.comments-table td {
  background-image: url("https://www.pinterest.com/pin/790241065923059044/") !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>

/* ==========================================
   TURNTABLE CONTAINER
   ========================================== */

#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
   SPINS AUTOMATICALLY
   ========================================== */

#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;

  /* Record spins by default */
  animation: mini-turntable-spin 2.4s linear infinite !important;
  animation-play-state: running !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
   NEEDLE ON RECORD BY DEFAULT
   ========================================== */

#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;

  /* Default: needle rests on vinyl */
  transform: rotate(35deg) !important;

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

/* ==========================================
   ROTARY SPEED / POWER DIAL
   PLAYING POSITION BY DEFAULT
   ========================================== */

#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;

  /* Default: power on */
  transform: rotate(50deg) !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: LIFT NEEDLE AND STOP RECORD
   ========================================== */

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

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

/* Pause record rotation on hover */

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

  animation-play-state: paused !important;
}

/* Needle swings away from the record */

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

  transform: rotate(-9deg) !important;
}

/* Power dial moves to resting position */

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

  transform: rotate(-32deg) !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>
<style>
.online {content: url(https://calamidia.neocities.org/friendrewindstuff/Online_UTDR.gif);}
</style>
<style>
.profile .friends .person img {
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
  animation: spin 7s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
</style>
<style>
.logo .nav-logo {
  content: url(https://www.pinterest.com/pin/738520038917478748/);
  width: 180px;
  height: auto;
}
</style>