Nostalgic Christmas layout

Tags: christmas, nostalgic, nostalgiacore, red, green, white, holiday, winter
Description:

Comes with: Autoplaying music (All I Want for Christmas is You), Loading screen, Custom logo, Custom contact icons, Custom icons on header, Custom cursor, Snowflakes, Flying Santa, Santa hat on PFP
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Katie (autoplay!) 🍉 (https://layouts.spacehey.com/layout?id=85175) -->

<style>
  
body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://64.media.tumblr.com/76e48af7ae8c917c92e7c9bde5e577e1/2a38c79937a72b01-dd/s250x400/2abb0eb31a2db3873d8887e630688eb39a0c34bf.gifv);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 



  
.logo {

content:url("https://files.catbox.moe/lenv2g.png");

}
  

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.pinimg.com/564x/76/0a/bf/760abf6a5178fcfd6723fb902aef5a3a.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
@media only screen and (max-width: 600px) {
main:before{
height: 600px;
}
}

body{
  background: url(https://i.pinimg.com/564x/ae/bc/f9/aebcf927dafa65777f05b856fb213da1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

main{
  background: url(https://i.pinimg.com/564x/d5/f3/2d/d5f32dc80d25419f3c3eb104ffdf125f.jpg);
  color: white;
}

.friends{
  color: white;
  background: transparent
}

table.comments-table{
  color: white;
  background: transparent;
  display: block;
  border: transparent;
}

.profile .blurbs{
  background: transparent;
  display: block;
}

.profile .mood{
}

a:hover{
  color: white;
}
a{
  color: white;
}

nav .top{
  background: #5b812e;
}

nav .links{
  background: #d12c2d;
}
  
.nav .top , nav .links{

  text-align: center;

}
  
nav .links li:not(:last-child)::after {

  content: url("https://64.media.tumblr.com/16d4bcea3a399d15a4f16d4da0ce9e7a/38bf77bb76a91eb8-a1/s75x75_c1/9fcae5289845d9a16a30790ae39f258e798cae6f.gifv");

}
  
nav .links a, nav .links li .special a{
  text-shadow: none;
}
  
.person p, .count {
  color: white !important;
}
  
.profile-info {
    border: transparent;
}

footer{
  background: transparent;
  color: black;
}

:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: #5b812e;
--even-lighter-blue: #5b812e;
--lightest-blue: #5b812e;
--dark-orange: white;
--light-orange: #d12c2d;
--even-lighter-orange: transparent;
--green: black;
}
  
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d12c2d; 
}

::-webkit-scrollbar-thumb:hover {
  background: #7D1A1B; 
}
  
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px black;
}
  
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat;
  background-size: cover;
  display: block;
  width: 100px;
  height: 100px;
  z-index: 999;
  position: absolute;
  top: -43px;
  left: -32px;
}
  
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "❄️"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "❄️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "❄️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "❄️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "❄️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "❄️"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "❄️"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "❄️"
}

@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes"><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div><div class="snowflake">❅</div><div class="snowflake">❆</div></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/QwjZbRNen24//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
@keyframes flying-santa{
  from{ left:-400px; }
  to{ left:calc(100% + 20px); }
}
#santa{
  position: fixed;
  left: -400px;
  top: 200px;
  width: 200px;
  animation: flying-santa 7s infinite linear;
  pointer-events: none;
}
</style>
<img id="santa" src="https://static.spacehey.net/img/special/santa-sleigh.svg"/>

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-5/hol461.ani), url(https://cur.cursors-4u.net/holidays/hol-5/hol461.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/25/flashy-christmas-tree.html" target="_blank" title="Flashy Christmas Tree"><img src="https://cur.cursors-4u.net/cursor.png" alt="Flashy Christmas Tree" style="position:absolute; top: 0px; right: 0px;"/></a>
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

Comments disabled.