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(https://64.media.tumblr.com/f67048c3681ba52ab9216e814e425c9a/67bfd269174470b3-7e/s100x200/d11a6fc0d7ba05cc1802f84699fc369a4ff989e9.gifv)
}

    .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 15 of 15 comments ( View all | Add Comment )

pr3tty.stars22	1754537528 Using! Report Comment
Chorline	1754421903 using Report Comment
imperial	1753905438 thank you!! Report Comment
Satany 𖤐	1750299089 using!1!!! :3 Report Comment
✮ Nooze ✮	1745457241 Using Report Comment
mohsen	1743239539 using Report Comment
]1MMY	1742428360 might b using idk :0 Report Comment
ninaa !	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 creator here! this is the section of code which denotes the cursor: 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;} the first line denotes the main cursor appearance and the second denotes the cursor image when hovering over a clickable link to change the cursor simply either delete those two lines of code to reset back to the default cursor or copy and paste a cursor image link in each of these url spots: url(https://64.media.tumblr.com/82a55681f76e8bcdfe7ce7977939d0e1/ad941ceea44b6f1e-52/s75x75_c1/21593f2c0da33440f1617bac1c295b5d669c3136.pnj) url(https://64.media.tumblr.com/17e7f937dafcd7817c4300dcdf5eaa25/ad941ceea44b6f1e-94/s75x75_c1/318ddf065ae726bb0e7eac20b96cf7b27c69167d.pnj) make sure to just paste the image link between the two parentheses and the cursor should show up! as an added bonus here are the cursor websites i use! http://www.rw-designer.com/ https://www.totallyfreecursors.com/ by Taylor ☘︎ 🃟; 1753918130; Report
syd	1737677533 usingg Report Comment
Ashii 🦇	1737500787 using but switching :333 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 i can do that! ill link here when its finished ;) by Taylor ☘︎ 🃟; 1753918206; Report https://www.deviantart.com/ratlinez/art/1224432917 could paste the code directly into the comment box... just scroll down on the linked post and enjoy by Taylor ☘︎ 🃟; 1753920092; Report
Divine Intervention	1713483890 using ty Report Comment