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

adam!!x3	1778654283 using!! Report Comment
adam!!x3	1778654281 using!! Report Comment
carcinoGeneticist[CG]	1775110794 using Report Comment
Karkat Vantas	1775038326 Using Report Comment
karkles <3	1769139358 USING. Report Comment
NovaSkunk! 🌈🌤	1757393686 Using!!! Report Comment
tommy 🍬🕸️	1757369302 Using!!! Report Comment
carcinoGeneticist	1755723473 USING. Report Comment
carcinoGeneticist	1755394119 USE. Report Comment
Mo!!	1754595865 hI! cOULD YOU MAKE A TAVROS THEME? iLL FRIEND YOU AND YOU CAN MESSEGE ME WHEN ITS READY! NO NEED TO THOUGH! Report Comment
Jumixx	1751449602 using:D Report Comment
Notdeclived !!	1745796535 usandoooo!! ;o) Report Comment
PizzaTsar	1745238496 using! Report Comment
KARKAT!!	1744913396 USING ((:B Report Comment
Kaxtion	1742247864 using! Report Comment
oliver	1741842034 using!! Report Comment
KARKAT	1741663106 USING. Report Comment
dave	1741403241 using! :o) Report Comment
Caramiloo	1741181684 Usandoo Report Comment