Cera Sabine's code

<style>
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Damion&display=swap');
Body
{
  background: #000000;
  background-image: url(https://i.imgur.com/NU7Juam.png);
}


#BoxOne
{
  z-index: 0;
  position: absolute;
  left: 200px;
  top: 150px;
  width: 800px;
  height: 500px;
  padding: 2px;
  background-color: #3A3A3A;
  border: solid 2px #FFFFFF;
  - ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
}

#BoxTwo
{
  z-index: 0;
  position: absolute;
  left: 200px;
  top: 150px;
  width: 800px;
  height: 500px;
  padding: 2px;
  background-color: #4E4E4E;
  border: 2px solid #FFFFFF;
  - ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}



#BoxThree
{
  z-index: 0;
  position: absolute;
  left: 200px;
  top: 150px;
  width: 800px;
  height: 500px;
  padding: 2px;
  background-color: #898989;
  border: 2px solid #FFFFFF;
  - ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

#photo
{
  z-index: 2;
  position: absolute;
  left: 220px;
  top: 170px;
  padding: 2px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}

.size
{
 height: 250px;
 width: 180px
}


#namebox
{
 z-index: 2;
 position: absolute;
 left: 220px;
 top: 425px;
 width: 182px;
 height: 50px;
 background-color:#;
 padding: 2px;
 font-family: Satisfy;
 font-size: 30px;
 color: #fff;
}


#navi
{
  z-index: 10;
  position: absolute;
  left: 395px;
  top: 205px;
  width: 10px;
 height: 9px;
}
#navi a
{
  display: block;
  margin: 20px;
  width: 100%;
  height: 100%;
  padding: 5px;
  font-family: Times New Roman;
  font-size: 25px;
  font-style: italic;
  text-decoration: none;
  text-align: center;
  color: #fff;
  letter-spacing: 2px;
  background-color: #000000;
  background-image: url();
  border-radius: 10%;
  border: 2px solid #fff;

  -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;

 - ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(50deg);
}

#navi a:hover
{
  color: lightblue;
  background-color: #fff;
  background-image: url();
  text-shadow: 0 0 0em #000;
  letter-spacing: 3px;
  border: 2px solid #000;
  transition: all 0.5s ease;
  -moz-transitioon: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}


#infoboxone
{
  z-index: 4;
  position: absolute;
 left: 225px;
  top: 480px;
  width: 135px;
  height: 125px;
  padding: 2px;
  background-color: #3A3A3A;
  border: 2px solid #fff;
  background-image: url();
  padding: 3px;
  color: #fff;
  font-family: Damion;
  font-style: normal;
  font-size: 17px;
  padding: 15px;
  box-shadow: 0px 0px px #000000;

}



#infoboxtwo
{
  z-index: 4;
  position: absolute;
  left: 455px;
  top: 180px;
  width: 500px;
  height: 425px;
  padding: 2px;
  background-color: #3A3A3A;
  border: 2px solid #fff;
  background-image: url();
  padding: 3px;
  color: #fff;
  font-family: Damion;
  font-style: normal;
  font-size: 20px;
  padding: 15px;
  box-shadow: 0px 0px px #000000;

}



#infoboxthree
{
  z-index: 4;
  position: absolute;
  left: 1200px;
  top: 180px;
  width: 200px;
  height: 425px;
  padding: 2px;
  background-color: #3A3A3A;
  border: 2px solid #fff;
  background-image: url();
  padding: 3px;
  color: #fff;
  font-family: Damion;
  font-style: normal;
  font-size: 20px;
  padding: 15px;
  box-shadow: 0px 0px px #000000;

}

.friendpic {
border: 2px solid #fff;
width: 100px;
height: 100px;
margin: 5px;
pointer-events: auto;
}


#credit
{
z-index: 100;
  position: fixed;
  left: 1450px;
  bottom: 20px;
  width: 200px;
  height: 10px;
  background-image: url();
  background-size: 100% 100%;
   background-position:top center;
   background-attachment: absolute;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   color: #fff;
  text-shadow: px px #0E91CA;

  font-style: italic;
Text-decoration: none;
font-size: 20px;
font-family: Indie Flower;
  font-size: 20px;
  font-style: italic;
Text-decoration: none;
}

.hover
{
text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
}

.hover:hover
{
text-shadow:
    -2px -2px 0 #CD00FF,
    2px -2px 0 #CD00FF,
    -2px 2px 0 #CD00FF,
    2px 2px 0 #CD00FF;
}
</style>

<div id="BoxOne">

</div>

<div id="BoxTwo">

</div>

<div id="BoxThree">

</div>

<div id="photo" class="decor">
<img src="http://i.picpar.com/3p3e.jpg" class="size" >
</div>


<!--Adjust Font Size If Name Is Long -->
<div id="namebox"><center>
~Cera Sabine ~
</div>

<div id="navi">
<a href="#01"></a>
<a href="#02"></a>
<a href="#03"></a>
<a href="#04"></a>
<a href="#05"></a>
<a href="#06"></a>
<a href="#07"></a>
<a href="#08"></a>
<a href="#01"></a>

</div>

<div id="infoboxone">
<div style="height: 100%; overflow-y: hidden;">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
"Eyes are windows to the soul."
</div></div></div>


<div id="infoboxtwo">
<div style="height: 100%; overflow-y: hidden;">
<a name="01" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Stats </center>
Full Name: Cera Sabine Young<br>
Nickname: None yet <br>
Age: 21 <br>
Race: Lycan <br>
Occupation: Prior Modeling. Currently a Secretary <br>
Sexuality: Hetrosexual <br>
Residence: None <br>
Romances: Single <br>
Tattoos: A star on the back of her neck <br>
Piercings: None <br>

</div>

<a name="02" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Personality </center>
<br>
Waitng and see
</div>

<a name="03" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Abilities </center>
<li>Enhanced bite </li>
<li>Enhanced speed </li>
<li>Enhanced strength </li>
<li>Enhanced durability </li>
<li>Enhanced healing </li>
<li>Enhanced senses </li>
<li>Predator instinct </li>
<li> Eolas: That allows them to discover a person's whereabouts by connecting to nature. Although it can be addictive. </li>
<li> Telepathy </li>
</div>

<a name="04" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Her favorite quotes </center>
Updated soon
</div>

<a name="05" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Faceclaim gallery </center>
<a target="_blank" href="http://i.picpar.com/Ap3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Ap3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Bp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Bp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Cp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Cp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Dp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Dp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Ep3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Ep3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Gp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Gp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Hp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Hp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Ip3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Ip3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Kp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Kp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Lp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Lp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Np3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Np3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Op3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Op3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Pp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Pp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Qp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Qp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Rp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Rp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Sp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Sp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Tp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Tp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Vp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Vp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Xp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Xp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/Yp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Yp3e.jpg" alt="" width="75" height="75" /></a>
</div>

<a name="06" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Drawing Gallery </center>
<a target="_blank" href="http://i.picpar.com/Zp3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/Zp3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/aq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/aq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/bq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/bq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/cq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/cq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/dq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/dq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/fq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/fq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/gq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/gq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/hq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/hq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/iq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/iq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/jq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/jq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/lq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/lq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/nq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/nq3e.jpg" alt="" width="75" height="75" /></a>
<a target="_blank" href="http://i.picpar.com/qq3e.jpg" target="_blank"title="Description"><img src="http://i.picpar.com/qq3e.jpg" alt="" width="75" height="75" /></a>
</div>

<a name="07" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> Friends/Foes/Aquantances </center>
  <p><a target="_blank" href="https://roleplay.chat/profile.php?user=Mock" target="_blank"><img src="https://www.orbistechnologies.com/wp-content/uploads/2018/12/profile-placeholder-image-gray-silhouette-no-vector-21542863.jpg" height="75" width="75" align="left" border="3"></a><center><b>- Name -</b><br> <i>friend</i></center> Small note <br><br></p>
 <p><a target="_blank" href="profile" target="_blank"><img src="https://www.orbistechnologies.com/wp-content/uploads/2018/12/profile-placeholder-image-gray-silhouette-no-vector-21542863.jpg" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br></p>
 <p><a target="_blank" href="profile" target="_blank"><img src="https://www.orbistechnologies.com/wp-content/uploads/2018/12/profile-placeholder-image-gray-silhouette-no-vector-21542863.jpg" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br></p>
 <p><a target="_blank" href="profile" target="_blank"><img src="https://www.orbistechnologies.com/wp-content/uploads/2018/12/profile-placeholder-image-gray-silhouette-no-vector-21542863.jpg" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br></p>
 <p><a target="_blank" href="profile" target="_blank"><img src="https://www.orbistechnologies.com/wp-content/uploads/2018/12/profile-placeholder-image-gray-silhouette-no-vector-21542863.jpg" height="75" width="75" align="left" border="3"></a>
 <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br></p>
</div>

<a name="08" class="slide">
<div style="width:100%; height: 100%; top: 100px; background-color: #; overflow: auto;" align="Left">
<center> OOC </center>
 <font color="#702f2f"><b>☩</b></font> This code was special made for me from my friend. DO NOT STEAL!!<br>
 <font color="#702f2f"><b>☩</b></font> DO NOT START WITH A POST, IT WILL BE IGNORED! <br>
 <font color="#702f2f"><b>☩</b></font> Smut is reserved for partner.<br>
 <font color="#702f2f"><b>☩</b></font> What I do IC does not reflect on me OOC.<br>
 <font color="#702f2f"><b>☩</b></font> LT is preferred.<br>
 <font color="#702f2f"><b>☩</b></font> Quality over quantity like story over smut.<br>
 <font color="#702f2f"><b>☩</b></font> No profile = No play.<br>
 <font color="#702f2f"><b>☩</b></font> I take no shit from anyone. Be prepared for a bite back.<br>
 <font color="#702f2f"><b>☩</b></font> PM friendly.<br>
 <font color="#702f2f"><b>☩</b></font> The drawings are not mine either and will be removed at request. <br>
 <font color="#702f2f"><b>☩</b></font> Faceclaim: Darya Mezhevich<br>
</div></div></div>


<div id="credit" class="hover">
<a target="_blank" href="https://pastebin.com/u/xAscendedRose" title="" style="color:#fff;">xAscended Rose</a>
</div>