(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 RAMICIDE666 (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.

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

❝ @[tyziasfan] Enji!	1718452238 Is there a way to use this layout without the music? Report Comment Yeah! Simply remove the part at the end that says iframe (is at the end) and you can use it without music, although I do not recommend it cuz I am fixing a couple of errors it has by RAMICIDE666; 1718459379; Report
⛧⦻𝖆𝖈𝖊𝖊𝖊⦻⛧ #1 FUNYUN LOVER	1715193898 usinggg Report Comment
Tomseloy	1706316606 Usando Report Comment
✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭	1706022318 tysm! 4 the layout! Using!!! Report Comment