← Back to Layouts
my gayout

Name: FriendRewind
Author: FriendRewind
Author: Hex.Agram
Category: Classic
Created: November 13, 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":"","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>
/*the background*/
body, body.profile-page {
  background-image: url("https://i.pinimg.com/1200x/2e/9c/cb/2e9ccba3bd9e991a02e55f53f017f01d.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}
/*profile picture and overlay CD*/
.profile-pic{
  position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;
  }
.profile-pic img{
  position:absolute;top:9.0%!important;left:7.6%!important;width:100%!important;height:100%!important;object-fit:cover;z-index:1;
  }
.profile-pic::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/43226/img_6af5b7139f5314.20292125.webp');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;
  }

/*HEADER DECORATION*/
main::before {
    content: "" !important;
    display: block !important;
    width: 95% !important;
    height: 110px !important;
    border-radius: 4px;

    background-image: url('https://friendrewind.com/uploads/gallery/43226/img_6af66b52b847d0.44121517.webp') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-position: center !important;
    position: relative !important;
    top: px !important;
    left: 20px !important;
  }
  /*HEADER NAVIGATOR*/
nav .top , .myspace-header .top{
    background: transparent;

}
nav .links , .myspace-header{
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid var(--sh-red);
}
 /* 1. Keep the header box straight, wide, and clip any overflow */
 nav, .myspace-header {
  position: relative !important;
  overflow: hidden !important;
  background: #050708 !important; /* Fallback dark background */
  border-bottom: 3px solid var(--sh-rust) !important;
  margin-bottom: 20px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 7px 5px #00B0BC !important;
}

/* 2. Rotate your tall GIF 90 degrees sideways inside the header */
 nav::before, .myspace-header::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* Swap dimensions: width = header height, height = full screen width */
  width: 140px !important; 
  height: 100vw !important; 
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af66077f11eb6.71179295.gif") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* Center and rotate 90 degrees clockwise (use -90deg for counter-clockwise) */
  transform: translate(-50%, -50%) rotate(90deg) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 3. Keep your logo, search bar, and links straight and clickable on top */
 nav > *, .myspace-header > * {
  position: relative !important;
  z-index: 1 !important;
}


    footer {
    background: transparent;
    border-radius: 0;
    background-image: url('https://i.pinimg.com/originals/31/c2/fd/31c2fdadd91101510fc280cda5d947b4.gif');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 5px solid var(--sh-dark);
    height: 150px;
    }

.logo {
    filter: sepia(100%) hue-rotate(500deg) saturate(100) !important;
}

/* 1. Central Main Column (Semi-transparent so blue scales & spine X-ray show through) */
main {
  background: rgba(5, 8, 10, 0.82) !important;
  border-left: 1px solid #2b4c47 !important;
  border-right: 1px solid #2b4c47 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.95) !important;
  color: #cdd8d4 !important;
  padding: 15px !important;
}

/* 2. Individual Profile Boxes (Contact, URL, Interests, Blurbs, Friends, Comments) */
.contact, .url-info, .table-section, .blurbs, .friends, .comments {
  background: rgba(8, 13, 15, 0.88) !important;
  border: 1px solid #26423e !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.85) !important;
  margin-bottom: 16px !important;
  position: relative !important;
  overflow: visible !important;
  }

/* 3. Box Headers (Matches your curved CRT glass & phosphor green/teal glow) */
.heading, .contact .heading, .url-info .heading, .table-section .heading, .blurbs .heading, .friends .heading {
  background: linear-gradient(
    90deg,
    #060a0b 0%,
    #132422 50%,
    #060a0b 100%
  ) !important;
  color: #00B0BC !important;
  border-bottom: 1px solid #00B0BC !important;
  padding: 5px 10px !important;
   box-shadow: 0 0 10px 1px rgba(0, 176, 188, 0.35), inset 0 0 12px rgba(0, 0, 0, 0.85) !important;
  margin-bottom: 18px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 6px rgba(138, 255, 184, 0.5) !important;
}

.table-section td, .contact td {
  background: rgba(10, 16, 18, 0.75) !important;
  border: 1px solid #1a2e2b !important;
  color: #c2d1cc !important;
}

/* Left-side labels in Interests (General, Music, Movies, etc.) */
.table-section td:first-child {
  background: rgba(16, 28, 27, 0.9) !important;
  color: #7ee8d2 !important;
  font-weight: bold !important;
}

/* 5. General Body Text & Links inside Main */
main p, main span, main div {
  color: #c6d4cf !important;
}

main a {
  color: #5ce6b8 !important;
  text-decoration: none !important;
  transition: 0.2s ease !important;
}

main a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px #00B0BC !important;
}
/*cursor*/
* {
  cursor: url('https://friendrewind.com/uploads/gallery/43226/img_6af67a11234294.19020239.webp') 0 0, auto !important;
}

