Backrooms V.1

Tags: backrooms, yellow, layout

Description:

Disclaimer:

This WAS my first layout!

it started as a practice layout/ me learning Css, but i think it turned out okay:>

Feel Free to edit this and make it your own ! its a pretty simple layout anyways ¯\_(ツ)_/¯

also let me know how i can improve it!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡 (https://layouts.spacehey.com/layout?id=21381) -->

<style>
body {
font-family: Courier New, monospace;
background-image: url('https://i.pinimg.com/564x/12/72/aa/1272aabe41d18bf01177ceb841d3227d.jpg');
background-size:cover;
background-position:center center;
background-attachment:fixed;
background-repeat:no-repeat;}
img {
filter: none );
}
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%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.logo {
filter:sepia(100%) hue-rotate(10deg) saturate(10);
animation-duration: 1s;
}
#q, button {
color: black;
background-color: transparent;
border: 1px solid black;
font-family: inherit;
font-size: 20px;
}
p, i, b, .count {
color: black  !important;
}
a, .profile .friends .person p, .logout-btn {
color: black !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
width: 1000px;
}
.icon {
display: none;
}
nav, nav .links a {
color: black;
}
nav .top {
margin-top: 2px;
background: none;
background-color: transparent ;
border: none;
border-bottom: none;
}
nav .links {
background-color: transparent ;
border: 2px solid black;}

main {
background: none;
}
.heading, .url-info {
background: white;
background-color: transparent !important;
border: 2px solid black !important;
}
.inner {
background-color: transparent;
color: white !important;
border: 2px none;
border-top: none;
}
.profile-info {
border: 2pxnone;
}
.profile-info .inner {
border: none ;
background-color: transparent;
}
.profile-pic img{
filter: sepia(100%) hue-rotate(10deg) saturate(2);
animation-duration: 8s;}
.friends .inner {
color: transparent !important;
border-bottom: none;
background-color: transparent;
}
.profile .friends .person img{
 filter: sepia(100%) hue-rotate(10deg) saturate(2);
}
#comments {
border-bottom: 2px none;
overflow-y:scroll;
height: 200px;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: black  !important;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px none;
border-collapse: collapse;
}
td {
color: black !important;
background: none;
background-color:transparent!important;
}
table.details-table {
max-width: 98%;
}
.profile h1 {
color:white ;
font-size: 2em;
filter:sepia(100%) hue-rotate(15deg) saturate(10);
}
footer {
background: transparent ;
border: 2pxnone ;
}
footer p {
color #00ff00 !important;
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comments-table td:first-child img{
    filter: sepia(100%) hue-rotate(10deg) saturate(2);
}
.comment-replies {
border: 1px solid black;
margin: 2px;
}
nav .info {
background: none;
}
h4  {
filter: sepia(100%) hue-rotate(deg) saturate(10);
color: black ;
}
.profile .blurbs .heading, .profile .friends .heading {
color: white;}
.profile .blurbs .section h4 {
filter: none;
}
{
animation-name: floating ;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
max-height: 650px;
overflow-y: scroll;
padding: 10px;
}
img{
animation-name: floating;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 20px); }
100% { transform: translate(0, -0px); }
}
::-webkit-scrollbar {
width: 0px;

}
img:hover, .friends:hover{
animation:floating 10s;
animation-iteration-count:infinite;
filter: none;
}
</style>
<style>
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background:  rgba(35, 40, 0.2) ;
background-color: ;

}

::-webkit-scrollbar-track {
background:  rgba(80, 80, 9);
background-color: ;
;
}
</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 7 of 7 comments ( View all | Add Comment )

THEF0LLY0FMAN	1709686519 will probably be using this ! ^_^ Report Comment
egg_it	1704510310 def using Report Comment
Star/Starry!! :3	1701226862 might use!! Report Comment
JibbyJabber	1701138578 Using Report Comment
BUNNYR4T (autoplay)	1693510902 testing before using Report Comment
alexy	1651265974 SO COOL!!! Report Comment Thank you! by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡; 1651288787; Report
𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡	1651019716 I recommend adding music to your layout it helps wih the ambience! especially this song: Boards of Canada- Tears from the Compound eye or The Caretaker- It's just a burning memory Report Comment How do you add music? by Cali; 1693693037; Report You used to be able to auto play music on ur page but that doesn’t seem to work anymore. However embedding music from YouTube , Spotify, and SoundCloud still works it just doesn’t play automatically. Check out this blog for a tutorial https://blog.spacehey.com/entry?id=97599 by 𝔖𝔩𝔢𝔢𝔭 𝔴𝔥𝔢𝔫 𝔦𝔪 𝔇𝔢𝔞𝔡; 1693800883; Report