invader zim with cursor layout

Tags: invader zim, scene, scenecore, emo

Description:

created an invader zim since its my fav show, feel free to use and change stuff!

Preview:

click on the image for a larger preview

Code:

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

<iframe width="300" height="50" src="https://www.youtube.com/embed/R6u1m4eOQFc//?&;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>
:root {
--themecolor5: #cc00ff;
--themecolor4: #39FF14;
--themecolor1: transparent;
--themecolor3: transparent;
--themecolor2: transparent;
}

  body{
    background: var(--themecolor1);
  }

  main{
    background: var(--themecolor2);
  }

  p{
    color: var(--themecolor5);
  }

  h1{
    color: var(--themecolor5);
  }

  h4{
    color: var(--themecolor4) !important;
  }

  a{
    color: var(--themecolor4) !important;
  }

  .heading{
    background: var(--themecolor3) !important;
  }

  .contact, .url-info, .table-section{
    border: 2px solid var(--themecolor3) !important;
  }

  .comments-table{
    border: var(--themecolor5);
  }

  .comments-table tr td{
    background: var(--themecolor4) !important;
  }
  .comments-table p {
    color: var(--themecolor5);
  }

  .profile-info .inner{
    color: var(--themecolor5);
  }

  .profile-info{
    border: 2px solid var(--themecolor4);
  }

  .details-table tr td{
    background: var(--themecolor3) !important;
    color: var(--themecolor5) !important;
  }

  .count {
    color: var(--themecolor4);
  }

  footer, nav .top{
    background: var(--themecolor2) !important;
  }

  nav .links{
    background: var(--themecolor3);
  }

  .comment-replies{
    border: 4px solid var(--themecolor4);
  }
  
  </style>
<style>
.profile .friends .heading{
    background: #55FF00;;
    color: #D11AFF;;
    text-shadow: 1px 1px 2px #D11AFF;;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 2px #D11AFF;
  }
</style>
<style>
body{
background: url(https://64.media.tumblr.com/4c1db8ea2621213b0820a8ca9578d189/3d7cbd41e96c8d20-21/s500x750/9b59d18be07726fc78dbd036848aff7bc08bb1a6.gifv) no-repeat center center
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
<style>
body{
background-color:transparent;
}
.profile{
}
main{
background-color:transparent;
}
</style>
<style>
  /* Contains both the left and right panels */
  .profile {
    display: grid;
    grid-template:
      "left"
      "right";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  /* normally the width is 40%, try changing back to see why this
doesn't look good */
  .profile div.col.w-40 {
    width: 100%;
  }

  /* left column */
  .col.w-40 {
    grid-area: left;
    display: grid;
    grid-template:
      "general-about contact"
      "header  table2 "
      "url-info table2 "
      "mood     table1 ";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  /* Your title/Name */
  h1 {
    grid-area: header;
  }

  /* Your picture/online status */
  .general-about {
    grid-area: general-about;
  }

  /* Mood/blog/pics */
  .mood {
    grid-area: mood;
  }

  /* contact */
  .contact {
    grid-area: contact;
  }

  /* spacehey URL */
  .url-info {
    grid-area: url-info;
  }

  /* General/Music/etc */
  .table-section:first-of-type {
    grid-area: table2;
  }

  /* The other table */
  .table-section:last-of-type {
    grid-area: table2;
  }

  /* right column stuff */
  /* right */
  .col.right {
    grid-area: right;
    display: grid;
    grid-template:
      "blurbs blog-preview"
      "blurbs friends"
      "comments comments"
      "comments comments";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  /* contains "View Blog" Button */
  .blog-preview {
    grid-area: blog-preview;
  }

  /* contains about me */
  .blurbs {
    grid-area: blurbs;
  }

  /* Friends pictures grid */
  .friends:not(#comments) {
    grid-area: friends;
  }

  /* comments */
  #comments {
    grid-area: comments;
  }

  /* clears margins making grid-gaps more uniform
" > *" selects all child elements */
  .profile>*,
  .col.w-40>* .col.left>*,
  .profile .blurbs,
  .profile .contact,
  div.col.w-40.left div.table-section,
  div.col.w-40.left div.url-info {
    margin: 0px;
  }
</style>
<style>
  * {
    cursor: url(https://cur.cursors-4u.net/toons/too-4/too354.ani), url(https://cur.cursors-4u.net/toons/too-4/too354.png), auto !important;
  }
</style><a href="https://www.cursors-4u.com/cursor/2006/04/01/too354-2-2-2-2.html" target="_blank" title="Invader Zim - Gir"><img src="https://cur.cursors-4u.net/cursor.png" alt="Invader Zim - Gir" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
  .profile-pic>img {
    display: none;
  }

  .profile-pic:after {
    background-image: url("https://64.media.tumblr.com/50874d5a06c773f6f513976ccdfed0b8/b617e73e42a28212-51/s100x200/d95fe19b700b41383c7c2e869b5d073bff717acf.gifv");
    display: inline-block;
    content: ""
  }

  .blog-entry .profile-pic:after,
  .bulletin .profile-pic:after {
    background-size: cover;
    width: 110px;
    height: 110px;
  }

  /* blogs, bulletins */
  .general-about .profile-pic:after {
    background-size: cover;
    width: 160px;
    height: 160px;
  }

  /* profile */
</style>
<style>
  @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

  * {
    font-family: "Press Start 2P", cursive;
  }
</style>
<style>
.profile .blurbs .heading,
  .profile .friends .heading {
    background-color: #CC00FF;
  }
</style>
<style>
  .profile .contact .heading, 
  .profile .table-section .heading{
      background-color: <style>
.profile .blurbs .heading,
  .profile .friends .heading {
    background-color: #CC00FF;
 
  }
</style>
<style>
  .profile .contact .heading, 
  .profile .table-section .heading{
      background-color: #CC00FF;

</style>
<style>
.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);
}
.online img {
        content: url(https://64.media.tumblr.com/6cbf50d286f93d4b96856ba92dd77981/0029a9e9ab07cc70-9f/s250x400/4a0860b62ec1b04ad05b0992b722741a90636385.gifv);}
<img src="https://64.media.tumblr.com/1a1b97a7eab0527cf7978871759e8ef1/3d7cbd41e96c8d20-42/s250x400/2656dd3cac402f05eb76a17ce583a0bce6edfeb4.gifv" alt="" width="3000px"/></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.