john / june egbert layout ( homestuck )

Tags: homestuck, simple, blue, green, white, clouds, john egbert, june egbert, layout

Description:

credit me if you want but PLEASE comment if using!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by hal (https://layouts.spacehey.com/layout?id=38370) -->

<style>

img:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;

}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>

<style>
body {
  background-image: url(https://static.wikia.nocookie.net/mspaintadventures/images/d/d5/Field.jpg/revision/latest/scale-to-width-down/662?cb=20100505153850);
  background-attachment: fixed ;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  background-color: blue;
}
</style>
<style>
    .profile {
       
 
background: url(https://garden.spoonflower.com/c/13812389/p/f/m/493g-eORsUUPf9q1H_ZnKbFye65ava0yiQsacMtW1UKxgVB91TZZ/Black%20and%20Gray%20Checker%20Pattern.jpg);
color:White;
    }
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Dashed; 
 border-width:5px; 
 border-color:White; 
background-image: url(https://i.pinimg.com/564x/0b/67/96/0b679656ca7ee45626d54e01c3c476b5.jpg?width=657&height=657);
}
footer {
border-radius: 15px;
background-color:black ;
color:White; 
}
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }
    #music:hover {
        width: 0px;
}
nav .top {
        background: url("http://www.mspaintadventures.com/storyfiles/hs2/03411.gif");
    }
    nav { background: black url(""); }
:root {
--logo-blue: White;
--darker-blue:white;
--lighter-blue:black;
--even-lighter-blue:#222121;
--lightest-blue:black;
--dark-orange:White;
--light-orange:black;
--even-lighter-orange:black;
--green:black;
}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}
</style>
<div class="background"></div>
<div class="about"> ㅤ
</div>
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:black;
    }
</style>
<style>
main {
background:  ;
border-radius: 12px;
border: 12px solid #000000;
padding: 0;
font-size: 90%;
color: #39FF14;
}
</style>
<style>

.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.ibb.co/YW4F2ZL/tinier-june.png)
</style>

<style>
 .comments-table td:first-child img {
        border-radius: 500px;
    }
</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://t3.ftcdn.net/jpg/01/30/89/60/360_F_130896025_AmxPagZnhnEjivDvFGlwAhND3LOUSF7S.jpg);
  background-size: 200px !important;
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>

<style>
img:hover{
  filter:sepia(100%) saturate(0) blur(1px);
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Handjet&display=swap');
body{
font-family: 'Handjet', sans serif;
font-size: 125%;
}
</style>

<style>
        .online{content:url(https://i.ibb.co/ggMsH8m/nerd-online.gif) }
    </style>

<style>
table.comments-table{
display: block;
height: 250px!important;
overflow-y: scroll;
}
</style>

<style>
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
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>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
HTML,BODY{cursor: 
url(https://cur.cursors-4u.net/others/oth-7/oth667.cur),
auto;}


A:hover{cursor: 
url(https://cur.cursors-4u.net/others/oth-7/oth667.cur),
auto;}
</style>

<style>
 .profile .friends .person img {
        border-radius: 500px;
    }
</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 95 comments ( View all | Add Comment )

amporaS	1731621551 using!!!!!!!! Report Comment
Cas XD	1730702292 using!! Report Comment
. . ? Liam 𑄝//	1730368009 using!! ^^ Report Comment
⸜(ˊ▽ˋ*)⭑genogeno cure ! [WIP]	1730327524 using Report Comment
chokingPanic	1729978715 :33< using !! Report Comment
:3	1729970413 using!!! Report Comment
Gir!1!	1728770316 uzing ^w^ Report Comment
johndave4life	1728575513 using, thxs!!! :3 Report Comment
Banana Boi	1728238179 USING!! Report Comment
andrew	1727540280 im gonna use ts!!! Report Comment
⚠️👁️\|Liam\|♊️🪣	1727161558 DEFF USING I LOVE THIS Report Comment
iforgotmygender	1726939447 usinggg!!! Report Comment
ALEXIS	1726616237 using!!! Report Comment
sam/finn	1726451098 using :P Report Comment
Puppyplay🐾	1724882070 Using! Report Comment
Ghostyy >_0	1723642660 - Using!! Report Comment
EricCartmanReal	1723480269 using Report Comment
rubber duck	1721851812 USING Report Comment
сенчаш	1721654193 usingg1!! Report Comment
K1ZO	1721629313 using :3 Report Comment