eight

<style>
/*
INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
Text type: CSS/HTML
*/
 @import url('https://fonts.googleapis.com/css?family=Amatic+SC|Great+Vibes|Pacifico|Satisfy|Dancing+Script');

 ::-webkit-scrollbar{width:0.3vh;height:0.3vh;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:#FFFFFF;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}

 body {
 background-image: url('http://files.all-free-download.com//downloadfiles/wallpapers/1920_1200/blue_light_blaze_wallpaper_abstract_3d_34.jpg');
 }

 #sheet {
 position: fixed;
 height: 100%;
 width: 100%;
 top: 0%;
 bottom: 0%;
 left: 0%;
 right: 0%;
 background: rgba(0,0,0,0.15);
 }

/* Amatic SC = information ; Great Vibes = quotes ; Pacifico = h1? ; Satisy = links probs */

 #center {
 position: fixed;
 height: 90%;
 width: 100%;
 left: 0%;
 top: 5%;
 background: transparent;
 }

 #quote1 {
 position: absolute;
 height: 70%;
 width: 30%;
 left: 1%;
 text-align: center;
 font-family: 'Great Vibes';
 font-size: 7vh;
 transition-duration: 1s;
 }

 #quote2 {
 position: absolute;
 height: 70%;
 width: 30%;
 right: 5%;
 text-align: center;
 font-family: 'Great Vibes';
 font-size: 7vh;
 transition-duration: 1s;
 }

 #center:hover #quote1, #center:hover #quote2 {
 opacity: 0;
 transition-duration: 1s;
 }

 #box1 {
 position: absolute;
 background: rgba(0,0,0,0.6);
 height: 70%;
 width: 20%;
 border-radius: 5%;
 border: 2px solid;
 border-color:#FFECDD;
 top: 15%;
 right: 40%;
 transition-duration: 1.5s;
 opacity: 0;
 font-family: 'Amatic SC';
 color:#ffffff;
 padding: 5px;
 font-size: 3.5vh;
 overflow: auto;
 }

 #center:hover #box1 {
 opacity: 1;
 right: 1%;
 transition-duration: 1.5s;
 }

 #box2 {
 position: absolute;
 background: rgba(0,0,0,0.6);
 height: 70%;
 width: 50%;
 border-radius: 5%;
 border: 2px solid;
 border-color:#FFECDD;
 top: 15%;
 right: 25%;
 transition-duration: 1.5s;
 font-family: 'Amatic SC';
 opacity: 0;
 font-size: 4.7vh;
 padding: 5px;
 }

 #center:hover #box2 {
 opacity: 1;
 transition-duration: 1.5s;
 }

 #img {
 position: absolute;
 height: 120%;
 width: 15%;
 top: -6%;
 right: 55%;
 transition-duration: 1.5s;
 background: transparent;
 }

 #center:hover #img {
 right: 92%;
 transition-duration: 1.5s;
 }

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

 #stats, #bio, #ooc {height:100%;width:100%;overflow:auto;color:#fff;}

 h1{font-family:'Dancing Script';font-size:4vh;text-decoration:underline;}

 a{font-family:'Satisfy';text-decoration:none;color:#00E4FF;transition-duration:1s;}

 a:hover{font-size:110%;transition-duration:1s;}

 .r{float:right;}

 b{color:#ffffff;}

 #navigation {
 position: absolute;
 height: 40%;
 width: 2.5%;
 background: transparent;
 right: 22%;
 top: 30%;
 }

 #nav1 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 20%;
 background:#000000;
 border: 2px solid;
 border-color:#00E4FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav2 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 50%;
 background:#000000;
 border: 2px solid;
 border-color:#00E4FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #nav3 {
 position: absolute;
 height: 10%;
 width: 80%;
 top: 80%;
 background:#000000;
 border: 2px solid;
 border-color:#00E4FF;
 opacity: 0;
 transition-duration: 1s;
 }

 #center:hover #nav1, #center:hover #nav2, #center:hover #nav3{opacity:1;transition-duration: 0.5s;}

 #nav1:hover, #nav2:hover, #nav3:hover{
 border-radius: 100%;
 transition-duration: 0.5s;
 transform: rotate(360deg);
 border-color:#00E4FF;
 background:rgba(255, 255, 255, 0.5);
 }

 /* Credit. please don't remove! */

 #credit {
 position: absolute;
 background: rgba(0,0,0,0.4);
 border-left: rgBAD255,255,255);
 font-family: 'Amatic SC';
 font-size: 2.3vh;
 padding: 3px;
 bottom: 5%;
 left: 3%;
 }

