new ochaco code

<style>
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&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;
}


h1 {
color: #000;
border-bottom: 1px solid #000;
font-family: 'Bangers', cursive;
font-size: 25px;

font-weight: bold;
padding: 5px;
}



body{
background: #66b3c7;
background-image: url('https://cdn.pixabay.com/photo/2014/09/08/12/35/abstract-439142_1280.jpg');
background-repeat: no-repeat;
	background-position: top left;
 background-size: 100%;
position: fixed;
}

.startitle{
position: fixed;
 bottom: 1.5vw;
 left: 37vw;
z-index:100;
opacity:1;
font-family: 'Bangers', cursive;
font-size:40px;
color: #000;
transform: rotate(-5deg);
}

.startitle2{position: fixed;
 bottom: -0.4vw;
 left: 46.5vw;
z-index:100;
opacity:1;
font-family: 'Bangers', cursive;
font-size:40px;
color: #000;
transform: rotate(-5deg);
}

.startitle3{position: fixed;
 bottom: 4.5vw;
 left: 67.5vw;
z-index:100;
opacity:1;
font-family: 'Bangers', cursive;
font-size:40px;
color: #000;
transform: rotate(-5deg);
}

.startitle4{position: fixed;
 bottom: 2.3vw;
 left: 67.3vw;
z-index:100;
opacity:1;
font-family: 'Bangers', cursive;
font-size:39px;
color: #000;
transform: rotate(-5deg);
}

.startitleveryback{
position: fixed;
 bottom: 36vw;
 left: -50vw;
z-index:-4;
color: #8a3d6b;
opacity:1;
font-size:50px;
transform: rotate(-5deg);
overflow-x: hidden;
animation: backtext1 4s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.startitleveryback2{
position: fixed;
 bottom: 1vw;
 left: -0vw;
z-index:4;
color: #8a3d6b;
opacity: .5;
font-size:50px;
transform: rotate(-5deg);
overflow-x: hidden;
animation: backtext2 6s infinite;
animation-timing-function:linear;
 animation-delay: 0s;
}

.ochaco{
 position: fixed;
 top: 0vw;
 left: 10vw;
 transform: rotate(0deg);
 z-index: -2;
}

.ochacoshadow{
 position: fixed;
 top: 0vw;
 left: 10.5vw;
 transform: rotate(0deg);
 z-index: -3;
filter: brightness(0);
}

.barback1{
 position: fixed;
 top: 0vw;
 left: 0vw;
 transform: rotate(0deg);
 z-index: -3;
filter: brightness(1);
}

.bar{
 position: fixed;
 bottom: -1.5vw;
 left: -10vw;
 transform: rotate(-5deg);
 z-index: 2;
filter: brightness(5);
}



.bar2{
 position: fixed;
 bottom: -.1vw;
 left: -10vw;
 transform: rotate(-5deg);
 z-index: 2;
filter: brightness(7);
}

.bar3{
 position: fixed;
 bottom: 40vw;
 left: -10vw;
 transform: rotate(-5deg);
 z-index: -5;
filter: brightness(5);
}

.bar4{
 position: fixed;
 bottom: 40.7vw;
 left: -10vw;
 transform: rotate(-5deg);
 z-index: -4;
filter: brightness(6);
}


#navi1 {position: fixed;
 left: 58vw;
 bottom: 3.5vw;
 z-index: 5;
vertical-align: top;
}

#navi1 a {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
opacity: 1;
height: 18px;
width: 50px;
border: 4px solid #4a223a;
text-decoration: none;
text-align: center;
color: #000;
font-family: 'Bangers', cursive;
transition: .5s;
}

#navi1 a:hover {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
height: 18px;
width: 55px;
}

#navi2 {position: fixed;
 left: 57.7vw;
 bottom: 1.2vw;
 z-index: 5;
}

#navi2 a {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
opacity: 1;
height: 18px;
width: 50px;
border: 4px solid #4a223a;
text-decoration: none;
text-align: center;
color: #000;
font-family: 'Bangers', cursive;
transition: .5s;
}

#navi2 a:hover {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
height: 18px;
width: 55px;

}

#navi3 {position: fixed;
 left: 63vw;
 bottom: 3.95vw;
 z-index: 5;}

#navi3 a {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
opacity: 1;
height: 18px;
width: 50px;
border: 4px solid #4a223a;
text-decoration: none;
text-align: center;
color: #000;
font-family: 'Bangers', cursive;
transition: .5s;
}

