Blake 2020

<style>
@import url('https://fonts.googleapis.com/css?family=Aguafina+Script|Dynalight|Great+Vibes|Italianno|Meie+Script|Parisienne|Petit+Formal+Script|Ruthie&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300|Chathura|Marvel|Open+Sans:300&display=swap');
 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}

#background{
position: fixed;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(https://i.imgur.com/9b064LZ.jpg);
background-size: cover;
background-position: fixed;
filter: blur(10px);
top: -5vh;
left:-5vw;
width: 110vw;
height: 110vh;
z-index: -1vh;
}

#image{
position: fixed;
background: url(https://i.imgur.com/rg2NE42.jpg);
background-size: cover;
background-position: top center;
bottom: 10vh;
left: 7vw;
box-shadow: 0 0 2vh #000;
z-index: 5;
height: 80vh;
width: 80vh;
}

#image img{
}


#box{
position: fixed;
background: rgba(17, 5, 41, 0.75);
box-shadow: 0 0 2vh #000;
z-index: 2;
height: 80vh;
width: 85vh;
bottom: 10vh;
right: 7vw;
}

#info{
position: fixed;
background: #1b1626;
z-index: 3;
padding: 1%;
width: 75.5vh;
bottom: 20vh;
right: 8vw;
height: 50vh;
color: #fff;
text-shadow: 0 1vh 2vh #000;
font-family: 'Open Sans';
font-size: 2vh;
}


h1{
font-family: 'Dynalight';
font-size: 4vh;
font-weight: lighter;
}

a{
text-decoration: underline;
color: #fff;
transition: 0.5s;
}
a:hover{
transition: 0.5s;
color: #d6b1e6;
text-shadow: 0 0 1vh #d6b1e6;
}


#nav1, #nav2, #nav3, #nav4{
position: fixed;
z-index: 6;
left: 45vw;
}

#nav1{transition: 0.5s; top: 25.5vh;animation: nav1 2s 1;animation-fill-mode: both;animation-delay: 2.5s;}
#nav1 img{height: 12vh;}
#nav1:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

#nav2{transition: 0.5s; top: 36.5vh;animation: nav2 2s 1;animation-fill-mode: both;animation-delay: 2.25s;}
#nav2 img{height: 12vh;}
#nav2:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

#nav3{transition: 0.5s; top: 47.5vh;animation: nav3 2s 1;animation-fill-mode: both;animation-delay: 2s;}
#nav3 img{height: 12vh;}
#nav3:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

#nav4{transition: 0.5s; top: 58.5vh;animation: nav4 2s 1;animation-fill-mode: both;animation-delay: 1.75s;}
#nav4 img{height: 12vh;}
#nav4:hover{transition: 0.5s;filter:drop-shadow(0 0 1vh #fff);}

#title{
position: fixed;
z-index: 5;
height: 20vh;
width: 100vh;
top: 9vh;
right: 2.5vw;
padding: 1%;
text-align: center;
font-family: 'Ruthie';
font-size: 19vh;
color: #fff;
text-shadow: 0 0 1vh #fff;
animation: titlemove 2s 1;
animation-fill-mode: both;
animation-delay: 1.5s;
}

#img1, #img2, #img3, #img4, #img5, #imgetc{
position: fixed;
z-index: 3;
top: 78vh;
height: 6vh;
width: 5vw;
animation: image 2s 1;
animation-fill-mode: both;
}

#img1{
background: url(https://i.imgur.com/NiK2DK0.jpg);
background-size: cover;
background-position: top;
right: 9.35vw;
transition: 0.5s;
animation-delay: 3s;
}
#img1:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img2{
background: url(https://i.imgur.com/4gT82pr.jpg);
background-size: cover;
background-position: top;
right: 15.35vw;
transition: 0.5s;
animation-delay: 3.2s;
}
#img2:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img3{
background: url(https://i.imgur.com/muBvPXL.jpg);
background-size: cover;
background-position: top;
right: 21.35vw;
transition: 0.5s;
animation-delay: 3.4s;
}
#img3:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img4{
background: url(https://i.imgur.com/4TJKBe5.png);
background-size: cover;
background-position: top;
right: 27.35vw;
transition: 0.5s;
animation-delay: 3.6s;
}
#img4:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#img5{
background: url(https://i.imgur.com/tRxjYaS.jpg);
background-size: cover;
background-position: top;
right: 33.35vw;
transition: 0.5s;
animation-delay: 3.8s;
}
#img5:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

