← Back to Layouts
Musicals

Name: FriendRewind
Author: FriendRewind
Author: 𝔈𝔩𝔩𝔦𝔢𝔗𝔥𝔢𝔐𝔲𝔰𝔦𝔠𝔞𝔩
Category: Classic
Created: October 28, 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":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"https://file.garden/ajLIkdQpd3Qn0iYc/Green%20and%20White%20Simple%20Abstract%20Banner%20Landscape.png","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 */

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://file.garden/ajLIkdQpd3Qn0iYc/Green%20and%20White%20Simple%20Abstract%20Banner%20Landscape.png') !important;
    background-size: cover !important;
    background-position: center center !important;
  }
</style><style>


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


/* FR_MANUAL_EXTRAS */
/* ==========================================
   BROADWAY DREAMS
   WICKED x SIX x HAMILTON x HEATHERS
   FULL FRIENDREWIND PROFILE THEME
   ========================================== */

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

/* COLOR PALETTE */
body.profile-page {
  --green: #4dc58a;
  --pink: #ff69b4;
  --purple: #a985dc;
  --gold: #e4bd70;
  --red: #d94a56;
  --blue: #719de0;
  --yellow: #f0d76d;
  --cream: #f5e8cf;
  --ink: #211a26;
  --panel: #211a29;

  background-color: #100d17 !important;
  background-image:
    radial-gradient(ellipse at 10% 10%,
      rgba(77,197,138,.18), transparent 35%),
    radial-gradient(ellipse at 90% 20%,
      rgba(255,105,180,.15), transparent 35%),
    radial-gradient(ellipse at 50% 100%,
      rgba(169,133,220,.16), transparent 45%) !important;
  background-attachment: fixed !important;
  color: var(--cream) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
}

/* LINKS */
body.profile-page a {
  color: var(--pink) !important;
  text-decoration: none !important;
  transition: color .2s, text-shadow .2s;
}

body.profile-page a:hover {
  color: var(--green) !important;
  text-shadow: 0 0 8px rgba(77,197,138,.65);
}

/* TOP SITE HEADER */
body.profile-page nav {
  background: #17111e !important;
  border-bottom: 2px solid var(--pink) !important;
  box-shadow: 0 4px 18px rgba(255,105,180,.15);
}

body.profile-page nav .top {
  background: linear-gradient(
    90deg, #153a2d, #24172e, #481e2d
  ) !important;
  color: var(--cream) !important;
  border-bottom: 1px solid #60416c !important;
}

body.profile-page nav .links {
  background: #17111e !important;
  border-top: 1px solid #42304b !important;
}

body.profile-page nav .links a {
  color: var(--cream) !important;
  font-family: 'DM Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: .2s;
}

body.profile-page nav .links a:hover {
  background: #36203d !important;
  color: var(--pink) !important;
  text-shadow: 0 0 8px var(--pink);
}

/* MAIN PROFILE AREA */
body.profile-page .master-container {
  max-width: 1050px !important;
  background: rgba(19,14,26,.96) !important;
  border: 1px solid #745078 !important;
  box-shadow:
    0 0 0 5px rgba(169,133,220,.06),
    0 0 35px rgba(169,133,220,.12);
  margin-top: 25px !important;
  margin-bottom: 35px !important;
  padding: 12px !important;
}

body.profile-page .row.profile {
  gap: 14px !important;
}

/* PROFILE COLUMNS */
body.profile-page .col.w-40.left,
body.profile-page .col.right {
  min-width: 0;
}

/* ALL PROFILE BOXES */
body.profile-page .contact,
body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .general-about,
body.profile-page .url-info,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .table-section,
body.profile-page #comments,
body.profile-page .profile-playlist-widget {
  background: #211a29 !important;
  color: var(--cream) !important;
  border: 1px solid #60416c !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
  margin-bottom: 14px !important;
  overflow: hidden;
}

/* SECTION TITLE BARS */
body.profile-page .heading {
  background: linear-gradient(
    90deg, #174333, #362044, #542039
  ) !important;
  border-bottom: 2px solid var(--pink) !important;
  border-radius: 0 !important;
  padding: 9px !important;
}

body.profile-page .heading h1,
body.profile-page .heading h4 {
  color: var(--cream) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  text-shadow: 1px 1px #17111e;
}

/* BOX CONTENT */
body.profile-page .section {
  background: #211a29 !important;
  color: var(--cream) !important;
  padding: 10px !important;
}

body.profile-page .section p,
body.profile-page .blurbs,
body.profile-page .bio-text {
  line-height: 1.8;
}

/* PROFILE PHOTO */
body.profile-page .profile-pic {
  padding: 7px !important;
  background: #17111e !important;
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 12px rgba(77,197,138,.15);
}