</style>
<div id="sheet"></div>
<div id="center">
 <div id="quote1"><center><br><br><br><br><font color=White>Bite my Lips and </font><br></center></div>
 <div id="quote2"><center><br><br><br><br><font color=White>Press your body against mine.</font><br></center></div>
 <div id="img"><img src="http://i.imgur.com/pRBLvh6.png" style="height: 100%;"></div>
 <div id="box1">
 <center><h1>Pets</h1></center>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <center><h1>Friends</h1></center>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 <a href="URL HERE">.name</a>.info.quote<br>
 </div>
 <div id="box2">
 <div id="host">
 <div id="stats">
 <center><h1>Stats</h1></center>
 <font style="font-size:3vh;">
 <b>Name</b><div class="r">Axel 'Apex' Reinhart</div><br>
 <b>Moniker</b><div class="r">Axe </div><br>
 <b>Gender</b><div class="r">Male</div><br>
 <b>Age</b><div class="r">27 y.o.</div><br>
 <b>Species</b><div class="r">Canine</div><br>
 <b>Height</b><div class="r">8'3</div><br>
 <b>Weight</b><div class="r">326 lbs</div><br>
 <b>Marital Status</b><div class="r">Single</div><br>
 <b>Orientation</b><div class="r">Straight</div><br>

<center>My Pets</center>





 </font>
 </div>
 <div id="bio">
 <center><h1>Biography</h1></center>
 Work.In.Progress<br>
<center> <h1><u> Gallery</u></h1> </center>
<center></a><img src="http://i.imgur.com/o5PXBgr.png" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/12SXnae.jpg" title="...." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/eF6Vg4L.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/ZGSNSQQ.png" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<br>
 <img src="http://i.imgur.com/bdZzOB5.jpg" title="" style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/RYyTfb1.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/sbBJ9wk.jpg" title="...." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<br>
</a><img src="http://i.imgur.com/W6KhUzY.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/Sf6R4DB.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/LnX9cLG.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/EwbWovE.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<br>
 <img src="http://i.imgur.com/oC1wehy.jpg" title="" style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/q0x3XRw.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/jH7KmpP.jpg" title="...." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<br>
</a><img src="http://i.imgur.com/ATcV8U4.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
 <img src="http://i.imgur.com/hyFmIm2.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/W3YukBQ.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/z5Y6rmS.jpg" title="..." style="width:100px;height:140px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<br>
<img src="http://i.imgur.com/WutxsvC.png" title="..." style="width:350px;height:200px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/wwj1TFJ.jpg" title="..." style="width:350px;height:200px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>
<img src="http://i.imgur.com/W6KhUzY.jpg" title="..." style="width:350px;height:200px;border:1px solid #00E4FF;border-radius:10px;float: center;"></a>

<br>
</center>
 </div>
 <div id="ooc">
 <font style="font-size:3vh;">
 <center><h1>Out Of Character</h1></center>
 <b>🐾</b> No profile = NO Rp<br>
 <b>🐾</b> No drama<br>
 <b>🐾</b>Primarily smut character, but will do clean RP..<br>
 <b>🐾</b> No assholes<br>
 <b>🐾</b>  No IRL pictures..<br>



 </div>
 </div>
 </div>
 <div id="navigation">
 <a href="#stats"><div id="nav1"></div></a>
 <a href="#bio"><div id="nav2"></div></a>
 <a href="#ooc"><div id="nav3"></div></a>

 </div>
</div>