(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 (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 22 comments ( View all | Add 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
calicojack	1742597498 using !! Report Comment
a guy called kill	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
Sop ;p	1740350560 ussiinnggg Report Comment
black nugget	1739676483 uisoimg Report Comment
d3adl4monsoon	1739638101 using! Report Comment
ace	1738670430 using Report Comment
DJSng backup	1737984736 using!!! Report Comment
Chuchi	1736242461 USINGG, I LOVE IT :33 Report Comment
Sk8ergrlLyla117	1731621441 USINGGG!! TYY :3333 Report Comment
⛧⦻𝖆𝖈𝖊𝖊𝖊⦻⛧	1720028965 using!! Report Comment
XxMad$xX #1 Frank Iero GOONER	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; 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; 1732500989; Report
ɆȺsŧ Ⱥnǥɇł Nøwħɇɍɇ	1715387060 Using omg so beautiful! Report Comment
✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭	1714618483 its not working :( the background wont show nor the Cd online thingy :(( Report Comment And gif not working ;-; by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1714618514; Report Yes, I know, I'm going to see if I can solve the errors cuz the same thing happened to all my layouts :-: by RAMICIDE666; 1714649267; Report Okie :3 by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1714705954; Report Srry 4 the delay!!! The layout is fixed!! u can use it now if u want :3 by RAMICIDE666; 1715272218; Report TYYY by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1715311119; Report
imnotactivemeow	1708204324 USINGGGGGGGG :3333 Report Comment