Vampy / emo layout

Tags: frankie ☆ iero, emo, blood, gore, vampire, goth, gothic, red, black

Description:

a catoon gorey layout, complete with custom cursor, sally face autoplayer, spotify embeds, floating page, extra image boxes, custom heart pfp animation and so much more please keep my page credits on / in ur general+ sections <33

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by frankie ☆ iero (https://layouts.spacehey.com/layout?id=89021) -->

<style>
.general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<div class="about"> 
this layout was made by frankie ☆ iero
about me goes here!!

</div>

<div>
<h3>My Music X3:</h3>
<!-- spotify embed link goes here –>

<!-- put a yt id here for autoplay music -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/gNWZdoCgbCQ//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>
</div>
  
<style>  .logo {
  
  content:url("https://i.ibb.co/gPtk9xm/Shace-Hey-ancom.png")
  
  }
</style>
  
<style>
p.online {font-size: 0px;}
p.online::after{content:url(https://64.media.tumblr.com/e533e5c22a256c39a6958440fb8db055/3ab37b35962881fb-6c/s75x75_c1/bcd7685c7eb252ab4e6d0c9a0d0f8c3e115716b4.gifv)
color: black;
font-size: 10px;}

    </style>

<style>
    body {
          background-image:url(https://i.pinimg.com/originals/1a/1c/cb/1a1ccbabe137e9819ea69373049cfc36.gif)
    }
</style>
<style>
body { cursor: url(https://64.media.tumblr.com/cd5ffe270ea9fcebf52df5b591167ff1/3ab37b35962881fb-ac/s75x75_c1/4c32f222107c63f9e3efb5f64aae2d34951283b5.gifv), auto; }
</style>

<style>
.profile-info{
background: url(https://i.pinimg.com/originals/89/44/14/894414bd82d63e1c127f07559e8adeff.gif);
no-repeat fixed;
    background-size: cover;
    height: 155px;
    border: none;
    font-size: 0;
    background-size: cover;
    height: 152px;
    border: none;
    font-size: 0;
    background-position-y: top;
}

    .profile {
       
 
background:url(https://i.pinimg.com/originals/23/6b/fd/236bfd8261c1e866d4555cd004c8e2f2.gif);
color:white;
text-shadow: 0 0 9px red;
    }

.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:#A50000; 
background:#161616;
}

/* contact icons */
.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 favorite */
content: "🫀"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🥩"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "🦴"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☆"



}
footer {
border-radius: 15px;
background-image: 
url(https://i.pinimg.com/564x/08/d4/08/08d408c2694917eaaa48179f54351ab2.jpg);
color:White; 
}
  

nav .top {
        background: url(https://i.pinimg.com/564x/08/d4/08/08d408c2694917eaaa48179f54351ab2.jpg);
    }
    
    nav { background: black url(""); }

:root {
--logo-blue:#FFFFFF;
--darker-blue: #FFFFFF;
--lighter-blue: #A3291B;
--even-lighter-blue: url(https://i.pinimg.com/564x/7b/ca/e1/7bcae1c78868dfadd44164c555a0596a.jpg);
--lightest-blue:#C19090;
--dark-orange:#000000;
--light-orange: url(https://i.pinimg.com/564x/7b/ca/e1/7bcae1c78868dfadd44164c555a0596a.jpg);
--even-lighter-orange:#C19090;
--green: #FFFFFF;
}


<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "fellow qweenz "; font-size:.8rem; font-weight:bold; 
color:black; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "comments !!"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "more!!"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "i don't bite!! (mostly)"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "me!!"; font-size:.8rem; font-weight:bold; color:White; }
<style>

h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

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

ZTINGRAY	1710095950 using!! :3 Report Comment
R3sett	1709309061 Using!! X3 Report Comment
eli ★﹒₊‧ 🪼	1709168182 using Report Comment
AntiqueN0ah	1708870748 using thnx! Report Comment
▪︎ｓｕｎｓｈｉｎｅ	1707526740 usando Report Comment
Nemu.	1707344894 usiiing Report Comment
Jazmine	1707268397 Using !! Report Comment
¿¡GH0ST?!(o_O)	1706810082 Using! Report Comment
꧁⪻♥𝐍𝒊ᧁ𝘩☥𝐦𝖆𝕣𝕖Ꮥąⁿş♥⪼꧂	1706382325 usando Report Comment
Antogothxx	1706227885 Usandoo! Report Comment
NOTMIYAVI	1706088570 using mst likely Report Comment
☽☆Hxnsxr☆☾	1705895430 Using!!! ~'u'~ Report Comment
🃁 juno 🃁	1705617497 using!! tysm ^__^ im not great at coding, how would i remove the heart pfp? i cant crop my image the way i want ;-; Report Comment
Joy	1705437300 using! Report Comment
Jonah Marshall!!	1705202168 Using!! Report Comment
abiiquu !!	1704646854 using !! Report Comment
YUKI	1704255246 LOVE IT USING!!! Report Comment
Princess Ana	1704243793 Using Report Comment
Peyton	1704083440 i just want the heart pfp Report Comment Same but idk the code for it by Jax 💋; 1704317600; Report SAMEEEEE by Peyton; 1704833238; Report
strawberry	1704050935 using!!!! Report Comment