Minimalistic Gloomy Layout (Full-Featured)

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

Description:

CLICK HERE FOR FULL PREVIEW / ALT VERSION

same as the original HERE, but tweaked a bit ^__^

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!
hidden comments with preserved "add comment" link
preserved "blurbs", "about me", and "who i'd like to meet" titles
custom contact buttons (black hearts by default)
rounded profile img and friend imgs
centered blurbs content
custom scrollbar

CREDITS:

HTML_ - most coding
dangeredwolf - pronoun coding!
sarah - invisible footer coding!
??? - profile preview, would be impossible without this tool

Preview:

click on the image for a larger preview

Code:

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

<!-- main coding (background image and generic colors) -->
<style>
    body{
    background-image: url('https://i.imgur.com/kbunyzt.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 borders +dotted border -->
<style>
    .top{
        border-radius: 25px 25px 0 0 !important;
    }
    main{
        border-radius: 0 0 25px 25px !important;
    }
</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 -->
<style>
    .comments-table{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 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 20 of 51 comments ( View all | Add Comment )

ウジャロフ	1750353477 using Report Comment
divholic	1748151929 usinggg!!! Report Comment
babytiger	1747760040 lovely Report Comment
Goobz	1742449422 usinggggggg Report Comment
lesado	1740709908 Using!! ,'D Report Comment
jan	1733705435 using Report Comment
eek! (the mona)	1729523395 using! Report Comment
gabriel ♰	1729182329 USINGGG Report Comment
Ren ☆	1728947660 using! Report Comment
noctipunk	1727995203 Using! I did adjust some things to my liking though. Thank you for the layout! - N. Report Comment
Jazzva!	1722894711 Using! Report Comment
jonny	1721140275 using Report Comment
Stickytip	1716485368 using :D Report Comment
angry bosnian dude	1716445923 Using ^_^ Report Comment
KULT	1713657349 uusing! Report Comment
Shadz	1710140569 using Report Comment
Jo	1708041406 using :] Report Comment
lingling_rawr	1706596013 using Report Comment
★🐾H3N🐾★	1706279287 Using :33 Report Comment