← Back to Layouts
Wip

Name: FriendRewind
Author: FriendRewind
Author: Corpse-princess2.0
Category: Colorful
Created: August 25, 2026
Urple
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>

/* 
  BULLETPROOF SCREENTONE OVERLAY
  Paste this at the very bottom of your CSS style block.
*/
body::after {
    content: " " !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    
    /* Vintage Screentone Dot Pattern */
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.2px, transparent 1.2px) !important;
    background-size: 4px 4px !important;
    
    /* Forces it over everything but keeps it unclickable */
    z-index: 999999 !important;
    pointer-events: none !important;
  }
</style>
  
  


<style>



/* ===== MAIN NEON SCENE BACKGROUND ===== */

main {

    background: url("https://files.catbox.moe/ecc1qs.jpg") !important;

    background-repeat: repeat !important;

}



/* ===== COLOR + FONT SYSTEM ===== */

body,

main,

p,

span,

a,

li,

td,

th,

h1,h2,h3,h4,h5,h6 {

    color: #881fb5 !important;

}



* {

    font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif !important;

    text-shadow: 0 0 4px #881fb5;

}



a:hover,

body *:hover {

    color: #39ff14 !important;

    transition: .2s ease;

}





/* ===== PROFILE PIC RAINBOW GLOW ===== */

.general-about .profile-pic img {

    border-radius:50% !important;

    border:3px solid white !important;

    animation: rainbowGlow 3s linear infinite;

}



@keyframes rainbowGlow {

    0%,100% {

        box-shadow:0 0 12px #881fb5,0 0 30px #ff69b4;

    }

    50% {

        box-shadow:0 0 12px #39ff14,0 0 30px #39ff14;

    }

}





/* ===== SWIRL COMMENT BOX BACKGROUND ===== */

.comments-table,

.comments-table td,

.comments,

.profile-comments {

    background-image:url("https://i.postimg.cc/15PqmXJV/105013-b6639dba53887c9bfcc1b5479f1b9129.jpg") !important;

    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;

    border:3px solid #7dff8a !important;

    border-radius:15px !important;

    box-shadow:

    0 0 15px #881fb5,

    0 0 20px #7dff8a !important;

}





/* ===== REWIND STAT BOXES ===== */

.rewind-stat-box {

    border:3px solid #881fb5 !important;

    background:rgba(10,10,10,.9) !important;

    margin-bottom:20px !important;

    overflow:hidden !important;

    font-family:'New Rocker',cursive !important;

}



.rewind-stat-box .box-header {

    color:#39ff14 !important;

    font-size:24px !important;

    height:45px !important;

    line-height:45px !important;

    padding:0 15px !important;

    background:#a10061 !important;

    border-bottom:3px solid #39ff14 !important;

    background-image:url("https://dl.glitter-graphics.com/pub/3766/3766676ikt6tyf44v.gif") !important;

}



.rewind-box-body {

    padding:15px !important;

    display:flex !important;

    align-items:center !important;

    gap:15px !important;

    background:#050505 !important;

}



.rewind-icon-wrapper {

    width:60px !important;

    height:60px !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    border:2px solid #39ff14 !important;

    background:#000 !important;

}



.rewind-icon-wrapper img {

    width:40px !important;

    height:40px !important;

}



.rewind-stat-text h5 {

    color:#e0e0e0 !important;

}



.rewind-stat-text p {

    color:#ff0099 !important;

    font-size:20px !important;

    font-weight:bold !important;

}



</style><div class="rewind-stat-box">

<div class="box-header">⚡ YOUR TOP FRIEND METRIC</div>

<div class="rewind-box-body">



<div class="rewind-icon-wrapper">

<img src="/proxy/image.php?url=https%3A%2F%2Fgloomy-poison.neocities.org%2Fscene_graphics%2Fpinkandblackskullfavicon.gif">

</div>



<div class="rewind-stat-text">

<h5>Mosh Pit Co-Captain</h5>

<p>8,432 Minutes Chatting</p>

</div>



</div>

</div>





