Vampire layout!

Tags: vampire, gothic, music, dracula, loading screen, custom profile picture

Description:

This layout includes: custom shaped pfp, overlay, loading screen, fonts, autoplaying music (Lacrimosa by Mozart on the organ), a header and new online now design. There are also background images for each section of your profile (blog, contacts, blurbs, ect.)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Pidgeon (https://layouts.spacehey.com/layout?id=85083) -->

Layout created by: Pidgeonchillin

<style>

body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://i.pinimg.com/originals/c9/33/6d/c9336d8a4c50d2d3538b97252db03858.gif');
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;
}
</style>


<style>

footer {background-color: #4D4D4D; background-size: 100%;
padding: 15px;
}

</style>


<style>

@import url("https://fonts.googleapis.com/css?family=Creepster");

.w-40 h1{
font-family: Creepster;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: red;
-webkit-text-stroke: 1px black;
}

@import url("https://fonts.googleapis.com/css?family=Creepster");

h2,h3,h4,h5{
font-family: Creepster;
font-size: 25px;
text-align: center;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: red;
-webkit-text-stroke: 1px black;
}


@import url('https://fonts.googleapis.com/css2?family=Carrois+Gothic&display=swap');

p{
font-family: Gothic;
font-size: 14px;
text-align: center;
background: -webkit-linear-gradient(#000000, #DDDDDD);
-webkit-background-clip: text;
-webkit-text-fill-color: red;
-webkit-text-stroke: 0.10px red;
}

html:before {
  animation: grain 1s steps(10) infinite;
  background-image: url('https://i.ibb.co/Zz3xjNq/output-onlinegiftools-1.gif');
  content: "";
  height: 250%;
  left: -50%;
  opacity:.05;
  position: fixed;
  top: -110%;
  width: 200%;
  pointer-events:none;
}

main:before {
               width: 100%;
               height: 240px ;
               display: block;
               content: "";
               background-image: url('https://i.pinimg.com/originals/c7/46/d6/c746d6386bb97925488231f812d83961.gif');
               background-position: center center;
               background-size:100%;
}


body
        {background-image: url(https://i.pinimg.com/564x/90/d5/a2/90d5a2c942c9ba510e681ec21043d476.jpg); background-size:120%;}


.online { visibility: hidden; } .online img { content: url("https://dl.glitter-graphics.com/pub/122/122864lud195puut.gif"); animation-name: none; visibility: visible; height: 35px; width: 110px; }

:root {
        --logo-blue: #760000;
        --darker-blue: #D10026;
        --lighter-blue: #4C4C4C;
        --even-lighter-blue: #C5C5C5;
        --lightest-blue: #E7E7E7;
        --dark-orange: #6C0000;
        --light-orange: #4C4C4C;
        --even-lighter-orange: #A98D8D;
        --green: #38d;
    }

.profile {
background-color: #000000;
padding: 2px}

.profile .blurbs {
  background-image: url("https://i.pinimg.com/564x/be/12/f9/be12f913495ec83e6d5c101cf572059e.jpg"); background-size: initial;
}

.profile .blog-preview {
background-image: url("https://m.media-amazon.com/images/I/712r+oPhKPL._AC_SY300_SX300_.jpg"); background-size: 100%; padding: 2px
}

.profile .contact {background-image: url("https://i.pinimg.com/564x/78/ff/06/78ff061ea13810b740b692774c0b8883.jpg"); background-size: 100%;
}


.profile .friends {background-image: url("https://i.pinimg.com/564x/ba/7b/15/ba7b15def14b036fa99157009e312d13.jpg"); background-size: 200%;
padding: 0px
}

.general-about .profile-pic img {content: url("https://i.pinimg.com/564x/8a/62/76/8a627658d804c134a3a701c6f5b81ce9.jpg");clip-path: polygon(32% 0, 68% 0, 78% 36%, 61% 100%, 39% 100%, 22% 35%);

.profile {
background-color: #000000;
padding: 2px}

.profile .blog-preview {
background-image: url("https://m.media-amazon.com/images/I/712r+oPhKPL._AC_SY300_SX300_.jpg"); background-size: 100%; padding: 2px
}

.profile .contact {background-image: url("https://i.pinimg.com/564x/78/ff/06/78ff061ea13810b740b692774c0b8883.jpg"); background-size: 100%;
}

.profile .friends {background-image: url("https://i.pinimg.com/564x/15/89/f2/1589f2150273af26eff6a2855ebf1081.jpg");
padding: 2px
}

.general-about .profile-pic img {content: url("!ADD URL FOR YOUR PFP HERE!");clip-path: polygon(32% 0, 68% 0, 78% 36%, 61% 100%, 39% 100%, 22% 35%);

</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/YmtCN1Jx4n4?autoplay=1&loop=100 playlist=YmtCN1Jx4n4" title="Lacrimosa" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=" loading=" data-ruffle-polyfilled="">
</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 5 of 5 comments ( View all | Add Comment )

vampirozina	1719500458 using :333 Report Comment
dakota 𓆣	1710242572 using!! Report Comment
saii	1706044106 using !! Report Comment
GHOST(auto play)	1700939481 Using loading screen!:3 Report Comment
GHOST(auto play)	1700939480 Using loading screen!:3 Report Comment