Code Llama

<style>
/*
======== !! IMPORTANT !! DO NOT REMOVE ANY PART OF THIS SECTION =========
Author: Elle
For: Llama [RPC Profile]
Text type: CSS/HTML
SOURCE: https://pastebin.com/raw/zRSeEj5y -
*/
@import url('https://fonts.googleapis.com/css?family=ABeeZee|Abel|Francois+One|Lobster+Two');
  ::-webkit-scrollbar{width:0.3vw;height:0.3vh;}
  ::-webkit-scrollbar-track{border-radius:0px;background:transparent;}
  ::-webkit-scrollbar-thumb{border-radius:0px;background:transparent;}
  body{
    overflow:hidden;
    background-image:url('https://s-media-cache-ak0.pinimg.com/originals/2d/d3/3b/2dd33b0711d34f487288f571d79ad6cf.jpg');
    background-size:cover;
    background-repeat:no-repeat;
  }
  img{
    user-drag:none;
    user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    }

  #sheet {
    position: fixed;
    height: 100%;
    width:100%;
    background: rgba(0,0,0,0.3);
    bottom:0%;
    top:0%;
    left:0%;
    right:0%;
    z-index: -1;
  }

 #content {
   position: fixed;
   height: 100%;
   width: 80%;
   background: transparent;
   top: 0%;
   bottom: 0%;
   left: 10%;
   z-index: 1;
 }

 #imgfab {
   position: absolute;
   height: 40%;
   width:30%;
   background:transparent;
   top:17%;
   left:8%;
 }

 #img1 {
   position: absolute;
   height: 100%;
   width: 100%;
   background: transparent;
   top: 27%;
   left: 15%;
   border: 9px inset;
   border-color: rgba(0,0,0,0.5);
   border-radius: 10px;
   opacity: 1;
   transition-duration: 1s;
   z-index: 1;
 }

 #imgfab:hover #img1{
   opacity: 0;
   transition-duration: 1s;
 }

 #imgfab:hover #img2{
   opacity:1;
   transition-duration:1s;
 }

  #img2 {
   position: absolute;
   height: 100%;
   width: 100%;
   background: transparent;
   top: 27%;
   left: 15%;
   border: 9px inset;
   border-color: rgba(0,0,0,0.5);
   border-radius: 10px;
   opacity:0;
   transition-duration:1s;
 }

 #box {
   position:absolute;
   height: 60%;
   width: 30%;
   background: linear-gradient(45deg, rgba(188, 188, 188,1) 0%, rgba(183, 182, 181,1) 50%, rgba(142, 142, 142,1) 100%);
   border: 3px solid;
   border-color: rgba(0,0,0,0.5);
   top: 17%;
   left: 44.5%;
   padding: 15px;
   font-family:'ABeeZee';
   font-size: 1.8vh;
   overflow:auto;
   color: #000;
 }

 #host {height:100%;width:100%;overflow:hidden;position:relative;}

 #one, #two, #three, #four {height:100%;width:100%;overflow:auto;}

 .r {float:right}

 #navlist {
   position: absolute;
   height: 30%;
   width: 9%;
   background: transparent;
   left: 79%;
   top: 41%;
 }

 .nav {
   list-style-type:none;
   margin: 0;
   padding: 0;
   background: transparent;
   height: 100%;
   width: 100%;
 }

 a.fam {
   display: block;
   text-transform: uppercase;
   font-family: 'Abel';
   font-size: 1.7vh;
   background: transparent;
   padding-left: 10px;
   background:;
   color: #eee;
   border-left: 5px solid;
   border-color: rgba(255,255,255,0.5);
   transition-duration:1s;
 }

 a.fam:hover {
   font-size: 2vh;
   transition-duration:1s;
 }

 h1{
   font-family: 'Lobster Two';
   font-size: 2.5vh;
   color: #474747;
   text-decoration: underline;
 }

 a{text-decoration: none; color: #000;}

 a.credit{
   font-family: 'Francois One';
   color: #eee;
   text-decoration:none;
   transition-duration: 1s;
 }

 a.credit:hover {
   color: #964630;
   font-size: 2vh;
   transition-duration: 1s;
 }

 b {
   color: #964630;
 }

/* PLEASE DON'T REMOVE THE CREDIT :c I worked hard on this, fam */

#credit {
  position: fixed;
  height: 2%;
  width: 14%;
  background: rgba(0,0,0,0.3);
  border-left: 5px solid;
  padding: 5px;
  border-color: rgba(255,255,255,0.5);
  font-family: 'Abel';
  font-size: 1.7vh;
  color: #fff;
  bottom: 25%;
  left: 25%;
  z-index: 1;
}

