Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
pink and green scene

Author: xXtoxinXx
Category: Scene
Created: June 14, 2026
neon pink and green glitter layout. with custom cursor, falling little icons, glowing boxes, skull glitter graphic, themed music bar, glowing username, dividers and maxim swag
Comments (0)

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

<style>
<div class="skull-rain s1"><img src="https://64.media.tumblr.com/538a09eb64d2781c0b30314e23eb795d/4e40beefaf9c5724-24/s75x75_c1/d538a61690a55f662549a60ec9da42e7a30ac543.gifv"/></div>
<div class="skull-rain s2"><img src="https://gloomy-poison.neocities.org/scene_graphics/yellowandgreenskullfavicon.gif"/></div>
<div class="skull-rain s3"><img src="https://gloomy-poison.neocities.org/scene_graphics/sparklypinklipsfavicon.gif"/></div>
<div class="skull-rain s4"><img src="https://64.media.tumblr.com/e79e9b41197f116c41c13913d0949a14/805fb33e1dbcd255-d5/s75x75_c1/e3df13fae32183921c1230e6ccae7564cdb17bba.gifv"/></div>
<div class="skull-rain s5"><img src="https://64.media.tumblr.com/c666a99fb290eb8da966836711b15f08/4275bcfcf8ee841f-c3/s75x75_c1/3fd2d4a7ce0c183d5e28e73d3902701e5370aa4d.gifv"/></div>

<div class="skull-rain s1" style="animation-delay: -2s;"><img src="https://gloomy-poison.neocities.org/scene_graphics/pinkandblackskullfavicon.gif"/></div>
<div class="skull-rain s2" style="animation-delay: -5s;"><img src="https://gloomy-poison.neocities.org/scene_graphics/pinkhearteyedskullfavicon.gif"/></div>
<div class="skull-rain s3" style="animation-delay: -8s;"><img src="https://gloomy-poison.neocities.org/spookycute_graphics/spinninggloomy.gif"/></div>

<style>
/* -- 1. THEME VARIABLES -- */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --font: 'New Rocker', cursive;
    --heading-font: 'Creepster', cursive;
    
    /* Y2K Scene Palette */
    --neon-pink: #ff0099;
    --dark-pink: #a10061;
    --neon-green: #39ff14;
    --dark-green: #008000;
    
    --deep-black: #050505;
    --off-white: #e0e0e0;
    --container-bg-color: rgba(10, 10, 10, 0.9);
    --text-color: #cccccc;
}

/* --- 2. RESET & BASE STYLES --- */
body, body * {
    color: var(--text-color) !important;
    font-family: var(--font) !important;
}
 
.master-container {
    max-width: 750px;
}

