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

finn	1765513768 using ! Report Comment
S0uless	1765272577 Peak one, using Report Comment
R0ry !! :3	1765154717 usinggg Report Comment
fARaH XD	1764594311 usinggg Report Comment
rwottengraveᯓᡣ𐭩	1764215881 using Report Comment
Astronaut ˚❀⋆.ೃ࿔*:	1763909308 Using Report Comment
Kaykayy!!	1763688750 𝘜𝘴𝘪𝘪𝘯𝘨 Report Comment
hex "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
GHOUL	1760085281 usingg Report Comment
Strang3R	1759069186 usiiing Report Comment
Olly	1758370991 Using :3 Report Comment
naur =_=	1758242148 usiing Report Comment