Mall Goth Layout

Tags: #layout, #autoplay, #custom cursor, #mall goth, #numetal, #red

Description:

Mall Goth layout with custom red cross cursor and "Sweet Dreams" by Puppet Master autoplay.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Taylor ☘︎ 🃟 (https://layouts.spacehey.com/layout?id=38929) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
body{font-family: 'New Rocker', cursive;}
</style>

<style>

body{
background: url(https://i.pinimg.com/564x/0b/06/94/0b0694e8a6f96722e196fdac34df9a95.jpg);
    border-style: dashed;
    border-color: #7c2305;
}

nav .top {
    background: #000000bd;
    color: #7c2305;
    border: 1px solid #7c2305;
    padding: 15px 10px 14px 10px;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    position: relative;
}

nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: brightness(100) saturate(100%) invert(90%) sepia(100%) saturate(1600%) hue-rotate(356deg) brightness(140%) contrast(100%);;
}

button, input {
    overflow: visible;
    background: black;
    border: 1px solid #7c2305;
    color: #7c2305;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    font-weight: bold;
}

.logout-btn, .logout-form {
    color: #7c2305;
    text-transform: uppercase;
    display: inline-block;
    font-size: 100%;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "⋆♱✮♱⋆";
    color: #e4d3d3;
}

nav .links {
    background-color: transparent;
    text-align: center;
    padding: 3.5px 16px 5.5px 16px;
}

nav .links a {
    text-decoration: none;
    color: #e4d3d3;
    text-shadow: 0 0 5px #e4d3d3;
    background: transparent;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

nav .links .special a {
    color: #e4d3d3;
}

nav .links a:hover {
    text-decoration: underline;
    color: black;
    font-weight: bolder;
    text-transform: uppercase;
}

main:before {
    width: auto;
    margin-bottom: 25px;
    height: 250px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/564x/f4/fe/8c/f4fe8cba438a0fae73e7bc7a093dd191.jpg);
    background-position: center center;
    background-size: cover;
}

main {
    background: #000000bd;
    color: #e4d3d3;
    border: 1px solid #7c2305;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    padding: 6px 0px;
    font-size: 80%;
text-align: center;
}

span {
    text-align: center;
    color: #e4d3d3;
    text-transform: uppercase;
    font-size: 170%;
}

a {
    color: #7c2305;
    text decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #e4d3d3;
    text-transform: uppercase;
    font-weight: bolder;
    font-style: italic;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

.general-about .profile-pic {
    display: block;
    float: left;
    margin: 0 15px 8px 0;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    border: 1px solid #7c2305;
}

.general-about .details {
    display: flow-root;
    text-align: center;
}

.profile .mood {
    width: 100%;
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.mood:after {
    content: "";
    white-space: pre-wrap;
    display: block;
    height: 60px;
    background-image: url(https://64.media.tumblr.com/5c4ca1bd15e9fe7ffac2768c6f70ed69/8c6c9c67e7bd719d-c0/s250x400/708afb3293c28269ecaa80f9f9b241a9cc674b3b.pnj);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: 300px;
}


.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: transparent;
    color: #e4d3d3;
    text-align: center;
    border-bottom: 1px solid #7c2305;
    padding: 2px 7px;
}

.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}


.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 1px solid #7c2305;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    margin: 10px 0;
}

.details-table td:first-child {
    background: transparent;
    color: #7c2305;
    text-align: center;
    font-weight: bold;
    border: 1px solid #7c2305;
    width: 33%;
}

.details-table td {
    background: transparent;
    color: white;
    border: 1px solid #7c2305;
    vertical-align: top;
}

.profile-info {
    border: 1px solid #7c2305;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 30px;
    margin-bottom: 10px;
}

.profile .profile-info {
	background-image: url();
	padding: 20px;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    border: 1px solid #7c2305;
    
}


.profile .blurbs .heading, .profile .friends .heading {
    background: transparent;
    border-bottom: 1px solid #7c2305;
    color: #7c2305;
    padding: 2px 7px;
    text-align: center;
}

.profile .blurbs {
    margin: 20px 0;
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    border: 1px solid #7c2305;
    
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #7c2305;
    text-align: center;
}

.friends {
box-shadow: 0 0 5px #7c2305, 0 0 5px #7c2305, 0 0 10px #7c2305;
    border: 1px solid #7c2305;
    
}

.count {
    color: #7c2305;
}

.profile .friends .person p {
    color: #7c2305;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    border: 1px solid #7c2305;
    
}


.friends-grid {
    border-top: 1px solid #7c2305;
    padding-top: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    border: 1px solid #7c2305;
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td:first-child img:not(.icon) {
    width: 90px;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid #7c2305;
    
}

.comments-table td, .music-table td {
    background: #000000;
    border: 1px solid #7c2305;
    vertical-align: top;
}

table.comments-table {
    border: 1px solid #7c2305;
    
}


footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: #00000000;
    color: #e4d3d3;
     
}


::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px dotted #e4d3d3;
}
::-webkit-scrollbar-thumb {
    background: #7c2305;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #e4d3d3;  
}

