Red Vampire Layout

Tags: vampire, emo, goth, red, cursor, animation, overlay, bats, icons

Description:

Includes: Custom Cursor, nameplate, shaking elements, 2 overlays and falling emojis, custom online status, custom page links etc! Free for everyone to use just lmk in the comments!

Preview:

click on the image for a larger preview

Code:

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

<style>


@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Special Elite', cursive;
   font-size: 180%;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*BODY FONT*/
   body{font-family: 'Lora', serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: red; }
.profile .left h1{font-family: 'Special Elite', cursive; 
   font-size: 150%;
   transform: rotate(-10deg)}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

main{background: none}
/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/154420.png), auto !important}

/*FLIPPING PROFILE*/
.profile{direction: rtl}
.blurbs{direction: ltr}
.blog-preview{direction: ltr}
.friends{direction: ltr}
.general-info{direction: ltr}
.contact{direction: ltr}
.url-info{direction: ltr}
.details-table{direction: ltr}
.profile .table-section .heading{direction: ltr}
.details p{direction: ltr}
.mood{direction: ltr}

/*WIDER PROFILE*/
.container {
width: 90%;
max-width: 850px;
}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/K5K51Fm/LmHqDVm.jpg);  
   background-size: cover}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/x3RHswP/rxn5kwk.jpg);
   background-size: cover;
   box-shadow: inset 0px 0px 7px 5px red;
   margin-bottom: 15px;
   margin-top: -7px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;}

/*FOOTER*/
footer {
   border-radius: 15px;
   background-image: url(https://i.ibb.co/nD2QTKf/4ZXL2Tf.jpg);
   background-size: 50%;
   box-shadow: inset 0px 0px 7px 5px red}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/nD2QTKf/4ZXL2Tf.jpg) !important;
   background-size: cover !important;
   margin-top: 20px;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   box-shadow: inset 0px 0px 7px 5px red}

/*NAV BAR*/
.links{ 
   text-align: center;
   background:  !important;
   background-image: url(https://i.ibb.co/nD2QTKf/4ZXL2Tf.jpg) !important;
   background-size: cover !important;
   margin-bottom: 20px;
   box-shadow: inset 0px 0px 7px 5px red}

/*BATS NAV BAR*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: url(https://i.ibb.co/RH2BbQR/9tc4YNS.gif)}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(red, black);
   border: 2px solid black;
   border-radius: 2px}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px red !important;
   margin-bottom: 20px !important;
   background: url(https://i.ibb.co/d0BXc2j/QN4W8rA.gif);
   padding: 1px}

.blurbs{ 
   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px red !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/d0BXc2j/QN4W8rA.gif) !important;
   padding: 1px}

.friends{   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px red !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/d0BXc2j/QN4W8rA.gif) !important;
   padding: 1px}

.friends { 
   border: solid black 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px red !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/d0BXc2j/QN4W8rA.gif) !Important;
   padding: 1px}

/*ALL LINKS*/
a{color: red}
a:hover{color: white}
a:visited{color: white}

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/52S1kVF/52HiHo3.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BLURBS + FRIENDS SECTION*/
.blurbs{
        background-image: url(https://i.ibb.co/d0BXc2j/QN4W8rA.gif)!important}

.comments-section{
   background:  !important;
   background-image: url(https://i.ibb.co/c2LzpWt/rZhqJoH.jpg) !important;
   background-size: cover !important;
   box-shadow: 0px 0px 9px 7px red;
   margin-bottom: 20px !important}

/*URL SECTION*/
.profile .url-info{
   height: 250px;
   background-image:url(https://i.ibb.co/c8ysvkW/a1XZ5kh.gif);
   background size: cover !important;
   border: 2px solid red;
   box-shadow: inset 0px 0px 7px 5px red}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/42f7Vyj/aQtdR3j.gif);
   background-size: cover;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: pink, opacity:0.01;
   --lightest-blue: pink, opacity:0.01;

/*FRIENDS-GRID*/
--light-orange: url(https://i.ibb.co/nwShbW4/5462Urj.gif);
--even-lighter-orange: url(https://64.media.tumblr.com/fd5adbe4aa70ce748c03eabeab502847/25ae3be84810b5fa-99/s500x750/13f12ba7b3a059be4cb6192c19ba97342da1694e.gif)}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px black}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{ 
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px red}

/*ONLINE*/
.online{content: url(https://i.ibb.co/GFfhtYX/TdBRuvc.gif)}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   padding: 5px;
   font-size: 0px;
   border: 2px solid black;
   border-radius: 5px;
   background: url(https://i.ibb.co/f4hfr8B/9yhMm5m.gif);
   width: cover!important;
   position: centre;
   height: 180px;
   box-shadow: inset 0px 0px 7px 5px red}

/*TOP SEARCH BAR*/
.search-wrapper input[type=text] {
    background-color: #a82e3c !important;
    border: 1px solid black !important;
    border-radius: 5px !important}
button{
    border-radius: 10px !important;
    border: 1px solid black !important;
    background-color: #a82e3c !important;
    color:var(--headers) !important}

/*GIF UNDER COMMENTS*/
.col.right:after{
   pointer-events: none;
   content: url(https://i.ibb.co/Zd6dbVc/e7r3s48.gif);
   width: 200px}

/*COMMENTS SCROLL BOX*/
.comments-table{
   height: 200px;
   overflow-y:scroll;
   background-color: red}

/*FILM GRAIN OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/Sn3Hy9n/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

/*SCREEN LINES OVERLAY*/
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none}

/*ELEMENT SHAKE*/
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/*FALLING EMOJIS*/
</style>
<div class="snowflakes">
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></div>
<div class="snowflake"><img src="https://i.ibb.co/ygYRTtC/l8WxBFr.gif"/></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>

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

Digital_S1N	1774675087 using! Report Comment
༒𝔧𝔞𝔡𝔢༒	1773730333 using Report Comment
val	1773480064 using! Report Comment
Franzoo	1773395865 using!! Report Comment
egish	1772349569 tysm using!! Report Comment
deadgirl	1771835043 thank you <3 Report Comment
jayjay	1770134048 USINGG Report Comment
sh9mp9	1769669198 using Report Comment
꧁𝐃𝐢𝐳𝐙𝐲꧂	1767555808 Usinngggg Report Comment
Your best nightmare	1767377820 using! Report Comment
Your best nightmare	1767377818 using! Report Comment
𝓡𝓗𝓔𝓐	1765922287 usinggg Report Comment
Ren	1763458044 Using!! Report Comment
𝔱𝔯𝔞𝔰𝔥𝔶ᛪ༙	1761259063 using! tysm Report Comment
Ace	1759183857 Using!! <3 Report Comment
💋emilia	1759016605 using <3 Report Comment
Axl	1758743188 using :p Report Comment
𝖌𝖆𝖎𝖆	1758083690 using :) Report Comment
MS.CL0WN	1757619194 im new to the site but how do i add like my own header or curser? i love this layout but i dont understand how to add onto this Report Comment
MS.CL0WN	1757619006 using!! Report Comment