ros code

<style>

@import url('https://fonts.googleapis.com/css?family=Ceviche+One');

body {background: #000;}
::-webkit-scrollbar {display:none}

a {text-decoration: none; color: #B22222;}
a:hover {color: #fff;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;}

.container {position: fixed;
height: 1px;
width: 1px;
left: 440px;
bottom: 0px;
}

.bar {position: absolute;
background: url('https://thumbs.dreamstime.com/b/seamless-pattern-black-white-rose-silhouette-floral-wallpaper-eps-105194866.jpg');
background-size: 300px;
height: 700px;
width: 470;
left: 34px;
bottom: 20px;
border: 10px solid #000;
}

.image {position: absolute;
background: url('https://i.imgur.com/SAw5cNq.jpg') no-repeat;
background-size: 550px;
background-position: -190px 0px;
height: 450px;
width: 350px;
left: 82px;
bottom: 200px;
border: 20px solid #000;
}

.name {position: absolute;
font-family: 'Ceviche One', cursive;
font-size: 90px;
color: #b22222;
-webkit-text-stroke: 5px #000;
left: 205px;
bottom: 155px;
}

.box {position: absolute;
background: #000;
height: 130px;
width: 390px;
left: 82px;
bottom: 60px;
}

.stats {position: absolute;
background: #000;
overflow: auto;
padding: 5px;
font-style: times;
font-size: 10px;
color: #fff;
text-align: justify;
height: 90px;
width: 90px;
left: 100px;
bottom: 75px;

}

#tab1, #tab2, #tab3 {position: absolute;
background: #000;
overflow: auto;
padding: 5px;
font-style: times;
font-size: 10px;
color: #fff;
text-align: justify;
height: 90px;
width: 225px;
left: 218px;
bottom: 75px;

}

#tab1:target {
overflow:auto;
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
z-index:1000;}
#tab2:target {
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
z-index:1000;}
#tab3:target {
transition:all .9s ease-in-out;
-webkit-transition:all .9s ease-in-out;
-o-transition:all .9s ease-in-out;
-moz-transition:all .9s ease-in-out;
z-index:1000;}

.navi{position: absolute;
left: 160px;
bottom: 105px;
margin:auto;
text-align:center;
width:100px;
}

.navi a{
background-color:#fff;
width: 5px;
height: 5px;
margin-bottom: 5px;
overflow: hidden;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
display: inline-block;
}

.navi a:hover{background-color: #B22222;
transition:all .7s ease-in-out;
-webkit-transition:all .7s ease-in-out;
-o-transition:all .7s ease-in-out;
-moz-transition:all .7s ease-in-out;
}

</style>

<div class="container">
<div class="bar"></div>
<div class="image"></div>

<div class="box"></div>
<div class="name">ROS</div>

<div class="stats">
<big><b>STATISTICS.</b></big><br>
<font style="float:left"><b>Name</b></font> <font style="float:right">Ros Arden</font><br>
<font style="float:left"><b>Age</b></font> <font style="float:right">23</font><br>
<font style="float:left"><b>Sex</b></font> <font style="float:right">Female</font><br>
<font style="float:left"><b>Nationality</b></font> <font style="float:right"><span title= "Irish, Italian, and French">Mutt</span></font><br>
<font style="float:left"><b>Birthplace</b></font> <font style="float:right">NYC</font><br>
<font style="float:left"><b>Occupation</b></font> <font style="float:right">Merc</font><br>
<font style="float:left"><b>Status</b></font> <font style="float:right">Single</font><br>
<font style="float:left"><b>Orientation</b></font> <font style="float:right">Bisexual</font><br>
<font style="float:left"><b>Height</b></font> <font style="float:right">answer</font><br>
Fill this up with as much or as little as you want. It scrolls.
</div>

<div class="navi">
<a href="#tab1"></a><br>
<a href="#tab2"></a><br>
<a href="#tab3"></a><br>
</div>

<div id="tab3">
<big><b>OUT OF CHARACTER.</b></big><p>
✘ Coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=words">Words</a><br>
✘ Modern/Fantasy preferred.<br>
✘ Snowball, one-liners, third-person, etc.<br>
✘ I am a flirt, but you ain't special.<br>
✘ Discord and other OOC details are earned. <br>
✘ Look! A whole <a target="_blank" href="https://imgur.com/a/WI28t">gallery</a> of images.
</div>

<div id="tab2">
<big><b>ENCOUNTERS.</b></big><br>
<center>
<a target="_blank" href="https://2.roleplay.chat/profile.php?user=Axl" title="While his memories may be shattered. I'll carve my name into his flesh, so he won't forget about me.">
<img style="background: url('https://i.imgur.com/BfU07Uf.png?1') no-repeat; background-size: 50px; border: 1px solid #B1BBBA; height:50px; width:50px;"></a>

<a target="_blank" href="FRIEND PROFILE LINK HERE" title="WORDS ABOUT YOUR FRIEND HERE">
<img style="background: url('50x50 AVATAR OF YOUR FRIEND HERE') no-repeat; background-size: 50px; border: 1px solid #B1BBBA; height:50px; width:50px;"></a>

<a target="_blank" href="FRIEND PROFILE LINK HERE" title="WORDS ABOUT YOUR FRIEND HERE">
<img style="background: url('50x50 AVATAR OF YOUR FRIEND HERE') no-repeat; background-size: 50px; border: 1px solid #B1BBBA; height:50px; width:50px;"></a>

<a target="_blank" href="FRIEND PROFILE LINK HERE" title="WORDS ABOUT YOUR FRIEND HERE">
<img style="background: url('50x50 AVATAR OF YOUR FRIEND HERE') no-repeat; background-size: 50px; border: 1px solid #B1BBBA; height:50px; width:50px;"></a>
</center>

</div>

<div id="tab1">
<big><b>BEAUTIFUL AND DEADLY.</b></big><br>
First tab.
<br><br>
Feel free to fill these tabs up with as little or as much information as you wish.They all scroll.
<br><br>
You may stylize your text using <b>bold</b> text, <i>italics</i>, or use <a href="">links</a>.
</div>

</div>