Code Coffee

<style>

/*

INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
For: Winters [RPC Profile]
Date of Completion: March 17, 2017; 5:28 AM EST
Language: CSS/HTML

*/

 @import url('https://fonts.googleapis.com/css?family=Sacramento|Teko|Wire+One|Yesteryear');

 ::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:#774f29;}



 /* fonts */

  *{font-family: 'Teko', sans-serif;font-size: 2.8vh;color:#3a2715;}

  a{font-family:'Sacramento', cursive;color:#7c5133;text-decoration:none;transition-duration:0.5s;}

  a:hover{color: #686868; transition-duration:0.5s;}

  h1{font-family:'Yesteryear',cursive;font-size:4vh;color:#774f29;}

  b{color:#663c30;}

  i{color:#704113;}

  .r{float:right;}




  body{
    background: #898989;
  }





  /*makes sure the image is undraggable and unselectable*/

  img {
    user-select: none;
    user-drag: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }





/* boxes and hover effects */

  #magic{
    position: fixed;
    height: 90%;
    width: 100%;
    left: 0;
    top: 5%;
    z-index: 1;
  }

  #main{
    position: fixed;
    height: 100%;
    width: 20%;
    right:70%;
    top:0;
    z-index: -1;
    transition-duration: 1s;
  }

  #magic:hover #main{
    right: 49%;
    transition-duration: 1s;
  }

  #box {
    position: fixed;
    height: 70%;
    width:60%;
    top: 17%;
    left: 1%;
    opacity: 0;
    transition-duration: 1s;
  }

  #magic:hover #box{
    top: 20%;
    opacity: 1;
    transition-duration: 1s;
    transition-delay: 1.5s;
  }

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

  #bio, #friends, #ooc{
    height:94%;
    width:96%;
    overflow:auto;
    background: rgba(196, 166, 127,0.85);
    border: 5px solid;
    border-radius: 5%;
    padding:10px;
  }

  #stats{
  height:100%;
  width:100%;
  overflow:hidden;
  }

  #box1, #box2{
   float:left;
   background: rgba(196, 166, 127,0.85);
    border: 5px solid;
    border-radius: 5%;
    height:94%;
    padding:10px;
    width:46%;
    overflow:hidden;
  }

  #quote{
    position:fixed;
    font-size: 10vh;
    text-shadow: rgba(0,0,0,0.4) 0.3vh 0.3vh 0.3vh;
    height: auto;
    width: auto;
    top:7.5%;
    left: 6%;
    transition-duration: 1s;
    opacity:0;
  }

  #magic:hover #quote{
    top:10.5%;
    transition-duration: 1s;
    transition-delay: 2.5s;
    opacity: 1;
  }

  #navi{
    position: fixed;
    font-size: 5vh;
    text-shadow: rgba(0,0,0,1) 0.3vh 0.3vh 0.3vh;
    height: auto;
    width: auto;
    top: 7.5%;
    left: 45%;
    transition-duration: 1s;
    opacity: 0;
  }

  #magic:hover #navi{
    top: 10.5%;
    transition-duration: 1s;
    transition-delay: 3.5s;
    opacity:1;
  }



  /* change default size of links for the navi */


  a.size{
    font-size:10vh;
    }





/* animation for the navigation buttons; just delete this if you don't want it */


  a.n{
    animation: jump 0.5s 1;
    -webkit-animation: jump 0.5s 1;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-direction:alternate;
  }

  a.a{
    animation: jump 0.5s 1;
    -webkit-animation: jump 0.5s 1;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-direction:alternate;
    animation-delay: 0.5s;
  }

  a.v{
    animation: jump 0.5s 1;
    -webkit-animation: jump 0.5s 1;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-direction:alternate;
    animation-delay: 1s;
  }

  a.i{
    animation: jump 0.5s 1;
    -webkit-animation: jump 0.5s 1;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-direction:alternate;
    animation-delay: 1.5s;
  }

  @keyframes jump{
    from{opacity:1;}
    to{opacity:0.7;}
  }

  @-webkit-keyframes jump{
    from{opacity:1;}
    to{opacity:0.7;}
  }



  /* transition between tabs */

  #stats:target, #bio:target, #friends:target, #ooc:target{
    animation: pop 1s 1;
    -webkit-animation: pop 1s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  }

  @keyframes pop{
    from{opacity:0;}
    to{opacity:1;}
  }

  @-webkit-keyframes pop{
    from{opacity:0;}
    to{opacity;1;}
  }





  /* VISIBLE CREDIT PLEASE DON'T REMOVIE */

  #credit {
    position: fixed;
    bottom: 3%;
    right: 2%;
    background: rgba(255,255,255,0.3);
    border-left: 2px solid;
    border-color: #fff;
    padding: 3px;
    text-shadow: #000 0.1vh 0.1vh 0.1vh;
    z-index: 1;
  }


