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

XxMisterredroomxX	1713652543 Using ^^ Report Comment
Pie	1711810868 Usinggg :3 Report Comment
ethan (O__O)	1711336750 uuusiing Report Comment
🦕KAzsI🦕	1711122229 Using <3 Report Comment
Babycakes୨୧	1709459030 using <3 Report Comment
Naib-Y	1709404538 USINGGG Report Comment
†gothsushi†	1709338578 using! Report Comment
⛧ICHEWHEARTS⛧	1709083198 using!! Report Comment
saylor	1708556504 using Report Comment
sharkkyy !!	1708542446 amazing!!!! using ty:3 Report Comment
Constantine	1708375673 ommgg using Report Comment
Msilover97🐇🦑	1708302488 Usingg!! Report Comment
LadyEvyl	1708120858 Very cool. Thank you for making this. I will be using it. Report Comment
SakuraSt4lker	1707964694 using!! <333 Report Comment
silly_chives	1706087940 usado^^ Report Comment
Cassidy!¡	1705841974 Using!¡ Report Comment
Elena	1705802758 using!!! Report Comment
Elena	1705802736 using!!! Report Comment
🍷ִ༺♰drew♰༻🍷ִ	1705714208 using!! :3 Report Comment
Jayyy	1705577573 usinggg Report Comment