Invader Zim Layout

Tags: invader zim, gir, scene, cursor, autoplay, animated

Description:

Includes: gir gif profile pic, floating profile, autoplay of the theme song, gir cursor, neon flickering nameplate etccc. Free for everyone to use just lmk in the comments

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*BODY FONT*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 180%;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: #00ff80; }
.profile .left h1{font-family: 'Press Start 2P', cursive;
   font-size: 150%;
   transform: rotate(-10deg)}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*GIF PFP*/
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://media1.giphy.com/media/CxIz1GZEw4St2/giphy.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px} 

main{background: none}
/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/22827.png), auto !important}

/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: white !important;
   text-shadow: 0px 0px 5px 3px white !important;
   border: none !important}

a{color: white !important}
   a:hover{color: yellow !important;
    text-decoration: underline}
   a:visited: color: yellow !important}

.top a{color: #FF0000 !important}
   .top a:hover{color: white !important
    text-decoration: underline}
   .top a:visited{color: white !important}

.links a{color: #5cad58 !important}
   .links a:hover{color: white !important
    text-decoration: underline}
   .links a:visited{color: white !important}

footer .links a{color: white !important}
   footer .links a{color: yellow !important
    text-decoration: underline}
   footer .links a{color: yellow !important}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important;
   background-color: rgba(157, 21, 163, 0.8);
   padding: 1px}

.blurbs, .friends{ 
   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important
   padding: 1px}

.comments-table{ 
   border: solid black 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important;
   margin-bottom: 20px !important
   padding: 1px}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/sgt5P3Q/IZIM-101-104-Int-Zim-Living-Room-color.png);  
   background-size: 100%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/mvCmy7p/45961f8a69f4ddb1e379e23dc3c9c0e4.jpg);
   background-size: 100%;
   margin-bottom: 5px;
   border-radius: 3px;
   border: 2px solid #00ff80;
   border-top: 1px none !important;
   border-radius}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.pinimg.com/736x/6d/99/48/6d9948c35091a039a6a7717983ba4fc9--invader-zim-dreamland.jpg) !important;
   background-size: cover !important;
   height: 200px;
   margin-top: 20px;
   border-radius: 3px;
   border: 2px solid #00ff80;
   border-bottom: 1px none !important}

/*FOOTER*/
footer {
   height: 300px;
   background-image: url(https://i.pinimg.com/736x/87/90/89/879089ac1c7d863f93c9d7a0f5aa8a2c.jpg);
   background-position: centre !important;
   background-size: cover;
   border-radius: 3px;
   box-shadow: 0px 0px 5px 3px #00ff80 !important}

/*NAV BAR*/
.links{ 
   text-align: center;
   margin-bottom: -7px !important;
   background-color: rgba(214, 39, 148, 0.8) !important;
   border: 2px solid #00ff80 !important;
   border-top: none !important;
   border-bottom: none !important}

/*GIFS IN NAV BAR*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: url(https://i.ibb.co/xspTJGj/ezgif-1-387573a788.gif);
    color:  white}

/*LOGO*/
.logo {
filter: sepia(100%) hue-rotate(45deg) saturate(20);
box-shadow: 0px 0px 7px 5px white;
}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(#00ff80, black);
   border: 2px solid black;
   border-radius: 2px}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px #00ff80}

/*INTERESTS GRID*/
:root{
   --even-lighter-blue: url(https://i.ibb.co/p1jftPh/ezgif-4-c36fdfeaa5.jpg);
   --lightest-blue: url(https://i.ibb.co/fkY7RHh/zim.jpg);

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/513nTmJ/Zim-Still-2.jpg);
   --even-lighter-orange: linear-gradient(#00ff80, black)}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/ccyp7CJ/1050681-invaderzimentertheflorpus6m24s9225f-1280.jpg);
   background-size: 100%;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*URL SECTION*/
.profile .url-info{
   background-image:url(https://i.ibb.co/513nTmJ/Zim-Still-2.jpg);
   background-size: cover !important;
   border: solid #39684fcc 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #00ff80;
   margin-bottom: 20px !important}

/*ELEMENT SHAKE*/
img:hover , .url-info:hover , .online: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); }
}

/*CONTACT SECTION*/
.contact {
   margin-bottom: 20px !important;
   font-size: 12px;
   border-radius: 5px;
   border-top: 1px;
   text-align: left}

/*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: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.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/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://64.media.tumblr.com/9c67911b18ff3483b2941f91647fa623/b9348bdbb2f22f88-2d/s75x75_c1/e44cc2d143dafb4f54955d73016cba1155a4da5b.gifv)}


/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://64.media.tumblr.com/d48c3c7a79d47c82c2f8c112fadaef28/b9348bdbb2f22f88-0c/s75x75_c1/ea7209e228021e66f25ab31f8f4c1162b5a1ca53.gifv);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BUTTONS*/
button{
   color: white;
   background: url(https://i.ibb.co/TktyDqr/X09mDtI.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.ibb.co/TktyDqr/X09mDtI.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #00ff80  !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  #00ff80 !important}

/*BLURBS*/
.blurbs{ 
   background-image: url(https://i.ibb.co/x7kcBFK/invader-zim-nickelodeon-gir-wallpaper-preview.jpg);
   background-size: cover
}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 2px solid #00ff80;
   border-radius: 5px;
   background: url(https://www.hollywoodreporter.com/wp-content/uploads/2020/02/invaderzim_top-h_2020.jpg?w=1296);
  background-size: cover;
   height: 250px;
   box-shadow: 0px 0px 7px 5px #00ff80}

/*ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/XWtQmpX/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  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%) }
}

/*TV LINES*/
body:after {

  content: " ";

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));

  z-index: 2;

  background-size: 100% 2px, 3px 100%;

  pointer-events: none}

/*MAKES THINGS SHAKE ON HOVER*/
img:hover , .url-info:hover , .online: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); }

}

/*FLOATING PROFILE*/
.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/ZiXmO36xQvg//?&;amp;;autoplay=1&;loop=infinite&;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 91 comments ( View all | Add Comment )

elio !! ★	1757896500 usingg Report Comment
eleanor	1755439068 using !! Report Comment
PJ tha curlgrrl	1755162067 UUZZINGGG!!! Report Comment
oliver	1753924309 Usingg Report Comment
Alex	1753400388 Using :3 Report Comment
JimmyFour_	1749486361 Using ^_^ Report Comment
Ginni-beeeeeee	1748587777 using Report Comment
Dollyyy	1748288581 using!! Report Comment
Circuit	1746502193 Using!! Report Comment
Irenesita	1745226890 Usiiiiiing :P Report Comment
sbevo	1744800698 usinggg Report Comment
tobyterrors	1744144409 using!!! Report Comment
Kie	1738886741 Using Report Comment
elio !! ★	1734273331 Using Report Comment
Neil!!! 🍋	1729392170 using! Report Comment
SQUIIDBRAINSS	1728763982 usingg :D Report Comment
Envy	1728583173 Usandooo Report Comment
Sal	1727571786 Using!! Its so cool (o゜▽゜)o☆ Report Comment
༘Yin Yang :3.ᐟ	1727331784 using!1!1!!!1 Report Comment