thingy thatz inspired by dib membrane

Tags: blue, cyber, invader zim, dib

Description:

[note: this layout might not be the best on mobile D:] please c0mment if using! m0stly inspired by dib :3 it might n0t be very dibby th0ugh i m0stly had blue stuff and cyber stuff in mind!! please note that im a beginner at c0ding and i m0stly have t0 search h0w t0 make stuff happen and d0 a thingy

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
p{ 
   font-family: 'Pixelify Sans', cursive;
   font-size: 120%;
   color: lime;

}
h1, h2, h3, h4, h5 {
   font-family: 'Pixelify Sans', cursive;
   font-size: 130%;
   color: blue;
   text-shadow: 1px 1px 1px black;
}


body{
   background: url("https://img.freepik.com/free-vector/blue-futuristic-waves-background-vector-with-computer-code-technology_53876-110867.jpg") fixed;
   background-size: cover;


}



:root {
  --light-gray: blue;
  --gray: blue;
  --dark-gray: blue;
  --darker-gray: blue;
  --logo-blue: ;
  --darker-blue: green;
  --lighter-blue: ;
  --even-lighter-blue: ;
  --lightest-blue: ;
  --dark-orange: blue;
  --light-orange: ;
  --even-lighter-orange: url(http://img1.coolspacetricks.com/images/backgrounds/black/black6.GIF);
  --green: black;

}



footer {
   border: 10px solid blue;
   border-radius: 10px;
   background-image: url(https://img.myloview.com/stickers/binary-circuit-board-future-technology-blue-cyber-security-concept-background-abstract-hi-speed-digital-internet-motion-move-blur-pixel-vector-400-122676767.jpg);


}



  .profile {
    background: url(https://img.freepik.com/free-vector/gradient-technology-cyber-background_23-2149112205.jpg); 
    border: 10px solid blue;
    border-radius: 10px;
    background-size: cover;


}


main {
   background-color: transparent;

}

.profile h1 {
   color: lime;
}

.contact {
   border-radius: 10px;
   border: 10px solid lime;
   background-image: url(https://img.freepik.com/premium-photo/digital-technology-abstract-background_7247-1828.jpg);
   Width: 100px;
   Height:100px;
   text-shadow: lime;
   color: blue;


}



h1{

  animation: type 3s steps(27);

  color: blue;

  font-size: 10px;

  font-family: Pixelify Sans;

  white-space: nowrap;

  overflow: hidden;


}


@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}


@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}


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

animation: float 4s;

animation-iteration-count: infinite;

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


}


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

animation: float 4s;

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);

}

nav .top {
    padding: 15px 10px 14px 10px;
    display: flex;
    height: 100px;
    background-color: #C3EA00;
    background-image: linear-gradient(#C3EA00, #D7FF0F, white);
}
    border:2px solid lime;
    border-radius: 15px;
    font-size: 70%;
  }
  .profile .table-section .heading{
    background: url(https://img.freepik.com/premium-photo/digital-technology-abstract-background_7247-1828.jpg);
    border: 1px solid lime;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    background-size: cover;

}



  .profile .table-section .heading h4{
    color: blue;
    text-shadow: 1px 1px 2px green;
  }
  .profile .table-section .details-table td{
    background: ;
    padding-right: 10%;
  }

 .profile .friends .heading{
    background: url(https://img.freepik.com/premium-photo/digital-technology-abstract-background_7247-1828.jpg?size=626&ext=jpg&ga=GA1.1.1413502914.1696896000&semt=ais);
    color: blue;
    text-shadow: lime;
    text-align: center;
    border: 1px solid lime;
    border-radius: 10px;


}


  .profile .friends .heading h4{
    text-align: center;
    color: blue;
    text-shadow: 1px 1px 2px green;


}


.profile .blurbs .section :nth-child(2) {
	background-image: url(https://img.freepik.com/premium-photo/digital-technology-abstract-background_7247-1828.jpg);
        margin-top: -5px; 
	padding: 18px;
        border: 1px solid lime;
	border-radius: 10px;
        color: blue;
        text-shadow: 1px 2px 2px green;




}


.general-about {
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .46s;


}


.online {
   content:url("https://ct.pimp-my-profile.com/online/myspacenowonlineicons20.gif");
   border: 1px solid lime;

}

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.stack.imgur.com/icO0K.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
  filter: hue-rotate(70);
  z-index: 100;

}
@keyframes grain
  70% { transform:translate(0%, 15%)

}




.general-about .profile-pic img {
   content: url(https://img1.picmix.com/output/pic/normal/1/2/9/4/11364921_0ff79.gif);
   border: 1px solid lime;
}


.profile-pic img, .friends-grid img, .inner img{
    filter: opacity(70%);
}

img:hover {
  filter: opacity(100%);


}

main {
background:  black;
border-radius: 14px;
padding: 0;
font-size: 85%;
color: lime;
}

nav, footer, .profile .contact {
display: inherit !important;
opacity: 1 !important;
border-radius: 12px;
}
main {
background:  ;
border-radius: 12px;
border: transparent;
padding: 0;
font-size: 90%;
color: lime;
}
nav .top {
  background: transparent;
}

nav .links {
  background: transparent;
  font-family: 'Pixelify Sans', cursive;
}

nav {
  background-image: url(http://img1.coolspacetricks.com/images/backgrounds/black/black6.GIF);
  border: 2px solid blue;
  background-size: cover;
 
}



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

DIGISYS	1704591671 using!! Report Comment i have a question, the about me and ppl id like to meet portions arent lining up with the bubbles set for them to be in? and the text for them isnt blue its green? how do i fix this ?? by DIGISYS; 1704592867; Report im s0rry, im n0t sure h0w helpful this will be but heres the exact c0de i put f0r it, im s0rry if this isnt that helpful D: im n0t really sure what happened but maybe try t0 make sure a symb0l thingy wasnt left 0ut .profile .blurbs .section :nth-child(2) { background-image: url(https://img.freepik.com/premium-photo/digital-technology-abstract-background_7247-1828.jpg); margin-top: -5px; padding: 18px; border: 1px solid lime; border-radius: 10px; color: blue; text-shadow: 1px 2px 2px green; by DIB!!!!!!!!; 1704609502; Report
Ash!!	1702209087 using Report Comment
$Zephyr$	1700862897 Using Report Comment
nikolai	1698885813 using Report Comment
harold4laifu	1698583673 Going to try it out! Report Comment
STANN!!X3	1698018106 USING !! :3 Report Comment
STANN!!X3	1698018105 USING !! :3 Report Comment