← Back to Layouts
eeeeeeeeee

Name: FriendRewind
Author: FriendRewind
Author: Rayvosa
Category: Classic
Created: September 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 */
/* ================================
   CAIXAS DO PERFIL
   ================================ */

.profile .table-section,
.profile .friends,
.profile .blurbs,
.profile .contact,
.profile .photos-preview,
.profile .videos-preview,
.profile .blog-preview {
    background-color: rgba(210, 168, 182, 0.78) !important;

    border: 2px solid #181818 !important;
    border-radius: 0 !important;

   box-shadow:
    0 0 8px rgba(255, 249, 248, 0.35),
    0 0 18px rgba(255, 249, 248, 0.25),
    0 0 30px rgba(255, 249, 248, 0.15) !important;
}
<!-- MORCEGUINHOS EM ELEMENTOS INDEPENDENTES (Para permitir rotações e alturas individuais) -->
</style><div class="bat-rain-container">
  <div class="bat bat-1"></div>
  <div class="bat bat-2"></div>
  <div class="bat bat-3"></div>
  <div class="bat bat-4"></div>
  <div class="bat bat-5"></div>
  <div class="bat bat-6"></div>
  <div class="bat bat-7"></div>
  <div class="bat bat-8"></div>
  <div class="bat bat-9"></div>
  <div class="bat bat-10"></div>
  <div class="bat bat-11"></div>
  <div class="bat bat-12"></div>
</div>

