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

Kaisen >:3	1738199876 Using :D Report Comment
ясьтаватсО ✧	1731889510 Using Report Comment
Keytto	1728882639 usin Report Comment
₊✩‧₊meowmorp₊✩‧₊	1724561864 using!!!1!!!1!!!!!1!1! Report Comment
R0MB1E	1723926228 using >:3 Report Comment
KATATONIC	1719311745 where can you practice css and html? Report 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
c0l0rful_bl00d.666	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