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:

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.