Vampire Library Layout ⚰️

Tags: goth, emo, black, red, dark, layout, gif

Description:

Comes With Autoplay MCR playlist, cursor + gifs and snowflake effect!!!! Comment If Using <3 Requests Open :3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✨ Ava :3 ✨ (https://layouts.spacehey.com/layout?id=41020) -->

<style>
body{
background:url(https://64.media.tumblr.com/e068b8904ed366a575450b36895a2aa5/d7720f7f36773371-4f/s250x400/a286f64951977c0a418e006084495156a9b7df3b.jpg) no-repeat center
fixed;
-webkit-background-size: cover
}
 .logo {
content: url(https://media.discordapp.net/attachments/1083062800752054305/1085761642761048075/image0.jpg);
}
main {
font-family:uset;
color: red;
background-color: black;
border-color: red;
border-style: dashed;}
nav .top {
background: transparent;
}
nav .links {
  background: rgba(0, 0, 0, 0.9);
}

.general-about img { 
 -webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png); 
 -webkit-mask-size: 100%; 
 -webkit-mask-repeat: no-repeat; 
 -webkit-mask-position: center; 
}
main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 150px;
    display: block;
    content: "";
    background-image: url(https://64.media.tumblr.com/08f576262c1fd2e9848bc9c5ab7893b3/60cec1b867c34a6f-ba/s250x400/223e8488ef989073f17029182bd005fd6a25140d.jpg);
    background-position: center center;
    background-size: cover;
}
#q, button {
color: #F55536;
background-color: black;
border: 1px solid grey;
font-family: inherit;
}
p, i, b, .count {
color: red!important;
}
a, .profile .friends .person p, .logout-btn {
color: red !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
main {
background: black;
color: red;
}
.heading, .url-info {
color: red !important;
background: none;
background-color: black !important;
border: 2px solid grey !important;
}
.inner {
color: red !important;
border: 2px solid grey;
border-top: none;
}
.profile-info {
background-image: url(https://64.media.tumblr.com/89735613bdfbfd6bd355d9bf3b108912/60cec1b867c34a6f-9b/s250x400/b52153a5eecfdc19170d2d0d2147e98266dff4db.jpg);
        background-position: center;
        background-size: cover;
	padding: 5px;
        border-radius: 8px;
        border: 2px solid #0307ff;
border: 2px solid grey;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px solid grey;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.profile .contact.f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.contact {
  background-image: url(https://64.media.tumblr.com/08f576262c1fd2e9848bc9c5ab7893b3/60cec1b867c34a6f-ba/s250x400/223e8488ef989073f17029182bd005fd6a25140d.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  Width: 300px;
  Height:120px;
}
.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: "✭"
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 2px solid grey;
border-collapse: collapse;
}
td {
color: red!important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 20px;
}
footer p {
color red !important;
}
.comments-table {
color: #0307ff;
border: none;
border-radius: 8px;
}
footer {
    background-image: url(https://64.media.tumblr.com/89735613bdfbfd6bd355d9bf3b108912/60cec1b867c34a6f-9b/s1280x1920/651f7dc56c629eb6f59b08f20e42b043c55b5a2f.jpg);
    background-position: center;
background-size: cover;
    border-radius: 8px;
    border: 2px solid red;
}
.general-about {
   border-radius: 8px;
   background: url(https://64.media.tumblr.com/68f8ff3252076baf35d2ef925168888b/9d5093bf305a9edc-56/s100x200/8f7f3fcb5bf9ce1323211dee16589424216d724f.jpg);
   background-position: center;
   background-size: cover;
padding: 5px;
}
 body:before {
    content: " "; 
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url(https://64.media.tumblr.com/cf8a321914351bb61e18f0bb3624f912/a522bbe9c4a4dfc0-3e/s250x400/9435283674bb57771317fa40057485a0ac63ff03.gif);
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

<style>* {cursor: url(https://64.media.tumblr.com/f7174729efa2592f23d1497be69b7489/442e1da48efb65eb-b9/s75x75_c1/90212dfb50c6b7ed2428713c5ee6f340d5119209.gifv), auto !important;}</style>

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


<div class="snowflakes">
<div class="snowflake"><img src="https://64.media.tumblr.com/f349a7cbd231bd04145fd50aab22eaca/4149a1d35ab9816c-5d/s75x75_c1/a8317198e7f68ebafc6418ec63d5aff88c5d54ee.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/1cb2aa20bef2dd1d64c12ebb3da46349/7b43ae899b7504d8-37/s75x75_c1/1c2175582df5c5bd6d5e4ef913b256d5c2e283c7.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/f349a7cbd231bd04145fd50aab22eaca/4149a1d35ab9816c-5d/s75x75_c1/a8317198e7f68ebafc6418ec63d5aff88c5d54ee.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/1cb2aa20bef2dd1d64c12ebb3da46349/7b43ae899b7504d8-37/s75x75_c1/1c2175582df5c5bd6d5e4ef913b256d5c2e283c7.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/f349a7cbd231bd04145fd50aab22eaca/4149a1d35ab9816c-5d/s75x75_c1/a8317198e7f68ebafc6418ec63d5aff88c5d54ee.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/1cb2aa20bef2dd1d64c12ebb3da46349/7b43ae899b7504d8-37/s75x75_c1/1c2175582df5c5bd6d5e4ef913b256d5c2e283c7.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/f349a7cbd231bd04145fd50aab22eaca/4149a1d35ab9816c-5d/s75x75_c1/a8317198e7f68ebafc6418ec63d5aff88c5d54ee.gifv"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}



</style>


<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/06979c89140f2d194035c34bd6fe271b/5db18b97a2338cac-db/s400x600/d9a6665c5287c5e6835b6da26760ebd6bc900c8c.gifv');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 5s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<div style="float:  ; max-height: 100px; position: fixed; left: 13px; top: 12px; z-index: 200;">
<img src="https://64.media.tumblr.com/6741e265a2e8d0d015b2d652c4106e25/c02d323ca5908493-03/s100x200/57032e3f777c8c7291787d1bac1402b13f4b0d54.gifv" height="100"/></div>
<style></style>

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 0px; z-index: 200;">
<img src="https://64.media.tumblr.com/bfb70cd902a33e4a1048ed665db9ad72/37d802c5f612669c-9e/s640x960/6aa2499b941f86c11d3c51a5b298d7c19e530d71.gifv" height="300"/></div>
<style></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 84 comments ( View all | Add Comment )

Starlight Lithium	1787707187 Kudos!! Report Comment
ₘₑₑₚ	1787349856 Usingg Report Comment
꩜｡⋆♪YLIEE3	1786325874 Using Report Comment
꩜｡⋆♪YLIEE3	1786325869 Using Report Comment
jj	1784925570 using ! Report Comment
𝖗𝖔𝖚𝖌𝖊	1774232826 usingg Report Comment
Mousybun	1772709268 Usinggggggg Report Comment
†♡ Vanessa The Vampire ♡†	1768785849 using Report Comment
Mochirii	1768658392 usingg! Report Comment
jinx	1763176598 usingg! Report Comment
mental_asylum_	1762232669 using !! Report Comment
SkeletonPanic20	1762004674 using Report Comment
clementine	1760646825 Would I be able to remove the MCR playlist and replace it with a different song? Report Comment
Izzy	1757491123 using! tysm Report Comment
D0ctorLostT_T	1756938894 Using Report Comment
.˚𓏲♱ 𝐍𝐞𝐜𝐫𝐨 𝐈𝐥𝐥𝐢 🦇ೄྀ	1752438925 usingg Report Comment
yukiopizza	1751973647 usinggg Report Comment
rylandprep	1749352073 using !!!! Report Comment
☆𝓑𝓞𝓧𝓔𝓓_𝓑𝓐𝓝𝓢𝓗𝓔𝓔	1748686546 Us1ng h34rt g1f! Report Comment
Nyx	1748553055 How do I remove the background music? <3 Report Comment