John Egbert Homestuck layout

Tags: homestuck

Description:

John Egbert themed layout with floating profile animation, John png underneath the interests box and a 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=41013) -->

<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/dg8ph95-467d51db-e660-44ca-8d91-4cc2e524802c.png/v1/fit/w_400,h_400/john_egbert_by_p4ntysh0t_dg8ph95-375w-2x.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NDAwIiwicGF0aCI6IlwvZlwvYTgwY2UzMDItNDBjZC00ZDhkLTgxYmYtZjNkNDkyMzdmZTI1XC9kZzhwaDk1LTQ2N2Q1MWRiLWU2NjAtNDRjYS04ZDkxLTRjYzJlNTI0ODAyYy5wbmciLCJ3aWR0aCI6Ijw9NDAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.L5pgjVDLTTgADqWaNS9DHfKAFz38eZXebMppoKarWzc); 
}
</style>

<style>

/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: white; 
	//text-shadow: 1px 1px #0715cd;
	
};
	text-shadow: 2px 2px 3px #0715cd, 0 0 25px #0715cd, 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/dg8phg5-bbf78e74-a8ef-4c0f-be47-125a51040cf4.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4MGNlMzAyLTQwY2QtNGQ4ZC04MWJmLWYzZDQ5MjM3ZmUyNVwvZGc4cGhnNS1iYmY3OGU3NC1hOGVmLTRjMGYtYmU0Ny0xMjVhNTEwNDBjZjQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.mqtbSz-Pr_EC4XlhWkTHhfeySdt4Rhym7m6NGR5qxVA"); animation-name: none; visibility: visible; 
height: 120px; width: 122px; }</style>

<style>
body {
 margin:0;
background-color: black;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0e23ee94-e84f-4738-9dce-41894ec7359b/ddg2gth-c1c564b9-f79e-40b8-8ba5-3668751ed352.jpg/v1/fit/w_828,h_1472,q_70,strp/john_egbert_custom_wallpaper_by_the_true_random_fun_ddg2gth-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTYwMSIsInBhdGgiOiJcL2ZcLzBlMjNlZTk0LWU4NGYtNDczOC05ZGNlLTQxODk0ZWM3MzU5YlwvZGRnMmd0aC1jMWM1NjRiOS1mNzllLTQwYjgtOGJhNS0zNjY4NzUxZWQzNTIuanBnIiwid2lkdGgiOiI8PTkwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.y2Dx2HTbFSAvu9usD2pXtJN7Mpqy8Osy7HiDcZs7UGw");
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;
}

.logo {
filter: sepia(100%) hue-rotate(45deg) saturate(0);
}

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

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

.inner {
color: white!important;
border: 2px dotted #0715cd;
border-top: none;
}
.profile-info {
border: 2px dotted #0715cd;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px dotted #0715cd;
}
.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}
.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")

}
.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/dg8pihx-2ba8fb43-0884-4383-bf71-9e92bbcc1087.png/v1/fill/w_22,h_19/john_egbert_icon_by_p4ntysh0t_dg8pihx-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTkiLCJwYXRoIjoiXC9mXC9hODBjZTMwMi00MGNkLTRkOGQtODFiZi1mM2Q0OTIzN2ZlMjVcL2RnOHBpaHgtMmJhOGZiNDMtMDg4NC00MzgzLWJmNzEtOWU5MmJiY2MxMDg3LnBuZyIsIndpZHRoIjoiPD0yMiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.dgEL7wi3Y1V1Hx-W5DRj5A5IeObuvJOrk2yxK2eD3Ds")
}

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

    ::-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 #0715cd;
}

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

janey	1752686298 usingg! Report Comment
ronnie	1750696181 using Report Comment
mMild	1750368213 using ! Report Comment
Nemø	1749697347 using tysmmmmmm Report Comment
:33 < lærke	1748002126 USING Report Comment
ghastlyPanic	1747959236 usinngg Report Comment
fang !	1746172103 using for my alt :) Report Comment
Bio-chan	1744282655 Using!!! Report Comment
J0hn_23	1741529932 Using!! ^_^ Report Comment
cj	1740947719 using Report Comment
🎱\|\| ACE \|\| 🦴	1737758541 USING‼️ Report Comment
JOHN EGBERT	1735290357 USIN!! :333 Report Comment
SANDYBEAR :3	1734051755 using! ^_^ Report Comment
Nightmare	1732161252 Using!1!!!1 ^^ Report Comment
Cas XoD	1729900403 USING!!! Report Comment
⋆˙⟡ —EctoBiologist🧫	1728830254 ABSOLUTELY USING THIS, THX!! Report Comment
alex .☘︎ ܁˖	1728440626 using ^_^ Report Comment
alex .☘︎ ܁˖	1728440621 using ^_^ Report Comment
E.C	1727345879 Using! :]] Report Comment
IGOR!!!!	1727127163 Using!! Xp Report Comment