← Back to Blog Layouts
Layout Preview

FriendRewind Sleak

Author: ↑ Ðüƨŧī₪ ↓
Category: Sleak
Created: August 16, 2026
Downloads: 3
A little nostalgic, a little pirate, a little retro-polished but definitely not something that looked too polished or corporate.
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

<style>

/* =========================================
   PAGE BACKGROUND + RESET
   ========================================= */

html,
body,
body.profile-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #b8b8b8 !important;
}


/* =========================================
   URL-INFO
   ========================================= */

.url-info {
    font-size: 0 !important;
}

.url-info::after {
    content: "https://www.FriendRewind.com/Dustin \A\2003[Where Friends Come Back Around.]" !important;
    white-space: pre !important;
    font-size: 12px !important;
}

/* =========================================
   GLOBAL BOX SIZING
   ========================================= */

html,
body,
body.profile-page,
body.profile-page * {
    box-sizing: border-box !important;
}


/* =========================================
   MOBILE PINCH-TO-ZOOM
   ========================================= */

html,
body {
    touch-action: pan-x pan-y pinch-zoom !important;
    -ms-touch-action: pan-x pan-y pinch-zoom !important;
}


/* =========================================
   MAIN PROFILE CANVAS
   ========================================= */

body.profile-page .master-container {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    background: #ffffff !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;
}


/* =========================================
   MAIN PROFILE CONTENT
   ========================================= */

body.profile-page main {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;

    transform: none !important;
}


/* =========================================
   HEADER / NAVIGATION
   ========================================= */

body.profile-page header,
body.profile-page nav {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    position: relative !important;
    left: 0 !important;
    right: auto !important;

    transform: none !important;
}


/* =========================================
   OUTER TABLES / WRAPPERS
   ========================================= */

body.profile-page > table {
    width: 760px !important;
    min-width: 760px !important;
    max-width: 760px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    border-spacing: 0 !important;
}

