← Back to Layouts
super cool layout

Name: FriendRewind
Author: FriendRewind
Author: mir4clemilk
Category: Classic
Created: September 19, 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>


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

/* =========================================================
   GOOGLE FONT
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bitcount:wght@100..900&display=swap");


/* =========================================================
   BODY / BACKGROUND
   ========================================================= */

body {
  background-image:
    linear-gradient(
      rgba(3, 8, 25, 0.20),
      rgba(3, 8, 25, 0.35)
    ),
    url("https://files.catbox.moe/htsi6b.jpg");

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


/* =========================================================
   NAVIGATION BOB
   ========================================================= */

@keyframes navBob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

.top {
  animation: navBob 3.5s ease-in-out infinite;
}


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

main {
  background-color: rgba(0, 0, 0, 0.75);
  color: rgb(255, 255, 255);
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 30px;
}

p,
h3,
h5 {
  text-align: justify;
  text-justify: inter-word;
}

.pfp-fallback {
  box-shadow: 0 0 5px 5px rgba(128, 210, 219, 0.2);
}


/* =========================================================
   TEXT / LINKS
   ========================================================= */

a,
.count,
h1,
h3 {
  color: rgb(169, 205, 252) !important;
  text-shadow: 0 0 8px rgba(169, 205, 252, 0.8) !important;
}

.inner .section h4 {
  color: rgb(128, 210, 219) !important;
}

.profile-name,
h1 {
  font-weight: 400;
  font-family: "Bitcount", sans-serif !important;
  font-size: 24px !important;
  color: #a9cdfc !important;
}


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

nav {
  border-radius: 30px !important;
}

nav .top {
  background-color: rgba(0, 0, 255, 0.1);
  color: rgb(255, 255, 255);
  border-radius: 20px;

  background-image: linear-gradient(
    rgba(167, 209, 232, 0),
    rgba(167, 209, 232, 0.4),
    rgba(167, 209, 232, 0.2),
    rgba(167, 209, 232, 0),
    rgba(167, 209, 232, 0)
  );
}

nav .links {
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
}


/* =========================================================
   CONTACT ICON
   ========================================================= */

.contact .icon {
  content: url("https://files.catbox.moe/fh06b4.gif");
  width: 20px;
  height: 20px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

hr {
  border: 0 !important;
  border-top: 1px solid #ffffff !important;
}


/* =========================================================
   DETAILS / COMMENTS
   ========================================================= */

.details-table td,
.comments-table td {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgb(255, 255, 255) !important;
}

.details-table tr,
.comments-table tr,
.heading {
  background-image: linear-gradient(
    to right,
    rgba(49, 74, 135, 0),
    rgba(49, 74, 135, 0.7),
    rgba(49, 74, 135, 0.35),
    rgba(49, 74, 135, 0),
    rgba(49, 74, 135, 0)
  ) !important;
}

.heading {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgb(255, 255, 255) !important;
  text-align: center;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  background-color: rgba(0, 0, 0, 0);

  background-image: linear-gradient(
    rgba(0, 0, 255, 0),
    rgba(0, 0, 255, 0.1),
    rgba(0, 0, 255, 0.05),
    rgba(0, 0, 255, 0)
  );

  color: rgb(255, 255, 255);
}


/* =========================================================
   CUSTOM CURSOR
   ========================================================= */

* {
  cursor: url("https://cdn.cursors-4u.net/previews/normal-369946ce-preview-32.webp") 0 0, auto !important;
}


/* =========================================================
   STATUS + MOOD
   ========================================================= */

.general-about .details p:nth-of-type(2),
.profile .mood,
p.profile-mood {
  display: block !important;

  width: fit-content !important;

  margin: 10px auto !important;

  padding: 8px 12px 8px 38px !important;

  background-color: #183a70 !important;
  background-repeat: no-repeat !important;
  background-position: left 8px center !important;
  background-size: 23px auto !important;

  border: 1px solid #18396e !important;
  border-radius: 999px !important;

  color: #a9cdfc !important;
  text-align: center !important;
}


/* Status icon */

.general-about .details p:nth-of-type(2) {
  background-image: url("https://files.catbox.moe/67hhc4.gif") !important;
}


/* Mood icon */

.profile .mood,
p.profile-mood {
  background-image: url("https://files.catbox.moe/1phx1i.gif") !important;
}</style>