Minimalistic Gloomy Noir Layout

Tags: gloomy, minimalistic, dark, goth, emo, simple, noir, film

Description:

CLICK HERE FOR FULL PREVIEW / ALT VERSION

^__^

FEATURES:
minimalistic aesthetic
easily customizable if you'd like it to be different
customize ur pronouns, thank you dangered wolf!
invisible but functional footer, thank you sarah!
animated filmy noir in the background, thank you cory!
hidden comments with preserved "add comment" link
preserved "about me" blurb title - put your about in the "who i'd like to meet section", it's easier to code or to just type out your about there instead imo
custom contact buttons (black heart emojis by default)
rounded profile img and friend imgs
rounded corners on profile page
cute dotted corners on page
centered blurbs content
custom scrollbar

CREDITS:
HTML_ - most coding
dangeredwolf - pronoun coding!
sarah - invisible footer coding!
cory - animated film coding!
??? - profile preview, would be impossible without this tool
lleafeons - lovecore page decor on DA (link embedded in code, thank you for your wonderful artwork)

Preview:

click on the image for a larger preview

Code:

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

<!-- main coding (background image and generic colors) -->
<style>
    body{
    background-image: url('https://i.imgur.com/8QuMlmK.jpg') !important;
    background-attachment: FIXED !important;
    background-repeat: REPEAT !important;
    }  
    main {
        background-color: black;
        color: white;
    }
        .count {
        color: #424242 !important;
    }
        .blurbs .inner{
        text-align: center !important;
    }
    :root {
        --logo-blue: #121212;
        --darker-blue: white;
        --lighter-blue: #181818;
        --even-lighter-blue: #181818;
        --lightest-blue: #000;
        --dark-orange: #fff;
        --light-orange: #000;
        --even-lighter-orange: #000;
        --green: #fff;
   }
    a:hover{
        color: #fff !important;
    }
    h4 {
        color: white;
    }
    main p {
        color: white;
    }
    .profile .blurbs .section h4 {
        color: white;
    }
</style>

<!-- rounded profile pic and friend pics -->
<style>
    .profile-pic {
        border-radius: 500px;
        overflow: hidden;
    }
    .profile .friends .person img {
        border-radius: 500px;
    }
</style>

<!-- custom online text -->
<style>
    .online {
        color: #121212;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 3s;
    }
    .online img {
        display: none;
    }
</style>

<!-- pronouns -->
<style>
    .details:after {
        content: "pronouns go here!";
    }
</style>    
    
<!-- invisible but functional footer -->
<style>
    footer{background:none !important; line-height:0px !important;}
    footer ul li a {color: #000000 !important;}
    }
</style>

<!-- hidden comments and blurb stuff -->
<style>
    .comments-table{display:none !important;}
    .blurbs .heading{display:none !important;}
    .blurbs .inner .section:last-of-type h4{display:none !important;
    }
</style>

<!-- custom scrollbar -->
<style>
    ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: #000;
    }

    ::-webkit-scrollbar-track {
    background: #121212;
    }
</style>

<!-- custom blurb text by cory -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
    .blurbs .inner .section:first-of-type h4{
	font-size:0;
    }
    .blurbs .inner .section:first-of-type h4:after{
	content:"ABOUT ME";
    font-size:.8rem; font-family: 'Special Elite', cursive; font-size: 30px;
    }
</style>

<!-- custom profile name font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');
.profile .left h1{
    font-family: 'Special Elite', cursive; transform: rotate(0deg); font-size: 42px;
</style>

<!-- film grain by cory -->
<style>
    html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://i.imgur.com/QpnTsrV.jpg);
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
    z-index:-9;"
}
@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
}
</style>

<!-- custom contact buttons -->
<style>.contact .inner a img {
       font-size: 0;
   }
   .contact .inner a img:before {
       font-size: 1em;
    display: block
   }
   .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
   	/* Add to Friends */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
   	/* Add to Favorites */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🖤"
   }
   .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🖤"
   }
</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 9 of 9 comments ( View all | Add Comment )

XxcherrychokexX	1728356433 Using Ty!!! Report Comment
Gerry	1705433622 using Report Comment
✮ MIKE.	1693292688 USING BTW :33 this is so cool Report Comment
Pax!	1687711888 Using Report Comment
Max	1679891353 using! Report Comment
cvpid444	1676233543 using! Report Comment
clyde	1657428213 using!! super awesome. def a fave :-) Report Comment
vintermånen	1647857568 thanks Report Comment
kenny	1647410803 I'm confused on how to add pronouns and edit the about me part ;; Report Comment in this part of the code .details:after { content: "pronouns go here!"; } change "pronouns go here!" to your pronouns, but it has to be in the quotation marks as for editing the about me section this layout makes it so you can put your "about me" blurb in the "who i'd like to meet section" instead for ease of access the link below is a live preview for html editing, hope it helps!! https://genericprofileeditor.neocities.org/ by Bexter (Bec); 1647464237; Report