invader zim layout with auto play and loading screen!!

Tags: gir, invader zim, layout, emo, doom
Description:

this layout has auto play of the doom song extended and has 2 dancing gir gifs and a gir loading screen and it has taco and waffle snowflakes with a star shape profile picture!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by lene (https://layouts.spacehey.com/layout?id=97002) -->

<!-- (c) Layout created by lene (https://layouts.spacehey.com/layout?id=19265) -->

<style>
p.online {font-size: px;}

color:#FFF5EE;
font-size: 10px;}

font-size: 10px;}
    </style>
<style>
    body {
          background-image:url(https://cdn.discordapp.com/attachments/981506873922584646/1199110850456322058/a.jpg?ex=65c15a01&is=65aee501&hm=2d05e2eb23ae7fda332079c09682f42d638f1e7857ce066f9177134935b9e65d&)
    }
</style>
<style>
    .profile {
       
 
background:url(https://cdn.discordapp.com/attachments/981506873922584646/1199098920752664596/aaa.jpg?ex=65c14ee4&is=65aed9e4&hm=2d473ca6644c780ee6c0031381034e0431db6c27552fca2edbb17abab8a03ddf&);
color:light pink;text-shadow: 0 0 9px Pink;
    }


.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:#ff008f; 
background:#ff008f;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "👽"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🤖"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🐶"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🌌"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "⭐"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🌠"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🧇"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🌮"

}
footer {
border-radius: 15px;
background-image: 
url(https://cdn.discordapp.com/attachments/981506873922584646/1199111860914491562/aa.jpg?ex=65c15af2&is=65aee5f2&hm=c3cdb27ec870a192a09c10b463fa42460b7a3aa3218247119d5baeeeec1a915c&);
color:White; 
}
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
}

nav .top {
        background: url(https://cdn.discordapp.com/attachments/981506873922584646/1199111860914491562/aa.jpg?ex=65c15af2&is=65aee5f2&hm=c3cdb27ec870a192a09c10b463fa42460b7a3aa3218247119d5baeeeec1a915c&);
    }
    
    nav { background: black url("FFC0CB"); }

:root {
--logo-pink:#a9ff58;
--darker-pink:#a9ff58;
--darker-pink:#a9ff58;
--even-darker-pink:#a9ff58;
--darkestest-pink:#a9ff58;
--dark-pink:#a9ff58;
--light-pink:#a9ff58;
--even-lighter-pink#a9ff58;
--white:pink;
}

iframe.spotify {
    width: 100%;
    height: 250px;
    padding: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}
</style>

<div class="background"></div>
ㅤ
<div class="about"> 
layout made by leneㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
-
Pp

</div>

<div>
<h4>My Playlist(s):</h4>

</div>

<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "My Friends!!~.˚🥽"; font-size:.8rem; font-weight:bold; 
color:black; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "The Comments!!~.˚🥼"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "My Interests & My Socials!🧨"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "Say Hello!!~.˚🔬"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "About Me!!🔧"; font-size:.8rem; font-weight:bold; color:White; }
</style>


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

<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 3em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px pink;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes"><div class="snowflake">🧇</div><div class="snowflake">🌮</div><div class="snowflake">🧇</div><div class="snowflake">🌮</div><div class="snowflake">🧇</div><div class="snowflake">🌮</div><div class="snowflake">🧇</div><div class="snowflake"></div><div class="snowflake">🌮</div><div class="snowflake">🧇</div><div class="snowflake">🌮</div><div class="snowflake">🧇</div>🌮</div>

<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.discordapp.net/attachments/1104238571667324971/1179930519241244702/656bbb0aafe9fc909dc892a307ad88fa.gif?ex=657b92ed&is=65691ded&hm=8d87a48a3570d13fa687fe409ee3a8cf77d979d689f2c0e3a4394a8554b46e73&');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://i.pinimg.com/originals/c6/1f/16/c61f161185b524e7295cadc885967d03.gif" width="200" height="200"/></div>

<img src="https://i.gifer.com/origin/8c/8c588b3059aad07624e6435bcc610d8c_w200.gif"/>

<style>
.general-about .profile-pic img{
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
</style>
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 0 of 0 comments ( View all | Add Comment )