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 138 comments ( View all | Add 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
kit	1746903813 def using this is so cool!!!!! Report Comment
sham🚬	1745673991 using Report Comment
XxV4MP1REGURLxX	1744793772 USING CUZ OH MY GOD. <333 Report Comment
sadbabygothgoon	1744522516 using Report Comment
𝖏𝖆𝖒𝖎𝖊	1743710048 using, thank u! Report Comment
ℜ𝔢𝔟𝔢𝔩 ℨ𝔢𝔦𝔫𝔞	1741579177 using Report Comment
EGHER	1740721011 using! Report Comment
Viks	1739956022 using!!! Report Comment
matt do enha :33	1739666391 using :p Report Comment
CatacombKitty	1738790094 using Report Comment
Inky Kitty	1738709106 using!! Report Comment
Bumburshoot	1738463003 Using X3 Report Comment
1zzyXD	1738178289 using Report Comment
wcrn	1737764279 usin<3 Report Comment
katie katastrophic	1736919472 using, thank u! Report Comment