Karkat Vantas Homestuck layout

Tags: homestuck

Description:

Karkat themed layout with floating profile animation, karkat talksprite below the interests box, and custom online icon. Made with different pieces of code, so change it up however you’d like. Just comment if used

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=40873) -->

<style>
    .table-section + .table-section {
        display: none;
    }
</style>

<style>
div.table-section:nth-child(odd):after {
 content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg8k5zz-577d61ba-8429-4ec1-bd15-788f10741a72.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4MGNlMzAyLTQwY2QtNGQ4ZC04MWJmLWYzZDQ5MjM3ZmUyNVwvZGc4azV6ei01NzdkNjFiYS04NDI5LTRlYzEtYmQxNS03ODhmMTA3NDFhNzIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.V4Ty7tir97il1sCds6DRxoRKMlbDPgXchues-wFfNRc); 
}
</style>

<style>

/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: #ff0000; 
	//text-shadow: 1px 1px #ff0000;
	
};
	text-shadow: 2px 2px 3px #ff0000, 0 0 25px #ff0000, 0 0 5px black;
}

</style>

<style>.online { visibility: hidden; } .online img { content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg8fvpa-77950fbd-b02e-499a-a342-cb56720b869e.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4MGNlMzAyLTQwY2QtNGQ4ZC04MWJmLWYzZDQ5MjM3ZmUyNVwvZGc4ZnZwYS03Nzk1MGZiZC1iMDJlLTQ5OWEtYTM0Mi1jYjU2NzIwYjg2OWUuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.mXiPnrLkOrljpU3Vc_qdHSYQJIQt6Ry5e2PJ1nZycm4"); animation-name: none; visibility: visible; 
height: 133px; width: 122px; }</style>

<style>
body {
 margin:0;
background-color: black;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg8dpkc-2e3552b3-7a73-4f63-a91e-7ffc5db58cf2.jpg/v1/fit/w_475,h_449,q_70,strp/karkat_panel_by_p4ntysh0t_dg8dpkc-375w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NDQ5IiwicGF0aCI6IlwvZlwvYTgwY2UzMDItNDBjZC00ZDhkLTgxYmYtZjNkNDkyMzdmZTI1XC9kZzhkcGtjLTJlMzU1MmIzLTdhNzMtNGY2My1hOTFlLTdmZmM1ZGI1OGNmMi5qcGciLCJ3aWR0aCI6Ijw9NDc1In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.0SPMnue413-ZFlVbQx8sV_N7PzyUz8KCiiDNPUOg6Kc");
background-attachment: fixed;
no-repeat fixed; background-size:cover;

}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

nav img.logo{
    filter: brightness(50%) saturate(100%) invert(9%) sepia(52%) saturate(5180%) hue-rotate(336deg) brightness(90%) contrast(92%) !important;
}

#q, button {
color: #ff0000;
background-color: transparent;
border: 1px dotted #ff0000;
font-family: inherit;
}
p, i, b, .count {
color: #ff0000!important;
}
a, .profile .friends .person p, .logout-btn {
color: #ff0000 !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #ff0000;
}
nav .top {
margin-top: 2px;
background: none;
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #ff0000;
border-bottom: none;
}
nav .links {
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #ff0000;
text-align: center;
}
main {
background: black;
background-color: rgba(0, 0, 0, 0.5);
color: #ff0000;
border-left: 2px dotted #ff0000;
border-right: 2px dotted #ff0000;
border-bottom: 2px dotted #ff0000;
}
.heading {
color: #ff0000!important;
background: none;
background-color: black !important;
border: 2px solid #ff0000 !important;
}

.url-info {
color: #ff0000!important;
background: none;
background-color: transparent !important;
border: 2px dotted #ff0000 !important;
}

.inner {
color: #ff0000!important;
border: 2px dotted #ff0000;
border-top: none;
}
.profile-info {
border: 2px dotted #ff0000;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px dotted #ff0000;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")

}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8opn0x-889dd96d-4f23-43a8-acd5-71733d4936fb.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvcG4weC04ODlkZDk2ZC00ZjIzLTQzYTgtYWNkNS03MTczM2Q0OTM2ZmIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.YVsQRaBRNcejOAVeS1RRKTXNhwhUJ_cWZhRpQVO96sk")
}

.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #ff0000!important;
text-align: center;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px dotted #ff0000;
border-collapse: collapse;
}
td {
color: #ff0000!important;
background: none;
background-color: transparent !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 2em;
color: #ff0000;
}
footer {
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #ff0000;
}
footer p {
color #ff0000 !important;
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comment-replies {
border: 1px dotted #ff0000;
margin: 2px;
}
nav .info {
background: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


</style>



<style>
table.comments-table{
background-color: rgba(0, 0, 0, 0.5);
display: block;
height: 300px!important;
overflow-y: scroll;

}
</style>



<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: #ff0000;}

    ::-webkit-scrollbar-track {
    background:black;}
</style>

<style>
    .comments-table td:first-child{
background-color: rgba(0, 0, 0, 0.5);

}

.comments-table td{
border-width:0;
background-color: rgba(0, 0, 0, 0.5);
border: 2px dotted #ff0000;
</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 52 comments ( View all | Add Comment )

Jumixx	1751449602 using:D Report Comment
Notdeclived !!	1745796535 usandoooo!! ;o) Report Comment
PizzaTsar	1745238496 using! Report Comment
kittycore	1745040121 using!! Report Comment
KARKAT!!	1744913396 USING ((:B Report Comment
Kaxtion	1742247864 using! Report Comment
carcinoGeneticist	1741842034 using!! Report Comment
KARKAT	1741663106 USING. Report Comment
terminallyCapricious	1741403241 using! :o) Report Comment
Caramiloo	1741181684 Usandoo Report Comment
{~♋️Cherrysmoothie♋️~}	1736973796 USING! Report Comment
:33 < lærke	1736882659 IM USING Report Comment
☆JESTRR☆	1734638130 usingg!! :3 Report Comment
⋆｡°✩Chy	1734523852 usingg <3 Report Comment
HAL	1733506980 using Report Comment
criticalCerberus	1731384525 using!! Report Comment
M30Wz	1730660229 using!!! >_< Report Comment
GENO - SHADZ [WIP]	1729901301 using :3 Report Comment
Pancake :P	1729567402 UZING >:D Report Comment
Satoru IRL!	1728100291 USING Report Comment