← Back to Layouts
Project AeroSpace™ (for FriendRewind)

Name: FriendRewind
Author: FriendRewind
Author: Andrew Nguyen
Category: Classic
Created: October 21, 2026
Originally made my me (Andrew Nguyen) on SpaceHey.

This is a port of the original layout.

To SpaceHey users, if you wanna use the original layout, check out this post along with the credits of everyone that were involved: https://forum.spacehey.com/topic?id=251015

Otherwise, enjoy!
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":"","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 */
</style><style>


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


/* This is where all of the Aero visual styles are defined. */
:root {
  --w7-w-glass: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px),
    linear-gradient(
        54deg,
        /* ------------------------------- 1st stripe ------------------------------- */ #0002 0 4%,
        #6661 6% 6%,
        #0002 8% 10%,
        /* ------------------------------- 2nd stripe ------------------------------- */ #0002 15% 16%,
        #aaa1 17% 18%,
        #0002 23% 24%,
        /* ------------------------------- 3rd stripe ------------------------------- */ #bbb2 25% 26%,
        #0002 31% 33%,
        /* ------------------------------- 4th stripe ------------------------------- */ #0002 34% 34.5%,
        #bbb2 36% 40%,
        /* ------------------------------- 5th stripe ------------------------------- */ #0002 41% 41.5%,
        #bbb2 44% 45%,
        /* ------------------------------- 6th stripe ------------------------------- */ #bbb2 46% 47%,
        #0002 48% 49%,
        #0002 50% 50.5%,
        /* ------------------------------- 7th stripe ------------------------------- */ #0002 56% 56.5%,
        #bbb2 57% 63%,
        #0002 67% 69%,
        /* ------------------------------- 8th stripe ------------------------------- */ #bbb2 69.5% 70%,
        #0002 73.5% 74%,
        /* ------------------------------- 9th stripe ------------------------------- */ #bbb2 74.5% 79%,
        #0002 80% 84%,
        /* ------------------------------- 10th stripe ------------------------------- */ #aaa2 85% 86%,
        #0002 87%,
        #bbb1 90%
      )
      left center/100vw 100vh no-repeat fixed;  /* Define how the Aero glass texture will look. */
    --w7-w-bd: #000000b3;  /* Define how the border will look. */
    --w-vista-heading: linear-gradient(0deg, rgba(56,56,56,0.73) 0%, rgba(29,29,29,0.73) 25%, rgba(29,29,29,0.73) 50%, rgba(57,57,57,0.73) 50%, rgba(187,187,187,0.73) 100%);  /* Give a Windows Vista taskbar visual style to the headings. */
    --w7-w--bg: rgba(0,0,0,0);  /* Changes the color and/or the opacity of the Aero visual style. */
    --bg-image: url('/proxy/image.php?url=https%3A%2F%2Ffrutigeraeroarchive.org%2Fimages%2Fwallpapers%2Fwindows_vista%2Fwindows_vista_30.jpg'); /* Changes the background image of the body and main container. */
}

/* Uses the webfont instead of the system one. */
@font-face {
    font-family: 'Segoe UI';
    src: url('https://file.garden/anVm-aubGz84Bll7/SegoeUI.woff');
}
@font-face {
    font-family: 'Segoe UI Light';
    src: url('https://file.garden/anVm-aubGz84Bll7/SegoeUI-Light.woff');
}

/* Changes the background of the main page along with the position and/or how the background is being displayed. URL must point to a locally stored image file on the Web. */
body {
    background: #000000;
    background-image: var(--bg-image);
    background-position: right;  
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Segoe UI', sans-serif;
}


/* Adjust how the navigation bar at the top is being displayed. */
.top.navbar.top-nav {
    background: linear-gradient(0deg,rgba(13,13,13,1) 5%, rgba(56,56,56,1) 64%, rgba(179,179,179,1) 100%);
    box-shadow: 2px 2px 10px 1px black;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    border: 0;
}

.links.main-nav-wrapper {
  position: fixed;
  top: 69px;
  background: rgba(0,0,0,0);
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
}

.logo.site-name {
  position: relative;
  top: -11px;
}