</style>
<div id="sheet"></div>
<div id="content">
  <div id="imgfab">
   <div id="img1">
     <img src="http://pm1.narvii.com/5719/227bb9c9b19716b8ab0ea8d06562becdeb4bf6b9_hq.jpg" style="height:100%;width:100%">
   </div>
   <div id="img2">
     <img src="http://adn.i.ntere.st/p/6131040/image" style="height:100%;width:100%">
   </div>
  </div>
  <div id="box">
    <div id="host">
      <div id="one">
        <center><h1>Stats</h1></center>
        <br><br><br><br>
        <b>Name</b> <div class="r">???</div><br>
        <b>Moniker</b> <div class="r">Llama</div><br>
        <b>Gender</b> <div class="r">Non-binary</div><br>
        <b>Sex</b> <div class="r">Female</div><br>
        <b>Pronoun</b> <div class="r">'They' preferebly</div><br>
        <b>Hair</b> <div class="r">Brunette</div><br>
        <b>Eyes</b> <div class="r">Dark Brown</div><br>
        <b>Skill</b> <div class="r">Adept in Swordsmanship</div><br>
        <b>Persona</b> <div class="r">Chill AF</div><br>
        <b>Occupation</b> <div class="r">???</div><br>
        <b>Residence</b> <div class="r">IDFK fam</div><br>
        <b>Marital Status</b> <div class="r">Fuck if I know</div>
      </div>
      <div id="two">
        <center><h1>Biography</h1></center>
        <center><b>Okay, seriously. I don't know what to tell you, mate.</b></center>
      </div>
      <div id="three">
        <center>
        <a target="_blank" href="profile"><img src="image" height="75" width="75" align="left" border="3"></a>
        <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
        <a target="_blank" href="profile"><img src="image" height="75" width="75" align="left" border="3"></a>
        <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
        <a target="_blank" href="profile"><img src="image" height="75" width="75" align="left" border="3"></a>
        <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
        <a target="_blank" href="profile"><img src="image" height="75" width="75" align="left" border="3"></a>
        <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
        <a target="_blank" href="profile"><img src="image" height="75" width="75" align="left" border="3"></a>
        <center><b>- Name -</b><br> <i>friend/foe/nuetral</i></center> small note.<br><br>
        <br><br></center>
      </div>
      <div id="four">
        <center><h1>Out of Character</h1></center>
        <br><br><br><br>
        <b>✪</b> If you want a code of your own, send <b>Deum</b> mail on RPC.<br>
        <b>✪</b> What do?<br>
        <b>✪</b> Okay seriously tho, what do?<br>
        <b>✪</b> Do you got any rules for me?<br>
        <b>✪</b> Or do I... Like.. just have to guess?<br>
        <b>✪</b> I'm kinda lost here, bud.<br>
        <b>✪</b> Lemme take a wild guess.<br>
        <b>✪</b> -clears throat-<br>
        <b>✪</b> Quality over quantity just like story over smut.<br>
        <b>✪</b> How about that? Did I do a good? c:<br>
        <b>✪</b> Tell me I did a good :c <br>
        <b>✪</b> Pet me and tell me I'm pretty. c: <br>
      </div>
    </div>
  </div>
  <div id="navlist">
    <ul class="nav">
      <li><a href="#one" class="fam">dossier</a></li>
      <li><a href="#two" class="fam">biography</a></li>
      <li><a href="#three" class="fam">contact</a></li>
      <li><a href="#four" class="fam">Out of char</a></li>
    </ul>
  </div>
</div>
<!-- Fam, honestly, don't remove this. No touchy, pls. :c-->
<div id="credit">
  <center>© <a href="https://www.themonster.xyz/" target="_blank">The Monster</a>
    Send an RPC mail for inquiries~
  </center>
</div>
<script src="https://www.themonster.xyz/profiles/Addons/free.js"></script>