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

Advent 2023 - Day 5 - Flying Santa
Santa Claus is coming to town... 🎵

Add the following code snippet to your profile for a special festive surprise :)

<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"/>
Advent 2023 - Day 7 - Fonts!
Hello everyone!
I hope you're having an amazing Christmas time so far!

Today, I want to show you a quick tip on how you can use a custom Font on your Profile!
First, you need to find a webfont which you like. You can use a site like fonts.google.com which has a lot of great, free fonts!
Then, you need to get an @import code for the font you chose (on Google Fonts, you can get it by clicking on "Select" > "@import").

As a last step, you need to choose which elements on your Profile you want to appear in this Font. For example you can use a selector like "body" to select all the text on your whole profile or "h1" to just select all headings on your Profile (which is just your name in most cases).

Here is an example code snippet which makes your name on your Profile use the Lobster Font from Google Fonts!

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h1{
  font-family: 'Lobster', cursive;
  font-size: 2.5em !important;
}
</style>
Advent 2023 - Day 8 - Let is snow! ❄️
Let's get your SpaceHey Profiles ready for Christmas! 
How about adding some animated falling snowflakes to your profile today?
For example, you can use the following code:
<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>
Code Source

Advent 2023 - Day 9 - Spinning pfp! 🔄
Happy December 9th!
I hope you have a great, festive day so far!
Today I want to share a tiny bit of code that will make your profile picture spin!

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

Advent 2023 - Day 11 - Animated gradient background!
Hi!
Did you know that you can use custom CSS to animated things on your profile?
Yesterdays post showed you how to use custom CSS to spin your profile pic, today you'll learn how to animate your profile's background!
<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>

Advent 2023 - Day 13 - Background Patterns
</style>
body{
  [PATTERN CODE]
}
</style>

For example, this should then look something like this:

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

Advent 2023 - Day 15 - Star pfp ⭐️
Happy December 15th!
I hope you have a great day so far!
Today I want to share a tiny bit of code with you that can make your profile picture turn into the shape of star! ⭐️

<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>
Advent 2023 - Day 17 - Rounded corners!
Happy December 17th!
Today I'll share a tiny code-snippet which will make your profile have rounded corners everywhere! 

<style>
*{
  border-radius: 9px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

Advent 2023 - Day 19 - HTML Codes!
Happy December 19th! 

Here are some useful HTML code snippets you can use pretty much everywhere on SpaceHey - on your profile, in comments, in bulletins, in blog entries and on the forums!

Scolling Text
<marquee>Text</marquee>
Example
Blinking Text
<blink>Text</blink>
Example
Highlighted Text
<mark>Text</mark>
Example
Bold Text
<b>Text</b>
Example
Italic Text
<i>Text</i>
Example
Underlined Text
<u>Text</u>
Example
Strikethrough Text
<del>Text</del>
Example
Link
<a href="https://example.com">Text</a>
Example

Advent 2023 - Day 20 - Last-minute festive Profile! 
<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>
Advent 2023 - Day 21 - GIFsssss!
<img src="GIF_URL" alt="fallback text">
Advent 2022 - Day 23 - Glitter Text!
<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>