#navi3 a:hover {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
height: 18px;
width: 55px;

}

#navi4 {position: fixed;
 left: 62.8vw;
 bottom: 1.6vw;
 z-index: 5;}

#navi4 a {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
opacity: 1;
height: 18px;
width: 50px;
border: 4px solid #4a223a;
text-decoration: none;
text-align: center;
color: #000;
font-family: 'Bangers', cursive;
transition: .5s;
}

#navi4 a:hover {background-color: #6f3357;
transform: skew(-12deg) rotate(-5deg);
background-size: 100%;
display: inline-block;
height: 18px;
width: 55px;

}

.content{
position: fixed;
top: 50vw;
left: 50vw;
transform: skew(-2deg);
z-index: 1;
opacity: 0;
transition: .8s;
-moz-transition: .8s;
webkit-transition: .8s;
-o-transition: .8s;
}

.content:target{
top: -1vw;
left: 50vw;
z-index: 1;
opacity: 1;
transition: 1.2s;
-moz-transition: 1.2s;
webkit-transition: 1.2s;
-o-transition: 1.2s;
opacity: 1;
}

.contentbox{
background-color: #ff77cb;
font-family: 'Caveat Brush', cursive;
font-size:16px;
color: #000;
letter-spacing: 0px;
width: 425px;
height: 560px;
overflow: auto;
position: fixed;
line-height: 15px;
padding: 5px;
border: 10px solid #b95591;
z-index: 1;
text-shadow:none;
opacity: 1;
}


@keyframes backtext1{
 0% {  bottom: 36vw; left: -49vw; }

 100% {  bottom: 40.5vw; left: -0vw; }

}

@keyframes backtext2{
 0% {    bottom: -4.3vw; left: -59vw; }

 100% {   bottom: 1vw; left: -0vw; }

}


</style>
<body>
<div class="ochaco">
<img src="https://i.ibb.co/SRsFkgh/Ochaco-Uraraka-s-New-Hero-Costume-Color.png" width="">
</div></div>

<div class="ochacoshadow">
<img src="https://i.ibb.co/SRsFkgh/Ochaco-Uraraka-s-New-Hero-Costume-Color.png" width="">
</div></div>



<div class="bar">
<img src="https://i.ibb.co/rwgs81z/ochacobar.png" width="2000" height="125">
</div></div>

<div class="bar2">
<img src="https://i.ibb.co/rwgs81z/ochacobar.png" width="2000" height="90">
</div></div>

<div class="bar3">
<img src="https://i.ibb.co/rwgs81z/ochacobar.png" width="2000" height="90">
</div></div>

<div class="bar4">
<img src="https://i.ibb.co/rwgs81z/ochacobar.png" width="2000" height="70">
</div></div>

<div class="startitle">
<center>Uraraka Ochaco ▰</center>
</div></div>


<div class="startitle2">
<center>Uravity ▰ </center>
</div></div>

<div class="startitle3">
<center>▰The Zero Gravity Heroine </center>
</div></div>

<div class="startitle4">
<center>▰Half of the Shooting Stars </center>
</div></div>

<div class="startitleveryback">
<img src="https://i.ibb.co/bgSnsgh/ochacoletters.png" width="" height="100">
</div></div>

<div class="startitleveryback2">
<img src="https://i.ibb.co/bgSnsgh/ochacoletters.png" width="" height="120">
</div></div>

<div id="navi4"><a href="#four">OOC</a></div></div>
<div id="navi3"><a href="#three">Friends</a></div></div>
<div id="navi2"><a href="#two">HC's</a></div></div>
<div id="navi1"><a href="#one">Stats</a></div></div>

<div id="one" class="content"><div class="contentbox">
<center><h1>INTO THE STARS✨</h1>
<b>name: </b>Uraraka Ochaco<br>
<b>nickname: </b>Grav Girl, Round face, Cinnamon roll, Kirby<br>
<b>hero name:</b> uravity<br>
<b>age: </b>16 y.o<br>
<b>quirk:</b> zero gravity<br>
-------------------------------<br>

<b>orientation:</b> straight<br>
<b>team:</b> midoriya's<Br>
<b>marital status:</b><a target="_blank" href="https://roleplay.chat/profile.php?user=Afterburner">Flying Fireworks</a></td></span></font></font><br><br>
<b>height:</b> 156cm<br>
<b>fighting style:</b> gunhead martial arts<br>
<b>scent:</b> cherry blossoms and summer breeze<br>

