Black layout with sidebar.

Tags: sidebar, black, simple, dark, white, aesthetic, night, crt, filter

Description:

very cool layout, but that's kinda simple. it works on mobile, but the sidebar will not be visible. also, the square pfp doesn't look very good (as you can see in the picture), so i recommend using a circular pfp, or a pfp mask (i let it be square precisely to give you this freedom of customization). modify this as much as you want.

"what does this layout contain???"

sidebar (obviously);
custom contact icons;
CRT filter;
custom cursor;

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by boêmio (hater #1 do minimalismo) (https://layouts.spacehey.com/layout?id=103043) -->


<style>
/* bg img/transparent bg */
html {
background: black;
}
body, footer, .top {
background: rgba(0,0,0,0) !important;
color: white;
}
input {
border: 1px white solid;
border-radius: 4px;
padding: 4px;
background-color: rgba(0,0,0,0.7);
}
nav .links {
background-color: rgba(120,120,120,0.7);
}

/* header->sidebar */
@media(min-width:810px) {
nav {
float: left;
width: 190px;
}
main {
float: right;
width: calc(100% - 190px);
position: relative;
z-index: 10;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(10px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 40px 0;
position: relative;
border-radius: 4px 0 0 4px;
width: 90px;
}
nav .links li::after {
content: "" !important;
}
}

/* make soon links strikethrough */
a.soon {
text-decoration: line-through !important;
}
a.soon:hover {
text-decoration: line-through underline !important;
color:#5c0404 !important;
}

/* biggify */
@media(max-width:810px) {
nav .links {
text-size:20px;
}
}

/* fix img width */
.col.right img {
max-width: 100%;
}

/* fix ONLINE indicator */
.online {
font-size: smaller;
}
</style>

<style>
*, nav, nav .links a, .logout-btn {
font-family: ms ui gothic!important;
text-shadow: 0px 0px 6px white;
color: white;
}
</style>

<style>
main p{
   letter-spacing: 2px;
   font-weight: 400; 
   line-height: 1.5;
   color: white !important;

</style>

<style>
a:hover, nav .links a:hover, nav .top a:hover, footer a:hover, button:hover, .friends a p:hover{
  color: white !important;
  font-style: italic;
  text-transform: uppercase;
}
</style>

<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
============⚠️==========*/
* { 
    cursor: url('https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur'), auto; 
}
a:hover {
    cursor: url(https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), auto;
}
/* this is where the colors are rooted */

:root{
    --headers: whitesmoke;
    --text: whitesmoke; 
    --names: whitesmoke;
    --links: white;
    --background_image: url('https://wallpapercave.com/wp/wp2686927.jpg');
    --font-family: "Courier New", cursive;
    --curve: 0px;
    --borders: 2px solid grey;
}

/* 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 */
p, h2, .count {color: var(--text);} /* color of text */
.friends a p{color: var(--names);} /* color of names, and friends counter */
nav label{color: var(--links);} /* color of search */
.section h4 {color: var(--headers);} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title */
.details p:last-child{color: var(--text);} /* where the last login and status appears */

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

body{
    background-image: var(--background_image);
    background-size: contain;
    background-position: center;
    background-color: dimgray;
}
/* this is where your name appears */
h1{
    color: white;
    font-family: var(--font-family);
    font-size:30px !important;
    font-weight: 1;
    border: var(--borders);
    background-color: black;
    padding:5px;
    text-align: center;
}

/* the navigation is adjusted here */
nav{
    background-color: black;
    border: var(--borders);
    border-radius: var(--curve);
    text-align: center;
}

nav .top, nav .links {
    background-color: transparent;
    border-radius: var(--curve);
}
nav .links a{
    text-shadow:none;
}

/* 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: white;
}

/* 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{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%); !important;
}

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

a, p, b, nav label, .section{ 
    font-family: var(--font-family);	
    font-size: 12px;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}
h2, h3, h4, h5{
    font-family: var(--font-family);
    font-size: 16px;
    text-align: center;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}

/* 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:2px;
    background: gray;
    border: none;
}

/* this is where you adjust the borders and background */
.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve);
    border: var(--borders)!important;
    background-color: black!important;
}
.comment-replies{border:4px groove gray;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid 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);
    border: transparent;
    outline: none;
}

