Scenecore

Layout Details

This design was originally published on layouts.spacehey.com for SpaceHey around Feb 23, 2021 by TheJasmineSixx (LunaGloomyCore).

I updated this design following the creator's permission to modify it as long as credit is given. While the original design is beautiful, the source code had several contradictions and felt unfinished, so I decided to make my own version, reordering and cleaning up the code while keeping the original essence intact.

All credits for the original design belong to its creator.

Updated by N4TH4N43L_XP.

Code :

Copy and paste to About Me

<style>

@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');

html {
    filter: saturate(250%);
}

/* Body */

body {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-1.gif");
    background-repeat: repeat;
}

/* Container */

.container {
    background-color: transparent;
}

/* Nav */

nav {
    border: 12px solid #000000;
    border-radius: 12px;
}
nav .top, 
nav .links {
    background-color: #FF0075;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-2.gif");
    background-attachment: fixed;
    background-repeat: repeat;
}
nav .top .center form label,
nav .top .center form button,
nav .top .right a {
    color: #FFFFFF;
    font-family: potta one;
    text-decoration: none;
}
nav .top .center form button {
    background: none;
    border: none;
}
nav .links {
    text-align: center;
}
nav .links li:first-child {
    display: none;
}
nav .links li a {
    color: #FFFFFF;
    font-family: potta one;
    text-decoration: none;
    text-shadow: 0 0 7px #FF0075;
}
nav .links li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/* Main */

main {
    background-color: #FF0075;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-3.jpg");
    background-repeat: repeat;
    border-radius: 12px;
    border: 12px solid #000000;
    border-radius: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Name */

.profile span[itemprop="name"] h1 {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 4px 0px 0px #2d1157;
    padding: 7px 10px;
    color: #00FFEF;
    font-family: potta one;
}
.profile .edit-link {
    display: none;
}

/* General About / PFP */

.profile .general-about {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border-left: 3px solid #FF0075;
    border-right: 3px solid #FF0075;
    box-shadow: 4px 0px 0px #2d1157;
    margin-top: -12px; 
    padding: 7px 10px;
}
.profile .general-about .profile-pic img {
    width: 150px;
    height: 150px;
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
    border: 1px solid #00FFEF;
}
.profile .general-about .details {
    height: 180px;
    overflow: hidden auto;
}
.profile .general-about .details .icon {
    display: none;
}
.profile .general-about .details p,
.profile .general-about .details b {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .general-about .details a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .general-about .details a:hover {
    color: #2d1157;
}
.profile .general-about .details .online {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(30).gif");
}
.profile .general-about .details::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

/* Mood */

.profile .mood {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 4px 4px 0px #2d1157;
    margin-bottom: 10px;
    padding: 7px 10px; 
}
.profile .mood p,
.profile .mood b {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .mood a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .mood a:hover {
    color: #2d1157;
}

/* Contact */

.profile .contact {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-contact.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    border: 3px solid #FF0075;
    border-radius: 10px;
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
}
.profile .contact .heading,
.profile .contact .icon,
.profile .contact img {
    display: none;
}
.profile .contact .f-row .f-col a {
    display: inline-block;
    width: 100%;
    line-height: 1;
    margin: 2.50px -7px 2.50px;
    padding: 0px 10px;
    color: #FF0075;
    font-size: 0px;
    font-family: Impact, sans-serif;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
}
.profile .contact .f-row .f-col a:hover {
    color: #2d1157;
}
.profile .contact .f-row .f-col a::before {
    display: block;
    font-size: 22px;
}
.profile .contact .f-row .f-col a:has(img[src*="add.png"])::before { 
    content:"Add Me";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="hourglass.png"])::before { 
    content:"Requests";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="delete.png"])::before { 
    content:"Remove";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="award_star_add.png"])::before { 
    content:"Favorite";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="comment.png"])::before {
    content:"Message";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="arrow_right.png"])::before {
    content:"Frwrd";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="email.png"])::before { 
    content:"Im";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="exclamation.png"])::before {
    content:"Block";
    text-align: right;
}
.profile .contact .f-row .f-col a:has(img[src*="group_add.png"])::before {
    content:"Group";
    text-align: left;
}
.profile .contact .f-row .f-col a:has(img[src*="flag_red.png"])::before {
    content:"Report";
    text-align: right;
}

/* Url Info */

