Advent Calendar codes :0

SANTA HAT:

<style>

.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;

}

</style>

FLYING SANTA:

<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" aria-hidden="true" src="https://static.spacehey.net/img/special/santa-sleigh.svg"/>

FONT CHANGE:

<style>

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

h1{

  font-family: 'Lobster', cursive;

  font-size: 2.5em !important;

}

</style>

FALLING SNOW:

<style>

/* customizable snowflake styling */

.snowflake {

  color: white;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px black;

}

@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" aria-hidden="true"><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>

SPINNING PFP:

<style>

@keyframes spin{

  from{ transform:rotate(0deg); }

  to{ transform:rotate(-360deg); }

}

.general-about .profile-pic img{

  border-radius: 50%;

  animation: spin 7s infinite linear;

}

</style>

ANIMATED GRADIENT BG:

<style>

body{

  background: linear-gradient(90deg, #0e66dd, #25d8d3);

  animation: gradient 10s ease infinite;

  background-size: 400% 400%;

}

@keyframes gradient{

  0%{ background-position: 0% 50%; }

  50%{ background-position: 100% 50%; }

  100%{ background-position: 0% 50%; }

}

</style>

BG PATTERNS:

<style>

body{

  background-color: #e5e5f7;

  opacity: 0.5;

  background-image:  linear-gradient(135deg, #1D4ED8 25%, transparent 25%), linear-gradient(225deg, #1D4ED8 25%, transparent 25%), linear-gradient(45deg, #1D4ED8 25%, transparent 25%), linear-gradient(315deg, #1D4ED8 25%, #e5e5f7 25%);

  background-position:  19px 0, 19px 0, 0 0, 0 0;

  background-size: 38px 38px;

  background-repeat: repeat;

}

</style>

STAR SHAPE PFP:

<style>

.general-about .profile-pic img{

  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);

}

</style>

ROUNDED CORNERS:

<style>

*{

  border-radius: 9px;

}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{

  border-radius: 6px 6px 9px 9px;

}

</style>

TEXTS:

1. Scolling:

<marquee>Text</marquee>

2. Blinking:

<blink>Text</blink>

3. Highlighted:

<mark>Text</mark>

4. Bold:

<b>Text</b>

5. Italic:

<i>Text</i>

6. Underlined:

<u>Text</u>

7. Strikethrough:

<del>Text</del>

Link:

<a href="https://example.com">Text</a>

LAST MINUTE FESTIVE PFP:

<style>

.general-about .profile-pic img,

.comments-table,

.profile-info{

  border: 10px dashed #ee1b22;

}

.profile .blurbs .heading, .profile .friends .heading,

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{

  background: #ee1b22;

  color: white;

}

.profile .blurbs .heading, .profile .friends .heading a,

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading a{

  color: white;

}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions{

  border: 2px solid #ee1b22;

}

</style>

GLITTER TEXT:

Use sites like textanim.com or glittermaker.com

<style>

h1{

  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/blue_glitter.gif') repeat;

  color: transparent;

  background-clip: text;

  font-size: 20em;

}

</style>