#imgetc{
background: url(https://i.imgur.com/eVpWZTp.png);
background-color: #7718c4;
background-size: 25%;
background-repeat: no-repeat;
background-position: center;
right: 39.35vw;
transition: 0.5s;
animation-delay: 4s;
}
#imgetc:hover{
transition: 0.5s;
box-shadow: 0 0 1vh #fff;
height: 12vh;
}

o{
filter: blur(5px);
}


</style>
<div id="nav1"><a href="#one"><img src="https://i.imgur.com/iusALTX.png"></a></div>
<div id="nav2"><a href="#two"><img src="https://i.imgur.com/iusALTX.png"></a></div>
<div id="nav3"><a href="#three"><img src="https://i.imgur.com/iusALTX.png"></a></div>
<div id="nav4"><a href="#four"><img src="https://i.imgur.com/iusALTX.png"></a></div>

<a target="_blank" href="https://i.imgur.com/NiK2DK0.jpg"><div id="img1"></div></a>
<a target="_blank" href="https://i.imgur.com/4gT82pr.jpg"><div id="img2"></div></a>
<a target="_blank" href="https://i.imgur.com/muBvPXL.jpg"><div id="img3"></div></a>
<a target="_blank" href="https://i.imgur.com/4TJKBe5.png"><div id="img4"></div></a>
<a target="_blank" href="https://i.imgur.com/tRxjYaS.jpg"><div id="img5"></div></a>
<a target="_blank" href="https://imgur.com/a/9J2xJfh"><div id="imgetc"></div></a>


<div id="background"></div>
<div id="image"></div>
<div id="title">From Shadows</div>


<div id="box"></div>
<div id="info">
<div style="height: 100%; overflow-y: hidden;">

 <a name="one"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>My name is Blake Belladonna.</h1>
 <p>I was born to Kali and Ghira Belladonna, the chief and chieftaness of Menagerie, were I was raised and where I lived for seventeen years. Before entering Beacon Academy to be a huntress, I trained with my father to fight the creatures of Grimm, and he taught me how to use my weapon, Gambol Shroud. Upon entering Beacon Academy, I was assigned to a team known as Team RWBY, with my teammates Ruby Rose, Weiss Schnee, and Yang Xiao Long.</p>
<p>After studying at the academy with my team for four years, I graduated from my class with flying colors, granted a Huntress's license, and sent out into the world. While my main goal at Beacon was to be taught in hunting the creatures of Grimm, I also sought lessons in musicianship, and was taught how to play a multitude of instruments. After my graduation from Beacon, I moved into an apartment in Vale, where I've lived ever since. I am regularly sent on assignments to defend the city from Grimm, and occasionally perform at bars for pocket money.</p>
<p>Lately, though, I've been finding myself gravitating around Casinos and Clubs, meeting new people, and making new friends, and forming new relationships. It's been a bit of an eye-opening experience, but not one that I'd take back.</p>
 </div>

 <a name="two"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>Dossier</h1>
Name: Blake Belladonna<br>
Age: Twenty-four years old<br>
Gender: Female<br>
Race: Feline Faunus<br>
Height: Five feet, seven inches tall<br>
<br>
Occupation(s): Huntress, Musician<br>
Orientation: Homosexual<br>
Status: Unattached, and not seeking.<br>
Preference: Competence.<br>
<br><br>

 </div>

<a name="three"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>Notes and Headcanons</h1>
<li>Hair style tends to vary from the typical Volume 1-6 Waist-Length to the Volume 7 shoulder-length cut.</li>
<br>
<li>Chill demeanor unless you're doing something ridiculously stupid, or morally sour.</li><br>

<li>Appreciates people having a sense of humor, a sense of decency, and most of all, having common sense. Which, ironically, is not so common any more.</li><br>

<li>Has been through some shit. Don't give her any more.</li>
 </div>

<a name="four"></a>
 <div style="width:100%; height: 100%; overflow: auto; " align="center">
 <h1>OOC</h1>
<ol>
<li>I made this code. If you'd like to see more like this, please go to <a target="_blank" href="profile.php?user=From+Shadows+Codes">My Coding Profile.</a></li>
<li>In-Room Approach is mandatory. I'm not going to respond to any random DMs from someone in PM Only. If you aren't going to bother interacting with me in room, don't bother DMing me.</li>
<li>I'm very picky as to who I roleplay with. Have a damn profile, for starters. If I see 'No Profile Yet', I am automatically going to ignore you.</li>
<li>If you have a problem with how I play this Blake, who is part of an <b>Alternate Universe which is not Canon</b>, then take your comments and <o>shove them up your ass.</o></li>
<li>Thanks so much for taking a look at my profile.</li>

</ol>
 </div></div>