(FIXXING) Green Day ☆ Kerplunk! Layout!!

Tags: green day, kerplunk, glitter, green, white, stars, punk
Description:

(This layout was requested by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭, tysm much for requesting it 🫶) this layout has autoplay of the entire album Kerplunk!, has a floating cd, has a gif of the beginning of the animated music video of Nuclear Family (Only when it appears Laurie), changes the Spacehey logo to the flower on Laurie's t-shirt, has glitter and stars 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=97104) -->

<style>

body{background:url("https://media.discordapp.net/attachments/779568566248407053/1199333823985500220/260_sin_titulo_20240123094357.png?ex=65c229aa&is=65afb4aa&hm=8a99d507c24064a7d4cd55e0ff31cb84038dbc7bac9246d4ec3018ec3865c1f7&.png") no-repeat fixed; background-size:cover;
}

small {
font-size:100%;
}
 
main {
background-image: url("https://media.discordapp.net/attachments/779568566248407053/1199333823985500220/260_sin_titulo_20240123094357.png?ex=65c229aa&is=65afb4aa&hm=8a99d507c24064a7d4cd55e0ff31cb84038dbc7bac9246d4ec3018ec3865c1f7&.png");
border: 3px solid green;
}

b {
font-size: 14px;
}

time.ago {
color: green;
}

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

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

.profile h1{
color: black !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: black;
}

p{
font-size: 16px;
}

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

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

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

.profile .table-section .heading h4{ 
color: transparent;
background: transparent;
}
.profile .table-section .heading:before{ content: url(https://media.discordapp.net/attachments/779568566248407053/1199360330783010907/261_sin_titulo_20240123112931.png?ex=65c24259&is=65afcd59&hm=7c6764b94616a43d3296499301738458d45c446987756bf0c75dcdd0ad4380ee&.png); 
}

.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: 5px solid green;
}

.profile .friends .inner{
    text-align: center;
background-image: url("https://media.discordapp.net/attachments/779568566248407053/1199333824295874601/0_oie_glitters_5.gif?ex=65c229aa&is=65afb4aa&hm=e13573919cc722d99a39db3e286a0498eaf44844c4f917a754594a4cc05e5aa6&.gif");
border: 3px solid green;
box-shadow: 0px 0px 10px 0px green;
background-position: center;
}

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

.contact .heading{ font-size:14px;}
.contact .heading:before{ content: url(https://media.discordapp.net/attachments/779568566248407053/1199346630676193452/lv_0_20240123103503.gif?ex=65c23597&is=65afc097&hm=d8a7ea88b0fb4fbbc642c86bfcb788f001b94705c08103de86d83a928fcf7a2a&.gif); 
overflow:hidden;
}

.blog-preview{
text-align: center;
background-image: url(https://media.discordapp.net/attachments/779568566248407053/1199333824295874601/0_oie_glitters_5.gif?ex=65c229aa&is=65afb4aa&hm=e13573919cc722d99a39db3e286a0498eaf44844c4f917a754594a4cc05e5aa6&.gif);
color: white;
border: 2px solid green;
box-shadow: 0px 0px 10px 0px green;
}

.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 green;
}

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

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

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

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

.profile-info h3{
color:green;
}

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

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

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

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://media.discordapp.net/attachments/779568566248407053/1199326417310191706/220_sin_titulo_20240123091449.png?ex=65c222c4&is=65afadc4&hm=2996ca308efc6fc8137b1ac3fe34b03445c152922e484ee22b911cc3eb4f03ab&.png);
}

.icon {
        content: url(https://media.discordapp.net/attachments/779568566248407053/1199342727075205201/262_sin_titulo_20240123101933.png?ex=65c231f4&is=65afbcf4&hm=1dde094efedc95c7426266eff21c61f8adccbee3466402bd61db683dbb51a0fd&.png);
        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: black;
  font-family: Arial, sans-serif;
 }

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

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


a:hover {
     color: green; 

}
    .count {
        color: green;
    }

.profile .friends .person p {
color: black;  
}
.profile .friends .person p:hover {
color: black;  
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add friend */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://media.discordapp.net/attachments/779568566248407053/1199325745231708180/greenswirl.gif?ex=65c22224&is=65afad24&hm=8540017a35e61674709d6d3c5d422e5b5e5aae2fe2ea8e961a34d72eb2f3c97b&.gif)
} 

.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://media.discordapp.net/attachments/779568566248407053/1199351465785970688/lv_0_20240123105402.gif?ex=65c23a18&is=65afc518&hm=2369624d561e06deba4b2219a88413fb898b72aa4bca68132a5817b0255680bf&.gif");
background-image: center;
border: 3px solid white;
box-shadow: 0px 0px 10px 0px black;
}


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

.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 green;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);

}

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

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

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

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

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

.links{
width=810px;
}

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

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

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

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

nav .top label{
color: green;
}

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

  }


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


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

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


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

footer a{
color: black;
}

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

</style>

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

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

</style>

<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>

<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;}
}

.col, main, footer, nav::before, .online, nav .top {
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>
.online {
  animation: rotation 8s infinite linear;
}

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

<style>
:root{
/* [background color]: header on top */
 --logo-blue:url(https://media.discordapp.net/attachments/779568566248407053/1199356056455888896/258_sin_titulo_20240123092948.png?ex=65c23e5e&is=65afc95e&hm=efa78e119aa8a6fd33a61cdbd6dfb3d5fdbc37653c6d086066a0660461a238d0&.png);
}

nav .links {
    background-image:url(https://media.discordapp.net/attachments/779568566248407053/1199356056455888896/258_sin_titulo_20240123092948.png?ex=65c23e5e&is=65afc95e&hm=efa78e119aa8a6fd33a61cdbd6dfb3d5fdbc37653c6d086066a0660461a238d0&.png);
    padding: 3.5px 16px 5.5px 16px;
}

</style>

<style>

.logo {

content:url("https://media.discordapp.net/attachments/779568566248407053/1199333824694337587/258_sin_titulo_20240123092937.png?ex=65c229aa&is=65afb4aa&hm=3a5944635f874ec48d5703f1c71c1cac8edeeaf6897a74d9286caf7c05fbd1d1&.png");

}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/cT5jIMkXlHg?si=diQuZx7A73xqVASk //?&;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.