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

ghostinthebasement	1737762090 using Report Comment
Spaghetti	1737747026 using!! :3 Report Comment
mimi♡	1737677788 using Report Comment
kaiibeezz	1737612090 using Report Comment
Asa	1737577879 USINGG TYY Report Comment
outis	1737547702 using tysm!! Report Comment
▪︎# ` サSakomoto `	1737290986 Using Report Comment
Socially Awkward	1737254865 People who r saying it doesn't work: Did you try putting it between ?? Report Comment the <> style by Socially Awkward; 1737254925; Report OH GOSH TY YOURE SUCH A LIFESAVER by ▪︎# ` サSakomoto `; 1737291012; Report
karusiya ╚══ஓ๑♡๑ஓ══╝	1736896908 doesn't work :< Report Comment Did you try putting it between ?? by Socially Awkward; 1737254878; Report the <> style thing by Socially Awkward; 1737254939; Report
-[OIiver/Arata]-	1734580094 hello can somebody tell me how to get just the see through white tysm Report Comment
waitkolai_	1733746759 doesn't work Report Comment Did you try putting it between ?? by Socially Awkward; 1737254888; Report
丰 flo 丰	1733165297 Using xx Report Comment
starfrutes!!	1733139992 usingg Report Comment
jYnx	1732740268 usin! Report Comment I think the code might be broken bc I copied it into my profile & it didn't register.. but plz remind me when the code is working again, I'm rly looking forward to having this on my profile. :3 by jYnx; 1732740749; Report same by niki-; 1734873918; Report
𖤐Viktor𖤐	1732392551 Usingj Report Comment
𖤐Viktor𖤐	1732392551 Usingj Report Comment
frei ^_^ (fish emoji)	1731904479 usinhg Report Comment
Locky	1731454796 uuuuuuuusing Report Comment
roro 𓈒ㅤׂ	1730579331 usingg !! :D Report Comment wait im having some issues it wont work by roro 𓈒ㅤׂ; 1730580507; Report
alice	1730169632 using but i changed a few things <33 Report Comment its making my page lag alot!!!! i have no idea why :( its not even letting me play music by alice; 1730171416; Report