body {
    background-color: #000 !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3771/3771731iq5t09ygn5.gif') !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* --- 3. THEMED MODULE CONTAINERS --- */
.contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 3px solid var(--neon-pink) !important;
    border-radius: 0px !important;
    background: var(--container-bg-color) !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* --- 4. HEADINGS --- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading,
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading, .heading h4 {
    font-family: var(--heading-font) !important;
    color: var(--neon-green) !important;
    font-size: 24px !important;
    text-shadow: 1px 1px 2px #000 !important;
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 15px !important;
    background: var(--dark-pink) !important;
    border-bottom: 3px solid var(--neon-green) !important;
    text-align: left !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3766/3766676ikt6tyf44v.gif') !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}

/* --- 5. LINKS --- */
a {
    color: var(--neon-pink) !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

a:hover {
    color: var(--neon-green) !important;
}

/* --- 6. FRIENDS & PFP --- */
.friends-grid img {
    border: 2px solid var(--neon-green) !important;
    border-radius: 0px !important;
    background: #000 !important;
}

.person img.pfp-fallback,
img.cb-pfp-img {
    filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}

.person:hover img.pfp-fallback,
.cb-author-link:hover img.cb-pfp-img {
    filter: grayscale(0%) !important;
}

/* --- 7. TABLES --- */
.details-table {
    border: 2px solid var(--neon-pink) !important;
    background: #111 !important;
}

.details-table th, .details-table td {
    border: 1px solid var(--neon-green) !important;
}

.details-table th {
    background: var(--dark-pink) !important;
    color: var(--neon-green) !important;
    font-family: var(--heading-font) !important;
}

/* --- 8. HEADER & NAVIGATION --- */
.main-header, .myspace-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}

#site-logo-link {
    display: flex !important;
    justify-content: center !important;
    padding-bottom: 10px !important;
}

.top-nav, .main-nav-wrapper, .main-nav-container, .main-nav, .main-nav li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main-nav a, .nav a, .main-nav .dropdown > a {
    color: var(--neon-green) !important;
    font-family: var(--font) !important;
    text-shadow: 1px 1px 2px #000 !important;
    padding: 5px 10px !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.2s ease !important;
}

.main-nav a:hover {
    color: var(--neon-pink) !important;
    background: transparent !important;
}

/* --- 9. COMMENTS --- */
.comments-table {
    background-color: transparent !important;
    border: 1px solid var(--neon-pink) !important;
}

.cb-author-cell {
    background-color: #0a0a0a !important;
    border-right: 1px solid var(--neon-pink) !important;
    color: var(--off-white) !important;
}

.cb-content-cell {
    background-color: #141414 !important;
    color: var(--off-white) !important;
}

.cb-actions a, .cb-reply-form input[type="submit"], .cb-actions button {
    background-color: #1a0000 !important;
    border: 1px solid var(--neon-pink) !important;
    color: var(--off-white) !important;
    padding: 2px 8px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.cb-actions a:hover, .cb-reply-form input[type="submit"]:hover {
    background-color: var(--neon-green) !important;
    color: #000 !important;
}

/* --- 10. PLAYLIST --- */
.profile-playlist-widget {
    background: transparent !important;
    border: none !important;
}

.pp-header {
    background: var(--dark-pink) !important;
    border-bottom: 3px solid var(--neon-green) !important;
    padding: 10px !important;
}

.pp-header h3 {
    font-family: var(--heading-font) !important;
    color: var(--neon-green) !important;
    margin: 0 !important;
    font-size: 20px !important;
    text-shadow: 1px 1px 2px #000 !important;
}

.pp-help-btn {
    background: #000 !important;
    color: var(--neon-pink) !important;
    border: 1px solid var(--neon-pink) !important;
    font-family: var(--font) !important;
    cursor: pointer !important;
}

.profile-playlist-widget ul {
    background: var(--container-bg-color) !important;
    border: 3px solid var(--neon-pink) !important;
    border-top: none !important;
    padding: 10px !important;
    margin: 0 !important;
}

.profile-playlist-empty {
    list-style: none !important;
}

/* --- 11. FOOTER --- */
footer[role="contentinfo"] {
    background: transparent !important;
    padding: 20px !important;
    text-align: center !important;
    border-top: 3px solid var(--neon-pink) !important;
    margin-top: 40px !important;
}

footer a {
    color: var(--neon-pink) !important;
}

footer a:hover {
    color: var(--neon-green) !important;
    text-decoration: underline !important;
}

footer nav ul.links {
    list-style: none !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 0 !important;
}

footer nav ul.links li a, footer p.copyright {
    font-size: 12px !important;
}

/* --- 12. MISC OVERLAYS & ANIMATIONS --- */
.online img {
    height: 1.5em !important;
    margin-right: 5px !important;
    animation: none !important;
    content: url('https://i10.glitter-graphics.org/pub/352/352870r1wbtx0gci.gif') !important;
}

body::after {
    content: '' !important;
    position: fixed !important;
    bottom: 50px !important;
    right: 50px !important;
    width: 300px !important;
    height: 300px !important;
    background-image: url('https://i2.glitter-graphics.org/pub/36/36412k3wxxw2h9a.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}
  
.skull-rain {
    position: fixed;
    top: -50px;
    font-size: 20px;
    user-select: none;
    pointer-events: none;
    z-index: 9997;
}

@keyframes rain {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

.s1 { left: 10%; animation: rain 8s linear infinite; }
.s2 { left: 30%; animation: rain 12s linear infinite; }
.s3 { left: 55%; animation: rain 10s linear infinite; }
.s4 { left: 80%; animation: rain 15s linear infinite; }
.s5 { left: 95%; animation: rain 9s linear infinite; }
  
  .contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: 3px solid var(--neon-pink) !important;
    border-radius: 0px !important;
    background: var(--container-bg-color) !important;
    
    /* Neon Pink Glow Effect */
    box-shadow: 0 0 10px var(--neon-pink), 
                0 0 20px var(--neon-pink), 
                0 0 40px var(--dark-pink) !important;
                
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
}
  
  body, body * {
    cursor: url('https://gloomy-poison.neocities.org/scene_graphics/12891a.gif'), auto !important;
}

a:hover, button:hover, .main-nav a:hover, footer a:hover {
    cursor: url('https://gloomy-poison.neocities.org/scene_graphics/12891a.gif'), pointer !important;
}
  
  

.mood::after, .profile-mood::after, .profile .mood::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background-image: url('https://64.media.tumblr.com/54a8b8c91be7f0b43a0fa3a07cff65dc/6dc8898458942376-ab/s400x600/49134a63ab1c204af1695a1b5453fbc50f365a62.gifv') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

.photos-preview::after, .blog-preview::after, .blurbs::after, .friends::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    background-image: url('https://gloomy-poison.neocities.org/scene_graphics/winkinggreenskullpixeldivider.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}
  
  #logo {
    content: url('https://64.media.tumblr.com/dbc537ada1ce9dbeb3504730b2fbf64d/2a2bad83e55f24eb-b5/s400x600/5849f90e698b4e98977d924a0a0bddcf969e559a.gif') !important;
}
  
  h1 {
    font-family: 'Creepster', cursive !important;
	font-size: 30px !important; 
    line-height: 1.5 !important;
    color: var(--neon-pink) !important;
    animation: blackGlowPulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes blackGlowPulse {
    from {
        text-shadow: 0 0 5px #000, 
                     0 0 10px #000;
    }
    to {
        text-shadow: 0 0 10px #000, 
                     0 0 20px #000, 
                     0 0 30px #000, 
                     0 0 40px #000;
    }
}
  

#footer-music-bar, .music-bar {
    background: var(--container-bg-color) !important;
    border-top: 3px solid var(--neon-pink) !important;
    box-shadow: 0 -5px 15px rgba(255, 0, 153, 0.5) !important; 
    font-family: var(--font) !important;
}


.bar-info-section .bar-now-playing {
    color: var(--off-white) !important;
}

#bar-title {
    color: var(--neon-green) !important;
    font-family: var(--heading-font) !important; 
    font-size: 18px !important;
    letter-spacing: 1px !important;
    text-shadow: 1px 1px 2px #000, 0 0 5px var(--neon-green) !important;
}


.bar-btn {
    background-color: #050505 !important;
    border: 1px solid var(--neon-pink) !important;
    color: var(--neon-green) !important;
    border-radius: 0px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.bar-btn:hover {
    background-color: var(--dark-pink) !important;
    color: var(--neon-green) !important;
    box-shadow: 0 0 10px var(--neon-pink) !important; 
}


.bar-progress-container, .bar-playlist-container, .bar-volume {
    border: 1px solid var(--neon-pink) !important;
    background: #000 !important;
}

.bar-btn svg {
    fill: var(--neon-green) !important;
}

.bar-btn:hover svg {
    fill: #fff !important;
}
</style></style>