.online {
    content: url(http://img1.coolspacetricks.com/images/myspaceicons/090.gif)
}

    .icon, .award img {
        content: url(https://64.media.tumblr.com/23729aea3e09cd03c3cd554eb3d5566e/4149a1d35ab9816c-f2/s75x75_c1/b1b0907541fa8edf6538a2e557a5bd20981938d0.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

HTML,BODY{cursor: 
url(https://64.media.tumblr.com/17e7f937dafcd7817c4300dcdf5eaa25/ad941ceea44b6f1e-94/s75x75_c1/318ddf065ae726bb0e7eac20b96cf7b27c69167d.pnj),
auto;}


A:hover{cursor: 
url(https://64.media.tumblr.com/82a55681f76e8bcdfe7ce7977939d0e1/ad941ceea44b6f1e-52/s75x75_c1/21593f2c0da33440f1617bac1c295b5d669c3136.pnj),
auto;}

body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.pinimg.com/originals/54/fb/d3/54fbd3e940d1e222e5d2d55f5644c241.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

<style>  body {
text-align: center;
}</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/DGeLYYtb3jw//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 12 of 12 comments ( View all | Add Comment )

Nooze	1745457241 Using Report Comment
mohsen	1743239539 using Report Comment
]1MMY	1742428360 might b using idk :0 Report Comment
𝑯EKΛ𝐓Ǝ ☽⛥☾	1742422929 im using it now (i changed some things) and i dont know how to put a autoplay, HELP ;( Report Comment
𝕷𝖎𝖑𝖑𝖎𝖈𝖊𝕷𝖎𝖉𝖉𝖊𝖑	1741192369 if anyone knows how to take off the song and change it plss hmu Report Comment At the bottom just delete the very last section and the music will be gone! by Scotty; 1741569161; Report yeah i figured it out alr lol i dont know how my dumbass missed that but still ty!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! by 𝕷𝖎𝖑𝖑𝖎𝖈𝖊𝕷𝖎𝖉𝖉𝖊𝖑; 1741726170; Report do you know how to change the cursor by any chance? bcuz i love the layout but its acc so awkward like it takes a long while to even register something by 𝕷𝖎𝖑𝖑𝖎𝖈𝖊𝕷𝖎𝖉𝖉𝖊𝖑; 1741726304; Report
syd	1737677533 usingg Report Comment
Sss4mmu3l	1737500787 using but switching :333 Report Comment
nat(HTM)	1737092217 using🫶 Report Comment
lee	1737086407 using tysm Report Comment
Saturn Princess	1721408241 using but switching some things Report Comment
Divine Intervention	1713483924 if u can make an audio of feels blind by bikini kill we'd love u 4vr Report Comment
Divine Intervention	1713483890 using ty Report Comment