~ vaporwave animation overlay with human falling into stars header

Tags: vaporwave, lofi, black, twilaslay0utshack, 90s, stars, starry, galaxy, dark

Description:

PLEASE COMMENT BELOW IF YOU USE ME OR LIKE ME 🌠

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by TWILA'S LAY0UT SHACK (https://layouts.spacehey.com/layout?id=3410) -->


<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/LcV57On.gif);
  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%) }
} </style>








<style>:root {
        --logo-blue: light purple ;
        --darker-blue: silver ;
        --lighter-blue: light purple ;
        --even-lighter-blue: light purple ;
        --lightest-blue: light purple ;
        --dark-orange: light purple ;
        --light-orange: light purple ;
        --even-lighter-orange: transparent ;



<style/> 


<style>nav {
  overflow-x: hidden;
  position: middle;

}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.imgur.com/WhgzaX3.gif); }</style>


<style>main:before {
	width: 100%;
	height: 500px ;
	display: block;
	content: "";
	background-image: url('https://i.imgur.com/aq4JGQT.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>

<style> 

body { 

font-family: Courier;
font-size: 15pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
}



h1 {
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px purple, 0 0 5px gold;
} 

h1, h2, h3, h4,p {color: lavender} 

:root { 

--black: white;
</style>




<style>
#comments .inner {
    max-height: 545px;
    overflow: scroll;
}
</style> 

<style>
#comments{
    background-image: url(https://i.imgur.com/WhgzaX3.gif);
    background-size: 100%;
    Height:300px;
    overflow:auto;
}
.comments-table{
    background-color:transparent rgba(30,35,40,.9);
}
#comments img{
    border-radius: none !important;
    border: none !important;
}
</style>













<style>table table table td img { display:inline; }table td td{ width:0; } table { width:450px; } table table { width:auto; } table table td { padding:3px; } table table table td { padding:0; } table table table { width:220px!important; height:0; } td.text td a img { width:auto!important; } table table table table table, table table table table table td { width:0!important; padding:0!important; } td.text a img { width:100px!important; } td.text td.text a img { width:35px!important; } td td td div strong { width:170px!important; display:block; } embed,object { display:block;width:220px;height:38px; } table table td img, td.text td.text .orangetext15, td.text td.text table table div { display:none; }</style>





<style>
main{background: transparent} table, tr, td { background-color:transparent;}div table tr td {background-color: BD9D00 !important;}div table tr td a:link, div table tr td a:visited, div table tr td a:hover {color: DDCCEE !important; font-weight: bold !important;}table {background-color: transparent !important;}table table table td {background-color: A50000 !important;}table table table table td {color: FFFFFF !important;}.clearfix {background-color: 000000 !important;}.profileInfo {border: 000000 2px solid !important;}.interestsAndDetails, .userProfileDetail, .contactTable {background-color: 000000 !important; border: BD9D00 2px solid !important; width: 200px !important;}.extendedNetwork , .latestBlogEntry, .blurbs, .friendSpace,.friendsComments {background-color: 000000 !important; border: FF0000 2px solid !important;}span, .btext, .redtext15 {background-color: transparent !important;}a {font-weight: normal !important; color: FF9BD4 !important;}b, span, .btext, .orangetext15, .whitetext12  {color: transparent !important;}.text  {color: 000000 !important;}.blacktext8 {color: FF0000 !important;}a.text:link, a.text:visited {font-weight: bold; color:FF0000 !important;}div object {background-color: A50000 !important; border: FF0000 2px solid !important;}ul li div span div {background-color: FF0000 !important; border: FF0000 2px solid !important;}table.contactTable tr td.text {background-color: 000000 !important;}table.contactTable td.tdborder table td{background-color: 000000 !important;}table.contactTable td.tdborder{background-color: 000000 !important;}div ul li a.open:link,div ul li a.open:visited,div ul li a.open:hover{background-color: 1548ae !important;}div ul li small{color: FF0000 !important;}.bodyContent{background-color: transparent;}body {background:url(https://i.imgur.com/WhgzaX3.gif);background-attachment:fixed;background;}table tr td div, div div a.text:link, div div a.text:visited, div div a.text:hover, div div a.text:active, div div p a:link, div div p a:visited, div div p a:hover, div div p a:active {color: FFFFFF !important;}








.profile .contact { background: url(https://i.imgur.com/WhgzaX3.gif);
background-size: cover;
background-position: center;
}

 </style>

<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.imgur.com/aq4JGQT.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
<style/></style>

<style>
footer {
border-radius: 15px;
background-image: url(https://i.imgur.com/WhgzaX3.gif);
}
</style>












<style>
/* profile-info */

.profile-info {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    border: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(20px);
}
.profile-info a {
    color: #FFF;
}


.profile-info { border:double 0px #Ffd1dc88;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: transparent url(http://dl9.glitter-graphics.net/pub/185/185499fkwlunybl0.gif) no-repeat center center;
background-size: contain;
    </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 62 comments ( View all | Add Comment )

kosuke	1701219692 soso cute Report Comment
GaMzEe ☆	1701123461 someone w the user @creditsfirst stole this ! Report Comment
Teary.eyed.clown	1693655959 useing Report Comment
Beloved	1688524409 yoo /pos Report Comment
Tessa	1661451493 using! Report Comment
m3xiCan.Betti3	1651209229 Love this layout! Using it! Thanks! Report Comment
TheAmethystKnot	1648479627 I love this layout so much but what stopped me from using it was the background moving quite a lot. It made it feel a bit busy and overwhelming but despite that, it's an absolutely stunning and wonderful layout. Amazing job ^_^ Report Comment
Joh (LuvGaymer) Lee	1643082509 It's amazing, thank you for making it and thank you for allowing us to use it. Report Comment
Nicole Frances Rutkowski	1642305491 Using Report Comment
Stephenie Judith	1642221733 Using this !! Thank you Report Comment
Gee Gee	1641234509 I love this, reminds me of my brother. 💙 Report Comment
Alexandra Dawn Grayson	1641211450 Such a great layout! I'm using it! Report Comment
Becky~☆	1641140592 Using this, it's so pretty Report Comment
MoGlassCo	1639263796 Love this! Report Comment
Andres Rodriguez	1638252383 Awesome work! My favorite layout so far! Report Comment
Keonna	1638177022 Love it using it Report Comment
Samantha	1638044886 love it Report Comment
Lashanti	1637988333 I love it Report Comment
TAE	1637131448 Used it 💯💪🏾 Thank you ️ Report Comment
🦋Cynthia🦋	1637117336 It's beautiful, thanks. Report Comment