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

𝗕𝗲𝘁𝘁𝘆 x3	1714167150 using :3 Report Comment
v1KK0☆ !! !! !	1713073402 USINNNNG ♪ ! !! Report Comment
Mars ฅ^•ﻌ•^ฅ	1711766959 using Report Comment
SQUIIIIIIIDZ	1711679809 USING Report Comment
🕸️🕷️𝑃ℎ𝑒𝑜𝑏𝑒𝑟𝑧𝑧 𝑋𝐷🕷️🕸️	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
wizzard	1704414320 Using! Report Comment
🐾 stickie	1704334049 using :3 Report Comment
dakota	1704004692 usingt :3 Report Comment
STATIC	1703805478 using :3 Report Comment
Soft Fuzzy Man	1703384384 USING!! :D Report Comment
Soft Fuzzy Man	1703384382 USING!! :D Report Comment