The Base SpaceHey Layout Except I Used Literally Every Tip from The Advent Calandar

Tags: christmas, low effort

Description:

yyeah

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by hex (https://layouts.spacehey.com/layout?id=92344) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
h1{
  font-family: 'Lobster', cursive;
  font-size: 2.5em !important;
    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;
}
}

h2,h3,h4,h5,h6{
  font-family: 'Lobster', cursive;
}

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

.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}



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

body{
  background: linear-gradient(90deg, #0e66dd, #25d8d3);
  animation: gradient 10s ease infinite;
  background-size: 400% 400%;
}

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


@keyframes gradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@keyframes gradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}


/* 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
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

@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"/>

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

<div style="max-height: 300px; position: fixed; left: 1px; bottom: 0px; z-index: 99;">
<img src="https://media1.tenor.com/m/hO5q_cDaf7IAAAAC/arbolito-de-navidad.gif" height="200"/> </div>

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

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

god is good

1703319053

Magnificant, make sure to add tomorrows lol

Report Comment

will make sure to

by hex; 1703353942; Report