<b>theme:</b><a target="_blank" href="https://www.youtube.com/watch?v=lxZ7OTm72mY">Sky Blue Days</a></td></span></font></font><br>
<br>

<h1>PERSONALITY❤</h1><br>


Ochaco is a very warm, bubbly, and lively person who thinks about everything positively. she is objective enough to see flaws and virtues of something or someone, noticing their differences but respecting them as she thinks all things and beings complement each other. she is very harmonic and empathetic in general, friendly to those she meets, and will try to help or defend anyone that previously came to her aid, especially her dear ones. however, Ochaco can be incredibly blunt without being aware of it at times, has trouble understanding certain things surrounding her even her own feelings. she seems to be very good at reading people.<br><br>
she can take on an extremely determined, focused, and somewhat intimidating attitude when the situation calls for it, which can come as a surprise to those who are used to her cheerful side. this side of her tends to appear during combat situations, where Ochaco also demonstrates a surprisingly strategic mind, although she is not above taking more impulsive, reckless decisions. she dislikes being underestimated.<br><br><br><br><br>




</div>
</div>
 <div id="two" class="content"><div class="contentbox">
<center><h1>HEADCANONS</h1>
[<I>Wears a ring on her left hand. It signifies a promise of a future with the Jet Hero; <b>Aiza Kuroiki</b> The two have the goal of opening their own agency called <u>The Shooting stars.</u></i>]<br><br>
[<I>Has decided to raise a kitten with Aiza. It is a small Siamese cat named <b><a target="_blank" href="https://cdn.basepaws.com/wp-content/uploads/2019/08/00-4.jpg">Cosmo</a></td></span></font></font></b></i>]<br><br>
<h1> </h1>
<B>01.</b> free afternoons are her favorite thing to have. to pass the time, a nice and warm cup of tea or coffee is needed. it all depends on the mood she feels. might end up drinking two cups of coffee a day. with the tea, she is more flexible, has many benefits for her physical and mental health.<br><br>

<b>02.</b>In fear of activating her quirk at night, she sleeps with a special set of pink gloves to prevent her quirk from activating. She has the small fear of waking up with objects or even herself floating around..<br><br>

<b>03.</b>the smell of an old or new book is one of her favorite aromas. during her breaks or free afternoons, she would read a book accompanied by a drink she wants. prefers analytical stories from different periods that revolve around romanticism, modernism, cavalry novels, or to learn a new topic. at the moment, she is studying astronomy and botany.<br><br>

<b>04.</b>as a student, she has the privilege to attend and receive discounts in movies and museums. prefers to get lost at museums. tends to space out watching or sketching different art pieces. her favorite artists: Claud Oscar Monet, Vincent Van Gogh, Pablo Picasso, and Crispin Young Wilson.<br><br>

<b>05.</b>instead of throwing the empty bag of tea, uraraka tends to collect them. only the ones that have a cute design or have the smell she enjoys. she has a small album to collect and preserve properly..<br><br>

<b>06.</b>always carries a pen or highlighter. never knows when she will be needing one.<br><br>

<b>07.</b>favorite teas: green, lavender, and orange. in that order.<br><br>

<b>08.</b>Her favorite colors are pink and navy blue. pink offers her a calm mind and serenity. while blue gives her courage and determination. it also reminds her of the vast night sky.<br><br>

<b>09.</b>whenever she gets flustered or embarrassed, Uraraka acts without thinking. it can make her voice a little higher, move around her limbs (especially her arms), even activate her quirk making herself float. has happened before, by accident she activates her quirk on objects like chairs, couches, notebooks, etc., even on her.<br><br>

<b>10.</b>Uraraka has many hobbies she enjoys passing the time and that helps her to relax. drawing, dancing, and jogging have helped her to clear her head and bring calm to her body. also, teaches her to be patient and control over her own movements.<br><br>

<b>11.</b> she can be a little oblivious to notice things around her. friends and classmates had to be really direct in their conversations. hints or discreet comments won’t help her much…she probably won’t understand.<br><br>

<b>12.</b>Another of her hobbies is arts and crafts. Uraraka tends to recycle objects to remake them into something new. has a small talent with jewelry, has done bracelets and earrings from lost things or shiny rocks she finds.<br><br>

