enjoy
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"/>
rounded corners
<style> *{ border-radius: 9px; } .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{ border-radius: 6px 6px 9px 9px; } </style>
snowflakes
<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 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>
star 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>
striped boarders
<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>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
-☆ jett!!
oo ty these will be fun to mess with at some point (also off topic but ur layout is so cool rn)