Ceres

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Raleway|Montserrat|Meie+Script');

::-webkit-scrollbar-thumb {background: #000000;}
::-webkit-scrollbar {width: 0px;}

#extra {position: fixed;top: 0px; left: 0px;bottom: 0px; right: 0px;z-index:999;}

body{
background: #f9f9f9;
overflow: hidden;
}

#box{
position: absolute;
left: 10%;
top: 10%;
height: 90%;
width: 30%;
background: #F440A0;
opacity: 0.6;
-webkit-clip-path: polygon(80% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(80% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
}

#decobox{
position: absolute;
top: 27%;
left: 0;
height: 36%;
width: 39%;
border-top: 1px solid #DD2CA0;
border-right: 1px solid #DD2CA0;
border-bottom: 1px solid #DD2CA0;
}

#img{
position: absolute;
top: 25%;
left: 0;
height: 40%;
width: 40%;
background: url(https://i.imgur.com/zM92h7g.gif) no-repeat;
background-size: 100% auto;
background-position: 0px, ;
}


#title{
position: absolute;
top: 57%;
left: 0%;
height: 5%;
width: 30%;
background: #E763A5;
font: 6vh meie script;
color: #ffffff;
text-align: right;
line-height: 5vh;
padding-right: 2%;
}

#boxbox a, #boxbox a:visited, #boxbox a:active{
position: absolute;
bottom: 5px;
left: 5px;
font: 2.5vh arial;
color: #ff0000;
text-decoration: none;
}

#stats{
position: absolute;
top: 67%;
left: 12%;
height: 10%;
width: 13%;
font: 1vh roboto condensed;
color: #666;
text-shadow: 2px 2px #eee;
line-height: 1.5vh;
text-align: right;
padding: 1%;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
overflow: scroll;
}

#stats b{
font: 1.1vh times new roman;
color: #EB3599;
font-style: italic;
float: left;
}

#stats a, #stats a:visited, #stats a:target{
color: #000000;

}

#stats tr{
width: 100%;
}

#stats td{
border-bottom: 1px solid #ffffff;
}

#txt1{
position: absolute;
top: 65%;
left: 25%;
height: 20%;
width: 11%;
background: #ffffff;
font: 1.1vh times new roman;
color: #333333;
font-style: italic;
text-align: center;
padding: 2% 1% 1% 1%;
overflow: scroll;
opacity: 1;
visibility: visible;
}

#txt2{
position: absolute;
top: 65%;
left: 25%;
height: 20%;
width: 11%;
background: #ffffff;
font: 1.1vh times new roman;
color: #333333;
font-style: italic;
text-align: center;
padding: 2% 1% 1% 1%;
overflow: scroll;
opacity: 0;
visibility: hidden;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt2:target{
visibility: visible;
opacity: 1;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt1 a, #txt2 a, #txt1 a:visited, #txt2 a:visited, #txt1 a:active, #txt2 a:active{
color: #999999;
text-decoration: none;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#txt1 a:hover, #txt2 a:hover{
color: #EB3599;
transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
}

#tri{
position: absolute;
top: 90.8%;
left: 25%;
height: 6%;
width: 13%;
background: #ffffff;
-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
clip-path: polygon(100% 0, 0 0, 50% 100%);
}

#friend{
position: absolute;
top: 87%;
left: 12%;
height: 9%;
width: 10%;
font: 1vh roboto condensed;
font-style: italic;
background: rgba(255,255,255,0.5);
padding-left: 1%;
padding-right: 1%;
overflow: scroll;
text-align: right;
}

#friend a, #friend a:target, #friend a:visited{
font: 0.9vh montserrat;
text-shadow: 1px 1px #ffffff;
text-decoration: none;
color: #EB3599;
float: left;
font-weight: bold;
text-transform: uppercase;
}

#friend a:hover{
background: none;
color: #999999;
}

#friend p{
padding-top: 1%;
margin-bottom: 0;
border-bottom: 1px solid #999999;
}

h1{
font: 2vh meie script;
color: #DDD653;
line-height: 2vh;
border-bottom: 1px solid #F440A0;
}

</style>

<div id="extra">
<div id="box"></div>
<div id="img"></div><div id="decobox"></div>

<div id="title">CereCere.</div>
<div id="boxbox"><a href="https://roleplay.chat/profile.php?user=Spicy" title="-- Coded by Spicy. ">🌶</a></div>
<table id="stats">
<tr><td><b>Name</b>Stat Here</td></tr>
<tr><td><b>Age</b>Stat Here</td></tr>
<tr><td><b>Gender</b>Stat Here</td></tr>
<tr><td><b>Orientation</b>Stat Here</td></tr>
<tr><td><b>Occupation</b>Stat Here</td></tr>
<tr><td><b>Relationship</b>Stat Here</td></tr>
<tr><td><b>Etc</b>Stat Here</td></tr>
</table>

<div id="tri"></div>
<div id="txt1">
<a href="#txt2">next >></a>
<h1>optional header</h1>

</div>

<div id="txt2">
<a href="#txt1"><< prev</a>
<h1>ooc maybe</h1>
bro just so you know you can remove the tabs if you just want 1. <br><br>
Lorem ipsum dolor sit amet, at duo primis placerat, in sumo voluptua perfecto usu, legere utroque vivendum et nam. Vel fugit periculis at, pro idque persecuti in, id est saepe ubique. Pro ne partem adolescens, eu his malis mandamus, postea utamur erroribus ex cum. Te sed nusquam electram suavitate, usu an adhuc deleniti electram, mei no omnes recusabo partiendo. Debitis vituperata est no, ut dico libris eum.<br><br>
</div>

<div id="friend">
<p><a href="friendslinkhere">Friend Name</a>friend description thing here. don't go too crazy i guess lmao limited space.</p>
<p><a href="friendslinkhere">Friend Name</a>friend description thing here. don't go too crazy i guess lmao limited space.</p>
<p><a href="friendslinkhere">Friend Name</a>friend description thing here. don't go too crazy i guess lmao limited space.</p>
<p><a href="friendslinkhere">Friend Name</a>friend description thing here. don't go too crazy i guess lmao limited space.</p>
</div>

</div>