<b>13.</b>To improve the techniques, she learned in her internship with GunHead, her exercise routine consists of circuits training, yoga, swimming, and sparring. All of these help her to improve reflexes, combat abilities, flexibility, motion, and resistance for her body and quirk.<br><br>

<b>14.</b>Uraraka is a saving girl. to not waste money, goes over newspapers and magazines to cut out discount sales. her wallet is full of different coupons for different stores. it covers food, accessories, school materials, and clothing. Considering her family's finances, she recycles and redesigns old clothing. nothing goes to waste.<br><br>


<b>15.</b>The gravity girl often misses meals or doesn't have a complete lunch. Either for saving reasons or because of school. She prefers to sleep or nap...than to spend money on food. <br><br>

<b>16.</b> Uraraka is an easily scared person. She doesn't do well with horror movies or dark places. However, she reacts differently whenever she is afraid. One: Whenever there is something scary or is too dark; she can hold hands, embrace, or lean very close to someone close by her side. Two: If someone does try to sneak attack her, she can perform any self-defense move she learned from her internship with the Pro hero GunHead. Of course, she doesn't mean to hurt anyone, she simply moves by instinct and to shield herself.<br><br>

<b>17.</b>---She carries an old version cellphone. doesn’t want to change it, even though is a flip phone it has memories from her parents and it’s her favorite price possession. but most importantly…. if it works is still usable.---[Redacted] Thanks to <b>Katsumi</b> and <b>Aiza</b>, she has a new cellphone. Is still learning how to send messages and take pictures. The electronic device is a little too modern for her own taste. Uraraka is not tech-savvy, is having some trouble with how it works. Although, she knows the basic guidelines and how it works…just the basic apps. <br><br>

<b>18.</b>Inspired by Aiza and Deku's quirks, Ochaco has made small modifications to her hero costume, which includes the grappling hooks on both wrists and thrusters on her boots. The hooks on her wrists help her attract objects and civilians towards her (perfect for rescuing missions) or pull herself towards things and buildings. As for her boots, she installed small thrusters that allow her to fly a little faster, balance when in the air, and to control movement whenever she floats. <br><br><br><br><br>

</div>
</div>
 <div id="three" class="content"><div class="contentbox">
<center><h1>Friends</h1>
<a target="_blank"title="The Jet Hero. A promise unites us. We'll make it." href="https://roleplay.chat/profile.php?user=Afterburner">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="http://i.picpar.com/kmOe.jpg"></a>

<a target="_blank"title="Siren of 2-A. Someone to admire, someone I love." href="https://roleplay.chat/profile.php?user=Katsumi+Aizada">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="https://i.pinimg.com/474x/1f/e5/a3/1fe5a31785b80a1c158dbad47c176f29.jpg"></a>

<a target="_blank"title="Alien Queen. True beauty and my closest friend. Love her too much" href="https://roleplay.chat/profile.php?user=Ashido Mina">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="https://i.imgur.com/S3Ai0Er.png"></a><br>


<a target="_blank" title="Explosion Murder. Inspires me to be stronger and better."href="https://roleplay.chat/profile.php?user=Katsuki+Bakugo">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQfmaK95CPZbvDOIMsj3T7JpnUUJ2-Ayl0f6A&usqp=CAU"></a>


<a target="_blank"title="Deku. My best friend and confidant." href="https://roleplay.chat/profile.php?user=Izuku">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="https://66.media.tumblr.com/2d2bd59f91f7be20a8a1dd0dd0863b8d/tumblr_peavvxAhOL1v704jyo7_250.png"></a>


<a target="_blank" title="Bronx Wolf. A true fighter. Gives me fuel to be better."href="https://roleplay.chat/profile.php?user=Connor+Arai">
<img style="border: 2px solid #d40482; height:50px; border-radius: 50%;" src="http://i.picpar.com/Emqe.jpg"></a>
</div>
</div>
 <div id="four" class="content"><div class="contentbox">
<center><h1>OOC</h1>
 <b>01.</b> Code made by a very <u>good friend</u>.<br>
 <b>02.</b> IRL>RPC<br>
 <b>03.</b> Discord available for friends and partners.<br>
 <b>04.</b> Story> Smut.<br>
 <b>05.</b> DM friendly<br>
 <b>06.</b> OOC is very shy...please have patience.<br>
<b>07.</b> I will play Ochaco trying to be near as possible from manga and anime.<br>
<b>08.</b> No insta-shipping. Chemistry is <b>KEY</B>.<br>

</div>
</div>

</body>
</body>