/* Add some padding to the '.details' section and adding the Windows Vista-7 profile frame around the user's profile pic. */
.general-about {
    padding: 19px 15px 0 15px;
    margin: 15px 0 15px 0;
    display: flex;
}
.general-about .profile-pic::before {
    content: '';
    background: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FProfileframe2.png') no-repeat;
    background-size: cover;
    z-index: 1;
    position: absolute;
    top: -13px;
    left: -11.5px;
    height: 180px;
    width: 180px;
}
.general-about .profile-pic img {
    width: 153px;
    height: 152px;
    padding: 19.2px 20px 22px 21.8px;
    object-fit: cover; /* Required to prevent the image from stretching, use the object-position property to adjust the visible area. */
    border-radius: 24px 23px 24px 25px;
}
.profile-pic {
    position: relative;
}
.details {
    padding: 0 0 14px 0;
}

/* Changes how the comments inside the comment section look and make the comments section scrollable. */
.cb-content-cell {
    background: rgba(33,33,33,0.6) !important;
    width: 100vw;
}
.cb-author-cell {
    background: rgba(33,33,33,0.2) !important;
}
.comments-table, .comments-table td {
    border-style: solid;
    border-radius: 0px;
    border-color: #535353;
    overflow: auto;
}    
.comments-table {
    max-height: 528px !important;
    overflow-y: scroll;
    display: block;
}
#comments {
    margin-top: 20px;
}
.comment-replies {
    margin: 3px;
    overflow: auto;
}

main, .top.navbar.top-nav, footer, .cb-author-cell, .tunes.profile-playlist-widget {
    background-color: transparent;
}

div.table-section, div.friends-grid, .blurbs {
    text-align: center;
}

.pf-photo-grid, .pf-video-grid, .friends-grid, .section, .mutual-friends-grid {
    display: flex;
    justify-content: center;
    padding: 10px;
}
  
a[href^="profile.php"] > p {
  position: relative;
  left: -15px;
}
  
.cb-author-name {
  position: relative;
  left: -8px;
}
  
.profile.row {
  padding-top: 110px;
}
  
main, footer p, a, .details-table td:first-child, .profile .friends .heading, .profile .blurbs .heading h4, .profile .friends .person p, .pp-header > h3, .profile-playlist-add-hint {
    color: white;
}

.mood, .left.w-40.col {
    text-shadow: 0 1px 4px black;
}
  
.general-about, .blog-preview, .profile-info, .url-info, .details-table, .blurbs > .inner, div.friends > .inner, .profile .contact, .pf-video-grid, .pf-photo-grid, .tunes.profile-playlist-widget {
    background: var(--w7-w-glass), var(--w7-w--bg);
    border-radius: 0 0 4px 4px;
    background-attachment: local;
}

.general-about, .blog-preview, .profile-info, .profile .table-section, .profile .url-info, .profile .blurbs, .profile .friends, .profile .contact, .videos-preview.table-section, .photos-preview.table-section, .tunes.profile-playlist-widget { 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);  /* For Safari all the way before version 17. */
    will-change: backdrop-filter;  /* Hint for browser optimization */
    transform: translateZ(0);  /* Force GPU layer */
    text-shadow: 0 1px 4px black;
    box-shadow: 2px 2px 10px 1px var(--w7-w-bd), inset 0 0 0 1px #fffa;
    border-radius: 5px;
    border: 1px solid var(--w7-w-bd);
    position: relative;
    overflow-wrap: break-word;
}
  
  /* Apply the Windows Vista taskbar style to the headings. */
.profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading, div.friends .heading, .badges-widget.friends > .heading {
    text-align: center;
    height: 2rem;
    background: var(--w-vista-heading), color-mix(in srgb, var(--w7-w--bg), rgb(from var(--w7-w--bg) 0 0 0 / alpha) 50%);  /* Adjust the background color darkness of the headings. */
    background-attachment: local;
    border-radius: 4px 4px 0 0;
    line-height: 1.75rem;
    font-size: 0.78rem;
    color: white !important;
    letter-spacing: 0.029rem;
    font-family: 'Segoe UI Light', sans-serif;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* Hide scrollbar in IE, Edge, Chrome */
    scrollbar-width: none;  /* Hide scrollbar in Firefox */
  }
  

.interests.table-section > .inner > .details-table > tbody > tr > td:nth-of-type(1), .social-links.table-section > .inner > .details-table > tbody > tr > td:nth-of-type(1) {
    border-style: none; 
    border-width: 1px; 
    border-color: #ffffff; 
    text-align: center;
    background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.5) 10%, rgba(255,255,255,0.1) 60% , rgba(255,0,0,0) 0%, rgba(255,255,255,0.1), rgba(255,255,255,0.2)) !important;
}
  
.profile .contact .heading {
    display: none;
}
  
