Layout published by Draca

published 1650768818

Add to Favorites

View Layouts

View Profile

Report Layout

Vampire Goth

Tags: vampire, goth, black, animation, layout, dark

Description:

A black layout accented with red and gray accents for vampire goths (or literally anyone) to use.

Please give me credit for this whether it's in your profile, a bulletin, or a blog. If you could also comment to let me know you used this, it would be appreciated.

You can replace any of the code for your own personalization (It still works without replacing anything). I recommend only replacing the following: Intro Gif, Online Icon, Banner, Snowflakes, Slideshow, Playlist, Blinkies (In the same order it shows up in the code, 'Intro Gif' through 'Banner' code is near the top while the rest are at the bottom). I also recommend cutting and pasting everything from Slideshow to Blinkies somewhere into 'Interests' section.

Intro Gif

Under 'body:before': Replace the URL inside the parenthesis with your own GIF or image (Use Imgur to get image code)

Online Icon

Replace the URL inside the parenthesis with your own GIF or image (Use Imgur to resize the image to your liking and to get image code)

Banner

Replace the URL inside the parenthesis with your own banner (I used Canva to create mine, and Imgur for image code)

Snowflakes

Replace URL inside of the quotes with your image. Mine were resized ~11 px wide by 11 px tall using an image resizer, then imported into Imgur for the URL. If you want multiple snowflakes images, add different URLs for different links. If you want the snowflakes to fall more often, copy and paste your set of URLs until you're satisfied with the outcome.

Slideshow

Under the section 'marquee', replace each URL inside the parenthesis with your image of choice. If you want more images, copy and paste a line of code directly under the code already there and follow the prior instructions.

Playlist

*THIS DOES NOT AUTOPLAY MUSIC not every (device?browser?) is compatible with this feature, and mine is one of them*

For Spotify: Open Spotify → click on your playlist of choice → choose the three dots → share → embed playlist → copy → replace entire section of code

Open Spotify → click on your playlist of choice → choose the three dots → share → embed playlist → show code → copy everything after 'playlist/' and before '?utm' → replace same section of code in the script.

For others: Look for embedded code in your music playing app and follow instructions above

Blinkies

Replace URL inside of quotes with your blinkie URL of choice. Use Imgur for image codes, if you want more Blinkies copy and paste a line of code (multiple times if you want many more). Or delete lines of code if you want less.

You cannot upload an image URL if it doesn't end in .png, .gif, or .jpg. Using Imgur allows you to 'copy direct link' which ends in these image codes. If you need additional help replacing parts of code, comment below or reference attached images (Yellow = Portion of replaceable code; Orange = Line of replaceable code; Green = Section of replaceable code).

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Jim+Nightshade&display=swap');
</style>

