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 45 comments ( View all | Add Comment )

Skullzz :33	1762619825 USINGG Report Comment
⸝⸝ aizen ⋆˙⟡	1761178125 using YAYAYAY!!!!! this is so peak brah Report Comment
kade	1759930498 using this as a template :) Report Comment
kaleidoskull	1759740674 USING!! this is so cool Report Comment
ashe	1751519693 im not using the layout, but i took the gifs, thxxx hope its okayyy !!! Report Comment
Ray	1751485521 USINGGG Report Comment
⸸ 𝕷𝖚𝖓𝖆𝖗 ⛧	1748397300 Using :3 Report Comment
zombiealien	1744610474 using >_< Report Comment
zombiealien	1744610474 using >_< Report Comment
貴重な 🗯 — 𝓛	1743222973 usingg Report Comment
🅁🄰🅃 🄺🄸🄽🄶	1742256447 using thanx <3 Report Comment
☆𝕾𝖑𝖊𝖊𝖕𝖞𝖍𝖊𝖆𝖉☆	1738341020 Using Report Comment
KRUGER	1735777127 might use Report 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
Quit.	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