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 69 comments ( View all | Add Comment )

romanceblood	1720642912 using!! i love gir and this was what i was looking for!! ^_^ Report Comment
mercy	1719925375 using!! Report Comment
MOON	1719734692 Uzing :OO Report Comment
Ryan :3	1718495607 Might use this!!! Looks rlly cool! Report Comment
kirbo	1718333382 I might use it. It looks really cool! :)) Report Comment
Wafflez !!	1717464633 USING !! Report Comment
𝗕𝗲𝘁𝘁𝘆 x3	1714167150 using :3 Report Comment
v1KK0☆ !! ! !	1713073402 USINNNNG ♪ ! !! Report Comment
MARZ💊 ^_^⁭ ⁭	1711766959 using Report Comment
SQUIIIIIIIDZ	1711679809 USING Report Comment
📀💿i͓̽n͓̽v͓̽a͓̽d͓̽e͓̽r͓̽ m͓̽a͓̽r͓̽s͓̽!💿📀	1711521061 UZINGGG!!!! Report Comment
StinkyDibHuman	1710820133 usinggggg Report Comment
Al1ci4!!	1710790138 using! Report Comment
Izzy!!!! (Jhonen's Version)	1709855349 POZZIBLY UZING!! Report Comment
the dog	1709677239 USING Report Comment
ELLERYUWU	1709667310 USING Report Comment
nyanyanya	1707943603 UZINGGG Report Comment
3lli0t	1707578364 uzing :3 Report Comment
BULLETS	1706034991 using !! x3 Report Comment
>kit<	1705265621 imma use it ty >w< Report Comment