Red Twilight Layout

Tags: vampire, twilight, red, blood, autoplay, animation, cursor

Description:

Includes: loading screen, custom cursor, floating profile, music from the ost, flickering nameplate, 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=35306) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');
@import url('https://fonts.cdnfonts.com/css/twilight');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Twilight', sans-serif;
   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: 'La Belle Aurore', cursive;
   color: white !important;
   font-size: 120%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*NAMEPLATE*/
:root{ --neon-text-color: #c7151b; }
.profile .left h1{font-family: 'Twilight', sans-serif; 
   font-size: 150%}

/*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/129320.png), auto !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/y0khXZz/GsjeQH.jpg);  
   background-size: 50%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/0QbSHw2/new-moon-eclipse-twilight-series-8889508-1440-900.jpg);
   background-size: cover;
   box-shadow: 0px 0px 7px 5px #c7151b;
   margin-bottom: 15px;
   margin-top: -7px;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;}

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

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

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/bLMNmsK/Bys7kJQ.png) !important;
   filter: grayscale(90%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(1000%) contrast(0.8);
   background-size: cover !important;
   margin-top: 20px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   box-shadow: 0px 0px 7px 5px #c7151b}

/*NAV BAR*/
.links{ 
   text-align: center;
   background:  !important;
   background-image: url(https://i.ibb.co/bLMNmsK/Bys7kJQ.png) !important;
   filter: grayscale(90%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(1000%) contrast(0.8);
   background-size: cover !important;
   margin-bottom: 20px;
   box-shadow: 0px 0px 7px 5px #c7151b}

/*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(#c7151b, black);
   border: 2px solid black;
   border-radius: 2px}

/*BORDERS*/
.contact{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px #c7151b !important;
   margin-bottom: 20px !important;
   background: url(https://i.ibb.co/Zhxf08Z/6593b8516b12ec68e63d53274023215e.jpg);
   background-size: 100%;
   padding: 1px}

 .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px #c7151b !important;
   margin-bottom: 20px !important;
   background: url(https://i.ibb.co/qkN1MCQ/It7xVb.jpg);
   background-size: cover;
   padding: 1px}

.blurbs{ 
   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px #c7151b !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/qkN1MCQ/It7xVb.jpg) !important;
   padding: 1px}

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

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

/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://64.media.tumblr.com/c6c5fad58a4b46f65f6728f48f7215cb/ba553a9c91eba651-35/s75x75_c1/85167316dbf504e9dc3650463e63648ba45248e8.gifv);
        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/K5K51Fm/LmHqDVm.jpg)!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 #c7151b;
   margin-bottom: 20px !important}

/*URL SECTION*/
.profile .url-info{
   font-size: 0;
   height: 300px;
   background-image:url(https://media0.giphy.com/media/l41Yy7peNVGqSa5O0/200w.gif?cid=790b7611xdub64wu8bumlov0rj9382eb0kl0jmcof4x2ioda&ep=v1_gifs_search&rid=200w.gif&ct=g);
   background-size: cover;
   filter: grayscale(90%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(1000%) contrast(0.8);
   background size: cover !important;
   border: 2px solid #c7151b;
   border-radius: 2px;
   padding: 1px;
   box-shadow: 0px 0px 7px 5px #c7151b}

/*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)}

/*PFP*/
.profile-pic {
   box-shadow: 0px 0px 7px 5px black}

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

/*ONLINE*/
.online{content: url(https://i6.glitter-graphics.org/pub/1551/1551266m97s2fu2hc.gif)}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   padding: 5px;
   font-size: 0px;
   border: 2px solid black;
   border-radius: 5px;
   background: url(https://i.ibb.co/SwWTLqY/ezgif-3-b069bb15ef.gif);
   filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(1000%) contrast(0.8);
   width: cover!important;
   position: centre;
   height: 180px;
   box-shadow: 0px 0px 7px 5px #c7151b}

/*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}

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

/*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); }
}

/*LOADING SCREEN!*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url(https://i.ibb.co/TgTXTMQ/bella-swan-breaking-dawn.gif);
	background-size: cover;
	background-repeat: repeat;
    background-position:center;
    background-color: black;
	animation: yourAnimation 2.5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*FLOATING PROFILE*/
.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 3s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/Z7-3_h0vxXA//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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

𝕬𝖚𝖗𝖔𝖗𝖆🦇	1742580613 Using! Report Comment
Anne \|\| She/They	1741050804 using!! i love it! >:3 Report Comment
🦇 alaya 🦇	1739318575 omg using!! :3 Report Comment
Marls	1739039377 Using!! Report Comment
Lizzie	1738652315 Using!! Report Comment
Vamp1r3_G1rL	1737039971 using !! Report Comment
l3ah0bzcur3	1727391476 usingggggggg Report Comment
❛ Jem ༉‧₊˚✧	1721284670 using!! Report Comment
Bella Swan	1717666848 using Report Comment
Bny	1698293256 using cursor <3 Report Comment
𓆩Brooke𓆪	1695406558 Using !!! Report Comment
Quack Quack	1691875882 Using! Report Comment