Red/black simple

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

Description:

I appreciate your comments and thank you for using this layout. To prevent spam, comments are disabled as of April 12th 2024.

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.

Background Image Credits —

⇘ Profile Background: https://cdn.wallpapersafari.com/23/23/TwIzHS.jpg

⇘ .url-info: https://i.pinimg.com/originals/5a/b0/8c/5ab08c03e71258df76897b24161f05e1.gif

Layout Preview:

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

palechick	1712945911 using Report Comment
milyberry	1712879811 using!! Report Comment
Glyphic! :3	1712814614 Using!! Report Comment
And N	1712682024 using!!! Report Comment
Xx_KnifesAndDaggers_xX	1712497708 using!! Report Comment
Cosmo	1712302054 Using! Report Comment
harukiro0u_	1712177903 Using Report Comment
Nox/Vince	1712093382 using! Report Comment
elisia	1712015286 using Report Comment
JanIsEmpty	1711822855 using Report Comment
Ｒａｖｅｎ	1711789497 USING Report Comment
revision	1711737995 using Report Comment
nerd	1711684867 using Report Comment
ZEE	1711550905 Using! Report Comment
Boris01	1711386499 Using Report Comment
valeria !! xD	1711296999 Use maybe Report Comment
motorcycleCannibal	1711206946 USE MAYBE Report Comment
nosok228	1711138350 Using!!! Report Comment
Violet	1710974793 using!!:3 Report Comment
Rinthebozo	1710922815 using Report Comment