Gamzee Makara Homestuck layout

Tags: homestuck

Description:

Gamzee themed layout with floating profile animation, Gamzee sprite under the interests box, and custom online icon. Made with different pieces of code, 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=80961) -->

<style>

@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
.top > .left > a > .logo {
display: none;
}
.top .left a {
background: linear-gradient(180deg, #631db4 20%, #631db4 20%, 40%, #631db4 40%, 60%, #631db4 60%, 80%, #631db4 80%);
background-size: cover;
mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
mask-size: contain;
-webkit-mask: url("https://saucydiva.neocities.org/logo.svg") no-repeat center;
-webkit-mask-size: contain;
height: 42px;
width: 165px;
display: inline-block;
}
}

</style>



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

<style>
div.table-section:nth-child(odd):after {
 content: url(https://static.wikia.nocookie.net/vsbattles/images/d/d3/Gamzee_god_tier.png/revision/latest?cb=20150827225740); 
}
</style>

<style>

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

</style>

<style>.online { visibility: hidden; } .online img { content: url("https://static.wikia.nocookie.net/mspaintadventures/images/6/60/Gamzee_Makara.png/revision/latest?cb=20110930042230"); animation-name: none; visibility: visible; 
height: 136px; width: 114px; }</style>

<style>
body {
 margin:0;
background-color: black;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg984da-559655b3-3925-4b3d-b451-ec56f697af90.jpg/v1/fit/w_734,h_917,q_70,strp/gamzee_background_by_p4ntysh0t_dg984da-375w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTE3IiwicGF0aCI6IlwvZlwvYTgwY2UzMDItNDBjZC00ZDhkLTgxYmYtZjNkNDkyMzdmZTI1XC9kZzk4NGRhLTU1OTY1NWIzLTM5MjUtNGIzZC1iNDUxLWVjNTZmNjk3YWY5MC5qcGciLCJ3aWR0aCI6Ijw9NzM0In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.PTTieUZeFsNZXVAH9MxavtpvHWbrr8qfc5C2fz24OFs");
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;
}

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

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

.inner {
color: #631db4 !important;
border: 2px dotted #631db4;
border-top: none;
}
.profile-info {
border: 2px dotted #631db4;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px dotted #631db4;
}
.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}
.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

.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/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")

}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg9c6e4-54d7638d-10f7-45ad-a2b0-c9830a7666de.png/v1/fill/w_28,h_26/capricorn_icon_by_p4ntysh0t_dg9c6e4-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOWM2ZTQtNTRkNzYzOGQtMTBmNy00NWFkLWEyYjAtYzk4MzBhNzY2NmRlLnBuZyIsIndpZHRoIjoiPD0yOCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LlUvbvwmI6i3PQCC4FjI6KRkI_I-SKMK1YkTd-XRl1g")
}

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

    ::-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 #631db4;
}

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

cemetaryScientist [cS]	1732554402 Using Report Comment
GR1MM_K1TTY	1732404491 Using Report Comment
@⭒ ׅ ᑕae𝐋 ꩜ ˖ ་	1730676317 USING:3 Report Comment
caligulasaquarium	1728672194 Using :3 Report Comment
finn	1727904784 usinedg Report Comment
finn	1727904781 usinedg Report Comment
R10TXD	1726721060 using this :3 Report Comment
глуповатый :3	1723954057 using :>> Report Comment
Eren <3	1722530467 Using!! ^^ Report Comment
Vincent	1721710817 using Report Comment
Gamzee/Sam	1720960660 using Report Comment
:33 < nepeta	1720625069 using Report Comment
KARKAT IRL	1719665654 Using !! :33 Report Comment
DANNY	1719601163 UsINg :O) Report Comment
unofficial George Harrison	1716675491 I'm gOnNa uSe tHiS :o) Report Comment
Ｒａｖｅｎ	1714288272 Im UsInG hEhEhE :o) Report Comment
Jackie	1714009099 using :3 Report Comment
Jackie	1714009098 using :3 Report Comment
terminallyCapricious	1713136711 UsE ! Report Comment /using how did i mess that up by terminallyCapricious; 1713136750; Report
THE PAINTER	1712156264 uSiNg!! Report Comment