Basic Background Code-Example Katana Zero

Tags: katana zero

Description:

As seen in a previous comment, someone requested a Katana Zero Theme Layout. Thus I decided to provide some starter code for changing backgrounds and adding an invisible audio player. This audio player includes "ludoWic - Katana ZERO (Katana ZERO OST)". If you wish to change the music, simply find a youtube video, press share, and copy the piece of the url that is in between https://youtu.be/ and ?feature=shared, taking that copied piece and planting it after the https://www.youtube.com/embed/ before the ? in the audio player code. Update-Included some basic font change code. Update-Included Basic Animated Gif Intro Code, Katana Zero Themed.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Marshmallow_Fluff (https://layouts.spacehey.com/layout?id=86760) -->

<style>

body{
background-image: url(https://i0.wp.com/nerfeados.com/wp-content/uploads/2019/04/KatanaZero_Portada.jpg?fit=1920%2C1197&ssl=1);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

<style>


<style>

body {

font-family: Harlow Solid Italic;
font-size: 15pt;
font-weight: none;
font-style: normal;
text-decoration: none;
}



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

h1, h2, h3, h4,p {color: black;}

:root {

--darker-blue: purple;
</style>


<style> .friends-grid{display: none !important;} </style>


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


<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.giphy.com/media/26AHKUzOZv1cSFWfu/giphy.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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 1 of 1 comments ( View all | Add Comment )

Marshmallow_Fluff

1700353292

Extremely rudimentary, but a stepping stone nonetheless...I hope.

Report Comment