/* the interest table */
.table-section{
    border:none !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-color: black !important;
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic{
    padding: 10px;
}
/* you can add text-align:center; if you want your friends to be centered */
.friends-grid{
    text-align: center;
}

/* 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, .mood{padding: 5px!important;text-align: center;}
.mood, .friends{margin-bottom: 10px;}

.url-info{display: none;}
.general-about .details{
    background: black;
    border: var(--borders);
    padding-bottom: 70px;
    margin-bottom: 10px;
}
.contact{
    padding: 5px
}
.contact .f-col{
    padding: 0px 0px 7px;
}
.f-row{
    margin:0px!important;
}
/* 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;
    outline: none !important;
    border-radius: 3px;
    border-spacing: 6px;
    border: transparent;
}
.comments-table td{
    border: 2px solid gray;
}

footer{
    background: transparent;    padding:10px;
    margin-top: 10px;
}
/* .details-table td:first-child{display:none;}  this hides the movies,books,heroes titles*/
</style>

<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</style>




<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: url('https://external-media.spacehey.net/media/sMtTqxOtgzwRhMjKa2LNLQCY5OpSQAABFnF9NUFotuks=/https://graphic.neocities.org/music_2.gif')
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url('https://external-media.spacehey.net/media/sDmfqwOovrQ5R7RTt-Hpfi7RLfg3qJqb0C15U_HO9pBo=/https://e.deviantart.net/emoticons/b/biggrin.gif')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://external-media.spacehey.net/media/sioophWOHlLTtIZoI6Ikqf1yWfiSiXwwV2mkM91UMDc4=/https://64.media.tumblr.com/15d6458dcf640ad5cf837bd9ede85276/tumblr_inline_p7j3hnhhOX1rhwzwl_75sq.gifv')
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url('https://external-media.spacehey.net/media/s1pDRYcoFC9aBcw958xyNx1Kx7na85gSSKQZcZGFnBIM=/https://xyz.crd.co/assets/images/gallery01/e74c6746.gif?v=4ca63763')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url('https://external-media.spacehey.net/media/s_glY-Hd4eJZsnlBj3OmHfXhVTJIvrpd5TfM4reta85E=/https://pix.crd.co/assets/images/gallery21/2080bfa4.gif?v=ca70c28c')
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url('https://external-media.spacehey.net/media/s4xIEdNp9FXsvYm2sDNEgKXxE-Yk74V1vL6qRviedZPs=/https://64.media.tumblr.com/a61ad63e80d4bd475eccceff6badb9d6/tumblr_inline_nfq8kmDrFk1siyl8l.gif')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url('https://pix.crd.co/assets/images/gallery21/decc7954_original.gif?v=52ef41fa')
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url('https://pix.crd.co/assets/images/gallery21/410325ee_original.gif?v=52ef41fa')
}

</style>


<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
</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 70 comments ( View all | Add Comment )

🧁🔍𝕽𝖆𝖓𝖕𝖔 𝕰𝖉𝖔𝖌𝖆𝖜𝖆🦝	1774923673 Using Report Comment
Javesxs	1773784659 Usingyesyesyeys Report Comment
XERN0US	1772321058 using Report Comment
shion tatsunami ♡	1772201019 using Report Comment
alves	1771690944 using Report Comment
‎ꫂ᭪݁ Solar </3	1769653853 using !! Report Comment
꒰ s̲αɱ (´ཀ`)	1769042488 using Report Comment
Dee	1768507955 Usin Report Comment
𝓥	1767876687 using !! Report Comment
Starlight	1767206969 using!!! Report Comment
Starlight	1767206969 using!!! Report Comment
ketchupkhaos	1765226911 using! Report Comment
L3NA	1762780425 USING!! Report Comment
owl_girl	1762675190 Using!! Report Comment
Sonder	1761520500 usinggg Report Comment
Eleni	1759894521 using Report Comment
nami.	1757350589 I appreciate the simplicity, hope you don't mind me using this Report Comment
beanieweenie	1756101250 using !! Report Comment
☆ rey ☆	1755680648 using Report Comment
Luz	1755433920 using Report Comment