← Back to Layouts
My layout v3

Name: FriendRewind
Author: FriendRewind
Author: Shemyazza_LXT
Category: Classic
Created: October 25, 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":"#000000","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#ff0000","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":"#ff0000","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

.myspace-header .top-nav {
  background: #000000;
}

.myspace-header .main-nav-wrapper {
  background: #000000;
}

.myspace-header .main-nav li a:hover {
  color: #ff0000;
}

a, .profile a, .table-section a, .module a { color: #ff0000 !important; }
</style><style>


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


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


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


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


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


/* FR_MANUAL_EXTRAS */
</style>
<style id="lux-ex-tenebris-v3">

/* =========================================================
   LUX EX TENEBRIS V3
   Shemyazza_LXT
   Negro · Burdeos · Sangre
   ========================================================= */


/* =========================
   01. PALETA
   ========================= */

:root {
    --lxt-void: #010102;
    --lxt-black: #050506;
    --lxt-black-soft: #0b090a;

    --lxt-blood-dark: #190006;
    --lxt-wine: #35000f;
    --lxt-burgundy: #5e001c;

    --lxt-border: #720022;
    --lxt-crimson: #b00035;
    --lxt-blood: #d0003d;
    --lxt-bright: #ff174f;

    --lxt-white: #f1edef;
    --lxt-gray: #aaa3a6;
    --lxt-dark-gray: #625b5e;
}


/* =========================
   02. FONDO LUX EX TENEBRIS
   ========================= */

html {
    background-color: var(--lxt-void) !important;
}

body {
    color: var(--lxt-white) !important;

    background-color: var(--lxt-void) !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(1,1,2,.94) 0%,
            rgba(1,1,2,.82) 30%,
            rgba(4,0,1,.58) 55%,
            rgba(10,0,3,.38) 78%,
            rgba(1,1,2,.55) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.28) 0%,
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.50) 100%
        ),
        url("https://drive.google.com/thumbnail?id=11t_RGglA8EXtkTOMkhdX4Kutog3RhFZR&sz=w2000") !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-position:
        center,
        center,
        center top !important;

    background-size:
        cover,
        cover,
        cover !important;

    background-attachment:
        fixed,
        fixed,
        fixed !important;

    min-height: 100vh;
}


/* =========================
   03. CONTENEDOR PRINCIPAL
   ========================= */

.master-container,
.container,
main {
    background:
        linear-gradient(
            180deg,
            rgba(5,5,6,.72),
            rgba(1,1,2,.58)
        ) !important;

    color: var(--lxt-white) !important;
}


/* =========================
   04. TEXTO GENERAL
   ========================= */

body,
p,
span,
div,
td,
th,
li {
    color: var(--lxt-white);
}

a {
    color: var(--lxt-crimson) !important;
    text-decoration: none !important;

    transition:
        color .18s ease,
        text-shadow .18s ease;
}

a:hover {
    color: var(--lxt-bright) !important;

    text-shadow:
        0 0 4px rgba(255,23,79,.65),
        0 0 10px rgba(176,0,53,.35);
}


/* =========================
   05. TÍTULOS
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--lxt-white) !important;
}

h1 {
    text-shadow:
        0 0 4px rgba(208,0,61,.55),
        0 0 12px rgba(94,0,28,.55);
}


/* =========================
   06. NAVEGACIÓN
   ========================= */

nav,
.nav,
.navbar,
.navigation,
.top-nav,
#nav {
    background:
        linear-gradient(
            180deg,
            rgba(30,0,8,.96),
            rgba(5,5,6,.98)
        ) !important;

    border-color: var(--lxt-border) !important;
}

nav a,
.nav a,
.navbar a,
.navigation a,
.top-nav a,
#nav a {
    color: var(--lxt-white) !important;
}

nav a:hover,
.nav a:hover,
.navbar a:hover,
.navigation a:hover,
.top-nav a:hover,
#nav a:hover {
    color: var(--lxt-bright) !important;

    text-shadow:
        0 0 7px rgba(208,0,61,.8);
}


/* =========================
   07. CAJAS GENERALES
   ========================= */

.section,
.contact,
.blurbs,
.friends,
.general-about,
.url-info,
.blog-preview,
.photos-preview,
.videos-preview,
.table-section,
#comments,
.comments-table,
.profile-playlist-widget {

    background:
        linear-gradient(
            145deg,
            rgba(10,8,9,.90),
            rgba(2,2,3,.84)
        ) !important;

    border:
        1px solid rgba(114,0,34,.88) !important;

    border-radius:
        5px !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.55),
        inset 0 0 20px rgba(94,0,28,.035);

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* =========================
   08. EFECTO AL PASAR RATÓN
   ========================= */

.section:hover,
.contact:hover,
.blurbs:hover,
.friends:hover,
.general-about:hover,
.url-info:hover,
.blog-preview:hover,
.photos-preview:hover,
.videos-preview:hover,
.table-section:hover,
.profile-playlist-widget:hover {

    border-color:
        rgba(176,0,53,.92) !important;

    box-shadow:
        0 5px 22px rgba(0,0,0,.65),
        0 0 9px rgba(176,0,53,.12);
}


