Wraith - WIP

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Atomic+Age|Dorsa|Nova+Square|Overlock+SC|Russo+One');
@import url('https://fonts.googleapis.com/css?family=Anton|Cinzel|Cookie|Oswald|Playfair+Display|Roboto+Condensed');

@font-face {
 font-family: 'Tinee';
 src: url(https://dl.dropboxusercontent.com/s/167v10rh1jq60q9/slkscr.ttf);}

@font-face {
 font-family: 'Heck';
 src: url('https://dl.dropboxusercontent.com/s/ojc5ygv7xbwvtmg/Anatalia%20Script%20Regular.otf');}

body
{overflow-x:hidden;
background-image:
url('');
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color:#292929;
font: 0px arial;
color: black;}

::-webkit-scrollbar-thumb:vertical {background-color:#2d5447; height:3px; }
::-webkit-scrollbar { height:3px; width:3px; background-color:transparent; }

::selection {
color: #29272a;
background: #eee;}

a {color: #dec5af;
text-decoration: none;
text-transform:lowercase;
font-family: 'Oswald', sans-serif;
font-size:10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {color: black;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

b {
color:#dec5af;
font-family: times, cursive;
text-transform: uppercase;
font-size:8px;
letter-spacing: 2;
}

h1 {
 text-transform: uppercase;
 border-bottom: 2px solid #000;
 border-image: linear-gradient(to right, #dec5af, #100b2e, #dec5af) 10;
 letter-spacing: 2px;
 font-size: 10px;
 padding-bottom: 10px;
 padding-top: 1px;
 width: 100%;
 margin: 10px auto;
 font-family: 'Cinzel', cursive;
 color: #ccc;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 text-align-last:center;}

hr {
 border:0;
 margin-top:5px;
 margin-bottom:5px;
 width:90%;
 height:1px;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 background-color:#292929;}

*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

/*IMAGES*/

.leftimg {
 overflow:hidden;
 position:absolute;
 text-align:justify;
 bottom:-5px;
 left:50px;
 height:610px;
 width:310px;
 z-index: 1;
 box-shadow:1px 1px 30px #000;
 background-image: url('https://i.imgur.com/ScF98SQ.jpg');
 background-position: 0px 0px;
 background-attachment: absolute;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;}

.icon {
 overflow:hidden;
 position:absolute;
 text-align:justify;
 top:70px;
 right:340px;
 height:100px;
 width:100px;
 opacity: .5;
 border-radius: 50%;
 border: 1px solid #292929;
 box-shadow:1px 1px 20px #000;
 background-image: url('https://i.imgur.com/7r0j0h4.gif');
 background-position: -50px 0px;
 background-attachment: absolute;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;}

/*BACKGROUND BOXES*/

#container {
 position:absolute;
 top:45%;
 margin-top:-275px;
 left:50%;
 margin-left:-500px;
 height:600px;
 width:930px;
 background:#1c1919;
 border: 1px solid #000;
 box-shadow:1px 1px 3px #000;}

#wrapbox {
 background-color: rgba(41, 41, 82, .5);
 background-image: url('https://www.transparenttextures.com/patterns/always-grey.png');
 position: absolute;
 width:886px;
 height:560px;
 left: 10px;
 bottom: 10px;
 padding: 10px;
 margin: 1px;
 overflow:auto;}

#wrapboxtwo {
 background-color: rgba(191, 180, 186, .5);
 background-image: url('https://www.transparenttextures.com/patterns/diagmonds.png');
 border-top-left-radius: 75%;
 position: absolute;
 width:795px;
 height:540px;
 left: 100px;
 bottom: 20px;
 padding: 10px;
 margin: 1px;
 overflow:auto;}

/*INFO BOXES*/

#stats {
 background-color: #100b2e;
 background-image: url('https://www.transparenttextures.com/patterns/checkered-pattern.png');
 box-shadow:1px 1px 10px #000;
 text-transform: uppercase;
 text-align: left;
 color: #fff;
 font-size:8px;
 font-family: calibri, sans-serif;
 position: absolute;
 width:180;
 height:150;
 left: 400px;
 bottom: 40px;
 letter-spacing:1px;
 line-height: 13px;
 padding: 10px;
 margin: 1px;
 overflow:auto;
 opacity: 1;
 z-index:1;}

#ooc {
 background-color: #100b2e;
 background-image: url('https://www.transparenttextures.com/patterns/checkered-pattern.png');
 box-shadow:1px 1px 10px #000;
 text-transform: uppercase;
 text-align: left;
 color: #fff;
 font-size:8px;
 font-family: calibri, sans-serif;
 position: absolute;
 width:180;
 height:150;
 left: 400px;
 bottom: 215px;
 letter-spacing:1px;
 line-height: 13px;
 padding: 10px;
 margin: 1px;
 overflow:auto;
 opacity: 1;
 z-index:1;}

#desc {
 background-color: #100b2e;
 background-image: url('https://www.transparenttextures.com/patterns/checkered-pattern.png');
 box-shadow:1px 1px 10px #000;
 text-transform: uppercase;
 text-align: left;
 color: #fff;
 font-size:8px;
 font-family: calibri, sans-serif;
 position: absolute;
 width:250;
 height:325;
 right: 49px;
 bottom: 40px;
 letter-spacing:1px;
 line-height: 13px;
 padding: 10px;
 margin: 1px;
 overflow:auto;
 opacity: 1;
 z-index:1;}

/*NAVIGATION*/

.navbar {position: absolute; left: 410px; top: 170px; z-index: 3000; opacity: 1; }

.link1 {border-radius:50%; background-color: #dec5af; position: absolute; height: 15px; width: 15px; border: 1px solid #292929; box-shadow: 0px 0px 5px #1f2233;}
.link1:hover {background-color: #292952; box-shadow: 0px 0px 5px #1f2233; opacity: 1;}

.link2 {border-radius:50%; background-color: #dec5af; position: absolute; left: 30px; height: 15px; width: 15px; border: 1px solid #292929; box-shadow: 0px 0px 5px #1f2233;}
.link2:hover {background-color: #292952; box-shadow: 0px 0px 5px #1f2233; opacity: 1;}

.link3 {border-radius:50%; background-color: #dec5af; position: absolute; left: 60px; height: 15px; width: 15px; border: 1px solid #292929; box-shadow: 0px 0px 5px #1f2233;}
.link3:hover {background-color: #292952; box-shadow: 0px 0px 5px #1f2233; opacity: 1;}

.abox, .abox2 {
 background-color: #100b2e;
 background-image: url('https://www.transparenttextures.com/patterns/checkered-pattern.png');
 text-transform: uppercase;
 text-align: left;
 color: #fff;
 font-size:8px;
 font-family: calibri, sans-serif;
 position: absolute;
 width:250;
 height:325;
 right: 49px;
 bottom: 40px;
 letter-spacing:1px;
 line-height: 13px;
 padding: 10px;
 margin: 1px;
 overflow:auto;
 opacity: 1;
 z-index:1;}

.slide {z-index: -1; opacity: 0;}

.slide:target {left: 0; opacity: 1; z-index: 1000;}

/*NAME HEADERS*/

#tt { z-index: 1000; padding: 50; letter-spacing: 20; position: absolute; right: -29px; top: 70px; font-family: 'Dorsa', sans-serif; font-size:100px;
-webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://i.imgur.com/ZuD4GGj.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: center center; background-size: cover;}
#ttshadow { z-index: 10; padding: 50; letter-spacing: 20; position: absolute; right: -29px; top: 70px; font-family: 'Dorsa', sans-serif; font-size: 100px; color: #000; text-shadow: -1px 1px .5px #000; opacity: 0.8;}

#ttsmall { z-index: 10000; letter-spacing: 3; position: absolute; left: 410px; top: 195px; text-transform: uppercase; font-family: 'Russo One', sans-serif; font-size:15px;
background: -webkit-linear-gradient(#000, #000, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

</style>

<div id="bitch" oncontextmenu="return false;">

<div id= "container">
<div id= "wrapbox"></div>
<div id= "wrapboxtwo"></div>

<div class= "leftimg"></div>
<div class= "rightimg"></div>
<div class= "icon"></div>

<div class="navbar">
<a class="link1" href="#1"></a>
<a class="link2" href="#2"></a>
<a class="link3" href="#3"></a>
</div>

<div id= "tt">{WRAITH}</div>
<div id= "ttshadow">{WRAITH}</div>
<div id= "ttsmall">bang bang baby<i>!</i></div>

<div id= "ooc">
<h1>out of character</h1>
<b>001.</b> profile design by <a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank">ufo @ rpc</a> for branch. do not steal or redistribute.<br>
<b>002.</b> this character was made for <a href= "https://roleplay.chat/profile.php?user=Poppy" target="_blank">poppy</a>. she gets top priority. <br>
<b>003.</b> chat scenes are preferred, some exceptions can be made. ic drama of epic proportions is my fetish.<br>
</div>

<div id= "stats">
<h1>statistics</h1>
<font style=float:left><b>Name</b> </font> <font style=float:right>Mathias Halvorsen.</font><br>
<font style=float:left><b>Alias</b> </font> <font style=float:right>Branch.</font><br>
<font style=float:left><b>Gender</b> </font> <font style=float:right>Male.</font><br>
<font style=float:left><b>Height</b> </font> <font style=float:right>7'0".</font><br>
<font style=float:left><b>Weight</b> </font> <font style=float:right>275 lbs.</font><br>
<font style=float:left><b>Occupation</b> </font> <font style=float:right>Mercenary.</font><br>
<font style=float:left><b>Orientation</b> </font> <font style=float:right>Heterosexual.</font><br>
<font style=float:left><b>M. Status</b> </font> <font style=float:right>Single.</font><br>
</div>

<div id= "desc">
<h1>history & background</h1>
words here.
</div>


<div id="1" class="slide">
<div class="abox">
<h1>abilities</h1>
put whatever here.
</div></div>

<div id="2" class="slide">
<div class="abox2">
<h1>alliances</h1>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Poppy">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="">
<img style="border: 2px solid #30705b; border-radius: 50%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>
</div></div>

</div>

</div>