forb

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
body {
 background: url('https://i.imgur.com/y6RgcUk.png?1');
 background-repeat: no-repeat;
 overflow: hidden;
}
::-webkit-scrollbar
{
 width: 0px;
 background-color: transparent;
}
a {
 color: indigo;
 text-decoration: none;
}
b{
 font-size: inherit;
 letter-spacing: 1px;
}

#box {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -200px;
 margin-left: -375px;
 height: 400px;
 width: 750px;
 border: 1px solid black;
 background: url('https://i.imgur.com/b3CQlbT.png');
 background-size: 100% 100%;
 padding: 7px;
 border-radius: 10px
}
#title {
 position: absolute;
 top: -45px;
 left: 25px;
 font-size: 40px;
 color: #A8988C;
 font-family: 'Pacifico', cursive;
 text-shadow: 1.5px 1.5px #3C3937;
}
#title2 {
 position: absolute;
 bottom: -45px;
 right: 5px;
 font-size: 40px;
 color: #C0AFA3;
 font-family: 'Pacifico', cursive;
 text-shadow: 1.5px 1.5px #3C3937;
}

#img {
 position: absolute;
 left: 15px;
 bottom: 15px;
 height: 380px;
 width: 250px;
 border: 1px solid black;
 overflow: hidden;
 opacity: 1;
 background-size: 100%;
}

.x1{

background:url('https://i.imgur.com/tkVpZW6.png');
}

 .x2{
 background: url('https://i.imgur.com/HVQjkSD.png');
}
.x3{
 background: url('');
}
 .x4{
 background: url('');
}
 .x5{
 background: url('');
}

#smallimg {
 position: absolute;
 background-size: 130%;
 background-position: -30 -270;
 right: 15px;
 top: 17px;
 height: 120px;
 width: 225px;
 border: 1px solid black;
 overflow: hidden;
 opacity: 1;
}

.y1{
 background: url('https://i.imgur.com/EUap9dP.png');
}

 .y2{
 background: url('');
}
 .y3{
 background: url('');
}
.y4{
 background: url('');
}
 .y5{
 background: url('');
}

#smallimg2 {
 position: absolute;
 background-size: 100%;
 background-position: 0 -100;
 right: 15px;
 bottom: 15px;
 height: 250px;
 width: 225px;
 border: 1px solid black;
 overflow: hidden;
 opacity: 1;
}

 .z1{
 background: url('https://i.imgur.com/LSkmpQs.png');

}

.z2{
 background: url('');

}
 .z3{
 background: url('');

}
.z4{
 background: url('');

}
 .z5{
 background: url('');

}

#tab1{
position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -200px;
 margin-left: -375px;
 height: 400px;
 width: 750px;
 border-radius: 10px;
 opacity: 1;
z-index:10;
}
#one{
 height: 365px;
 width: 225px;
 padding:7px;
 background-color: #EDE2DA;
 border:solid 1px black;
 position:absolute;
 left:274px;
 top:17px;
 animation: one 0s;
 animation-fill-mode: forwards;
 transition:1s;
 overflow:auto;
 color: black;
 line-height: ;
 font-size:15px;
 font-family: 'Alegreya Sans sc', cursive;
 text-align: justify;
}



#tab2, #tab3, #tab4, #tab5{
 position: absolute;
 left: 50%;
 top: 50%;
 margin-top: -200px;
 margin-left: -375px;
 height: 400px;
 width: 750px;
 padding: px;
 border-radius: 10px;
 opacity: 0;
z-index:9;
}

#two, #three, #four, #five{
 opacity:1;
 height: 365px;
 width: 225px;
 padding:7px;
 background-color: #EDE2DA;
 border:solid 1px black;
 position: absolute;
 left:274px;
 top:17px;
 color:#000;
 transition:1s;
 line-height: .85;
 font-size:13px;
 font-family: 'Alegreya Sans SC', cursive;
 text-align: justify;
 overflow: auto;
}

#tab2:target, #tab3:target, #tab4:target, #tab5:target{
 opacity:1;
 z-index:11;
}

#navi{
 width:50px;
 height:125px;
 background-color:transparent;
 position:absolute;
 bottom:-16px;
 right: -45px;
 z-index:99;
 font-family: 'Alegreya Sans sc', cursive;
 text-align: center;
 font-size: 13;
 float:left;
 opacity:0;
 animation:navi 0s;
 animation-fill-mode: forwards;
}

@keyframes navi{
0%{
 opacity:0;
}
90%{
 opacity:0;
}
100%{
 opacity:1;
}
}

#navi a{
 width:50px;
 height:15px;
 background-color:#fff;
 border:solid 1px black;
 display: block;
 margin-left:10px;
 margin-top: 5px;
 transition:1s;
}

#navi a:hover{
 background-color: plum;
}

#icon{
 height: 75px;
 width: 75px;
 border: 1px black double;
}
</style>

<div id="box">
<div id="title">
<i>TITLE TOP.</i>
</div>
<div id="title2">
<i>TITLE BOTTOM.</i>
</div>
<div id="tab1">
<div id="img" class="x1">
</div>
<div id="smallimg" class="y1">
</div>
<div id="smallimg2" class="z1">
</div>
<div id="one">
<span style="float: left;"><b>Name</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Alias</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Date of birth</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Height</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Relationship</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Orientation</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Occupation</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Location</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Vice</b></span><span style="float: right">xxxxx</span><br>
<span style="float: left;"><b>Misc</b></span><span style="float: right">xxxxx</span><br><br>
☩ Some.<br><br>
☩ Stats.<br><br>
☩ Here.
</div>
</div>
<div id="tab2">
<div id="img" class="x2">
</div>
<div id="smallimg" class="y2">
</div>
<div id="smallimg2" class="z2">
</div>
<div id="two">
dsgfsdgdsgsdg
</div>
</div>

<div id="tab3">
<div id="img" class="x3">
</div>
<div id="smallimg" class="y3">
</div>
<div id="smallimg2" class="z3">
</div>
<div id="three">
<b>FRIENDS</b><br><br>
<img src="https://i.imgur.com/SjDduRs.png" id="icon" align="right"><b>NAME</b><br>Text.</span><br><br><br><br><br><br><br>
<img src="https://i.imgur.com/SjDduRs.png" id="icon" align="right"><b>NAME</b><br>Text.</span><br><br><br><br><br><br><br>
<img src="https://i.imgur.com/SjDduRs.png" id="icon" align="right"><b>NAME</b><br>Text.</span><br>
</div>
 </div>

<div id="tab4">
<div id="img" class="x4">
</div>
<div id="smallimg" class="y4">
</div>
<div id="smallimg2" class="z4">
</div>
<div id="four">
<a target="_blank" href="LINK">Images used.</a><br><br>
</div>
</div>
 <div id="tab5">
<div id="img" class="x5">
</div>
<div id="smallimg" class="y5">
</div>
<div id="smallimg2" class="z5">
</div>
<div id="five">
ooc n shit
</div>
 </div>

<div id="navi">

<a href="#tab1">stats</a>
<a href="#tab2">info</a>
<a href="#tab3">amigos</a>
<a href="#tab4">media</a>
<a href="#tab5">ooc</a>
</div>
</div>
</div>