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

༺IluvKenny༻	1778542298 Usingg Report Comment
𝐾𝑎𝑦_𝑥𝑋	1777601944 Usingg!! Report Comment
✰dorian✰	1777325531 using Report Comment
GlassOnion	1777140093 using! Report Comment
M4RI0NETTE	1776986268 Using. ♡ Report Comment
dieselfuel	1776951230 using Report Comment
⋆.˚rai	1776932789 Using! Report Comment
chuuchou	1776104807 using ^^ Report Comment
✧Fadwa	1776001528 Using Report Comment
✧Fadwa	1776001526 Using Report Comment
Junkyard Ghost	1775979899 using.. but is the song still working? idk if it's my browser messing up and not playing it or if the video you used got deleted. oh well, great theme!! thanks Report Comment
Mah ★	1775887125 Usando!! Report Comment
Akazatsuu	1775400740 using! Report Comment
artemis ꩜ alice	1774942125 using!! Report Comment
Loviiseo	1774900404 Using! Report Comment
atuaaa	1774801234 using Report Comment
．☆．ket 。．:*･ﾟ	1774452050 using!! thanks!! > 0 < Report Comment
aflairfor.alex	1774116213 using!! Report Comment
vikkiller	1773993393 using Report Comment
kailynn	1773868549 using! Report Comment