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 nat ౨ৎ (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 249 comments ( View all | Add Comment )

Dylan	1737193283 using Report Comment
mims	1737160813 using !! Report Comment
marlena ⋆˚✿˖°	1737119696 using! Report Comment
spilled_stardust	1737027274 using <3 Report Comment
salem :3	1737010958 using :3 Report Comment
victoria <3	1736991781 using Report Comment
voodoog1rl	1736853075 Usingg Report Comment
Daria	1736807993 Using <3 Report Comment
danae	1736762499 using!! Report Comment
giuli	1736734223 using! Report Comment
zolly 𖦹	1736726795 i’m going to try and use it tysm!! Report Comment
ellzbellz	1736615040 usingg tysm Report Comment
letmefindausername	1736606657 gonna use it thank you! Report Comment
Batty Lovewing	1736556980 Using Report Comment
Nick	1736505127 Hey gonna use your theme okay. Report Comment
riyah!!	1736498102 using <3 Report Comment
paige !	1736299757 using :)) Report Comment
𝄞 liana ⋆.˚	1736262212 using ^^ Report Comment
sema.exe	1735784910 using!!! Report Comment
☆Veronica☆♬⋆.˚	1735748258 using! Report Comment