/* FUNDO DA PÁGINA */<style id="fr-vb2">body, body.profile-page {
  background-image:
    linear-gradient(
      rgba(24, 24, 24, 0.50),
      rgba(24, 24, 24, 0.50)
    ),
    url("https://friendrewind.com/uploads/gallery/34507/img_6aa5f50c67da81.79942495.webp") !important;

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

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

/* ================================
   CAIXAS DO PERFIL
   ================================ */
.profile .table-section,
.profile .friends,
.profile .blurbs,
.profile .contact,
.profile .photos-preview,
.profile .videos-preview,
.profile .blog-preview {
  background-color: rgba(210, 168, 182, 0.78) !important;
  border: 2px solid #181818 !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 8px rgba(255, 249, 248, 0.35),
    0 0 18px rgba(255, 249, 248, 0.25),
    0 0 30px rgba(255, 249, 248, 0.15) !important;
}
<!-- MORCEGUINHOS EM ELEMENTOS INDEPENDENTES -->
<div class="bat-rain-container">
  <div class="bat bat-1"></div>
  <div class="bat bat-2"></div>
  <div class="bat bat-3"></div>
  <div class="bat bat-4"></div>
  <div class="bat bat-5"></div>
  <div class="bat bat-6"></div>
  <div class="bat bat-7"></div>
  <div class="bat bat-8"></div>
  <div class="bat bat-9"></div>
  <div class="bat bat-10"></div>
  <div class="bat bat-11"></div>
  <div class="bat bat-12"></div>
</div>

<style id="fr-vb2">
/* FUNDO DA PÁGINA */
body, body.profile-page {
  background-image:
    linear-gradient(
      rgba(24, 24, 24, 0.50),
      rgba(24, 24, 24, 0.50)
    ),
    url("https://friendrewind.com/uploads/gallery/34507/img_6aa5f50c67da81.79942495.webp") !important;

  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

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

/* ================================
   CAIXAS DO PERFIL
   ================================ */
.profile .table-section,
.profile .friends,
.profile .blurbs,
.profile .contact,
.profile .photos-preview,
.profile .videos-preview,
.profile .blog-preview {
  background-color: rgba(210, 168, 182, 0.78) !important;
  border: 2px solid #181818 !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 8px rgba(255, 249, 248, 0.35),
    0 0 18px rgba(255, 249, 248, 0.25),
    0 0 30px rgba(255, 249, 248, 0.15) !important;
}

/* ================================
   SISTEMA DE CHUVA ORGANICA DE MORCEGOS
   ================================ */
.bat-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.bat {
  position: absolute;
  background-image: url("https://friendrewind.com/uploads/gallery/34507/img_6aa5f811a68c81.75106340.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation-name: fallSlow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ESPELHAMENTO E ÂNGULOS VARIADOS */

/* Lado Original */
.bat-1 { left: 4%; width: 22px; height: 18px; transform: scaleX(1) rotate(-15deg); animation-duration: 16s; animation-delay: -2s; }
.bat-3 { left: 23%; width: 40px; height: 30px; transform: scaleX(1) rotate(5deg); animation-duration: 18s; animation-delay: -5s; }
.bat-5 { left: 42%; width: 30px; height: 22px; transform: scaleX(1) rotate(-8deg); animation-duration: 17s; animation-delay: -1s; }
.bat-7 { left: 60%; width: 38px; height: 28px; transform: scaleX(1) rotate(-20deg); animation-duration: 19s; animation-delay: -7s; }
.bat-9 { left: 78%; width: 22px; height: 16px; transform: scaleX(1) rotate(12deg); animation-duration: 15s; animation-delay: -4s; }
.bat-11 { left: 18%; width: 26px; height: 20px; transform: scaleX(1) rotate(-5deg); animation-duration: 19s; animation-delay: -18s; }

/* Invertidos/Espelhados Horizontalmente (scaleX(-1)) para virar pro outro lado */
.bat-2 { left: 14%; width: 32px; height: 24px; transform: scaleX(-1) rotate(-10deg); animation-duration: 20s; animation-delay: -10s; }
.bat-4 { left: 32%; width: 24px; height: 18px; transform: scaleX(-1) rotate(15deg); animation-duration: 22s; animation-delay: -14s; }
.bat-6 { left: 51%; width: 20px; height: 15px; transform: scaleX(-1) rotate(-18deg); animation-duration: 25s; animation-delay: -12s; }
.bat-8 { left: 69%; width: 28px; height: 20px; transform: scaleX(-1) rotate(8deg); animation-duration: 21s; animation-delay: -16s; }
.bat-10 { left: 86%; width: 36px; height: 26px; transform: scaleX(-1) rotate(-12deg); animation-duration: 23s; animation-delay: -11s; }
.bat-12 { left: 93%; width: 25px; height: 18px; transform: scaleX(-1) rotate(18deg); animation-duration: 24s; animation-delay: -8s; }

/* ANIMAÇÃO DE QUEDA LENTA */
@keyframes fallSlow {
  0% {
    top: -60px;
  }
  100% {
    top: 108vh;
  }
}
</style><style>

/* ================================
   CABEÇALHOS DAS CAIXAS (#5A4D51 COM TEXTO ROSA)
   ================================ */
.profile .heading,
.profile .table-section h4,
.profile h2,
.profile .contact .heading,
.profile .friends .heading,
.profile .blurbs .heading,
.profile .photos-preview .heading,
.profile .videos-preview .heading,
.profile .blog-preview .heading {
  background-color: #5A4D51 !important; /* Grafite gótico */
  color: #FFF9F8 !important;            /* Texto rosa pastel bem claro */
  font-weight: bold !important;
  border-bottom: 2px solid #D2A8B6 !important; /* Linha de detalhe rosa */
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
/* ================================
   IMAGEM DE FUNDO COM OVERLAY ESCURO
   ================================ */
html, 
body, 
body.profile-page, 
.main, 
#main {
  background-color: transparent !important;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
    url("https://friendrewind.com/uploads/gallery/34507/img_6aa62a9adb7792.23532617.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* ================================
   CURSORES ANIMADOS (32x32)
   ================================ */

/* 1. CURSOR NATIVO (Padrão para toda a página) */
*, html, body, .profile, .main {
  cursor: url("https://friendrewind.com/uploads/gallery/34507/img_6aa631cd087200.95275135.gif") 0 0, auto !important;
}

/* 2. CURSOR SELECIONANDO (Links, botões e elementos clicáveis) */
a, a *, button, input, .button, .heading {
  cursor: url("https://friendrewind.com/uploads/gallery/34507/img_6aa631ee8ae9c4.53475007.gif") 0 0, pointer !important;
}

/* 3. CURSOR PARA SELEÇÃO DE TEXTO (Em cima de textos e parágrafos) */
p, span, h1, h2, h3, h4, h5, h6, td, th, textarea, input[type="text"] {
  cursor: url("https://friendrewind.com/uploads/gallery/34507/img_6aa63210b85796.48664169.gif") 0 0, text !important;
}
/* ================================
   EFEITOS DE BRILHO/GLOW NOS LINKS (PALPITE 3)
   ================================ */
/* Cor padrão de todos os links */
a, .profile a {
  color: #D2A8B6 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

/* Efeito de brilho rosa ao passar o mouse */
a:hover, .profile a:hover {
  color: #FFF9F8 !important;
  text-shadow:
    0 0 5px #FFF9F8,
    0 0 10px #D2A8B6,
    0 0 15px #C0919F !important;
}

/* Estilo e brilho nos botões de contato (Add Friend, Send Message, etc) */
.profile .contact a,
.profile .contact button {
  background-color: #3C393A !important;
  color: #FFF9F8 !important;
  border: 1px solid #D2A8B6 !important;
  transition: all 0.2s ease-in-out !important;
}

.profile .contact a:hover,
.profile .contact button:hover {
  background-color: #5A4D51 !important;
  box-shadow: 0 0 10px rgba(210, 168, 182, 0.6) !important;
}</style>
</style>