body.profile-page .profile-pic img {
  border: 2px solid var(--purple) !important;
  border-radius: 2px !important;
  max-width: 100%;
  height: auto;
}

/* DISPLAY NAME AND STATUS */
body.profile-page h1,
body.profile-page h2,
body.profile-page h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

body.profile-page .mood,
body.profile-page .online,
body.profile-page .offline,
body.profile-page .last-login {
  color: var(--gold) !important;
}

/* CONTACT BUTTONS */
body.profile-page .contact a,
body.profile-page button,
body.profile-page input[type="submit"] {
  transition: .2s;
}

body.profile-page .contact a {
  color: var(--pink) !important;
}

body.profile-page .contact a:hover {
  color: var(--green) !important;
}

/* TABLES AND INTERESTS */
body.profile-page .details-table,
body.profile-page .details-table td,
body.profile-page .table-section table,
body.profile-page .table-section td {
  background-color: #211a29 !important;
  color: var(--cream) !important;
  border-color: #493451 !important;
}

body.profile-page .details-table td:first-child {
  background: #30213a !important;
  color: var(--gold) !important;
  font-weight: bold;
}

body.profile-page .interest-content {
  color: var(--cream) !important;
}

/* FRIENDS GRID */
body.profile-page .friends-grid img,
body.profile-page #top8-grid img {
  border: 2px solid var(--purple) !important;
  border-radius: 2px !important;
  transition: transform .2s, border-color .2s;
}

body.profile-page .friends-grid img:hover,
body.profile-page #top8-grid img:hover {
  transform: scale(1.06);
  border-color: var(--pink) !important;
}

/* COMMENTS */
body.profile-page #comments .heading {
  background: linear-gradient(
    90deg, #542039, #362044, #174333
  ) !important;
}

body.profile-page .comments-table,
body.profile-page .comments-table td {
  background: #211a29 !important;
  color: var(--cream) !important;
  border-color: #60416c !important;
}

body.profile-page .cb-author-name {
  color: var(--pink) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}

body.profile-page .cb-content-cell {
  color: var(--cream) !important;
}

/* BLOG, PHOTOS AND VIDEOS */
body.profile-page .blog-preview a,
body.profile-page .photos-preview a,
body.profile-page .videos-preview a {
  color: var(--green) !important;
}

/* PLAYLIST BOX */
body.profile-page .profile-playlist-widget {
  background: #211a29 !important;
  border-color: var(--green) !important;
}

body.profile-page .profile-playlist-widget h3 {
  color: var(--green) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}

body.profile-page .profile-playlist-widget li {
  background: #211a29 !important;
  border-bottom: 1px solid #493451 !important;
  color: var(--cream) !important;
}

body.profile-page .profile-playlist-widget li.current .song-info {
  color: var(--pink) !important;
}

body.profile-page .profile-playlist-widget .song-artist {
  color: var(--gold) !important;
}

body.profile-page .pp-equalizer span {
  background: var(--pink) !important;
}

/* FIXED MUSIC BAR */
body.profile-page .music-bar {
  background: linear-gradient(
    90deg, #153a2d, #24172e, #481e2d
  ) !important;
  border-top: 2px solid var(--pink) !important;
  color: var(--cream) !important;
}

body.profile-page .music-bar::before {
  display: none !important;
}

body.profile-page .music-bar .bar-title {
  color: var(--cream) !important;
}

body.profile-page .bar-now-playing {
  color: var(--green) !important;
}

body.profile-page .bar-time-display,
body.profile-page .bar-time-total {
  color: var(--gold) !important;
}

body.profile-page .bar-progress {
  background: #493451 !important;
}

body.profile-page .bar-progress-fill {
  background: linear-gradient(
    90deg, var(--green), var(--pink), var(--purple)
  ) !important;
}

body.profile-page .music-bar .bar-btn {
  color: var(--pink) !important;
}

body.profile-page .volume-slider {
  background: var(--purple) !important;
}

/* CUSTOM SCROLLBAR */
body.profile-page::-webkit-scrollbar {
  width: 11px;
}

body.profile-page::-webkit-scrollbar-track {
  background: #100d17;
}

body.profile-page::-webkit-scrollbar-thumb {
  background: linear-gradient(
    var(--green), var(--purple), var(--pink)
  );
  border: 2px solid #100d17;
}

/* SELECTION COLOR */
body.profile-page ::selection {
  background: var(--pink);
  color: #17111e;
}

/* SMALL SCREEN SUPPORT */
@media (max-width: 600px) {
  body.profile-page .master-container {
    padding: 6px !important;
    margin-top: 10px !important;
  }

  body.profile-page .heading h1,
  body.profile-page .heading h4 {
    font-size: 13px !important;
  }
}
</style>