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 arlo atomickk (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 151 comments ( View all | Add 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
Fable (∩^o^)⊃━☆	1757484400 usingk! Report Comment
mikey !	1757174522 using maybee!!! Report Comment
Calcazzz	1756857300 usinggggg Report Comment
BL00DC3ST	1756641580 using Report Comment
☆ray☆ (RAY TOROZ NO. 1 FAN)	1756012551 using Report Comment
Nana	1755629175 usinggg Report Comment
mice	1755531798 usingg Report Comment
mice	1755531798 usingg Report Comment
♰𝓑𝓵𝓪𝓷𝓴𝓲𝓮𝓮♰	1754976179 using! Report Comment
Anastasia	1754087695 using! Report Comment
Susy🖤	1753064811 I’m so vibing with this, mixing it up in my own shattered way. Hope it’s cool, man. Report Comment
julia!!	1752270883 using!! Report Comment
W33P	1752184597 us1ng!! Report Comment
Lavina	1751598407 using!! Report Comment
Evan	1749935806 using Report Comment
︶꒦꒷♡Minty♡꒷꒦︶	1748423115 Using !! Report Comment
bisexuakitty	1746903813 def using this is so cool!!!!! Report Comment