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

Nightmare	1732161252 Using!1!!!1 ^^ Report Comment
Cas XD	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
oiupkhg	1727127163 Using!! Xp Report Comment
𝗩𝗜𝗩𝗜𝗔𝗔𝗡𝗡𝗭	1727044052 Using. Report Comment
Danny	1722947850 using Report Comment
kisa catcat	1722931573 using Report Comment
MOON	1721446037 Uzing Report Comment
spongebob	1720393143 using! Report Comment
creature	1719839269 using!! :33 Report Comment
M00N	1719608831 Usin Report Comment
Millzie(⁠ ⁠ꈍ⁠ᴗ⁠ꈍ⁠)✯	1717642354 using Report Comment
ANDYANDY	1716406360 I LOVE IT, IU LOVE EGBERT WAAAAAAAAH THIS SITE IS SO COOL Report Comment
Finnegan	1712346270 using!!!!! :3 Report Comment
fries :3	1709778858 definitely using this ^_^ Report Comment
ectoBiologist	1708310880 will be using! Report Comment
ectoBiologist	1707586005 using! Report Comment