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 vince (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 146 comments ( View all | Add 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
Forest	1755911980 usingg Report Comment
. auroraa si fuera inteligente	1755184937 using Report Comment
≡^∇^≡ Kaori !!	1755053857 using Report Comment
NOTLAWLIET	1754763625 using Report Comment
817	1754749304 using Report Comment
Mallory	1754242193 Using ^_^ Report Comment
v0dc4Xx_xXnth4n0L	1753993589 using Report Comment
M1chaBb	1753861413 using Report Comment
yk68p 🇧🇷!	1753809558 Usando Report Comment
「✦ O T I S!!! ✦」	1753438788 using! Report Comment
Junorthy W.	1753397507 Using!! Report Comment