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

zzy_lana	1767972784 using!!! Report Comment
angel	1767726452 using!!! Report Comment
cindy	1767456774 using! S2 Report Comment
Şahika	1767445242 using Report Comment
viv🦓☥	1767424288 using !!! Report Comment
Aelora	1767371156 Using <3 Report Comment
violaine	1767327358 using <3 Report Comment
Lillythesilly	1767021708 Using! Report Comment
Hazel	1766857745 heyaa!! using it <3 Report Comment
C4leb.jpg	1766618909 using! Report Comment
Bubblebun	1766612623 using!! Report Comment
lemon ⋆˙⟡	1766612309 using >D< Report Comment
Bnan	1766330137 usandoo Report Comment
Ruru⋅˚₊‧ ଳ⋆.ೃ࿔*:･	1766318567 using!! Report Comment
Fran Sherik	1766236588 using it! Report Comment
danielle :0	1766004931 using!! Report Comment
Saskia	1765990787 Usinggg Report Comment
kkaffeew	1765940239 usingg Report Comment
Ceci	1765800497 using! Report Comment
v4mpye_	1765492898 using! Report Comment