← Back to Layouts
custom layout

Name: FriendRewind
Author: FriendRewind
Author: Gordosan
Category: Classic
Created: October 27, 2026
original: plain black
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://www.plasticosydecibelios.com/wp-content/uploads/2023/08/paul-george-john-ringo-each-lighting-up-a-smoke-v0-GZtMxvnpSd-R9m_pRArwLkmCq_XDnVCT5ONYB8dlv0o.webp","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://www.plasticosydecibelios.com/wp-content/uploads/2023/08/paul-george-john-ringo-each-lighting-up-a-smoke-v0-GZtMxvnpSd-R9m_pRArwLkmCq_XDnVCT5ONYB8dlv0o.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
  }
</style><style>


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


/* FR_MANUAL_EXTRAS */
/* ==================================================
   MONOCHROME.exe — EMO / SCENE EDITION
   FRIENDREWIND PROFILE THEME
   COLORS: BLACK / GREY / WHITE
   ================================================== */

/* 01 — GLOBAL SETTINGS + SUBTLE PATTERN */

body.profile-page {
    background-color: #050505 !important;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 8px,
            rgba(255,255,255,0.018) 8px,
            rgba(255,255,255,0.018) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 8px,
            rgba(255,255,255,0.012) 8px,
            rgba(255,255,255,0.012) 9px
        ) !important;
    background-attachment: fixed !important;
    color: #d4d4d4 !important;
    font-family: "Courier New", monospace !important;
    font-size: 13px;
}

/* 02 — MAIN PROFILE CONTAINER */

body.profile-page .master-container {
    max-width: 1000px !important;
    background-color: rgba(12,12,12,0.97) !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    box-shadow:
        0 0 0 3px #080808,
        0 0 25px rgba(255,255,255,0.06) !important;
}

/* 03 — NAVIGATION BAR */

body.profile-page nav,
body.profile-page nav .top,
body.profile-page nav .links {
    background: #050505 !important;
    color: #eee !important;
    border-bottom: 1px solid #555 !important;
    border-radius: 0 !important;
}

body.profile-page nav a,
body.profile-page nav .links a {
    color: #ccc !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    transition: color 0.2s ease, background 0.2s ease;
}

body.profile-page nav a:hover,
body.profile-page nav .links a:hover {
    color: #fff !important;
    background: #292929 !important;
    text-shadow: 0 0 5px #aaa;
}

/* 04 — PROFILE COLUMNS */

body.profile-page .col.w-40.left,
body.profile-page .col.right {
    color: #ccc !important;
}

