snowy layout

Tags: snow, white, light, layout

Description:

i made this in jan but never posted it for whatever reason until now

custom interests and scrollbar

credit isn't necessary, just don't claim as your own

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by trent (https://layouts.spacehey.com/layout?id=105931) -->

body {
  background: url(https://www.pixelstalk.net/wp-content/uploads/images6/Original-Winter-Forest-4K-Wallpaper.jpg) bottom;
  background-size: cover;
  background-attachment: fixed;
}

button, input {
  border: 1px #000 solid;
  padding: 1.5px 4px;
  border-radius: 5px;
  font-family: arial;
}

button:not(.logout-btn) {
  background: #e3e3e3;
}

button:hover:not(.logout-btn) {
  text-decoration: underline;
  cursor: pointer;
}

.logout-btn {
  border: 1px #000 solid;
  padding: 1.5px 4px!important;
  border-radius: 5px;
  background: #e3e3e3!important;
  filter: none!important;
  color: #000;
  font-family: arial;
}

.logout-btn:hover {
  color: #000;
}

.container {
  margin: 30px auto;
  width: 740px;
  font: 1.15em arial!important;
}

li .icon {
  content: url(https://pixelsafari.neocities.org/favicon/object/tech/console6.gif);
}

nav .top, main {
  background: url(https://www.pixelstalk.net/wp-content/uploads/images6/White-Winter-Forest-4K-Wallpaper-HD.jpg);
  background-size: cover;
  border-radius: 5px;
  border: 1.5px #000 solid;
  box-shadow: 0 0 3px 1px #000;
}

nav .top .right, nav .top .center, nav .top .left {
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

nav .top .center, nav .top .right {
  position: relative;
  top: 13px;
  right: 2em;
}

nav .links {
  background: none;
  text-align: center;
  padding-top: 6px;
  padding-bottom: 10px;
}

nav .links a {
  text-transform: lowercase;
  text-shadow: none;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

nav .links a:hover {
  color: #fff;
}

nav .links li:not(:last-child)::after {
  color: #fff;
  content:"×";
  margin-left: 3px;
  margin-left: 3px;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

main {
  padding: 0;
  direction: rtl;
}

main div * {
  direction: ltr;
}

a {
  color: #567bab;
  font-weight: bold;
}

a:hover {
  color: #000;
  text-decoration: underline;
}

.details, .mood {
  color: #fff;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

.mood a, .details a {
  color: #fff;
}

.mood b {
  text-transform: lowercase;
}

.mood, .contact, .table-section {
  position: relative;
  top: -9px;
}

.profile h1 {
  font-size: 25px;
  text-transform: uppercase;
  position: relative;
  top: 6px;
  color: #fff;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}

.details {
  position: relative;
  left: -5px!important;
  top: 5px;
}

.profile-pic img {
  padding: 2px;
  width: 150px;
  height: 150px;
  border: 1.5px #000 solid;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
  background: #fff;
}

.friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
  border: 1.5px #000 solid;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
  padding: 2px;
  background: #fff;
}

img {
  border-radius: 6px!important;
}

.profile-info, .blurbs, .friends, .table-section, .contact  {
  background: rgb(255,255,255,.6);
  border-radius: 5px;
  border: 1.5px #000 solid!important;
  box-shadow: 0 0 3px 0 #000;
  backdrop-filter: blur(1.3px);
}

.profile-info a {
  color: #000;
}

.profile-info a:hover {
  color: #000;
  text-decoration: underline;
}

.blurbs .heading, .friends .heading, .table-section .heading, .contact .heading {
  border-radius: 4px 4px 0 0;
  border-bottom: 1.5px #000 solid;
  padding: 3px 7px!important;
  font-size: 16px;
  font-weight: bold;
  background: url(https://www.pixelstalk.net/wp-content/uploads/images6/Original-Winter-Forest-4K-Wallpaper.jpg) left!important;
  background-size: 800px!important;
  color: #fff!important;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

.contact .inner a {
  text-transform: lowercase;
  color: #fff!important;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

.more {
  color: #fff;
}

.more:hover {
  color: #fff;
}

.blurbs .inner {
  height: 200px;
  overflow-y: auto;
}

.blurbs .heading h4, .contact .heading h4, .friends .heading h4, .table-section .heading h4, .blog-preview, .url-info {
  display: none!important;
}

.blurbs .heading:before {
  content:"infomation";
}

.contact .heading:before {
  content:"contacts";
}

.friends .heading:before {
  content:"friends";
}

#comments.friends .heading:before {
  content:"comments";
}

.table-section:not(.table-section + .table-section) .heading:before {
  content:"interests";
}

.table-section+.table-section .heading:before {
  content:"elsewhere";
}

footer, footer a {
  text-transform: lowercase;
  background: none;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

footer .links li:not(:last-child)::after {
  content:"";
  margin-right: 3px;
  margin-left: 3px;
}

footer a:hover {
  color: #fff;
}

.copyright {
  text-decoration: none!important;
}

.copyright a {
  text-transform: uppercase!important;
}

.table-section:not(.table-section + .table-section){
  height: 275px;
  overflow-y: auto;
}

#comments.friends {
  margin-top: 12px;
}

#comments.friends .inner {
  height: 300px;
  overflow-y: auto;
}

.friends-grid {
  display: flex;
  overflow-x: auto;
}

.f-row {
  margin-top: 5px!important;
  margin-left: 4px!important;
}

.blurbs .section h4, .count {
  font-size: 14.5px;
  color: #b2c9e8!important;
  filter: drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000);
  text-transform: lowercase;
}

#comments.friends td:first-child, .details-table td:first-child {
  background: url(https://www.pixelstalk.net/wp-content/uploads/images6/Original-Winter-Forest-4K-Wallpaper.jpg) left bottom!important;
  background-size: 800px!important;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

#comments.friends td:first-child {
  padding: 8px;
}

.details-table td:first-child {
  padding: 5px 3px;
}

#comments.friends td:first-child a, .details-table td:first-child a {
  color: #fff;
}

table.comments-table {
  border: none!important;
}

.details-table td, #comments.friends td {
  background: none;
  padding-left: 7px;
  padding-top: 5px;
  border-radius: 5px;
  border: none!important;
}

.report {
  text-transform: lowercase;
  font-size: 11.5px!important;
  position: relative;
  top: -5px;
}

.report .icon {
  content: url(https://pixelsafari.neocities.org/favicon/object/tech/phone21.gif);
}

button, nav .top .right, nav .top .center {
  text-transform: lowercase;
}

.comment-replies {
  border: 0px;
  border-top: 1.5px #fff solid!important;
}

.friends-grid .person p {
  color: #fff!important;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}

#comments.friends button {
  filter: drop-shadow(0 0 .8px #000) drop-shadow(0 0 .8px #000);
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
  transition: .3s;
}

.profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:not(.icon):hover {
  cursor: cell;
  transform: rotate(5deg);
  scale: .92;
}

.blurbs {
  position: relative;
  top: -10px;
}

.friends {
  position: relative;
  top: -18px;
}

.table-section .icon {
  display: none;
}

.verified-info .icon.verified {
  display: none;
}

:root {
  --topic1: "general";
  --topic2: "music";
  --topic3: "media";
  --topic4: "books";
  --topic5: "pet(s)";
  --topic6: "characters";
}

.table-section:not(:last-child) .details-table tr td:first-child p{
  color:transparent !important;
  text-shadow: none !important;
  letter-spacing: -100px;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
  content: var(--topic1);
}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
  content: var(--topic2);
}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
  content: var(--topic3);
}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
  content: var(--topic4);
}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
  content: var(--topic5);
}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
  content: var(--topic6);
}

.details-table tr td:first-child p::after{
  letter-spacing: 0px !important;
  text-shadow: 2px 2px #fff !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
  filter: brightness(95%) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000) drop-shadow(0 0 .5px #000)!important;
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-track {
  border: 1px #000 solid;
  background: #fff;
}

::-webkit-scrollbar-thumb {
  border: 1px #000 solid;
  background: #ededed;
}

::-webkit-scrollbar-button:single-button {
  background: #ededed;
  display: block;
  border: 1px #000 solid;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 11px;
  width: 13px;
  background-position: center 1px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAAXNSR0IArs4c6QAAACZJREFUGFdjZMADGNHk/jMwMMDFkCVBEjAAFodJIkvAFaAbi2ILAOMgAwZmlL9lAAAAAElFTkSuQmCC);
  border-bottom: none;
  background-size: 10px;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 11px;
  width: 13px;
  background-position: center 1px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAAXNSR0IArs4c6QAAACVJREFUGFdjZMADGKFy/7GoYYRJguSQFYDFkSVhCuBi6JIopgMA4yADBpeMV5wAAAAASUVORK5CYII=);
  border-top: none;
  background-size: 10px;
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
  height: 13px;
  width: 12px;
  background-position: center .4px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAAXNSR0IArs4c6QAAAClJREFUGFdjZMACGNHE/jMwMDAiC4IEQAAuCBNAEQRxMFTCjMYwE24nAGbKBQis5IVFAAAAAElFTkSuQmCC);
  border-right: none;
  background-size: 7px;
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
  height: 13px;
  width: 12px;
  background-position: center .4px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAAXNSR0IArs4c6QAAAClJREFUGFdjZMACGKFi/xkYGGBsOAMkCAJgCWSVMIMY0QUxVGKYieIGAH7KBQhqNvHTAAAAAElFTkSuQmCC);
  border-left: none;
  background-size: 7px;
}

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

