witchy purple layout

Tags: purple, layout, whimsigoth, goth, gothic, 90s

Description:

if using please give me credits/lmk :) . Custom witchy 90s purple whimsigoth layout i made (inspired by charmed). Has animation intro and autoplay music (How Soon Is Now - Charmed theme song/Love Spit Love cover)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by natasza 𝜗𝜚 (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 20 of 426 comments ( View all | Add Comment )

Siniztry ♡	1764085864 using Report Comment
Ronnie	1763932237 usingg ty!! Report Comment
maple	1763869471 using :33 Report Comment
kittysku11z⋆˚࿔	1763824420 Using!! Report Comment
vampirepartygirl	1763818108 i would love to use this but with another song, if that's okay? and how can i change it? Report Comment
tave	1763792472 Using Report Comment
Ririka	1763664389 Using!~ Love it sm!! Report Comment
Rian	1763543022 Will be using! Thank you sm! Report Comment
caseydilla	1763416878 using! Report Comment
Elara	1763329779 Usando, muchas gracias Report Comment
Elara	1763329777 Usando, muchas gracias Report Comment
3ver_crescent	1763254277 Using, thanks!! Report Comment
stitches :(	1763043207 using :p Report Comment
Vulpeculiar	1762880793 using Report Comment
bayleaf	1762847924 Using! Report Comment
charlie!	1762463631 usando! Report Comment
Sophia	1762325384 using!! Report Comment
ily !	1762276324 using !! Report Comment
Mel	1762023157 Using!! Report Comment
nanaluvschaseatlantic	1762008430 usingg !! Report Comment