(FIXED) Green Day ☆ 21st Century Breakdown Layout!!

Tags: green day, 21st century breakdown, punk, opera rock, glitter, frutiger metro

Description:

(Before reading, this layout is inspired by the American Idiot layout Made by ✭ Fren-z ✭) This layout has autoplay of the entire album 21st Century Breakdown, has a floating cd, has a gif of the beginning of the music video of the song of the same name, has glitter and frutiger metro things!! If the layout has any errors, let me know so I can correct it as quickly as I can!!! :DD

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by RAMICIDE666 (VUELVE NERDKIDS) (https://layouts.spacehey.com/layout?id=96712) -->

<!-- (c) Layout created by R>A>M>O>N>A !! (https://layouts.spacehey.com/layout?id=96712) -->

<style>

body{background:url("https://64.media.tumblr.com/1919e6cb9993e845ec365d8ac557f3f1/95990718ddc57d66-fb/s400x600/06878b5d9b8daa99e3519794b746e6d9254f7f4c.pnj") no-repeat fixed; background-size:cover;
}

small {
font-size:100%;
}
 
main {
background-image: url("https://i.ibb.co/Hphc7yk/ezgif-2-6732b6943c.jpg");
border: 3px solid white;
}

b {
font-size: 14px;
}

time.ago {
color: white;
}

h1{
font-size: 30px !important;
color: white;
}

.profile .friends .inner b, .profile .friends .inner a{
color: white;
text-shadow: 3px white;
}

.profile h1{
color: white !important;
font-size: 14px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}

.friends p, .friends a {
color: white;
}

p{
font-size: 16px;
}

.details-table td a {
color: white;
}

.details-table td p {
color: white;
font-size: 14px;
}

.profile .table-section .heading{
background: transparent;
}

.profile .table-section .heading h4{ 
color: transparent;
background: transparent;
}

.contact .heading h4{
font-size:14px;
}

.profile .contact {
  font-family: Arial, sans-serif;
background: transparent;
border: 0px solid transparent;
}

.profile .contact a{
font-size: 12px;
}

.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 10px solid black;
}

.profile .friends .inner{
    text-align: center;
background-image: url("https://64.media.tumblr.com/5fe16f2f183eae9452354c15bae6d7ce/95990718ddc57d66-06/s400x600/eb1a1dc0257bb5401a3195366e78ccb343a4445a.pnj");
border: 3px solid white;
box-shadow: 0px 0px 10px 0px black;
background-position: center;
}

.contact .heading h4{
display:none !important;}

.contact .heading{ font-size:20px;}
.contact .heading:before{ content: url(https://64.media.tumblr.com/8c07187dcabd890413bdafb0c41b178f/95990718ddc57d66-86/s250x400/d5485f700fa8a9a7f10dcb7e02674f2b2575ccf3.gifv); 
overflow:hidden;
}

.blog-preview{
text-align: center;
background-image: url(https://64.media.tumblr.com/5fe16f2f183eae9452354c15bae6d7ce/95990718ddc57d66-06/s400x600/eb1a1dc0257bb5401a3195366e78ccb343a4445a.pnj);
color: white;
border: 2px solid white;
box-shadow: 0px 0px 10px 0px black;
}

.contact .heading h4{
font-size:14px;
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 10px solid black;
}


.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: white;
border: 3px white;
}

.button {
    background: black;
    color: white;
}

.profile-info{
background: transparent;
border: 3px solid white;
box-shadow: 0px 0px 15px 0px black;
}

.profile-info a{
font-size: 14px;
color:white;
}

.profile-info h3{
color:white;
}

.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:transparent;
}

.profile .blurbs .inner{
background: transparent;
box-shadow: 0px 0px 10px 0px black;
border: 3px solid white;
}

.profile .contact .heading, .home-actions .heading {
background-color: transparent;
color: white;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://64.media.tumblr.com/a36bd3ce5d6459870ce07c322923867c/95990718ddc57d66-78/s250x400/022df0f42620f3ae043becca9575505f712a36f5.pnj);
}

.icon {
        content: url(data:image/x-icon;base64,AAACAAEAICAAAA8ADgCoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAgIBB/////4CAgGMAAAAAAAAAAP//////////AAAAAAAAAACAgIAx/////4CAgAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAACoAAAAAAAAAAAAAAAAAAAAA//////////8AAAAAAAAAAAAAAAAAAAAAAAAAKv////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgICARAAAAC8AAAAAAAAAAAAAAAAAAAAA//////////8AAAAA//////////8AAAAA//////////8AAAAAAAAAAAAAAAAAAAAAAAAAKoCAgAUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICAgGUAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAACAgIAxAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAA//////////8AAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////////////////////////////////////////////////////////////////////wAAAAAAAAAA/////////////////////////////////////////////////////////////////////wAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////wAAAAD/////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgICAMgAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAA//////////8AAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAICAgGMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////AAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICAgAQAAAAvAAAAAAAAAAAAAAAAAAAAAP//////////AAAAAP//////////AAAAAP//////////AAAAAAAAAAAAAAAAAAAAAAAAACqAgIBBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAvAAAAAAAAAAAAAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAAAAAC//////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICAgAT/////gICAMgAAAAAAAAAA//////////8AAAAAAAAAAICAgGX/////gICARAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////////////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//////////////////5////+f////n////gf///ud///vn3//35+//78P3//8k///e53v//ee//73nvf+75938ABgAPAAIAD+7593/vee9//3nv//e53v//yT//+/D9//35+//++ff//7nf///gf///+f////n////5///////8=);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
}


h4 {
font-size: 14px !important;
color: white;
  font-family: Arial, sans-serif;
 }

p {
  font-family: Arial, sans-serif;
color: white;
   } 

   a {
font-size: 14px;
     color: white; 
   }


a:hover {
     color: orange; 

}
    .count {
        color: orange;
    }

.profile .friends .person p {
color: white;  
}
.profile .friends .person p:hover {
color: orange;  
}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add friend */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://64.media.tumblr.com/059ad876b0c476fa39e8cc5921131a22/95990718ddc57d66-07/s75x75_c1/65df7740540c8facab6ac9e6121b84de28997a76.gifv)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

.profile .table-section .details-table td {
background:url("https://64.media.tumblr.com/e15bffc66fd4eca8525cf75e8b417ba7/95990718ddc57d66-62/s400x600/e17c5433e702c07c9e91f861127ff9d41635cbce.gifv");
background-image: center;
border: 3px solid white;
box-shadow: 0px 0px 10px 0px black;
}


.profile .friends .comments-table td {
background: black;
border: 2px solid white;
position: center;
}

.profile .friends .comments-table td:first-child {
background: url(https://i3.glitter-graphics.org/pub/2001/2001633sgs6k1j42e.gif);
}

.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3); 
}

.comments-table td:first-child img{
border: 5px solid black;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);

}

