← Back to Layouts
first

Name: FriendRewind
Author: FriendRewind
Author: limpnard
Category: Classic
Created: November 12, 2026
my first personal layout
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>
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

:root {
  --page-width: 1000px;   /* resizes the bar, banner and page together */
  --page-width-two: 980px;
  --page-shift: -100px;   /* sideways offset; set to 0 to remove */
  --box-bg: rgba(60, 40, 40, 0.5);
  --accent: #831100;
  --banner: url("https://friendrewind.com/uploads/gallery/31810/img_6af5a46245e483.26596617.gif");

}

* {
  cursor: url('https://cdn.cursors-4u.net/css-previews/syringe-ed0819de-css.webp') 0 0, auto !important;
}

/* ---------- page background + drips ---------- */
body, body.profile-page {
  background: url("https://friendrewind.com/uploads/gallery/31810/img_6af60b62047a62.98647769.webp") repeat center center / cover scroll !important;
  color: #fff;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page { background-attachment: fixed !important; }
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 112px;
  background: url("https://friendrewind.com/uploads/gallery/31810/img_6af60e7e487bc5.96865152.gif") repeat-x top left / auto 100%;
  pointer-events: none;
  z-index: 9999;
}


/* ---------- layout ---------- */
main, .myspace-header {
  width: var(--page-width) !important;
  max-width: none !important;
  margin-left: var(--page-shift) !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

.myspace-header { margin-bottom: 0 !important; }

main {
  font-family: "Cutive Mono", monospace;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: var(--banner) top / 100% 270px no-repeat;
}

/* base banner + border */
main::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 270px;
  border: 10px solid #040404 !important;
  background: var(--banner) center / 100% 100% no-repeat;
}