body.profile-page > div,
body.profile-page > main {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   STACK PROFILE COLUMNS
   ========================================= */

body.profile-page .profile-info {
    display: block !important;

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

    margin: 0 auto !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;
}


/* =========================================
   LEFT COLUMN
   ========================================= */

body.profile-page .profile-info .col.w-40.left {
    display: block !important;

    float: none !important;
    clear: both !important;

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

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
}


/* =========================================
   RIGHT COLUMN
   ========================================= */

body.profile-page .profile-info .col.w-60.right {
    display: block !important;

    float: none !important;
    clear: both !important;

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

    margin-left: auto !important;
    margin-right: auto !important;

    position: relative !important;
}


/* =========================================
   FALLBACK FOR OTHER PROFILE COLUMNS
   ========================================= */

body.profile-page .profile-info > .col:not(.w-40.left) {
    display: block !important;

    float: none !important;
    clear: both !important;

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

    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   BLURBS
   ========================================= */

body.profile-page .col.w-40.left .blurbs {
    display: block !important;

    margin-left: auto !important;
    margin-right: auto !important;

    float: none !important;

    text-align: center !important;
}

body.profile-page .col.w-40.left .blurbs .inner {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   CENTER ABOUT ME / WHO I'D LIKE TO MEET
   ========================================= */

body.profile-page .col.w-40.left .blurbs .bio-text > center > div {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================
   PROFILE TABLES
   ========================================= */

.profile-info,
.profile-info table {
    border-spacing: 0 !important;
}

.profile-info .table-section {
    margin: 0 !important;
    border-radius: 0 !important;
}

.profile-info .table-section + .table-section {
    margin-top: 0 !important;
}

.profile-info .table-section > div,
.profile-info .table-section .heading {
    box-sizing: border-box !important;
    border-radius: 0 !important;
}


/* =========================================
   CONTACTING
   ========================================= */

.contact a[data-action="invite-to-group"] {
    display: none !important;
}

.contact a[onclick*="openReportModal"] {
    display: none !important;
}

.contact .f-row:has(a[data-action="invite-to-group"]),
.contact .f-row:has(a[onclick*="openReportModal"]) {
    display: none !important;
}

.contact .f-row:has(#block-user-btn) {
    display: flex !important;
    flex-direction: column !important;
}

.contact .f-row:has(#block-user-btn) .f-col {
    width: 100% !important;
}

.contact .instant-message-link {
    display: block !important;
}


/* Hide Contacting header */

.contact > .heading {
    display: none !important;
}


/* =========================================
   REPLACE FRIENDREWIND LOGO
   ========================================= */

img[src*="friendrewind-logo.webp"] {
    content: url("https://i.ibb.co/Q7LkDN1N/FWL.png") !important;

    width: 180px !important;
    height: auto !important;

    object-fit: contain !important;
}


/* =========================================
   HIDE BLOG PREVIEW
   ========================================= */

.blog-preview {
    display: none !important;
}


/* =========================================
   HIDE BIO HEADING / ORANGE BAR
   ========================================= */

.blurbs > .heading {
    display: none !important;
}


/* =========================================
   ONLINE INDICATOR
   STOP FADING
   KEEP GIF ANIMATING
   ========================================= */

.online {
    opacity: 1 !important;
    visibility: visible !important;

    animation: none !important;
    -webkit-animation: none !important;

    transition: none !important;
    -webkit-transition: none !important;

    filter: none !important;
}


/* =========================================
   ONLINE GIF
   ========================================= */

.online img {
    opacity: 1 !important;
    visibility: visible !important;

    animation: none !important;
    -webkit-animation: none !important;

    transition: none !important;
    -webkit-transition: none !important;

    display: inline-block !important;
}


/* =========================================
   HIDE PHOTOS
   ========================================= */

.table-section.photos-preview {
    display: none !important;
}


/* =========================================
   HIDE VIDEOS
   ========================================= */

.table-section.videos-preview {
    display: none !important;
}


/* =========================================
   HIDE FRIEND SPACE
   ========================================= */

.friends {
    display: none !important;
}


/* =========================================
   HIDE FRIENDS COMMENTS
   ========================================= */

div.friends#comments {
    display: none !important;
}


/* =========================================
   HIDE PROFILE MUSIC PLAYER
   KEEP MUSIC PLAYING
   ========================================= */

#profile-playlist-mount {
    position: fixed !important;

    left: -10000px !important;
    top: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;
}


/* =========================================
   INTERESTS TABLE
   ========================================= */

.table-section.interests {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;

    overflow: hidden !important;
}


/* =========================================
   INTERESTS CONTENT
   ========================================= */

.table-section.interests > div:last-child {
    height: 450px !important;
    max-height: 450px !important;

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


/* =========================================
   INTERESTS SCROLLBAR
   ========================================= */

.table-section.interests > div:last-child::-webkit-scrollbar {
    width: 8px !important;
}

.table-section.interests > div:last-child::-webkit-scrollbar-track {
    background: #eeeeee !important;
}

.table-section.interests > div:last-child::-webkit-scrollbar-thumb {
    background: #888888 !important;

    border: 1px solid #666666 !important;

    border-radius: 0 !important;
}

.table-section.interests > div:last-child {
    scrollbar-width: thin !important;
}


/* =========================================
   CHANGE "DUSTIN'S INTERESTS" TO "INTERESTS"
   ========================================= */

.table-section.interests > .heading {
    font-size: 0 !important;
}

.table-section.interests > .heading::after {
    content: "Interests" !important;
    font-size: 16px !important;
}


/* =========================================
   HIDE SITE FOOTER
   ========================================= */

footer[role="contentinfo"] {
    display: none !important;
}


/* =========================================
   PROFILE DETAILS — CLEAN REPLACEMENT
   ========================================= */

div.details {
    position: relative !important;

    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    font-size: 0 !important;

    text-align: left !important;
}


/* Hide everything originally inside details */

div.details > * {
    display: none !important;
}


/* =========================================
   REPLACEMENT PROFILE DETAILS TEXT
   ========================================= */

div.details::before {
    content: "🎧💨🏴‍☠️\A\AHe, Him, His.\ARhode Island,\AUnited States" !important;

    position: absolute !important;

    top: 6px !important;
    left: 8px !important;

    white-space: pre-line !important;

    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;

    color: #000000 !important;

    text-align: left !important;

    z-index: 20 !important;
}


/* =========================================
   ONLINE NOW GIF
   SMALL + LEFT ALIGNED
   ========================================= */

div.details::after {
    content: "" !important;

    position: absolute !important;

    top: 94px !important;
    left: 8px !important;

    width: 75px !important;
    height: 19px !important;

    background-image: url("https://i.ibb.co/gbYL4qx/onlinenow2.gif") !important;

    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;

    z-index: 21 !important;
}


/* =========================================
   LAST LOGIN
   ========================================= */

div.details {
    /* Keep the details container large enough
       for the GIF and Last Login text */
    padding-bottom: 20px !important;
}

div.details .last-login {
    display: none !important;
}

</style>