<div class="rewind-stat-box">

<div class="box-header">☠️ PROFILE VIEW REWIND</div>

<div class="rewind-box-body">



<div class="rewind-icon-wrapper">

<img src="/proxy/image.php?url=https%3A%2F%2Fgloomy-poison.neocities.org%2Fscene_graphics%2Fyellowandgreenskullfavicon.gif">

</div>



<div class="rewind-stat-text">

<h5>Yearly Profile Stalkers</h5>

<p>Over 12,000 Total Blasts</p>

</div>



</div>

</div><style>



/* ===== REWIND NAV CONTAINER ===== */

.rewind-nav-container {

    background:url("https://i.pinimg.com/736x/e3/34/87/e334879ed9c55bdf6d005a4d1b3b7895.jpg") !important;

    margin-top:20px !important;

    border-radius:20px 20px 0 0 !important;

    border:5px solid #00ff0d !important;

    padding:10px !important;

}



.rewind-nav-links {

    background:linear-gradient(

    0deg,

    #ff72c4 0%,

    #ff92d6 50%,

    #fff1fd 100%

    ) !important;



    list-style:none !important;

    padding:8px !important;

    margin:0 !important;

    display:flex !important;

    justify-content:center !important;

    flex-wrap:wrap !important;



    border-left:5px solid #ff00c3 !important;

    border-right:5px solid #ff00c3 !important;

}



.rewind-nav-links li {

    margin:3px 6px !important;

    font-size:11px !important;

    font-weight:bold !important;

    text-transform:uppercase !important;

}



.rewind-nav-links a {

    color:#000 !important;

    text-decoration:none !important;

}



.rewind-nav-links a:hover {

    color:#39ff14 !important;

}





/* ===== UNIVERSAL PINK/GREEN GLOW ===== */

.rewind-stat-box,

.rewind-nav-container,

.rewind-spotify-card {

    box-shadow:

    0 0 15px #881fb5,

    0 0 30px #39ff14 !important;

}





/* ===== ROB ZOMBIE SPOTIFY CARD ===== */

.rewind-spotify-card {



    background:#050505 !important;

    width:100% !important;

    max-width:440px !important;

    margin:25px auto !important;

    padding:20px !important;



    text-align:center !important;



    border:5px solid #00ff0d !important;



    box-shadow:

    0 0 15px #ff1493,

    0 0 30px #ff1493,

    0 0 45px #ff1493 !important;

}





.rewind-spotify-content {



    background:rgba(5,5,5,.94) !important;



    padding:30px 15px 25px !important;



    border:2px dashed #881fb5 !important;

}





.rewind-spotify-content img {



    width:140px !important;

    height:140px !important;



    object-fit:cover !important;



    border-radius:50% !important;



    border:4px solid #39ff14 !important;



    box-shadow:0 0 15px #ff1493 !important;

}





.rewind-spotify-content h3,

.rewind-spotify-content h4 {



    color:#881fb5 !important;



    text-transform:uppercase !important;



    letter-spacing:2px !important;

}





.progress {



    width:90%;

    height:6px;



    background:#5a1236;



    margin:25px auto 5px;



}





.progress-fill {



    width:85%;

    height:100%;



    background:#39ff14;



}





/* ===== MUSIC IFRAME ===== */



</style><div class="rewind-nav-container">



<ul class="rewind-nav-links">



<li><a href="#stats">📊 Overview</a></li>

<li><a href="#friends">☠️ Top Friends</a></li>

<li><a href="#tunes">🎵 Top Anthems</a></li>

<li><a href="#snapshots">📸 Snapshots</a></li>

<li><a href="#comments">💬 Top Blurbs</a></li>



</ul>



</div>







<div class="rewind-spotify-card">



<div class="rewind-spotify-content">





<img src="/proxy/image.php?url=https%3A%2F%2Fi.postimg.cc%2FfLxrqVtH%2FUntitled31-20260702104729.png">





<h3>LIVING DEAD GIRL</h3>



<h4>ROB ZOMBIE</h4>





<div class="progress">