.profile .url-info {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
}
.profile .url-info p { 
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .url-info b,
.profile .url-info a { 
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .url-info a:hover {
    color: #2d1157;
}

/* Interests & Links */

.profile .table-section {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
}
.profile .table-section .icon {
    display: none;
}
.profile .table-section .heading {
    background-color: #000000;
    border-bottom: 3px solid #FF0075;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.profile .table-section .heading h4 {
    color: #FF0075;
    font-family: potta one;
}
.profile .table-section a { 
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .table-section a:hover {
    color: #2d1157;
}
.profile .table-section .details-table td:first-child {
    background-color: #000000;
    border: 1px solid #00FFEF;
}
.profile .table-section .details-table td:first-child p, 
.profile .table-section .details-table td:first-child a {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .table-section .details-table td:nth-child(2) { 
    background-color: rgba(0,0,0,0.8);
}
.profile .table-section .details-table td:nth-child(2) p, 
.profile .table-section .details-table td:nth-child(2) ul, 
.profile .table-section .details-table td:nth-child(2) li,
.profile .table-section .details-table td:nth-child(2) h1, 
.profile .table-section .details-table td:nth-child(2) h2, 
.profile .table-section .details-table td:nth-child(2) h3, 
.profile .table-section .details-table td:nth-child(2) h4, 
.profile .table-section .details-table td:nth-child(2) h5, 
.profile .table-section .details-table td:nth-child(2) h6 {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .table-section .details-table td:nth-child(2) b,
.profile .table-section .details-table td:nth-child(2) a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .table-section .details-table td:nth-child(2) a:hover {
    color: #2d1157;
}
.profile .table-section .details-table td:nth-child(2) i { 
    color: #00FFEF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile .table-section .details-table td:nth-child(2) u { 
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none; 
    border-bottom: 2px solid #FF0075;
}
.profile .table-section .details-table td:nth-child(2) img {
    width: 100%;
    height: auto;
    border: 1px solid #00FFEF;
}

/* Info */

.profile .profile-info {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-5.jpg");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
}
.profile .profile-info h3 {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
    filter: drop-shadow(3px 3px 0 #000000);
}
.profile .profile-info h3 a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
    filter: drop-shadow(3px 3px 0 #000000);
}
.profile .profile-info h3 a:hover {
    color: #2d1157;
}

/* Blogs */

.profile .blog-preview {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
    padding-bottom: 5px;
}
.profile .blog-preview .icon {
    display: none;
}
.profile .blog-preview h4 {
    background-color: #000000;
    border-bottom: 3px solid #FF0075;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0;
    padding: 1px 7px;
}
.profile .blog-preview h4,
.profile .blog-preview h4 a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .blog-preview h4 a:hover {
    color: #FF0075;
}
.profile .blog-preview p {
    margin: 0;
    padding: 5px 8px;
    display: block; 
    line-height: 1.2;
}
.profile .blog-preview p {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .blog-preview a {
    display: inline;
}
.profile .blog-preview a { 
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .blog-preview a:hover {
    color: #2d1157;
}

/* Blurbs */

.profile .blurbs {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
}
.profile .blurbs .heading {
    background-color: #000000;
    border-bottom: 3px solid #FF0075;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.profile .blurbs .heading h4 {
    color: #FF0075;
    font-family: potta one;
}
.profile .blurbs a { 
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .blurbs a:hover {
    color: #2d1157;
}
.profile .blurbs .inner p, 
.profile .blurbs .inner ul, 
.profile .blurbs .inner li,
.profile .blurbs .inner h1, 
.profile .blurbs .inner h2, 
.profile .blurbs .inner h3, 
.profile .blurbs .inner h4, 
.profile .blurbs .inner h5, 
.profile .blurbs .inner h6 {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .blurbs .inner b,
.profile .blurbs .inner a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .blurbs .inner a:hover {
    color: #2d1157;
}
.profile .blurbs .inner i { 
    color: #00FFEF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile .blurbs .inner u { 
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none; 
    border-bottom: 2px solid #FF0075;
}
.profile .blurbs .inner img {
    border: 1px solid #00FFEF;
}

/* Friends */

.profile .friends {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: -10px;
}
.profile .friends .icon {
    display: none;
}
.profile .friends .heading {
    background-color: #000000;
    border-bottom: 3px solid #FF0075;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.profile .friends .heading h4, 
.profile .friends .heading .more {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .friends .heading .more:hover {
    color: #FF0075;
}
.profile .friends .inner p b {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile .friends .count {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .friends .friends-grid {
    text-align: center;
}
.profile .friends .friends-grid .person a p {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile .friends .friends-grid .person a:hover p {
    color: #2d1157;
}
.profile .friends .friends-grid .person a, 
.profile .friends .friends-grid .person a p {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.profile .friends .person:nth-child(n+1)::after {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(30).gif");
}
.profile .friends .friends-grid .pfp-fallback {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #00FFEF;
}

/* Comments */

.profile #comments {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-4.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
    box-shadow: 4px 4px 0px #2d1157;
    margin-top: 10px;
}
.profile #comments .icon {
    display: none;
}
.profile #comments .heading {
    background-color: #000000;
    border-bottom: 3px solid #FF0075;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.profile #comments .heading h4 {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments a { 
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments a:hover {
    color: #2d1157;
}
.profile #comments .inner p b {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .inner p b a,
.profile #comments .count {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .inner p b a:hover {
    color: #2d1157;
}
.profile #comments .comments-table, 
.profile #comments .comments-table td {
    border: none;
    background-color: transarent;
}
.profile #comments .comments-table td:first-child {
    background-color: #000000;
    border: 1px solid #00FFEF;
}
.profile #comments .comments-table td:first-child a p {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .comments-table td:first-child a:hover p {
    color: #2d1157;
}
.profile #comments .comments-table td:first-child a, 
.profile #comments .comments-table td:first-child a p {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}
.profile #comments .comments-table td:first-child::after {
    content: url("https://creepyboom.neocities.org/Img/Online/online-(30).gif");
}
.profile #comments .comments-table td:first-child .pfp-fallback {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #00FFEF;
}
.profile #comments .comments-table td:nth-child(2) {
    background-color: rgba(0,0,0,0.8);
}
.profile #comments .comments-table td:nth-child(2) p, 
.profile #comments .comments-table td:nth-child(2) ul, 
.profile #comments .comments-table td:nth-child(2) li,
.profile #comments .comments-table td:nth-child(2) h1, 
.profile #comments .comments-table td:nth-child(2) h2, 
.profile #comments .comments-table td:nth-child(2) h3, 
.profile #comments .comments-table td:nth-child(2) h4, 
.profile #comments .comments-table td:nth-child(2) h5, 
.profile #comments .comments-table td:nth-child(2) h6 {
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .comments-table td:nth-child(2) b,
.profile #comments .comments-table td:nth-child(2) a {
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .comments-table td:nth-child(2) a:hover {
    color: #2d1157;
}
.profile #comments .comments-table td:nth-child(2) i { 
    color: #00FFEF;
    font: italic 13pt candara; 
    letter-spacing: -0.5px; 
}
.profile #comments .comments-table td:nth-child(2) u { 
    color: #00FFEF;
    font-family: potta one;
    text-decoration: none; 
    border-bottom: 2px solid #FF0075;
}
.profile #comments .comments-table td:nth-child(2) a button {
    background: none;
    border: none;
    color: #FF0075;
    font-family: potta one;
    text-decoration: none;
}
.profile #comments .comments-table td:nth-child(2) a button:hover {
    color: #2d1157;
}
.profile #comments .comments-table td:nth-child(2) .comment-replies {
    background-color: #000000;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-6.gif");
    background-repeat: repeat;
    border: 3px solid #FF0075;
    border-radius: 10px; 
}

/* Footer */

footer {
    background-color: #FF0075;
    background-image: url("https://file.garden/aZQEtGMXd3dvbXg4/IMG/scenecore-bg-2.gif");
    background-attachment: fixed;
    background-repeat: repeat;
    border: 12px solid #000000;
    border-radius: 12px;
}
footer a,
footer .links li a {
    color: #FFFFFF;
    font-family: potta one;
    text-decoration: none;
    text-shadow: 0 0 7px #FF0075;
}
footer a:hover,
footer .links li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}
footer p,
footer .links li i { 
    color: #FFFFFF;
    font-family: potta one;
    text-decoration: none;
}

/* Credit */

.credit {
   position: fixed; 
   top: 0; 
   left: 3px;
   width: 10%;
}

/* MOBILES (Max 600px) */

@media (max-width: 600px) {

/* Friends */
    .profile .friends .person:nth-child(9) p {
        display: none;
    }

/* Credit */

.credit {
        display: none;
    }
}

</style>