Super 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 corners on profile page
• cute dotted corners on page
• centered blurbs content
• rounded profile img
• 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:

Code:

<!-- (c) Layout created by Bexter (Bec) (https://layouts.spacehey.com/layout?id=19345) --> <!-- 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 --> <style> .profile-pic { border-radius: 500px; overflow: hidden; } </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 things --> <style>.comments-table{display:none !important;} .friends-grid{display:none !important;} .blurbs .inner .section:nth-child(1) h4{ font-size:0; } .blurbs .inner .section:nth-child(2) h4{ font-size:0; } .blog-preview{display:none !important;} .blurbs .heading{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.