/* =========================
   09. CABECERAS DE MÓDULOS
   ========================= */

.heading,
.section .heading,
.contact .heading,
.blurbs .heading,
.friends .heading,
.general-about .heading,
.table-section .heading,
.profile-playlist-widget .heading {

    position: relative;

    overflow: hidden;

    color:
        var(--lxt-white) !important;

    background:
        linear-gradient(
            90deg,
            #230009 0%,
            #5e001c 50%,
            #230009 100%
        ) !important;

    border-bottom:
        1px solid var(--lxt-border) !important;

    text-shadow:
        0 1px 3px #000;
}


/* línea de sangre */

.heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--lxt-blood),
            transparent
        );

    opacity: .65;
}


/* =========================
   10. PERFIL / AVATAR
   ========================= */

.profile-pic img,
.profile-picture img,
.avatar img {

    border:
        2px solid var(--lxt-border) !important;

    border-radius:
        3px !important;

    box-shadow:
        0 0 7px rgba(176,0,53,.48),
        0 0 20px rgba(94,0,28,.32);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.profile-pic img:hover,
.profile-picture img:hover,
.avatar img:hover {

    border-color:
        var(--lxt-blood) !important;

    box-shadow:
        0 0 8px rgba(208,0,61,.68),
        0 0 25px rgba(94,0,28,.50);

    filter:
        contrast(1.04);
}


/* =========================
   11. INFORMACIÓN DEL PERFIL
   ========================= */

.profile-info {

    background:
        linear-gradient(
            90deg,
            rgba(4,4,5,.78),
            rgba(20,0,6,.56),
            rgba(2,2,3,.34)
        ) !important;

    border-color:
        rgba(114,0,34,.55) !important;
}


/* =========================
   12. ONLINE
   ========================= */

.online,
.online-now {

    color:
        #58d06c !important;

    text-shadow:
        0 0 5px rgba(40,190,75,.28);
}


/* =========================
   13. PROFILE TUNES
   ========================= */

.profile-playlist-widget,
.profile-tunes {

    background:
        rgba(4,4,5,.88) !important;

    border:
        1px solid var(--lxt-border) !important;
}

.profile-playlist-widget .heading,
.profile-tunes .heading {

    background:
        linear-gradient(
            90deg,
            #250009,
            #62001d,
            #250009
        ) !important;

    color:
        var(--lxt-white) !important;
}


/* =========================
   14. CONTACTING
   ========================= */

.contact {

    background:
        linear-gradient(
            145deg,
            rgba(8,7,8,.91),
            rgba(3,3,4,.86)
        ) !important;
}

.contact a {

    color:
        var(--lxt-crimson) !important;
}

.contact a:hover {

    color:
        var(--lxt-bright) !important;
}


/* =========================
   15. URL DEL PERFIL
   ========================= */

.url-info {

    background:
        rgba(3,3,4,.90) !important;

    border:
        1px solid var(--lxt-border) !important;

    color:
        var(--lxt-gray) !important;
}

.url-info a {

    color:
        var(--lxt-blood) !important;
}


/* =========================
   16. INTERESES
   ========================= */

.table-section {

    background:
        rgba(3,3,4,.86) !important;
}

.table-section table {

    background:
        transparent !important;
}

.table-section td,
.table-section th {

    border-color:
        rgba(114,0,34,.55) !important;
}


/* columna izquierda */

.table-section td:first-child,
.table-section th:first-child {

    background:
        linear-gradient(
            90deg,
            rgba(53,0,15,.92),
            rgba(25,0,6,.88)
        ) !important;

    color:
        var(--lxt-white) !important;
}


/* columna derecha */

.table-section td:nth-child(2) {

    background:
        rgba(4,4,5,.78) !important;

    color:
        var(--lxt-gray) !important;
}


/* =========================
   17. BLURBS
   ========================= */

.blurbs {

    background:
        rgba(4,4,5,.86) !important;
}

.blurbs .heading {

    background:
        linear-gradient(
            90deg,
            #220008,
            #59001a,
            #220008
        ) !important;
}


/* =========================
   18. FRIENDS
   ========================= */

.friends {

    background:
        rgba(4,4,5,.87) !important;
}

.friends img {

    border:
        1px solid var(--lxt-border) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.friends img:hover {

    border-color:
        var(--lxt-blood) !important;

    box-shadow:
        0 0 8px rgba(208,0,61,.45);
}


/* =========================
   19. COMENTARIOS
   ========================= */

#comments,
.comments-table {

    background:
        rgba(3,3,4,.90) !important;

    border-color:
        var(--lxt-border) !important;
}

#comments td,
.comments-table td {

    background:
        rgba(5,5,6,.82) !important;

    border-color:
        rgba(114,0,34,.42) !important;

    color:
        var(--lxt-gray) !important;
}


/* =========================
   20. BOTONES
   ========================= */

button,
.button,
input[type="button"],
input[type="submit"] {

    background:
        linear-gradient(
            180deg,
            #65001f,
            #30000e
        ) !important;

    color:
        var(--lxt-white) !important;

    border:
        1px solid var(--lxt-border) !important;

    border-radius:
        3px !important;

    text-shadow:
        0 1px 2px #000;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {

    background:
        linear-gradient(
            180deg,
            #9b002e,
            #500017
        ) !important;

    border-color:
        var(--lxt-blood) !important;

    box-shadow:
        0 0 7px rgba(176,0,53,.35);
}


/* =========================
   21. CAMPOS
   ========================= */

input,
textarea,
select {

    background:
        rgba(3,3,4,.95) !important;

    color:
        var(--lxt-white) !important;

    border:
        1px solid var(--lxt-border) !important;
}

input:focus,
textarea:focus,
select:focus {

    outline:
        none !important;

    border-color:
        var(--lxt-blood) !important;

    box-shadow:
        0 0 5px rgba(176,0,53,.28);
}


/* =========================
   22. BARRA DE MÚSICA
   ========================= */

.music-bar,
.music-player,
.player-bar {

    background:
        linear-gradient(
            180deg,
            rgba(72,0,21,.98),
            rgba(9,3,5,.99)
        ) !important;

    border-top:
        1px solid var(--lxt-border) !important;

    color:
        var(--lxt-white) !important;

    box-shadow:
        0 -4px 16px rgba(0,0,0,.60) !important;
}

.music-bar a,
.music-player a,
.player-bar a {

    color:
        var(--lxt-white) !important;
}


/* =========================
   23. PROGRESS / RANGE
   ========================= */

input[type="range"] {

    accent-color:
        var(--lxt-blood) !important;
}


/* =========================
   24. SCROLLBAR
   ========================= */

::-webkit-scrollbar {

    width:
        10px;

    background:
        #020203;
}

::-webkit-scrollbar-track {

    background:
        #020203;
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            180deg,
            #700021,
            #30000e
        );

    border:
        2px solid #020203;

    border-radius:
        0;
}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--lxt-crimson);
}


