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

adamnharddih	1775976116 usingg Report Comment
Luna	1775660247 using! Report Comment
mymy⋆˚࿔	1775492358 usingxx!!! :1 Report Comment
Livi	1774799593 hiii! I decided to use this layout and I was wondering how I can get rid of the scroll bar in info and interests, thanks!! Report Comment
𓏲ּ𝄢Myaa .ᐟ.ᐟ	1774772490 using Report Comment
Livi	1774729589 usinggg Report Comment
ivan!	1774131896 hi!!! im trying to use this layout, but it doesnt work? when i paste it in, it only shows the text :(((( am i doing smth wrong?? Report Comment did u ever figure this out? mines doing the same.. by silenthill.0; 1774228497; Report how did u get urs to work! mines doing the same :( by aaira; 1775422820; Report
Timixss	1773922611 Usingg :333 Report Comment
𓏵﹒sam ノ castiels bfie . 🐾	1773710836 using ^^ Report Comment
JOOSSTEIN	1773503562 using:3 Report Comment
marigoldtheloser	1773084046 Using Report Comment
Silly_guy	1772593239 Using Report Comment
bunny	1772311146 using Report Comment
Srylo	1772210670 Using Report Comment
cece	1771667207 usingg Report Comment
necro.boo	1771492490 using! Report Comment
Papa smiski	1770563512 using Report Comment
theory of absence	1770310124 using Report Comment