/*Decorations on BODY*/
.blurbs::after {
  content: "" !important;
  position: absolute !important;
  bottom: 50px !important;   /* Sticks slightly below the box */
  right: -20px !important;    /* Sticks slightly off the right edge */
  width: 110px !important;    /* Adjust size of the handprint */
  height: 110px !important;
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af66437391ea1.58044400.webp") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: rotate(-18deg) !important; /* Natural tilted handprint angle */
  opacity: 0.75 !important;   /* Slightly translucent so it blends into the dark theme */
  filter: drop-shadow(0 0 8px rgba(0, 176, 188, 0.5)) !important; /* Subtle teal glow */
  pointer-events: none !important; /* Ensures you can still click links underneath it */
  z-index: 10 !important;
}
.contact::after {
  content: "" !important;
  position: absolute !important;
  bottom: -50px !important;
  left: -30px !important;
  width: 95px !important;
  height: 95px !important;
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af66437391ea1.58044400.webp") !important;
  background-size: 80% !important;
  background-repeat: no-repeat !important;
  transform: scaleX(-1) rotate(-22deg) !important; /* scaleX(-1) mirrors it so it looks like the other hand! */
  opacity: 0.65 !important;
  filter: drop-shadow(0 0 6px rgba(0, 176, 188, 0.45)) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.table-section::after{
content: "" !important;
  position: absolute !important;
  bottom: -50px !important;
  left: -30px !important;
  width: 95px !important;
  height: 95px !important;
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af66437391ea1.58044400.webp") !important;
  background-size: 60% !important;
  background-repeat: no-repeat !important;
  transform: scaleX(-1) rotate(52deg) !important; /* scaleX(-1) mirrors it so it looks like the other hand! */
  opacity: 0.65 !important;
  filter: drop-shadow(0 0 6px rgba(0, 176, 188, 0.45)) !important;
  pointer-events: none !important;
  z-index: 10 !important;  
}

/* =========================================================
   CIRCULAR CD AVATARS (CENTERED FLEXBOX VERSION)
   ========================================================= */

/* 1. Stack & center each friend's name and CD avatar vertically */
.friends .person {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  text-align: center !important;
}

/* 2. Keep the friend's username text clean on top */
.friends .person a:not(:has(img)),
.comments .comment-table td:first-child a:not(:has(img)) {
  display: block !important;
  width: auto !important;
  height: auto !important;
  text-align: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 6px 0 !important;
}

/* 3. Center the circular CD container directly beneath the name */
.friends .person a:has(img),
.comments .comment-table td:first-child a:has(img),
.comments .avatar-link:has(img) {
  position: relative !important;
  display: block !important;
  margin: 0 auto !important;
  width: 90px !important;
  height: 90px !important;
  left: 15px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 8px rgba(0, 176, 188, 0.45) !important;
}

/* 4. Strip hidden default margins off the avatar image inside */
.friends .person a:has(img) img,
.comments .comment-table td:first-child a:has(img) img,
.comments img.avatar {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 5. Place the transparent CD overlay on top */
.friends .person a:has(img)::after,
.comments .comment-table td:first-child a:has(img)::after,
.comments .avatar-link:has(img)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af682ef7b65f9.58397893.webp") !important;
  filter: contrast(200%);
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* =========================================================
   DARK CRT COMMENTS TABLE & REPLY TEXTBOX
   ========================================================= */

/* 1. Outer comment table & borders */
.comments-table, .comment-table, .comments table {
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* 2. Left-side commenter box (replaces the darker yellow/orange user cell) */
.comments-table td:first-child,
.comment-table td:first-child,
.comments td:first-child {
  background: rgba(14, 24, 24, 0.9) !important;
  border: 1px solid #2b4c47 !important;
  color: #8affb8 !important;
  text-align: center !important;
  padding: 10px !important;
}

/* 3. Right-side comment message box (replaces the lighter yellow message cell) */
.comments-table td:last-child,
.comment-table td:last-child,
.comments td:last-child {
  background: rgba(8, 13, 15, 0.88) !important;
  border: 1px solid #223b37 !important;
  color: #cdd8d4 !important;
  padding: 10px !important;
}

/* 4. Comment reply box & "Add a Comment" textarea */
.comments textarea,
textarea[name="comment"],
.comment-form textarea,
textarea {
  background-color: #050809 !important;
  color: #8affb8 !important;
  border: 1px solid #00B0BC !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 176, 188, 0.25) !important;
  padding: 8px !important;
}

/* 5. Submit / Post Comment button */
.comments button,
.comments input[type="submit"],
.comment-form button {
  background: linear-gradient(180deg, #162b29 0%, #0a1414 100%) !important;
  color: #8affb8 !important;
  border: 1px solid #00B0BC !important;
  border-radius: 3px !important;
  padding: 5px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
}

.comments button:hover,
.comments input[type="submit"]:hover,
.comment-form button:hover {
  background: #1f3d3a !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(138, 255, 184, 0.6) !important;
}

/* Add .comments-table to your existing circular CD avatar rules */
.friends .person a:has(img),
.comments-table td:first-child a:has(img),
.comment-table td:first-child a:has(img) {
  position: relative !important;
  display: block !important;
  margin: 0 auto !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.friends .person a:has(img)::after,
.comments-table td:first-child a:has(img)::after,
.comment-table td:first-child a:has(img)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("https://friendrewind.com/uploads/gallery/43226/img_6af682ef7b65f9.58397893.webp") !important;
  filter: contrast(200%);
  background-size: 100% 100% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
/* 3. Remove default max-width/height limits that squish the image inside */
.comments-table td:first-child a:has(img) img,
.comment-table td:first-child a:has(img) img,
.comments td:first-child a:has(img) img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}


</style>