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

𖦹₊ ⊹vanilli	1742858633 using!! ^^ Report Comment
-Kas!!!	1739132007 using!! ^^ Report Comment
Sehnsucht <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
Chl03 XD	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