<style>


 body{
/*background*/
    background-color: black !important;
    background-image: url(https://i.imgur.com/hiNVRgyh.png) !important;
    background-attachment: scroll !important;
    background-repeat: repeat !important;
    background-position: center !important;
    font-family: 'Jim Nightshade', cursive !important;
    font-size: 25px;

    }
   body:before {
    content: " "; 
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url(https://i.imgur.com/otCimLt.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;} }


}
::-webkit-scrollbar {

    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(152, 1, 1, 1);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 1);


}
    .online{
content: url(https://i.imgur.com/I0kHf4s.png) !important;

    }
    .container{


    }
    main{
    /*profile background*/
    background-color: transparent;
    

    }
    main:before {
    width: 100%;
    height: 300px;
    display: block;
    content: "";
    box-shadow: 0px 0px 5px 1px #85050a;
    background-image: url(https://i.imgur.com/jWYLgrQ.png);
    background-position: center center;
    background-size: cover;
}
@media only screen and (max-width: 600px) {
    main:before{
    height: 200px;
}
}
    .profile{


    }
    a{
        color: #756566!important;
        font-family: 'Beau Rivage', cursive !important;
    font-size: 15px;
/*This is the following 2 are for links*/
        
    }
    a:hover{
        color: #750107!important;
       
    }
    a:visited{
        color: #8f0108!important;
        
    }
    button{
    background-color: #787878!important;
    background-image: url('URL') !important; /*url not needed*/
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    }
    h4{
    

    }
    .top{
    
    background-color: black !important;
    background-image: url(https://i.imgur.com/icyHPwK.png) !important;
    background-attachment: scroll !important;
    background-repeat: repeat !important;
    background-position: center !important;   
    color: #a30000;
    border-radius: 25px 25px 0 0 !important;
        
    }    
    main{

    color: #ff2626!important;
    border-radius: 0 0 25px 25px !important;
        
    }
    footer{
        
    color: #a30000;
    background-color: black!important;
    background-image: url(https://i.imgur.com/ai5uKTL.png) !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important;
    background-position: center !important;
        
        
    }
    .logo{
        
    background-color: transparent!important;
    background-image: url() !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
        
    }
    .top label{
        
        
    }
    .top input{
        
        
    }
    .logout-btn{
        font-family: 'Beau Rivage', cursive !important;
        
    }
    .top a{
        color: #756566!important;
        /*This and the following 2 are for top section links*/
    }
    .top a:hover{
        color: #750107!important;
        
    }
    .top a:visited{
        color: #8f0108!important;
        
    }
    .links{
        
    background-color: black!important;
    background-image: url('URL') !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
        
    }
    .links a{
        color: #756566!important;
        
    }
    .links a:hover{
        color: #750107!important;
        
    }
    .links a:visited{
        color: #8f0108!important;
        
    }
    h1{
        font-family: 'Beau Rivage', cursive !important;
        
    }
    .profile-pic{
        
        
    }
    .profile-pic img{
        
        
    }
    .general-about{
        
        
    }
    .mood{
        
        
    }
    .mood a{
        
        
    }
    .mood a:hover{
        
        
    }
    .mood a:visited{
        
        
    }
    .mood b{
        
        
    }
    .mood p{
        
        
    }
    .contact .heading{ font-size:0;
    background-color: transparent !important;

}
.contact .heading:before{

    content: "Volunteer your blood";
    font-size:.8rem;
    font-weight:bold;
    text-align:center;
    color: #ff2626;
        
    
}
.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 Favorites */
content: "☠️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "☠️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward 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 to Group */
content: "☠️"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: "☠️"

}
    .contact{
        
        
    }
    .contact a{
        
        
    }
    .contact a:hover{
        
        
    }
    .contact a:visited{
        
        
    }
    .url-info{
        
        
    }
    .url-info b{
        
        
    }
    .url-info p{
        
        
    }
    .table-section{
    background-color: transparent !important;

    }
    .table-section .heading{
        background-color: transparent !important;
        
    }
    table.details-table{

    background-color: #8a0a12!important;
    background-image: url('URL') !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    }
    table, th, td{
/*interests section titles*/
    border: 0px solid;
    color: #ff2626;

}
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
:root {

  --lighter-blue: #691117;
   --light-orange:  #691117;
  --topic1: "aspirations";
  --topic2: "favorites";
  --topic3: "likes";
  --topic4: "dislikes";
  --topic5: "hates";
  --topic6: "me";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);

    
    }
    .profile .details-table td{

    background-color: #8a0a12!important;
    background-image: url('URL') !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    }
    .profile-info{
        
        
    }
    .blog-preview{
        
        
    }
    .blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "Stalk me"; font-size:.8rem; text-align:center; }


    }
    .blog-preview a{
        
        
    }
    .blog-preview a:hover{
        
        
    }
    .blog-preview a:visited{
        
        
    }
    .blog-preview p{


    }
    .blurbs{


    }
    .blurbs .heading{ font-size:0;
    background-color: transparent !important;

}
.blurbs .heading:before{ content: "Stalk me some more"; font-size:.8rem; font-weight:bold; text-align:center; }
        
        
    }
    .blurbs .section h4{
        
    
    }
    .blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Dear diary"; font-size:.8rem;
text-align: center !important;


}
    .blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Sincerely"; font-size:.8rem; text-align:center; }


    }
    .friends .heading{ font-size:0;
    background-color: transparent !important;

}
.friends .heading:before{ content: "All those bitten are in"; font-size:.8rem; font-weight:bold; text-align:center; }
        
        
    }
    .friends{
        
        
    }
    .friends-grid{
        color: #756566!important;
        
    }
    .friends a{
        color: #756566!important;
        
    }
    .friends a:hover{
        color: #750107!important;
        
    }
    .friends a:visited{
        color: #8f0108!important;
        
    }
    .friends b{
        
        
    }
    .friends p{
        
        
    }
    .friends .person p{
        
      
    }
    .friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Love letters"; font-size:.8rem; font-weight:bold; text-align:center; }
  
    }
    .count{


    }
    .more{


    }
    .comments-table td{
        
        
    }
    .pagination{

    
    }
    footer{
        
        
    }
    footer a{
        
        
    }
    footer a:hover{
        

    }
    footer a:visited{
        

    }
    footer .links{


    }
    footer .links a{


    }
    footer .links a:hover{


    }
    footer .links a:visited{


    }


</style>

/*Snowflakes*/
<div class="snowflakes">
<div class="snowflake"><img src="https://i.ibb.co/ZHFXjGN/image-2022-04-22-165318867.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/kBxT22Z/image-2022-04-22-165608382.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/yWT2gSm/image-2022-04-22-170225187.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ZHFXjGN/image-2022-04-22-165318867.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/kBxT22Z/image-2022-04-22-165608382.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/yWT2gSm/image-2022-04-22-170225187.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ZHFXjGN/image-2022-04-22-165318867.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/kBxT22Z/image-2022-04-22-165608382.png"/></div>
<div class="snowflake"><img src="https://i.ibb.co/yWT2gSm/image-2022-04-22-170225187.png"/></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>* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym731.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2013/02/12/upside-down-cross-red.html" target="_blank" title="Upside Down Cross - Red"><img src="https://cur.cursors-4u.net/cursor.png" alt="Upside Down Cross - Red" style="position:absolute; top: 0px; right: 0px;"/></a>