Kaykayy!!	1763688750 𝘜𝘴𝘪𝘪𝘯𝘨 Report Comment
pluginbabyy	1763603083 everyone saying that it is not working: Just add " < style > " before the code, and "< /style >" after it! (remove the spaces) Report Comment
𝔪𝔞́𝔱𝔶𝔞́𝔰	1763387720 I want to use this, but it doesn't work. When i put it in the About Me section and save, it doesn't do anything. How do i fix this? Report Comment you have to add at the beginning and at the end of the code!! yw brochacho by Dolly Dal!; 1763498530; Report
IblameChris (Absolute mess Version)	1763136269 usingg! Report Comment
PTR	1762512910 Using!! Report Comment
Kiel	1762507312 using Report Comment
chlo !!	1761481200 usin !! but for some reason (at least for me), after a few seconds the winter bg totally dissapears!! does anyone know why? ;( Report Comment
alixe144	1761164251 using if it works Report Comment
StinkiWinki_ChickenNugget	1760830629 it isnt working for me :c i put it on about me, clicked save all and it just appears the whole code instead of the layout Report Comment
marilupe	1760127205 I tried to use it but it didn't work T - T Report Comment same, i think it has to do with ? i dont have the time rn but if you want to check that for yourself go ahead by ancientGospel; 1760195276; Report okay so it didnt show what i meant i meant < ♦︎ style♦︎ > by ancientGospel; 1760195319; Report do delete the ♦︎ tho by ancientGospel; 1760195335; Report okiiii ty! by marilupe; 1760402053; Report
𝔥𝔞𝔩	1760085281 usingg Report Comment
Strang3R	1759069186 usiiing Report Comment
Olly	1758370991 Using :3 Report Comment
naur =_=	1758242148 usiing Report Comment
volyx	1758119060 usinggg Report Comment
volyx	1758119057 usinggg Report Comment
Max_X3	1757910395 using!! (THIS IS SO WELL MADE???) Report Comment
_.rairaii0_o	1757180096 usinggg Report Comment
_.rairaii0_o	1757180094 usinggg Report Comment
Yagi :)	1757126946 I put it in the section of ''About Me'' and doesnt works, how i can fix it? Report Comment