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

KULT	1713657349 uusing! Report Comment
Яiot	1710140569 using Report Comment
Jo	1708041406 using :] Report Comment
lingling_rawr	1706596013 using Report Comment
★ 🥩 ⛓️ HENRY ⛓️ 🥩 ★	1706279287 Using :33 Report Comment
Airlo	1705960962 using :3 Report Comment
diana	1702240737 Using! Thanks so much 🖤 Report Comment
♱ ·˚ ༘ 𐃯 CH4R	1702075584 using !! Report Comment
Uzi!!	1700929872 using ! Report Comment
𝑈𝑙𝑦𝑠𝑠𝑒𝑠	1698640014 using/ Report Comment
inkonic	1695519488 using Report Comment
Accident_C	1694855447 hi, using :) Report Comment
William	1685653884 using Report Comment
𝔐𝔞𝔦𝔩𝔢𝔫 ♱ ☆	1684517015 oml, its looks so pretty!!aaa Report Comment
jade	1683206316 using!! Report Comment
jade	1683205875 using!! Report Comment
c0rpsekvlt	1680061020 using! tysm its so good!!! Report Comment
𝐦𝐨𝐣𝐢 ꨄ︎	1679873693 using! tysm<3 Report Comment
Twilight	1678717443 Currently using it, thank you. Report Comment