Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Layout draft

Author: Pamcasso
Category: custom
Created: March 15, 2026
not done yet
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>
/* Generated by Visual Builder v3 - Versión Negro/Rojo by Grok */
/* Mantengo Press Start 2P para vibe retro */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P:wght@400;700&display=swap');

body {
  background-color: #0a0a0a; /* Negro muy oscuro como base */
  background-image: url('TU_FONDO_GENERAL_AQUI.jpg'); /* Pon tu wallpaper negro/rojo aquí si quieres */
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  color: #e0e0e0; /* Texto claro para leer bien */
  font-family: 'Press Start 2P', cursive; /* Retro, pero considera fallback monospace para textos largos */
}

:root {
  --cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
  --red-accent: #ff0000; /* Rojo vivo, cámbialo a #c41e3a o #8b0000 si prefieres más sangre/gótico */
  --dark-bg: #111111;
  --light-text: #ffffff;
}

/* CD animado detrás de la foto de perfil - lo mantengo igual */
.profile-pic {
  position: relative;
  width: 183px;
  filter: drop-shadow(0 0 0.25rem gray);
}

.profile-pic:after {
  content: "";
  background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'),
              linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
  background-size: contain, cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.profile-pic:before {
  content: "";
  background: var(--cd-image);
  position: absolute;
  top: 5px;
  left: -20px;
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  z-index: -1;
  animation: cdspin 5s linear infinite;
  transition: left .5s ease;
}

.profile-pic:hover:before {
  left: -75px;
}

@keyframes cdspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.profile-pic .pfp-fallback {
  float: right;
  width: 163px;
  height: 160px;
  border: none;
}

.general-about .profile-pic img {
  max-width: inherit;
}

.profile-pic img {
  border-radius: 50%;
}

/* Animación float para secciones */
@keyframes boxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.contact,
.table-section,
.friends,
.blurbs,
.section,
.module,
.profileInfo {
  animation: boxFloat 3s infinite ease-in-out;
}

/* Quité el main::before (el banner de 300px) - pon tu propia imagen si quieres con background en .profile o nav */
main::before {
  content: none; /* Eliminado */
}

/* Contenedor principal - sin imagen, solo color sólido o tu textura */
.profile {
  background-color: var(--dark-bg);
  /* Si quieres repetir una textura tuya: background-image: url('TU_TEXTURA_ROJA_NEGRA.png'); background-repeat: repeat; */
}

/* Nav oscuro con toque rojo */
nav, nav .top, nav .links {
  background-color: #1a1a1a;
  border-bottom: 2px solid var(--red-accent);
}

/* Secciones con fondo semi-transparente oscuro + borde rojo */
.blurbs, .section, .module, .profileInfo, .table-section {
  background-color: rgba(20, 20, 20, 0.85);
  border: 5px solid var(--red-accent) !important;
  border-radius: 15px;
  color: var(--light-text);
}

.contact {
  border: 5px solid var(--red-accent) !important;
  border-radius: 15px !important;
  background-color: rgba(30, 0, 0, 0.7); /* Fondo rojo muy oscuro semi-transparente */
}

.contact .heading {
  background-color: var(--red-accent) !important;
  color: #000000 !important; /* Negro sobre rojo para contraste */
}

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
  background-color: var(--red-accent) !important;
  color: #000000 !important;
}

/* Textos */
h1, h2, h3, h4, h5, h6 {
  color: var(--red-accent);
}

a {
  color: #ff4444; /* Rojo claro para links */
}

a:hover {
  color: #ff8888;
}

/* Quité TODAS las background-image de .contact, .url-info, .tunes, etc. */
/* Puedes agregar las tuyas individualmente, ej: */
/* .blurbs { background-image: url('TU_IMAGEN_BLURBS.png'); background-size: cover; } */
</style></style>