</style>
<div id="magic">
<div id="main">
  <img src="https://static1.e621.net/data/be/f7/bef77334d33c9eb3ec626e705b8d66a9.jpg" height="100%">
</div>

<div id="box">
  <div id="host">
    <div id="stats">
      <div id="box1">
        <center><h1>Statistics</h1></center>
        <b>Name</b><div class="r">Winters</div><br>
        <b>Moniker</b><div class="r">Snow? Idk coffee</div><br>
        <b>Age</b><div class="r">23 y.o. [?]</div><br>
        <b>Gender</b><div class="r">Female</div><br>
        <b>Marital Status</b><div class="r">Single</div><br>
        <b>Height</b><div class="r">5'3</div><br>
        <b>Figure</b><div class="r">Fit</div><br>
        <b>Other things</b><div class="r">Just copy paste as required</div>
      </div>
      <div id="box2">
        <center><h1>What did you want here?</h1></center>
        normal <b>bold</b> <i>italicized</i> <u>underlined</u> <s>strikethrough</s>
        <a href="URL HERE">links</a>
      </div>
    </div>
    <br>
    <div id="bio">
      <center><h1>Biography</h1></center>
      <center>This is the part where you write about your pretty lil character's backstory. Sob story,
        happy story, angry story. You name it! I'm just typing this out unneccessarily so you can see if
        the text will look good even in paragprah form. If it hurts the eyes, if it's too compressed. Ya know,
        things like that we can edit in and out depending on your preference. Now, I'm going to go ahead and skip
        down a few lines so you can see the scrollbar because at this point in my coding, I haven't seen it myself
        and I wanna see if it will fit the whole color scheme. So... <i>NYOOM!</i>
        <br><br><br><br><br><br><br><br><br><br>
        Oh ew! HALP! Well obviously when I send this to you, you're not going to see it anymore but the
        scroll bar is... <i>gags.</i> It has a white track and a grey thumb. <i><b>Which does not fit my color scheme!</b></i>
        Lemme fix that real quick.<br>
        <i>scrolls up to the CSS portion</i><br>
        .... <s>I didn't put in the specifications for the scrollbar!!</s> No wonder.<br>
        <i>A few edits later...</i><br>
        Okay there we go~ Looks good to me. Now onto the next tab! <i>NYOOM!</i>
      </center>
    </div>
    <br>
    <div id="friends">
      <center><h1>Relations</h1></center>
      <center>
       <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i></center> small note.<br><br><br>
     </center>
    </div>
    <br>
    <div id="ooc">
      <center><h1>Out of Character</b></h1></center>
      <b>✬</b> In-room approach is your best bet.<br>
      <b>✬</b> PM picky.<br>
      <b>✬</b> Other OOC bullets just copy-paste as needed.<br>
      <center><h1>Typist's Information</h1></center>
      <b>✬</b> Obviously you can forego this portion, but just in case you want someone to contact you outside of RPC.<br>
      <b>✬</b> Skype: _____<br>
      <b>✬</b> Femme/Homme AF<br>
      <b>✬</b> 20 y.o.
    </div>
  </div>
</div>
<div id="quote">
  Insert a quote here
</div>
<!-- REMOVE ANIMATION NAVI HTML CODE

<div id="navi>
  <a href="#stats" class="size">n</a>
  <a href="#bio" class="size">a</a>
  <a href="#friends" class="size">v</a>
  <a href="#ooc" class="size">i</a>

-->
<div id="navi">
  <a href="#stats" class="n size">n</a>
  <a href="#bio" class="a size">a</a>
  <a href="#friends" class="v size">v</a>
  <a href="#ooc" class="i size">i</a>
</div>
</div>
<!-- VISIBLE CREDIT; PLEASE DON'T REMOVE -->
<div id="credit">
  &copy; <a href="https://themonstrousdev.github.io/" target="_blank">The Monster.</a> Send an RPC mail to <b>Deum</b> for any questions