<div class="progress-fill"></div>

</div>





<p style="color:#ff69b4!important;">

2:58　　 3:24

</p>





<p style="color:#39ff14!important;">

💀 BLASTED OVER 666+ TIMES THIS YEAR ⚡

</p>





</div>



</div>







<iframe width="0" height="0" src="https://www.youtube.com/embed/f5cLXZJGuv4?loop=1&amp;autoplay=1&amp;controls=0&amp;playlist=f5cLXZJGuv4" frameborder="0" allow="autoplay" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation" referrerpolicy="strict-origin-when-cross-origin">

</iframe><style>

/* ===== EXTRA NEON GREEN SCENE AURA ===== */



main,

.rewind-stat-box,

.rewind-nav-container,

.rewind-spotify-card,

.rewind-spotify-content,

.comments-table,

.comments-table td,

.comments,

.profile-comments,

.general-about .profile-pic img {

    filter: drop-shadow(0 0 8px #39ff14)

            drop-shadow(0 0 18px #39ff14) !important;

}





/* Green electric hover pulse */

.rewind-stat-box:hover,

.rewind-nav-container:hover,

.rewind-spotify-card:hover,

.comments-table:hover {

    box-shadow:

    0 0 10px #39ff14,

    0 0 25px #39ff14,

    0 0 50px #39ff14,

    0 0 70px #881fb5 !important;

    transition: .3s ease !important;

}





</style>



<style>



/* ===== SOFT NEON GREEN GLOW: PFP + FRIENDS ONLY ===== */



.general-about .profile-pic img {

    filter:

    drop-shadow(0 0 4px #39ff14) !important;



    border: 3px solid #39ff14 !important;



    animation: softGreenPulse 4s ease-in-out infinite !important;

}





.friends-grid,

.friends-grid .person,

.friends-grid .person img,

#friends,

#friends .heading {

    filter:

    drop-shadow(0 0 3px #39ff14) !important;

}





/* subtle glow pulse */

@keyframes softGreenPulse {



    0%,100% {

        box-shadow:

        0 0 5px #39ff14;

    }



    50% {

        box-shadow:

        0 0 12px #39ff14;

    }



}



</style>













<style>



/* ===== TURN ALL DEFAULT FRIENDREWIND COLORS PINK ===== */



/* Main profile boxes / tables */

.profile-info,

.profile-info table,

.profile-info td,

.profile-info th,

.table-section,

.table-section td,

.table-section th,

.details,

.details td,

.details th {

    background-color: #050505 !important;

    color: #ff69b4 !important;

    border-color: #881fb5 !important;

}





/* Default grey backgrounds */

section,

.box,

.container,

.card,

.profile-section,

.profile-module {

    background-color:#050505 !important;

    color:#881fb5 !important;

}





/* Yellow/blue headings */

.heading,

.section-title,

.table-section .heading,

.profile-info .heading,

h1,h2,h3,h4,h5 {

    background:#a10061 !important;

    color:#881fb5!important;

    border-color:#39ff14 !important;

}





/* Default links */

a,

a:visited {

    color:#881fb5 !important;

}



a:hover {

    color:#39ff14 !important;

}





/* Buttons / controls */

button,

input,

textarea,

select {

    background:#050505 !important;

    color:#881fb5 !important;

    border:2px solid #881fb5 !important;

}





/* Friend area */

.friends-grid,

.friends-grid .person,

.friends-grid .person p,

.friends-grid .count {

    color:#881fb5 !important;

}





/* Friend images get subtle matching glow */

.friends-grid img {

    border:2px solid #881fb5 !important;

    box-shadow:0 0 8px #881fb5 !important;

}





/* Replace grey text */

small,

.meta,

label,

.date,

.timestamp {

    color:#881fb5 !important;

}





/* Neon green accents */

.badge,

.online,

.status {

    color:#39ff14 !important;

}



</style><div class="comment-box">

  Write your comment here...

</div><style>

.comment-box {

  width: 300px;

  height: 100px;

  padding: 20px;

  border-radius: 15px;



  background-image: url("https://i.postimg.cc/htjSDRm8/3632614-8170aebea30023a116cfb74ab473172c.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;



  color: white;

}



/* ===== FRIENDREWIND RETRO ADD-ONS ===== */



/* Animated banner */

main::before {

    content: "";

    display: block;

    width: 100%;

    height: 300px;

    background-image: url("https://i.pinimg.com/736x/c9/b7/2f/c9b72f0e20a4fb8795402a1db56a4194.jpg");

    background-size: cover;

    background-position: center;

}



/* Music note Tunes area */

.tunes {

    background-image: url("https://i.pinimg.com/736x/09/40/4c/09404c94e768f072573a1f2cc06e8bf8.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

}



/* Bone Friends area */

.friends,

#friends {

    background-image: url("https://i.pinimg.com/736x/c8/4e/ff/c84eff2a3b91e8b1aa0b57c9238e0b3d.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

}



/* Bone Comments background */

#comments {

    background-image: url("https://i.pinimg.com/736x/c8/4e/ff/c84eff2a3b91e8b1aa0b57c9238e0b3d.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

}



/* Polka dot individual comments */

.comments-table td {

    background-image: url("https://i.pinimg.com/736x/1f/98/0f/1f980ffc51bb6db17c303f3594a6fea5.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

    border-radius: 15px !important;

}







</style>











<style>

...

</style>



<style>

/* ===== INTERESTS CONTENT IMAGE OVERLAY ===== */



.interests .table-section,

.interests .table-section td,

.interests td,

.profile .interests td {

    background-image: url("https://i.postimg.cc/4yr4km9k/b5122f739350d536af9c36fd76c88818.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;



    border: 2px solid #881fb5 !important;



    box-shadow:

        inset 0 0 10px #881fb5,

        0 0 8px #881fb5 !important;

}





/* Keep the pink writing readable */



.interests td,

.interests td * {

    color: #ff69b4 !important;

    text-shadow:

        0 0 4px #000,

        0 0 8px #881fb5 !important;

}





/* Outer glow */



.interests {

    border: 3px solid #881fb5 !important;

    border-radius: 12px !important;

    box-shadow:

        0 0 15px #881fb5,

        0 0 30px #ff1493 !important;

}

</style>





<style>

/* ===== INTERESTS BOX: IMAGE + NEON DIVIDERS ===== */



.interests table {

    border-collapse: separate !important;

    border-spacing: 6px !important;

    background: transparent !important;

}





.interests tr,

.interests td {

    background-image: url("https://i.postimg.cc/4yr4km9k/b5122f739350d536af9c36fd76c88818.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;



    border: 2px solid #881fb5 !important;

    border-radius: 8px !important;



    box-shadow:

        0 0 8px #881fb5,

        inset 0 0 10px #881fb5 !important;

}





/* Remove the black layer sitting on top */



.interests .content,

.interests .inner,

.interests .table-section,

.interests .table-section .content {

    background: transparent !important;

}





/* Outer pink neon frame */



.interests {

    background: transparent !important;

    border: 4px solid #881fb5 !important;

    border-radius: 15px !important;



    box-shadow:

        0 0 15px #881fb5,

        0 0 35px #ff1493 !important;

}





/* Pink glowing text */



.interests td {

    color: #881fb5!important;

    text-shadow:

        0 0 5px #000,

        0 0 10px #881fb5 !important;

}

</style>









<style>

/* ===== CHUNKY WHITE INTEREST TEXT ===== */



.interests td,

.interests td *,

.interests .content,

.interests .content * {

    color: #ffffff !important;



    font-family: Verdana, Tahoma, sans-serif !important;

    font-weight: 900 !important;



    text-shadow:

        0 0 4px #000000,

        0 0 8px #881fb5,

        0 0 12px #881fb5 !important;

}





/* Make category labels extra bold */



.interests td:first-child {

    font-weight: 900 !important;

    letter-spacing: 1px !important;

}





/* Keep links cute */



.interests a {

    color: #ffffff !important;

    font-weight: 900 !important;



    text-shadow:

        0 0 5px #881fb5,

        0 0 10px #881fb5 !important;

}



</style>





<style>

/* ===== GREEN + BLACK STRIPE NAV WITH BUBBLEGUM PINK GLOW ===== */





/* Whole navigation bar */



.myspace-header .top-nav,

.myspace-header .main-nav-wrapper,

nav,

.navbar {



    background: repeating-linear-gradient(

        45deg,

        #000000 0px,

        #000000 20px,

        #39ff14 20px,

        #39ff14 40px

    ) !important;



    border: 4px solid #881fb5 !important;

    border-radius: 12px !important;



    box-shadow:

        0 0 10px ##881fb5,

        0 0 25px #ff1493,

        0 0 35px #39ff14 !important;

}





/* Navigation links */



.myspace-header .main-nav li a,

.myspace-header .top-nav a,

.myspace-header .main-nav a,

nav a,

.navbar a {



    color: #881fb5 !important;



    font-weight: 900 !important;

    letter-spacing: 1px !important;



    padding: 8px 12px !important;



    text-shadow:

        0 0 4px #ffffff,

        0 0 10px #881fb5,

        0 0 15px #ff1493 !important;

}





/* Pink dividers between Home / Browse / etc */



.myspace-header .main-nav li,

.myspace-header .top-nav li,

.navbar li {



    border-right: 3px solid #881fb5 !important;



    box-shadow:

        3px 0 8px #881fb5 !important;

}





.myspace-header .main-nav li:last-child



<style>

/* ===== ORIGINAL NEON SCENE CONTACT BOX ===== */



.contact {



    background:

    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),

    url("https://i.postimg.cc/4yr4km9k/b5122f739350d536af9c36fd76c88818.jpg") !important;



    background-size:cover !important;

    background-position:center !important;

    background-repeat:no-repeat !important;



    border:5px solid #881fb5 !important;

    border-radius:18px !important;



    overflow:hidden !important;



    box-shadow:

        0 0 12px #881fb5,

        0 0 30px #ff1493,

        0 0 45px #39ff14 !important;

}





/* Contact title */



.contact .heading {



    background:

    repeating-linear-gradient(

        45deg,

        #000 0px,

        #000 15px,

        #39ff14 15px,

        #39ff14 30px

    ) !important;



    color:#881fb5 !important;



    border-bottom:4px solid #881fb5 !important;



    font-weight:900 !important;



    text-transform:uppercase !important;



    letter-spacing:2px !important;



    text-shadow:

        0 0 5px #fff,

        0 0 12px #881fb5 !important;

}





/* Contact buttons */



.contact td {



    background:rgba(0,0,0,.7) !important;



    border:3px solid #881fb5 !important;



    border-radius:10px !important;



    padding:8px !important;



    box-shadow:

        0 0 8px #881fb5,

        inset 0 0 8px #ff1493 !important;



    transition:.3s ease !important;

}





/* Contact links */



.contact td a {



    color:#881fb5 !important;



    font-weight:900 !important;



    text-transform:uppercase !important;



    letter-spacing:1px !important;



    text-shadow:

        0 0 5px #fff,

        0 0 12px #881fb5,

        0 0 18px #ff1493 !important;

}





/* Hover effect */



.contact td:hover {



    transform:scale(1.04) !important;



    border-color:#39ff14 !important;



    box-shadow:

        0 0 15px #39ff14,

        0 0 30px #881fb5 !important;

}





.contact td a:hover {



    color:#39ff14 !important;



    text-shadow:

        0 0 10px #39ff14,

        0 0 15px #881fb5 !important;

}



</style>





<style>



/* Online Icon */

.online:has(img) {



  /* Image link between () */

  content: url(https://i.postimg.cc/x8bWBRmX/IMG-7939.gif);



  /* Adjust the size if necessary */

  width: 110px;

  height: 55px;



}



</style>

<!-- (c) Layout created by don / spooky ✟ (https://layouts.spacehey.com/layout?id=89833) --></style>