.comment-replies{
border: 3px solid white;
color: white;
}

.general-about .details p:not(.online){
color: white !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}

.general-about .details a{
  font-family: Arial, sans-serif;
color: white !important;
font-size: 14px;
}

nav .links .special a {
color: orange;
}

nav{ 
color:white;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: black;
box-shadow: 0px 0px 10px 6px black;
}

nav .links a:hover {
color: orange;
}

nav .top{
background-color: transparent;
box-shadow: 0px 0px 10px 6px black;
}

nav .top a{
color: white !important;
}

nav .top label{
color: white;
}

  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px solid white;
    

  }


.profile .url-info {
border: 0px solid transparent;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px black;
}
.profile .table-section {
border: none;
}


nav .links a{
color: white;
  font-family: Arial, sans-serif;
font-size: 14px;
}

table.comments-table {
border: 2px solid black;
background: black;
}


footer p{
color: white;
font-size: 100%;
}

footer a{
color: white;
}

footer {
color: white;
box-shadow: 0px 0px 15px 6px black;
text-decoration: underline;
text-decoration-style: dotted;
background-color: black;
border: 3px solid white;
}    

</style>

<style>
    .table.comments-table:{
    border-color:orange;}
</style>

<style>

h1{
animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

</style>

<style>
table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-width: 5px;
}

</style>

  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>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkred;}

    ::-webkit-scrollbar-track {
    background:white;}
</style>

<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkred;}

    ::-webkit-scrollbar-track {
    background:white;}
</style>

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.3;
  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%) }
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
</style>

<style>
img:hover , .url-info: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>
.online {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/rAO9WITHtuU?si=mmcNaILD_RQYAwVx //?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

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

Teddyy6369	1769536030 Theres a small issue I have, it's showing some pieces of the code in the "about me" section. Is that an error from me or you? (sorry I'm new to Spacehey) Report Comment
Teddyy6369	1769536030 Theres a small issue I have, it's showing some pieces of the code in the "about me" section. Is that an error from me or you? (sorry I'm new to Spacehey) Report Comment
Teddyy6369	1769534374 using, this thing is awesome, dude. Report Comment
favoriteson	1752917127 using i love green day Report Comment
commonfreys	1751721996 USING!!!! ITS SO KEWL TO USE OMG!!! Report Comment
sophia	1748913589 using! Report Comment
roni.disgrace	1748060231 fav green day album!! using :P Report Comment
mannie	1746429034 really great layout!! using ✦ Report Comment
- love, miles	1742597498 using !! Report Comment
joetroh	1742413493 USING!!!!!!!’ THIS IS TOTES EPIXXX!!! zomg. you’re like. so cool for making this, dude Report Comment
jeannes	1741497380 using!! thankyouuu:P Report Comment
Sophia	1740350560 ussiinnggg Report Comment
black nugget	1739676483 uisoimg Report Comment
d3adl4monsoon	1739638101 using! Report Comment
ace	1738670430 using Report Comment
Chuchi	1736242461 USINGG, I LOVE IT :33 Report Comment
xXLylaloopsy_Xx	1731621441 USINGGG!! TYY :3333 Report Comment
⛧⦻𝖆𝖈𝖊𝖊𝖊⦻⛧	1720028965 using!! Report Comment
XxManicMadsxX	1716167849 Omg this looks so good ^^ Report Comment
CharlatansAndSaints	1716090153 Using this!! Absolutely gorgeous layout :DD Report Comment DUDE THIS MIGHT BE SO STUPID BUT U ALSO R USING AS PFP A GIF THAT I MADE WHATTTTTT THIS IS SO COOL!!!!!!!!!!!!!! by RAMICIDE666 (VUELVE NERDKIDS); 1716108661; Report YOU MADE THE GIF???? THATS ACTUALLY SO COOL HWAT by CharlatansAndSaints; 1732475013; Report YEAH like i only added the glitter to the heart grenade BUT TY FOR USING IT!!!!!!!!!!!!!! by RAMICIDE666 (VUELVE NERDKIDS); 1732500989; Report