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 Kyle or something  (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 34 comments ( View all | Add Comment )

MESH	1720830838 These r so cute random req tho how do y’all make these? Report Comment
Mentalwarning	1719622082 ussing Report Comment
Lawrence	1718921253 Hi!! I love this..Whats the code for the heart and the contact bar?? tyvm Report Comment
mars daniel	1715691290 HOW DO I REMOVE THE HEART FROM THE PFP PLS TELL ME Report 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
CULL3NN	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