<style> body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://files.catbox.moe/iqvjqz.jpg'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 2s ease 1s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } :root { --logo-blue: #(color number); --darker-blue: #(color number); --lighter-blue: #(color number); --even-lighter-blue: #(color number); --lightest-blue: #(color number); --dark-orange: #(color number); --light-orange: #(color number); --even-lighter-orange: #(color number); --green: #(color number); } body {background-image: url(https://files.catbox.moe/sur11j.jpg); no-repeat fixed; background-size:cover; } main { background-color: transparent; color: white; .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: "☆" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { / Add to Favorites / content: "☆" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { / Send Message / content: "☆" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { / Forward to Friend / content: "☆" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { / Instant Message / content: "☆" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { / Block User / content: "☆" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { / Add to Group / content: "☆" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { / Report Profile / content: "☆" } / the boxes have a subtle blur effect on the background / #comments, .blurbs, .blog-preview, .friends, .mood, .contact, .table-section, footer { backdrop-filter: blur(0.58px);} </style> <style> /Interests Scrollbox/ .profile .table-section { display: block; height: 500px; width: AUTO; overflow-y: scroll; font-size: 12px; border: dotted 0px!important; border-right: black!important } img{ filter: sepia(100%) saturate(0); } img:hover{ filter: sepia(100%) saturate(0) blur(1px); 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(-2px, 0px) rotate(1deg);} 30% {transform: translate(2px, 2px) rotate(0deg);} 40% {transform: translate(1px, -1px) rotate(1deg);} 50% {transform: translate(-1px, 2px) rotate(-1deg);} 60% {transform: translate(-2px, 1px) rotate(0deg);} 70% {transform: translate(2px, 1px) rotate(-1deg);} 80% {transform: translate(-1px, -1px) rotate(1deg);} 90% {transform: translate(1px, 2px) rotate(0deg);} 100% {transform: translate(1px, -2px) rotate(-1deg);} .online{ color: #dedede; animation-name: blink; animation-iteration-count: infinite; animation-duration: 2s; } main{border-radius: var(--curve) !important;} </style> <style> html:after { animation: grain 8s steps(10) infinite; background-image: url(https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg); content: ""; height: 300%; left: -50%; opacity:.1; 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%) } } .general-about .details{ padding: 2px; background: black; border: 3px inset ##99050a; background-image: url("https://files.catbox.moe/9rdriq.jpg"); background-size:cover; box-shadow: 0px 0px 10px 0px ##99050a; } </style> <style> .url-info{ background: url('https://files.catbox.moe/9rdriq.jpg'); background-position: center; height: 77px; background-size:cover; } .url-info p{ opacity: 0.0; } <style> {cursor: url(https://cur.cursors-4u.net/cursors/cur-1/cur84.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/11/23/sharp-purple-pointer-2.html" target="_blank" title="Sharp Purple Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sharp Purple Pointer" s

Tags: goth bat

Description:

Code:

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

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

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://files.catbox.moe/iqvjqz.jpg');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

 :root {

        --logo-blue: #(color number);

        --darker-blue: #(color number);

        --lighter-blue: #(color number);

        --even-lighter-blue: #(color number);

        --lightest-blue: #(color number);

        --dark-orange: #(color number);

        --light-orange: #(color number);

        --even-lighter-orange: #(color number);

        --green: #(color number);

    }

body

        {background-image: url(https://files.catbox.moe/sur11j.jpg); no-repeat fixed; background-size:cover;

}

main {

  background-color: transparent;

  color: white;

.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: "☆"

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

	/* Add to Favorites */

	content: "☆"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

	/* Send Message */

	content: "☆"

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

	/* Forward to Friend */

	content: "☆"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

	/* Instant Message */

	content: "☆"

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

	/* Block User */

	content: "☆"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

	/* Add to Group */

	content: "☆"

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

	/* Report Profile */

	content: "☆"

}

  /* the boxes have a subtle blur effect on the background  */

#comments, .blurbs, .blog-preview, .friends, .mood, .contact, .table-section, footer
{   backdrop-filter: blur(0.58px);}



</style>

<style>

/*Interests Scrollbox*/
    .profile .table-section {
        display: block;
        height: 500px;
        width: AUTO;
        overflow-y: scroll;
        font-size: 12px;
        border: dotted 0px!important;
        border-right: black!important
}

img{
  filter: sepia(100%) saturate(0);
}
img:hover{
  filter: sepia(100%) saturate(0) blur(1px);
  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(-2px, 0px) rotate(1deg);}
  30% {transform: translate(2px, 2px) rotate(0deg);}
  40% {transform: translate(1px, -1px) rotate(1deg);}
  50% {transform: translate(-1px, 2px) rotate(-1deg);}
  60% {transform: translate(-2px, 1px) rotate(0deg);}
  70% {transform: translate(2px, 1px) rotate(-1deg);}
  80% {transform: translate(-1px, -1px) rotate(1deg);}
  90% {transform: translate(1px, 2px) rotate(0deg);}
  100% {transform: translate(1px, -2px) rotate(-1deg);}

.online{
  color: #dedede;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

main{border-radius: var(--curve) !important;}

</style>

<style>
html:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  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%) }
}

.general-about .details{
padding: 2px;
background: black;
border: 3px inset ##99050a;
background-image: url("https://files.catbox.moe/9rdriq.jpg");
background-size:cover;
box-shadow: 0px 0px 10px 0px ##99050a;
}

</style>

<style>
.url-info{
    background: url('https://files.catbox.moe/9rdriq.jpg');
    background-position: center;
    height: 77px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-1/cur84.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/11/23/sharp-purple-pointer-2.html" target="_blank" title="Sharp Purple Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sharp Purple Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

/* comment section icon */

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://64.media.tumblr.com/9c93df2a47ec2fe3ca75307000c565eb/e25352d4f9ac015a-83/s2048x3072/0c5f8d9115263e84b403fe609f1c998270c51794.pnj);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>

/* friends icon */

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://files.catbox.moe/5aagj4.jpg);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>
  
  .logo {
  
  content:url("https://media.discordapp.net/attachments/1083062800752054305/1085761642761048075/image0.jpg")
  
  }
  
  </style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/9FDl2ylXLko?&;amp;;autoplay=1&;loop=1&;controls=1" title="jennifer&#x2019;s body" 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 1 of 1 comments ( View all | Add Comment )

🍰┆ʚ ᴇмɪ ɞ

1739938193

THANK YOU SO MUCH I NEEDED AN INTREST SCROLLBAR AND I DIDNT KNOW HOW TO MAKE ONE
USING THE INTREST SCROLLBAR!!
o((>ω< ))o

Report Comment