(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 R>A>M>O>N>A !! (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 6 of 6 comments ( View all | Add Comment )

CharlatansAndSaints	1716090153 Using this!! Absolutely gorgeous layout :DD Report Comment
ɆȺ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 R>A>M>O>N>A !!; 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 R>A>M>O>N>A !!; 1715272218; Report TYYY by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1715311119; Report
st. jimmy :33	1708204324 USINGGGGGGGG :3333 Report Comment
batteryxacid	1706112234 AHHH LOVE ITTT Report Comment
✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭	1706010156 Omg ahhhh!!!! I luv this its looks super cute!!! If you could? could u make a kerplunk one? no is fine :3 Report Comment OMG YESYESYESYES I WAS THINKING ABOUT MAKING A KERPLUNK LAYOUT!!!! Maybe later I will do it :333 by R>A>M>O>N>A !!; 1706010261; Report AHh!! okie if u do I would def use X))) by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1706010330; Report Okokokok Then I'll do it!!! Honestly, thank you for requesting a layout, I have fun making them and it makes me even happier to make one to order 🫶🫶 (sorry for the bad english im using the translator lol) by R>A>M>O>N>A !!; 1706010733; Report Yezz ahh and no it's fine :) I understand English is hard! I'm still trying to learn Spanish! And ty again by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; 1706014068; Report