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

caligulasaquarium	1728672194 Using :3 Report Comment
finn	1727904784 usinedg Report Comment
finn	1727904781 usinedg Report Comment
R10TXD	1726721060 using this :3 Report Comment
UZI D00RM4N!!	1723954057 using :>> Report Comment
Eren <3	1722530467 Using!! ^^ Report Comment
𝚅𝚒𝚗𝚌𝚎𝚗𝚝	1721710817 using Report Comment
Gamzee/Sam	1720960660 using Report Comment
:33 < nepeta	1720625069 using Report Comment
KARKAT IRL	1719665654 Using !! :33 Report Comment
𝘒𝘓𝘈𝘜𝘚. 𝘉 📚	1719601163 UsINg :O) Report Comment
Gamzee Makara	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
D33N4_	1712156264 uSiNg!! Report Comment
SHUIMAI!	1711500932 Using! Report Comment
☆SoftClown(SC)☆	1705844172 Using 💜💜💜 Report Comment
CentaursTesticle	1704171006 Using Report Comment