/* 05 — ALL MAJOR PANELS */

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 .table-section,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page #comments,
body.profile-page .comments-table,
body.profile-page .section {
    background-color: #111 !important;
    color: #d0d0d0 !important;
    border: 1px solid #3e3e3e !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 06 — SECTION TITLE BARS */

body.profile-page .heading {
    background-color: #292929 !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 2px solid #777 !important;
    border-radius: 0 !important;
    padding: 7px !important;
    text-transform: uppercase !important;
}

body.profile-page .heading h1,
body.profile-page .heading h2,
body.profile-page .heading h3,
body.profile-page .heading h4 {
    color: #fff !important;
    font-family: "Courier New", monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px #000 !important;
}

/* 07 — TYPOGRAPHY */

body.profile-page h1,
body.profile-page h2,
body.profile-page h3,
body.profile-page h4 {
    color: #eee !important;
    font-family: "Courier New", monospace !important;
}

body.profile-page p,
body.profile-page li,
body.profile-page td,
body.profile-page .bio-text,
body.profile-page .interest-content {
    color: #ccc !important;
    line-height: 1.6;
}

body.profile-page strong,
body.profile-page b {
    color: #fff !important;
}

body.profile-page hr {
    border: 0 !important;
    border-top: 1px solid #444 !important;
}

/* 08 — LINKS */

body.profile-page a {
    color: #eee !important;
    text-decoration: underline !important;
    text-decoration-color: #666 !important;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

body.profile-page a:hover {
    color: #999 !important;
    text-decoration-color: #fff !important;
}

/* 09 — PROFILE PICTURE
   Grayscale normally; original color on hover. */

body.profile-page .profile-pic img {
    border: 2px solid #888 !important;
    border-radius: 0 !important;
    filter: grayscale(100%) contrast(1.05);
    transition:
        filter 0.25s ease,
        border-color 0.25s ease;
}

body.profile-page .profile-pic img:hover {
    filter: grayscale(0%) contrast(1);
    border-color: #fff !important;
}

/* 10 — DETAILS / INTERESTS TABLE */

body.profile-page .details-table,
body.profile-page .details-table td {
    border-color: #444 !important;
}

body.profile-page .details-table td:first-child {
    background: #262626 !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

/* 11 — CONTACT BUTTONS */

body.profile-page .contact a,
body.profile-page button {
    background: #202020 !important;
    color: #eee !important;
    border: 1px solid #666 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.profile-page .contact a:hover,
body.profile-page button:hover {
    background: #eee !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* 12 — FRIEND GRID / TOP 8 */

body.profile-page .friends-grid img,
body.profile-page #top8-grid img {
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    filter: grayscale(100%);
    transition:
        filter 0.2s ease,
        border-color 0.2s ease;
}

body.profile-page .friends-grid img:hover,
body.profile-page #top8-grid img:hover {
    filter: grayscale(0%);
    border-color: #fff !important;
}

/* 13 — FRIEND NAMES */

body.profile-page .friends-grid,
body.profile-page #top8-grid {
    color: #ccc !important;
}

body.profile-page .friends-grid a,
body.profile-page #top8-grid a {
    color: #ddd !important;
    text-decoration: none !important;
}

body.profile-page .friends-grid a:hover,
body.profile-page #top8-grid a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* 14 — ONLINE / OFFLINE STATUS */

body.profile-page .online,
body.profile-page .offline {
    background: #222 !important;
    color: #eee !important;
    border: 1px solid #666 !important;
    border-radius: 0 !important;
}

/* 15 — COMMENTS */

body.profile-page .comments-table td,
body.profile-page .comments-table tr,
body.profile-page .cb-content-cell {
    background: #111 !important;
    color: #ccc !important;
    border-color: #444 !important;
}

body.profile-page .cb-author-name {
    color: #fff !important;
    font-weight: bold !important;
}

/* 16 — INPUTS / TEXT AREAS */

body.profile-page input,
body.profile-page textarea,
body.profile-page select {
    background: #101010 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    font-family: "Courier New", monospace !important;
}

body.profile-page input:focus,
body.profile-page textarea:focus,
body.profile-page select:focus {
    outline: 1px solid #aaa !important;
    border-color: #aaa !important;
}

/* 17 — SCROLLBAR */

body.profile-page ::-webkit-scrollbar {
    width: 10px;
}

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

body.profile-page ::-webkit-scrollbar-thumb {
    background: #444;
    border: 2px solid #080808;
}

body.profile-page ::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* 18 — FIXED MUSIC BAR */

body.profile-page .music-bar {
    background: #080808 !important;
    border-top: 1px solid #666 !important;
    border-radius: 0 !important;
}

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

body.profile-page .music-bar .bar-title,
body.profile-page .bar-now-playing,
body.profile-page .bar-time-display,
body.profile-page .bar-time-total {
    color: #eee !important;
}

body.profile-page .music-bar .bar-btn {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
}

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

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

/* 19 — PROFILE PLAYLIST */

body.profile-page .profile-playlist-widget {
    background: #111 !important;
    color: #ddd !important;
    border: 1px solid #444 !important;
    border-radius: 0 !important;
}

body.profile-page .profile-playlist-widget h3 {
    background: #292929 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

body.profile-page .profile-playlist-widget li {
    background: #111 !important;
    color: #ccc !important;
    border-color: #444 !important;
}

body.profile-page .profile-playlist-widget li.current .song-info {
    color: #fff !important;
}

body.profile-page .pp-equalizer span {
    background: #ccc !important;
}

/* 20 — SELECTION HIGHLIGHT */

body.profile-page ::selection {
    background: #ddd !important;
    color: #000 !important;
}

/* 21 — REDUCE UNWANTED ROUNDED STYLING */

body.profile-page .master-container,
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 .table-section,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .section,
body.profile-page .heading {
    border-radius: 0 !important;
}

/* ==================================================
   END OF MONOCHROME.exe
   SYSTEM MESSAGE: COLOR IS A PRIVILEGE.
   ================================================== */
</style>

<style>
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-image: url(https://i.ibb.co/Pv8w2yZ8/Video-Project-3.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 999999;
  pointer-events: none;

  animation: loadingScreen 3s ease forwards;
}

@keyframes loadingScreen {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>