Red and Black

Tags: red, black, gray, grunge, simple, bela

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Profile Background: https://cdn.wallpapersafari.com/23/23/TwIzHS.jpg
⇘ .url-info: https://i.pinimg.com/originals/5a/b0/8c/5ab08c03e71258df76897b24161f05e1.gif

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com or https://www.cursors-4u.com
============⚠️==========*/

/* this is the cursor that appears when you hover over links */
a:hover{
    cursor: url('https://cdn.custom-cursor.com/db/7327/32/starter-red-penrose-trianglel-pointer.png'), auto;
}
/* this is the main cursor */
* { 
    cursor: url('https://cdn.custom-cursor.com/db/7328/32/starter-red-penrose-trianglel-cursor.png'), auto; 
}
</style>

<style>
/* font-family */
@font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); }
@font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); }

</style>

<style>
/* this is where the colors are rooted */

:root{
    --headers: #C60404;
    --text: #6E6E6E; 
    --names: #C02739;
    --links: #810000;
    --hover: #DA0037;
    --borders: 4px double #630000;
    --background_image: url('https://cdn.wallpapersafari.com/23/23/TwIzHS.jpg');
    --font-family: "RavenouslyDemoGrunge-Ea9OW";
    --curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */
}

/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {display:none;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important;  */
/* .details-table td:first-child{display:none;}  this code hides the general-heroes titles */

/* this is where your background image ends up being styled */

body{
    background-image: var(--background_image)!important;
    background-color: #000;
    background-size: contain;
    background-attachment: fixed;
    color: var(--text)!important;
}
/* this is where your name appears */
h1{
    color: #C60404;
    font-family:  "PenetrationOutGrunge-JvyM"; 
    font-size:30px !important;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
}

/* the navigation is adjusted here */
nav{
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: var(--text);
    text-shadow:none;
}
nav .links{
    color: var(--text);
    background-color: transparent;
    border-radius: var(--curve);
    text-align: center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ✦";
    color: var(--links);
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}

/* the online symbol and text */

.online{
    color: var(--links) !important;
    text-transform: lowercase;
    margin:auto;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%) !important;
}

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
    font-family: "PenetrationOutGrunge-JvyM";
    font-size: 20px;
    font-weight: normal;
}
a, p, b, nav label, .section{ 
    font-family: var(--font-family) !important;	
    font-size: 14px;
    font-weight: bold;
}
/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:1px;
    background: var(--links);
    border: none;
}

/* this is where you adjust the borders and background */
.blurbs, .friends, .profile .table, .blog-preview, .contact{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
}

.general-about .details{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
    padding:20px;
    text-align: right;
}
.mood{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.5)!important;
    text-align: center;
    padding:5px;
}
.icon{border:none !important;}
.comment-replies{border:2px dotted #630000;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/
main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

/* the interest table */
.table-section{
    background-color:transparent!important;
    border:var(--borders)!important;
    background-color: rgba(0,0,0,0.5)!important;
}
.details-table{
    border-spacing:0px 10px;
}
.details-table td{
    border-top:1px solid darkred;
    padding:5px;
}

/* the header section of the boxes */
.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: rgba(0,0,0,0.5);
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */

.profile-pic img{
    outline:none !important;
    border-radius: var(--curve) !important;
    padding:6px;
    border: none;
}
/* you can remove text-align:center; if you don't want your friends to be centered */
.friends-grid{
    text-align: center;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: brightness(70%);
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */
.friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */


/* custom contact
you can change the content: "✦" to content: url('image-url-here');
*/

.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 user */
	content: "▸"
} 
/* where your spacehey url goes. you can add a picture here instead.
if you don't want a picture or the url just remove this code 
and add this:

.url-info{display:none;}

*/
.url-info{
    background-image: url('https://i.pinimg.com/originals/5a/b0/8c/5ab08c03e71258df76897b24161f05e1.gif');
    background-size: 100%;
    background-repeat: no-repeat;
    height: 193px;
    border: var(--borders)!important;
    border-radius: var(--curve);
}
.url-info p{
    opacity: 0.0;
}

/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: 0px dotted #630000 !important;
    outline: none !important;
    border-radius: 8px;
    padding:5px;
    border-spacing: 4px; /* this changes the distance between boxes */
}

/* this styles the first column */
.comments-table td:first-child{

    background-image: url('');
    background-size: cover;
    background-position: center;
}

.comments-table td{
    background-image: url('');
    background-size: cover;
    background-position: center;
    border: 2px solid #630000;
    padding:10px;
    border-radius: 0px;
}

footer{
    background-color: rgba(0,0,0,0.5);
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid #630000;
}
::-webkit-scrollbar-thumb {
    background: #630000; 
    border-radius: var(--curve);
}
</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 368 comments ( View all | Add Comment )

Lia_weirdprincess	1757973687 Usinggg :3 Report Comment
sof¡	1757889782 using Report Comment
★ I BITE ★	1757548240 using Report Comment
Jack Hollow	1757461556 Using!! Report Comment
Bones	1757161409 usinggg Report Comment
Khloee	1757099253 Using!! Report Comment
v0id99	1756973268 Using Report Comment
lake	1756747141 using!!! Report Comment
sherry<3	1755771094 Using!!!! Report Comment
legs	1755685716 Using!! Report Comment
Lucky ☆	1754793895 Using ^^ Report Comment
BON3MRR0W	1754793890 Using! Report Comment
txenox	1754597120 using!! Report Comment
liv	1754591094 usinggggg Report Comment
Chemical rat	1754451306 Using! <3 Report Comment
wojoe	1754344877 using Report Comment
𝖭𝖤𝖮	1754253186 using Report Comment
ᴄᴀssɪᴅʏ	1754090121 using Report Comment
Jamie	1754054666 Using :D Report Comment
Kronos	1753731463 using Report Comment