Red and Black layout

Tags: red, black, bela

Description:

✧ feel free to change it up to your style.

✧ if you have any questions, comment below or in this blog post.

✧ copy and paste the code to your "about me" section.

✧ you can copy and paste the code here or here to preview it before you add it to your profile.

✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*==========⚠️==========
* the one column code is from Cory's "City Nights" layout
* find it at https://layouts.spacehey.com/layout?id=68
* the mobile code is wonky, sorry lol
*********
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

.container{
 width:100%;
 background-image: url('');
 background-color: black;
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
}
main{
 width:100%;
 background-color: transparent;
 padding:5px;
 margin-top:50px;
}
/* one column */
.profile {
	display: flex;
	flex-direction: column;
}
.profile .left{
 width:100%!important;
}

/*-- making the profile a scroll box */

.profile{
 overflow-y: scroll;
 width:720px;
 height:400px;
 text-align: center;
	position: relative;
 top:0px; left: 420px;
 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.profile {
 padding:30px;
 background-color: transparent;
 background-image: url('https://i.pinimg.com/originals/c4/86/f2/c486f2019b3770d00160b4a24ec5689b.jpg');
 background-size: cover;
}
nav{
 margin-bottom:0px;
}
nav .top, nav .links{
 background: transparent;
 text-align: center;
}
footer{
 background-color: transparent;
 margin-top:100px;
}
footer .links{
 margin-top:0px;
}
footer a, footer p{
 font-size: 80%;
}
</style>
<style>

/* the cursors */

a:hover{
 cursor: url('https://cdn.custom-cursor.com/db/6547/32/material-ruby-pointer.png'), auto;
}
* {
 cursor: url('https://cdn.custom-cursor.com/db/6548/32/material-ruby-cursor.png'), auto;
}
</style>

<style>
/* font-family */
@font-face { font-family:"GarineldoNo02"; src: url("//dl.dropbox.com/s/f37r74phocsgj0u/GarineldoNo02.otf");}
@font-face { font-family:"ReginaScript-d9xAX"; src: url("//dl.dropbox.com/s/v3qylftbhsp22b9/ReginaScript-d9xAX.ttf");}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');

/* this is where the colors are rooted */

:root{
 --headers: darkred;
 --text: darkred;
 --links: darkred;
 --hover: red;
 --borders: 0px solid black;
 --font-family: serif;
 --curve: 0px;
}

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

h3, h4, h5{color: var(--text) !important;} /* headings*/
a{color: var(--text) !important;text-shadow:1px 1px 2px darkred;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
.details-table td p, p, h2, .count {color: var(--text) !important;text-shadow:1px 1px 2px black;} /* color of text */
.friends a p{color: var(--headers) !important;font-weight:1!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 {color: var(--headers); !important;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */
.details p:last-child{color: var(--text)!important;} /* where the last login and status appears */
DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{color:darkred; font-family:"ReginaScript-d9xAX";font-size:20px;}
.details{margin:auto;text-shadow:1px 1px 2px darkred;}

/* this is where your name appears */
h1{
 color: black;
 font-family: "GarineldoNo02";
 font-size:60px !important;
 font-weight: bold;
 text-shadow: 2px 2px 3px darkred;
 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{
 color:red;
 font-size:70%!important;
}

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

/* 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(11%) sepia(86%) saturate(3851%) hue-rotate(354deg) brightness(86%) contrast(115%); !important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
 background-color: transparent !important;
 border: 2px 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{
 margin:auto;
 color: var(--text) !important;
}
.online img{
 filter: brightness(0) saturate(100%) invert(11%) sepia(86%) saturate(3851%) hue-rotate(354deg) brightness(86%) contrast(115%); !important;
}

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

a, p, nav label, .section{
 font-family: var(--font-family) !important;	
 font-size: 16px;
 font-weight: 1;
}
h2, h3, h4, h5{
 font-family: "ReginaScript-d9xAX"!important;	
 font-size: 30px;
 font-weight:1;
 text-shadow:1px 1px 2px darkred;
}

/* 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-color: var(--headers);
 border: none;
}

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

.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: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
	
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: url('https://64.media.tumblr.com/c68ad46ea05fd3450f7668a5c642294e/7e6d1d94a8f4bbd4-18/s75x75_c1/4504638236006bf2a6744a6a9e989e78c2e25ca8.gifv');
}
.icon{border:none !important;}
.comment-replies{border:3px solid var(--text);} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in bewtween comment replies*/

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

/* the interest table */
.table-section{
 border:none !important;
 background-color:var(--box_color_and_seethru)!important;
 border-radius: var(--curve) !important;
}

/* the header section of the boxes */
.heading{
 background: none !important;
}

/* 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-image: url('');
 background-size: cover;
 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:5px;
}
.profile-pic{
 padding-left: 0px;
}

.friends-grid img{
 border-radius: var(--curve) !important;
 filter: brightness(60%);
}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.contact .heading, .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;}
.mood, .friends{margin-bottom: 10px;}


/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
 background: url('https://i.pinimg.com/originals/0f/40/9c/0f409cc797bab03792e5b1b10c9a4cef.jpg');
 background-position: center;
 background-size: 80%;
 border: none!important;
 border-radius: var(--curve);
 height: 200px;
 clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.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 {
 height: 200px!important;
 overflow-y: scroll;
 border:transparent;
 outline: none !important;
 border-radius: 3px;
}

/* 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-bottom:2px solid darkred;
}
</style>

<style>
/* Force scrollbars onto browser windows.
Doesn't work in Firefox */
body {
 margin-bottom: fixed;
}

/* Box styles */
.myBox {
 width: 200px;
 height: 200px;
 overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
 width: 5px;
 height: 12px;
}
::-webkit-scrollbar-track {
 border-radius: var(--curve);
 border: 2px solid #1A0001;
}
::-webkit-scrollbar-thumb {
 background: #1A0001;
 border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
 background: gray;
}
</style>
<style>
 @media(max-width: 30em){ /* MOBILE */
body{
 background-color: black;
 max-width: 30em;
}
.profile{
 display:block;
 flex-direction: column;
}
.profile{
 overflow-y: scroll;
 width:350px;
 height:500px;
 margin:auto;
 text-align: center;
 position: relative;
 top: 0px; left: 0px;
 border-radius: 50px;
}
nav, footer{
 margin:0px;
}
}
</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 4 of 4 comments ( View all | Add Comment )

๋࣭ ⭑ꀸꀤꍏꈤꍏ๋࣭ ⭑	1710913998 Usinggg omg it's so amazinngggg Report Comment
Vladimir	1702313376 def using!! might make some changes to it tho Report Comment
tara	1699603200 using!! Report Comment
Mistress	1639813613 🖤 🖤 Report Comment

Layout published by Bela