/* translucent overlay, kept inside the border */
main::after {
  content: "";
  position: absolute;
  top: 139px;
  width: var(--page-width-two);
  transform: translate(10px, 0px);
  height: 250px;   /* 270px - 2 x 10px border */
  opacity: 0.2;
  pointer-events: none;
  background: url(https://friendrewind.com/uploads/gallery/31810/img_6af61f98a3efd2.24698101.gif) center / 100% 100% no-repeat;
}



main .left { width: 60% !important; }

footer, .profile-info, ::-webkit-scrollbar,
.friends .heading, .url-info, .friends:not(#comments),
.details-table tr:nth-child(6), .profile-mood, .online,
.profile .contact .heading, .cb-like-btn, .icon {
  display: none !important;
}

.general-about {
  display: flex;
  flex-direction: column;
  width: 350px !important;
}

/* ---------- top nav bar ---------- */
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding-bottom: 0;
  background: #5c0700 url("https://friendrewind.com/uploads/gallery/31810/img_6a94c335c329b2.66597382.webp") center center / cover no-repeat;
}
.myspace-header .main-nav li a { color: #000; }
.myspace-header .main-nav li a:hover { color: #e32400; }

/* ---------- boxes ---------- */
.row.profile {
  background: url("https://friendrewind.com/uploads/gallery/31810/img_6ababe06bb1116.89587514.webp") repeat top left / contain !important;
}

.profile, .table-section, .module, .blurbs, .section, .contact, .interests, .details-table {
  color: #fff !important;
}

.table-section, .module, .blurbs, .interests {
  border: 1px solid var(--accent) !important;
  border-radius: 5px !important;
}

.table-section, .tunes, .blurbs {
  background-color: var(--box-bg) !important;
}

.profile .contact {
  position: sticky;
  isolation: isolate;
  border: 10px solid #111111 !important;
  background-image: url("https://friendrewind.com/uploads/gallery/31810/img_6af6169825ad79.03174708.gif"), radial-gradient(#555555, #FFbbbb, #667744, #000000) !important;
  background-repeat: no-repeat, repeat;
  background-blend-mode: overlay;
  background-size: 100% 120% !important;
}

.profile .contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.3;
  pointer-events: none;
  background: url("https://friendrewind.com/uploads/gallery/31810/img_6af61f98a3efd2.24698101.gif") 0 0 / 100% 120% no-repeat;
}
.heading {
  background: var(--accent) !important;
  border: none;
  border-bottom: 1px solid var(--accent) !important;
  color: #fff !important;
}

h1, h2, h3, h4, h5, h6 { color: #fff !important; }
a, .profile a { color: #fff !important; }

/* ---------- contact links ---------- */
.contact .inner .f-row .f-col a:before {
  content: " > ";
  display: inline-block;
  width: 16px;
  height: 16px;
}
.profile .contact .inner,
.profile .contact .inner .f-row,
.profile .contact .inner .f-row .f-col {
  display: block;
  margin: 0 0 7px 5px;
}

/* ---------- details table ---------- */
.details-table td {
  display: inline-block;
  width: 100% !important;
}
.details-table tr {
  display: inline-block;
  width: 48%;
  margin: 0 0 5px 5px;
  border: 1px solid var(--accent);
}
.details-table td:first-child {
  margin-bottom: 1px;
  border-bottom: 1px solid var(--accent);
}
.details-table td:last-child {
  overflow-y: scroll;
  height: 150px !important;
  width: 100%;
}

/* ---------- comments ---------- */
#comments {
  background: url("https://friendrewind.com/uploads/gallery/21249/img_6a67d4b507ada6.25644394.webp") center center / cover no-repeat !important;
}
table.comments-table { display: block; }
table.comments-table, .comment-replies { border: none; }
.comments-table td {
  background: url("https://friendrewind.com/uploads/gallery/21249/img_6a67d4cf88d9a4.67242329.webp") center center / cover no-repeat !important;
  border: none;
}
.comments-table td:first-child {
  text-align: left;
  font-size: 0.7em;
}
.comments-table td:first-child img:not(.icon) {
  border-radius: 0;
  border: none !important;
}
.cb-actions button {
  border-radius: 0;
  border: 1px solid var(--accent) !important;
}

/* ---------- blinkie popup ---------- */
.blinkie-popup {
  position: fixed;
  top: 160px;    /* move the box: change top / right (or use bottom / left) */
  right: 30px;
  width: 220px;
  z-index: 10000;
  border: 1px solid var(--accent);
  border-radius: 5px;
  overflow: hidden;
  color: #fff;
  font-family: "Cutive Mono", monospace;
  background-color: var(--box-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.blinkie-popup summary {
  padding: 4px 8px;
  background: var(--accent);
  color: #fff;
  list-style: none;
  user-select: none;
}
.blinkie-popup summary::-webkit-details-marker { display: none; }
.blinkie-popup summary::after { content: " [-]"; float: right; }
.blinkie-popup:not([open]) summary::after { content: " [+]"; }

.blinkie-popup .blinkie-body {
  max-height: 200px;
  overflow-y: auto;
  padding: 6px;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.blinkie-popup .blinkie-body img {
  display: block;
  max-width: 100%;
  margin: 0 auto 6px;
}
.blinkie-popup .blinkie-body::-webkit-scrollbar { display: block !important; width: 8px; }
.blinkie-popup .blinkie-body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

/* ---------- credit ---------- */
.cred {
  position: fixed;
  bottom: 5px;
  right: 10px;
  font-size: 0.8em;
}
</style>blinkies
  <div class="blinkie-body">
    
    <img src="https://friendrewind.com/proxy/image.php?url=https%3A%2F%2F64.media.tumblr.com%2Fd2ca27a65e1bdab76daac9e87e0cd2bd%2F2b09abd76b8c22b5-72%2Fs500x750%2F36fd5ddc3c2fd4346925115d2f8ff81b595a2822.gif">
    <img src="PASTE_BLINKIE_URL_2">
    <img src="PASTE_BLINKIE_URL_3">
    <img src="PASTE_BLINKIE_URL_4">
  </div>


<div class="cred">
  <p>layout by <a href="https://friendrewind.com/nordligesauer">nordligesauer</a></p>
</div>