Homestuck CD

Tags: homestuck, hs

Description:

original layout is here https://layouts.spacehey.com/layout?id=29048 and that is why it still gives credit to it but i figured other people might want to use the sburb cd that i had made to fit this. also wanted to save just in case i use it again lol

Preview:

click on the image for a larger preview

Code:

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

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

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://i.postimg.cc/MG96GQCQ/image.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>

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

NewM00n	1758572868 using 38D Report Comment
𝒟𝑒𝓋𝒶𝓃 🧁🎀	1755632550 im gonna tweak the cd isnt working djejskisisi im hovering my mouse over it and the cd isnt even showing Report Comment
Gamzee / Micah !!	1755115158 Usinggg!!! Report Comment
لين\|linouchee	1755019084 using Report Comment
paradox	1753848811 using! Report Comment
jack :3	1753309031 this is amazing thank you !!! ^_^ Report Comment
⚙️🎸 ˗ˏˋ꒰ Callum ꒱	1752450678 using ^^ Report Comment
dizzy	1751979080 hey! this doesn't fit my profile pic? ya’ll got any idea on how to fix this? ^^ Report Comment
WizzardAttack⋆｡° ✮ 🇩🇿	1749644601 usinggg Report Comment
murderVampire	1749474494 USING :o) Report Comment
max the coolest ever	1745677717 Using! Report Comment
R1K caterpillar :O)	1740284482 USING:P Report Comment
SCOVIL	1739530916 USING Report Comment
Gus	1738434112 using!! Report Comment
DJ!!!	1737426020 using Report Comment
˗ˏˋ ★ ― KARKALICIOUS ‼	1737315776 OMFG USING Report Comment
Yanne / Alvethe	1736514614 USINGG!! Report Comment
SilverDino [SD]	1736451199 - Using in a really cool way (¬■_■) Report Comment
sunnydersian	1735499718 (in a dave strider voice): using thank you for your service (salute) Report Comment
Piziii002	1734920287 using Report Comment