ｍｙｔｈｉｃａｌ

<style>
body {
  background-color: black;
  background-image: url("https://www.transparenttextures.com/patterns/xv.png");
  overflow: hidden;
}

::-webkit-scrollbar {
  display: none;
}

h1 {
text-align: left;
padding: 5px;
font-size: 18px;
font-family: 'Cinzel';
line-height: 10px;
letter-spacing: 1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

a {
  text-decoration: none;
  color: #7a0000;
}

b {
  border: 1px solid black;
  padding: 3px;
  line-height: 2;
}

.image {
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 450px;
  width: 150px;
  background-image: url('https://i.imgur.com/fUVv2pY.jpg');
  background-size: 400px;
  background-position: -190px 0px;
  border: 1px solid white;
  border-radius: 10px;
  transition: 2s ease-in-out;
  z-index: 1;
}

.image2 {
  position: absolute;
  bottom: 15px;
  right: 15px;
  height: 450px;
  width: 150px;
  background-image: url('https://i.imgur.com/CH8683S.jpg');
  background-size: 600px;
  background-position: 220px 0px;
  border: 1px solid white;
  border-radius: 10px;
  transition: 2s ease-in-out;
  opacity: 0;
  transform: scaleX(-1);
  z-index: 2;
}

.image2:hover {
  opacity: 1;
}

.line {
  position: absolute;
  bottom: 200px;
  right: -10px;
  height: 50px;
  width: 400px;
  background-color: white;
  transform: skew(-15deg);
}

.title {
  position:absolute;
  bottom: 244px;
  right: 180px;
  font-family: 'Robot Condensed', sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #7a0000;
  filter: drop-shadow(3px 3px 0px white);
}

.box {
  overflow: auto;
  position: absolute;
  bottom: 15px;
  right: 173px;
  width: 204px;
  height: 160px;
  background-color: white;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13px;
  padding: 10px;
  opacity: 0;
  transition: 1s ease-in-out;
}

.box:target{
  opacity: 1;
  z-index: 5;
}

.nav {
position: absolute;
right: 0px;
bottom: 200px;
width: 270px;
letter-spacing: 1;
font-size: 22px;
text-align: left;
z-index: 5;
text-decoration: none;
overflow: auto;
}

.nav a {
color: #212121;
text-align: center;
font-family: 'Cinzel';
transition: .5s linear;
-o-transition: .5s linear;
-moz-transition: .5s linear;
-webkit-transition: .5s linear;
text-decoration: none;
text-shadow: 0 0 5px #fff;
overflow: auto;
}

.nav a:hover {
color: #7a0000;
text-shadow: 0 0 5px #7a0000;
text-align: center;
font-weight: 700;
transition: .5s linear;
-o-transition: .5s linear;
-moz-transition: .5s linear;
-webkit-transition: .5s linear;
text-decoration: none;
overflow: auto;
}

.credit {
 position:absolute;
 bottom:0px;
 leeft:5px;
 height:60px;
 width:60px;
 opacity: .7;
 background-image: url('https://i.imgur.com/67eVLlq.png');
 background-position: center;
 background-size: cover;
}

</style>

<div class="image"></div>
<div class="image2"></div>

<div class="line"></div>

<div class="title"><i>Amadeus</i></div>

<div class="nav">
<a href="#1">I</a>
<a href="#2">II</a>
<a href="#3">III</a>
<a href="#4">IV</a>
</div>

<div class="box" id="1">
 <h1>dossier</h1>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
 <b>STAT</b><font style="float:right">here.</font><br>
</div>

<div class="box" id="2">
 <h1>tab 2</h1><center>
put yo mf history/story/bitches whatever you want in here.
</center>
</div>

<div class="box" id="3">
 <h1>tab 3</h1>
acab
</div>

<div class="box" id="4">
 <h1>out of fucks</h1>
 <b>000.</b> ooc here bitches<br>
 <b>001.</b> pussy<br>
 <b>002.</b> coochie<br>
 <b>003.</b> kitty<br>
 <b>004.</b> babymaker<br>
 <b>005.</b> ???<br>
 <b>006.</b> what you still doing here mate go code urself a profile<br>

</div>

<a href="https://roleplay.chat/profile.php?user=wife"><div class="credit"></div></a>