.blog-preview {
    padding: 2px 14px 6px 14px !important;
}

div.f-col:nth-of-type(1), div.f-col:nth-of-type(2), .contact > .inner {
    position: relative;
    font-size: 13px;
    padding: 2.5px;
    font-weight: lighter;
}

div.friends:nth-of-type(6) {
  margin-bottom: 21px !important;
}

.profile-info, .photos-preview.table-section, .videos-preview.table-section, .mutual-friends-section.table-section {
  margin-bottom: 21px;
}

/* Change how the CSS button looks. */
button {
    color: black;
    border: none;
    border-radius: 17px;
    padding: 3px 10px;
    background: linear-gradient(rgba(255,255,255,1.6), rgba(240,240,240,1.5) 10%, rgba(240,240,240,1.1) 50%, rgba(235,235,235,1) 0%, rgba(220,220,220,1.1), rgba(210,210,210,1));
}
  
.nav-search-btn.search-button {
    color: black;
    border: none;
    background: linear-gradient(rgba(255,255,255,1.6), rgba(240,240,240,1.5) 10%, rgba(240,240,240,1.1) 50%, rgba(235,235,235,1) 0%, rgba(220,220,220,1.1), rgba(210,210,210,1));
    font-family: 'Segoe UI', sans-serif;
    font-weight: lighter;
    text-shadow: none;
}
.nav-search-input.search-input {
  border: none;
}
  
/* Change the text in the 'Edit Your Profile' section. */
.profile-info > .inner [href]::before {
    content: 'Not sure where to start? ';
    font-size: 13px;
    font-weight: bold;
}
.profile-info > .inner [href] {
    font-size: 0;
    white-space: pre-line;
    position: relative;
    top: 2px;
}
.profile-info > .inner [href]::after {
    content: '\AYou can click here to edit your profile, then select Save All to save all changes.';
    font-size: 10px;
    font-weight: lighter;
    line-height: 19px;
}
.profile-info {
    margin-bottom: 20px;
}
h3 {
    font-size: 13px;
    text-align: left;
    margin: 3px;
    font-weight: normal;
}
  
/* Change the color of the number count. */
.count {
    color: #8DD1F3;
}

/* Add a message before and after the username. */
.profile h1::before {
    visibility: visible;
    content: "Hi! I'm "; 
    font-family: 'Segoe UI Light', sans-serif;
}
.profile h1 {
    visibility: visible;
    margin: 8px 0 17px 0;
}

/* Changes the look of the 'Contact' section */
[href^="friends.php"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FAdd%2520alt.png');
}
.instant-message-link > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2Fnotification-properties.png');
}
div.f-row:nth-of-type(3) > div.f-col:nth-of-type(1) > [href="#"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FAdd%2520to%2520group.png');
}
[href^="addfavorite.php"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FFavorite%2520icon%2520alt.png');
}

#block-user-btn > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FUser015.ico');
}
div.f-row:nth-of-type(3) > div.f-col:nth-of-type(2) > [href="#"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FReport.png');
}
[href^="unfriend.php"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FRemove%2520friends.png');
}
[href^="removefavorite.php"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FUnfavorite%2520icon%2520alt.png');
}
[href="requests.php"] > .icon {
    content: url('/proxy/image.php?url=https%3A%2F%2Ffile.garden%2FanVm-aubGz84Bll7%2FClock001.ico');
}

.comment-replies {
  border-color: white;
  border-radius: 0;
}

a:hover {
    color: rgba(114, 183, 218);
}
  
footer {
  border: 0;
}
footer > p > i {
    font-size: 0;
}
footer > p > i::after {
    content: "This is a port of my SpaceHey layout. To see the original, check out the forum post link inside the source code.\AProject AeroSpace™ is not affiliated with Microsoft® or MySpace®.";
    font-size: 12px;
    white-space: pre-line;
}

.cb-delete-comment-btn, .reply-delete-btn {
    color: white;
    background: none;
    border: 2px solid white;
    font-size: 14px !important;
    padding-top: 1.5px !important;
  }
.reply-delete-btn {
    margin-left: 4px;
    margin-bottom: 3px;
}

.report > .icon {
    content: url('https://file.garden/anVm-aubGz84Bll7/Report.png');
    width: 12px;
    height: 12px;
}

.status-icon {
    display: none;
}
.offline {
    color: red;
}
.last-login {
    color: white;
}
  
.interests.table-section > .inner {
    margin-bottom: -13px;
}

</style>