JTHM black layout!!

Tags: goth, emo, black, jthm, invader zim, 90s

Description:

hiii! this is my first layout im posting lolol if there's any issues or your using it plz comment! includes a cursor, music, n a bunch of gifs!!(its fully tested!)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by z0mbi3cl0wn (https://layouts.spacehey.com/layout?id=36130) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/c9x1kOXRM90//?&;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>


<div style="float:  ; max-height: 400px; position: fixed; right: 9px; bottom: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/5cea27cf52be1b35c2dbb40106bb9fa5/41b827364fa95454-2e/s100x200/b40eb40bd8da5e23c572fbbabdf357df6ddcc42f.gifv" width="300" height="300"/></div>

<div style="float:  ; max-height: 400px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://i.pinimg.com/originals/fd/b9/04/fdb904a449209df5f9525cdbf73b6789.gif" width="300" height="300"/></div>

<div style="float:  ; max-height: 400px; position: fixed; left: 1px; top: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/6c236cfc8c22556e128f9ee0f12a71d0/3800c83954ff4779-65/s100x200/0e24a76f7c2752ba685d152c45c31dc83ec17d0a.gifv" width="300" height="300"/></div>


<style>
.online{content:url("https://www.myspacegens.com/images/online_now/325.gif");
}
</style>


<style>
@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Jim+Nightshade&display=swap');


body{
background: url(https://i.pinimg.com/564x/45/0a/69/450a69d46d92050f65923d3c17ddcd8e.jpg);
}

/* == nav == */

nav .top{
background: url(https://i.pinimg.com/564x/a6/6e/40/a66e406f8ee0f047e81ecafbeb9ba2ae.jpg);
    border: 2px dotted white;
    margin-top: 10px;
}

button, input {
    overflow: visible;
    background: black;
    border: 1px dotted white;
    color: white;
}

nav .links {
    background-color: black;
    padding: 3.5px 16px 5.5px 16px;
    text-align: center;
    border: 2px dotted white;
margin-top: 20px;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " † ";
    color: white;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 5px white;
    font-size: 0.98em;
    font-size: 80%;
}

nav .links a:hover {
    color: grey;
    text-transform: uppercase;
    font-size: 90%;
    font-style: italic;
}

nav .links .special a {
    color: lightgrey;
}

nav .links li.active a {
    font-weight: bold;
    color: lightgrey;
}


/* == main == */

main {
    margin-top: 20px;
    border: 2px dotted white;
    background: #0000008f;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
}

.container {
    width: 810px;
    max-width: 100%;
    margin: 0 auto 10px;
    text-transform: lowercase;
}

a {
    color: lightgrey;
    text-decoration: auto;
    text-shadow: 0 0 5px white, 0 0 10px white;
    font-style: italic;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: grey;
    text-transform: uppercase;
    text-decoration: underline;
    text-shadow: 1px 1px black;
}

img {
    filter: grayscale(1) brightness(1.3);
}

/* == right side == */

span {
    text-align: center;
    font-size: 150%;
    text-transform: uppercase;
}

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

img.pfp-fallback {
    border: 3px dashed white;
    outline: 1px solid white;
    border-radius: 15px;
}

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

.online {
    color: grey;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 110%;
    font-style: italic;
    text-decoration: line-through 2px wavy slategrey;
}

.profile .mood {
    margin-bottom: 18px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
    border: 3px dashed white;
    outline: 1px solid white;
    border-radius: 15px;
    background: black;
    padding: 4px;
    text-align: center;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: black;
    color: white;
    border-bottom: 3px dashed white;
    text-align: center;
    padding: 2px 7px;
    text-shadow: 2px 2px grey;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 3px dashed white;
    border-radius: 10px;
    outline: 1px solid white;
    margin: 10px 0;
    background: black;
}

.profile .url-info {
    padding: 4px 7px;
    font-size: 0px;
    background: url(https://i.pinimg.com/564x/26/d8/4d/26d84da35168475464123cd893aa349f.jpg);
height: 250px;
}

.details-table td {
    background: black;
    border: 2px dotted;
    vertical-align: top;
    border-radius: 5px;
}

.details-table td:first-child {
    background: black;
    color: white;
    text-align: center;
    vertical-align: middle;
    border: 2px dotted white;
    font-weight: bold;
    width: 33%;
    border-radius: 5px;
}

/* == left side == */

.profile-info {
    border: 3px dashed white;
    outline: 1px solid white;
    border-radius: 15px;
    background: url(https://64.media.tumblr.com/6fd2076aa25ebdca8017641e493dc85c/7d2e6e718dc66141-21/s100x200/0694a9a3aa82a9d8af531f62c69fbfacb6b0df56.gifv);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    font-size: 0;
    height: 100px;
    background-size: 400px;
    background-position-y: 30%;
    background-position-x: center;
}

.blog-preview {
    background: black;
    border: 3px dashed white;
    outline: 1px solid white;
    border-radius: 15px;
    padding-left: 10px;
    padding-right: 10px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: black;
    color: white;
    padding: 2px 7px;
    text-align: center;
    border-bottom: 3px dashed white;
}

.profile .blurbs {
    margin: 20px 0;
    border: 3px dashed white;
    border-radius: 10px;
    background: black;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: grey;
    text-align: center;
    padding-bottom: 5px;
}

.friends {
    background: black;
    border: 3px dashed white;
    border-radius: 10px;
}

.count {
    color: grey;
    font-size: 100%;
}

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

.profile .friends .person p:hover {
    color: grey;
}

div#comments {
    margin-top: 15px;
}

.comments-table td, .music-table td {
    background: black;
    vertical-align: top;
    border: 3px dashed white;
    border-radius: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    text-align: center;
    font-weight: bold;
    width: 38%;
    border: 3px dashed white;
    border-radius: 10px;
}

table.comments-table {
    border: 1px black;
}

/* == footer == */

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

/* == cursor == */

html,body{cursor: url(https://cur.cursors-4u.net/others/oth-8/oth702.cur),auto;}

a:hover{cursor: url(https://cur.cursors-4u.net/others/oth-8/oth702.cur),auto;}


/* == scrollbar == */

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


</style>

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

︎︎Nny☢︎	1728223800 Using rahh Report Comment
♡𝗥♥𝗶♥𝗻♡	1727667995 usinggg love it btw :3 Report Comment
ImStupidManiac64	1725808699 Luv it!! Report Comment
Dilan the vampire	1723776461 Using the bottom right gif!! Report Comment
IrkenizedLin	1723204263 I'm not going to use but just going to compliment that, looks amazing it's great! Report Comment
Xx_f0xxeh_xX	1713625537 USING Report Comment
Xx_f0xxeh_xX	1713625533 USING Report Comment
Austin/Henry	1709943643 Using! Report Comment
# GH0STI3 !!	1706999585 Using :3 Report Comment
# GH0STI3 !!	1706999584 Using :3 Report Comment
Ray	1706024834 Using! <3 Report Comment
XxxAlyBatzzxxX	1704078069 Using! :) Report Comment
sixcco	1701070739 Used the gif on the bottom right !! Report Comment
5phiroth	1700415455 using Report Comment
azira	1695861744 using ty Report Comment
yasmine	1693991949 Using ♡ Report Comment
W0rmZ	1693722775 Using! It looks deadly! Report Comment
Karma	1693703236 using it looks so lit!!! Report Comment
brock ✩	1693495352 yooo this is so kickass!! im gonna use this!! <3 Report Comment
mind_aching	1693381078 USING AN I LOV Report Comment