/* Firefox */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #65001f #020203;
}


/* =========================
   25. SELECCIÓN
   ========================= */

::selection {

    background:
        var(--lxt-crimson);

    color:
        white;
}


/* =========================
   26. FILA SUPERIOR
   ========================= */

.profile-row {

    position:
        relative;

    background:
        linear-gradient(
            90deg,
            rgba(2,2,3,.84),
            rgba(19,0,5,.42),
            rgba(1,1,2,.16)
        ) !important;

    border-bottom:
        1px solid rgba(114,0,34,.35);
}


/* atmósfera detrás del perfil */

.profile-row::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(176,0,53,.08),
            transparent 38%
        );

    z-index:
        0;
}


/* mantener contenido encima */

.profile-row > * {

    position:
        relative;

    z-index:
        1;
}


/* =========================
   27. IMÁGENES
   ========================= */

img {

    max-width:
        100%;
}


/* =========================
   28. LÍNEAS Y BORDES
   ========================= */

hr {

    border:
        0 !important;

    border-top:
        1px solid rgba(114,0,34,.58) !important;
}


/* =========================
   29. MÓDULOS VACÍOS
   ========================= */

.section:empty,
.blurbs:empty,
.friends:empty {

    background:
        rgba(2,2,3,.72) !important;
}


/* =========================
   30. MÓVIL
   ========================= */

@media (max-width: 768px) {

    body {

        background-position:
            center,
            center,
            67% top !important;

        background-size:
            cover,
            cover,
            auto 100vh !important;

        background-attachment:
            scroll,
            scroll,
            fixed !important;
    }

    .master-container,
    .container,
    main {

        background:
            rgba(2,2,3,.58) !important;
    }

    .section,
    .contact,
    .blurbs,
    .friends,
    .general-about,
    .url-info,
    .table-section,
    .profile-playlist-widget {

        backdrop-filter:
            blur(1px);

        -webkit-backdrop-filter:
            blur(1px);
    }
}


/* =========================
   31. REDUCIR MOVIMIENTO
   ========================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;
    }
}

  /* =========================================================
   LUX EX TENEBRIS V3.1 · AJUSTES FINALES
   ========================================================= */


/* Elimina el azul de la navegación */

nav,
.nav,
.navbar,
.navigation,
.top-nav,
#nav,
nav::before,
nav::after,
.nav::before,
.nav::after {
    background:
        linear-gradient(
            90deg,
            #050506 0%,
            #190006 45%,
            #35000f 75%,
            #050506 100%
        ) !important;

    border-color: #720022 !important;
}


/* Deja respirar un poco más al ángel */

body {
    background-image:
        linear-gradient(
            90deg,
            rgba(1,1,2,.90) 0%,
            rgba(1,1,2,.74) 30%,
            rgba(4,0,1,.43) 55%,
            rgba(10,0,3,.24) 78%,
            rgba(1,1,2,.42) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,.03) 45%,
            rgba(0,0,0,.40) 100%
        ),
        url("https://drive.google.com/thumbnail?id=11t_RGglA8EXtkTOMkhdX4Kutog3RhFZR&sz=w2000") !important;
}</style>