new la brava

<style>
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Handlee&family=Lovers+Quarrel&family=Mali:ital,wght@1,300&family=Pacifico&display=swap');
::-webkit-scrollbar {
 width: .1px;
}

::-webkit-scrollbar-track {
 box-shadow: inset 0 0 5px grey;
 border-radius: 10px;
}

::-webkit-scrollbar-thumb {
 background: #b95595;
 border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
 background: #b95591;
}

body {
	background-color: #FFB0E5;
	background-image: url('') ;
	background-position: fixed;
 background-size: 85%;
	background-repeat:no-repeat;
	background-position: center;
}


h1 {
color: #000;
border-bottom: 1px solid #000;
font-family: 'Pacifico', cursive;
font-size: 25px;
text-align: center;
font-weight: bold;
padding: 5px;
}

.labravatitle{
 position: fixed;
 top: 33vw;
 left: 5vw;
font-family: 'Lovers Quarrel', cursive;
text-decoration: none;
font-size: 150px;
color: #BB1F46;
display: inline-block;
opacity: 0;
height: 200px;
width: 500px;
text-shadow:5px 5px #F2888C;
display: inline-block;
 animation: title 1s forwards;
 animation-delay: 2.5s;
}

.labrava{
 position: fixed;
 top: 0vw;
 left: 32vw;
 transform: rotate(0deg);
 z-index: -2;
opacity: 0;
 animation: title .5s forwards;
 animation-delay: .5s;
}




#navi1 {position: fixed;
 left: 17vw;
 top: 10vw;
 z-index: 5;
vertical-align: top;
}

#navi1 a {

font-family: 'Lovers Quarrel', cursive;
text-decoration: none;
font-size: 75px;
color: #FFB0E5;
display: inline-block;
opacity: 1;
height: 30px;
width: 215px;
transition: .8s;
}

#navi1 a:hover {
color: #BB1F46;
text-shadow:0px 0px 3px #000;
display: inline-block;
}

#navi2 {position: fixed;
 left: 20vw;
 top: 17vw;
 z-index: 5;
vertical-align: top;
}

#navi2 a {
font-family: 'Lovers Quarrel', cursive;
text-decoration: none;
font-size: 75px;
color: #FFB0E5;
display: inline-block;
opacity: 1;
height: 30px;
width: 215px;
transition: .8s;
}

#navi2 a:hover {
color: #BB1F46;
text-shadow:0px 0px 3px #000;
display: inline-block;
}

#navi3 {position: fixed;
 left: 25vw;
 top: 23.5vw;
 z-index: 5;
vertical-align: top;
}

#navi3 a {
font-family: 'Lovers Quarrel', cursive;
text-decoration: none;
font-size: 70px;
color: #FFB0E5;
display: inline-block;
opacity: 1;
height: 30px;
width: 215px;
transition: .8s;
}

#navi3 a:hover {
color: #BB1F46;
text-shadow:0px 0px 3px #000;
display: inline-block;
}



.content{
position: fixed;
top: 3vw;
left: 70vw;
z-index: 1;
opacity: 0;
transition: .5s;
}

.content:target{
top: 3vw;
left: 70vw;
z-index: 1;
opacity: 1;

}

.contentbox{
background-color: #F2888C;
font-family: 'Hachi Maru Pop', cursive;
font-size:16px;
border-style: inset;
border-color: #BB1F46;
border-radius: 5px;
color: #000;
letter-spacing: 0px;
width: 400px;
height: 500px;
overflow: auto;
position: fixed;
z-index: 0;
text-shadow:none;
opacity: 1;
}

.bar1{
 position: fixed;
 top: 10vw;
 left: -150vw;
 opacity: 1;
 z-index: -20;
 animation: bar1 1s forwards;
 animation-delay: 1s;
}

.bar1back{
 position: fixed;
 top: 9vw;
 left: -150vw;
 opacity: 1;
 z-index: -21;
 animation: bar1 1s forwards;
 animation-delay: 1s;
}

