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

theprophet	1786322294 usingggg ILOVEMARYKLINE Report Comment
Spirit_Gh0st	1785205898 Usinggg Report Comment
bingobaby	1784484617 using!!! Report Comment
Hel3n4_RawRXD	1781786438 uzinggg!!!! Report Comment
matt	1778717315 using Report Comment
lyn	1775032445 using! Report Comment
fishyzz	1774708270 using !! :3 Report Comment
√ɪᴠ.	1769686018 using Report Comment
iHatGoombaZ	1768896597 Using!!!! Report Comment
🍰🧁🍬🍨 𝓒𝓵𝓾𝓶𝓼𝔂 🥧🎂🍦🍭🍩	1767816839 Using Report Comment
BEE	1764005608 Using!!! Report Comment
RolyPoly	1763265488 USINGGGG:3 Report Comment
RolyPoly	1763265488 USINGGGG:3 Report Comment
RolyPoly	1763265488 USINGGGG:3 Report Comment
RolyPoly	1763265484 USINGGGG:3 Report Comment
Awsomesauce!!!	1757186114 Using!!! :D Report Comment
bhe shitrat	1753684937 using Report Comment
Lʚɞey	1753246590 using ^_^ Report Comment
𖦹₊ ⊹vanilli	1742858633 using!! ^^ Report Comment