<marquee>  

<img src="https://i.imgur.com/bThx9HH.png"/> 
<img src="https://i.imgur.com/KaQZ0RJ.png"/>
<img src="https://i.imgur.com/YqQjWMj.png"/>
<img src="https://i.imgur.com/7EgZhh6.png"/>
<img src="https://i.imgur.com/vj0ghf5.png"/>
<img src="https://i.imgur.com/s0dtZ5X.png"/>
<img src="https://i.imgur.com/LoKdWiW.png"/>
<img src="https://i.imgur.com/cXrSSeD.png"/>
<img src="https://i.imgur.com/gllaWe3.png"/>
<img src="https://i.imgur.com/7bIQHNW.png"/>
<img src="https://i.imgur.com/rS4QLi3.png"/>
<img src="https://i.imgur.com/owPpRtY.png"/>
<img src="https://i.imgur.com/EzRSfip.png"/>
<img src="https://i.imgur.com/UOXlrmI.png"/>
<img src="https://i.imgur.com/OO3Oopp.png"/>
<img src="https://i.imgur.com/RLRV3l7.png"/>
<img src="https://i.imgur.com/cJ3FR1I.png"/>
<img src="https://i.imgur.com/mpXqzRd.png"/>
<img src="https://i.imgur.com/Hjunwzc.png"/>
<img src="https://i.imgur.com/kC77OpX.png"/>
<img src="https://i.imgur.com/nOJ0sKU.png"/>


</marquee>





<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/4hZOku02EO15wjgnU4rgPp?utm_source=generator" width="100%" height="95" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>





<img src="https://i.imgur.com/1V2P1oq.png"/>
<img src="https://i.imgur.com/VvPE9j3.png"/>
<img src="https://i.imgur.com/gU7LNn1.png"/>
<img src="https://i.imgur.com/Jd9W8zt.png"/>
<img src="https://i.imgur.com/QKKep0D.png"/>
<img src="https://i.imgur.com/huE3lDr.png"/>
<img src="https://i.imgur.com/NUUxxbn.png"/>
<img src="https://i.imgur.com/qR0IO4B.png"/>
<img src="https://i.imgur.com/lgMu4Ip.png"/>
<img src="https://i.imgur.com/1bbdwTu.png"/>
<img src="https://i.imgur.com/kYscrhT.png"/>
<img src="https://i.imgur.com/CRQtE1D.png"/>
<img src="https://i.imgur.com/LSDEkKq.png"/>
<img src="https://i.imgur.com/zJpF2If.png"/>
<img src="https://i.imgur.com/W8t20DM.png"/>
<img src="https://i.imgur.com/CwCbiTs.png"/>
<img src="https://i.imgur.com/05ZWcgf.png"/>

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

Draca Dragona	1775957130 Hey guys!! The op account is actually mine, I just lost the logon for it ;-; I'm lwk surprised it hasn't broken yet lol- thx so much for using and I'm so sorry I can't log on to the original!! (That account has the name Draca, mine is Draca Dragona- idk how else to prove myself) Report Comment okay nvm, somethings broke lol i've changed devices too many times for it not to have lol by Draca Dragona; 1775958429; Report
𝔄𝔫𝔤𝔯𝔶_𝔨𝔦𝔱𝔱𝔶	1774552255 using Report Comment
iheartauthenticity	1773939354 omgg so gorgeous! Usinggg Report Comment
r i u	1770273423 Using!! Report Comment
coco!	1768130254 using Report Comment
homosexual	1765103752 using! :)) Report Comment
Sevi 𓆩𓆪	1764694805 Using! <3 Report Comment
alexia	1762545768 using !! Report Comment
shadowthedojafat	1762366564 using!!! <3 Report Comment
( ◜ཀ◝ )kaoemz!(｡･ω･｡)ﾉ	1759946792 usinggggg Report Comment
kai 🦇	1759859124 using!! had to modify some bits a bit bc it wasn't working well on my computer but I LOVE it Report Comment I liked how you modified it, could you send it to me please? by Marilyn; 1762901021; Report ofc! I have it on a pdf document so I can send it through email if you want by kai 🦇; 1763630542; Report
Bucciarati	1759721871 usando Report Comment
Audrey</3	1758342218 using ts is SO fucking cute Report Comment
°❀⋆.ೃ࿔*:• kiki	1758177707 using def Report Comment
༝ ✦𓈒ׅ۫ ✧ 𝖘𝖔𝖚𝖑 ˙✧ ˖ ⁺ ⭒	1757371034 are you an angel or something... (DEF using TYSM) Report Comment
Itzy	1755194082 usinggg Report Comment
BloodOfSylvain	1754865741 thank you.. Report Comment
Icevelt	1754531282 Using Report Comment
Icevelt	1754531282 Using Report Comment