.bar2{
 position: fixed;
 top: 17vw;
 left: -150vw;
 opacity: 1;
 z-index: -20;
 animation: bar1 1s forwards;
 animation-delay: 1.5s;
}

.bar2back{
 position: fixed;
 top: 16vw;
 left: -150vw;
 opacity: 1;
 z-index: -21;
 animation: bar1 1s forwards;
 animation-delay: 1.5s;
}

.bar3{
 position: fixed;
 top: 24vw;
 left: -150vw;
 opacity: 1;
 z-index: -20;
 animation: bar1 1s forwards;
 animation-delay: 2s;
}

.bar3back{
 position: fixed;
 top: 23vw;
 left: -150vw;
 opacity: 1;
 z-index: -21;
 animation: bar1 1s forwards;
 animation-delay: 2s;
}

@keyframes bar1{
 0% { left: -150vw; }

 100% {left: 0vw; }

}

@keyframes title{
 0% { opacity:0 }

 100% { opacity:1 }

}

</style>
<body>

<div class="bar1">
<img src="https://i.ibb.co/Gx88N8t/labravabar1.jpg" width="2000" height= "75">
</div>

<div class="bar1back">
<img src="https://i.ibb.co/P5rNvr3/labravabar2.png" width="2000" height= "100">
</div>

<div class="bar2">
<img src="https://i.ibb.co/Gx88N8t/labravabar1.jpg" width="2000" height= "75">
</div>

<div class="bar2back">
<img src="https://i.ibb.co/P5rNvr3/labravabar2.png" width="2000" height= "100">
</div>

<div class="bar3">
<img src="https://i.ibb.co/Gx88N8t/labravabar1.jpg" width="2000" height= "75">
</div>

<div class="bar3back">
<img src="https://i.ibb.co/P5rNvr3/labravabar2.png" width="2000" height= "100">
</div>

<div class="labrava">
<img src="https://i.ibb.co/hdn85Zg/labravamain2.png" width="500">
</div></div>

<div class="labravatitle">
La Brava
</div></div>

<div id="navi1"><a href="#one">I</a></div></div>
<div id="navi2"><a href="#two">Love</a></div></div>
<div id="navi3"><a href="#three">You</a></div></div>


 <div id="one" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/yQ2VWn7/Brava-heart-1.png" width="50" ></a></span>
<h1>Stats</h1>
<span style="float:left;"><b>Name</b></span><span style="float:right;">Manami Aiba</span><br>
<span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
<span style="float:left;"><b>Age</b></span><span style="float:right;">22</span><br>
<span style="float:left;"><b>Race</b></span><span style="float:right;">Quirked Human</span><br>
<span style="float:left;"><b>Hero Name</b></span><span style="float:right;">La Brava</span><br><br>

<span style="float:left;"><b>Height</b></span><span style="float:right;">3'8"</span><br>
<span style="float:left;"><b>Weight</b></span><span style="float:right;">100lbs</span><br>
<span style="float:left;"><b>Eyes</b></span><span style="float:right;">Pink with Purple rings</span><br>
<span style="float:left;"><b>Hair</b></span><span style="float:right;">Magenta</span><br>
<span style="float:left;"><b>Orientation</b></span><span style="float:right;">Straight</span><br>
<span style="float:left;"><b>Relationship</b></span><span style="float:right;"><a target="_blank" href="">---</a></span><br>
<span style="float:left;"><b>Affiliation</b></span><span style="float:right;">---</span><br>


</div>
</div>

 <div id="two" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/3dWMghF/Brava-Heart-2.png" width="50" ></a></span>
<h1>Headcanons</h1>
</div>
</div>

 <div id="three" class="content"><div class="contentbox">
<span style="float:right;"><a href="#"><img src="https://i.ibb.co/6RV9RvL/Brava-Heart-3.png" width="20" ></a></span>
<h1>OOC</h1>
1. MHA Canon<br>
2. Handmade code. Want one? Ask.<br>
3. DM Friendly.<br>
4. Snowballer.<br>
5. Smut reserved.<br>

</div>
</div>




</body>
</body>