Ban's new-ish profile code. wip

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Anton|Knewave|Nova+Slim|Oswald|Roboto+Condensed');

body
{overflow-x:hidden;
background-image:
url('https://www.transparenttextures.com/patterns/brick-wall.png');
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color:#fff;}

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

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

a {color: #30262e;
text-decoration: none;
text-transform:uppercase;
font-family: 'Oswald', sans-serif;
font-size:12px;
-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:#000;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size:12px;
font-weight: 1;}

em {
color:#ccc;
font-family: 'Lobster Two', cursive;
text-transform: lowercase;
font-size:15px;
letter-spacing: 1;}

h1 {
 padding:1px;
 margin-top: 10px;
 margin-bottom: 10px;
 color:#000;
 text-shadow: 0 0 3px #b03a3a;
 font-size:30px;
 font-family: 'Knewave', cursive;
 text-transform:uppercase;
 font-weight: 1;
 text-align: center;}

h2 {
 background-color: transparent;
 border-left: 20px solid #000;
 padding:10px;
 margin-top: 1;
 color:#b03a3a;
 font-size:11px;
 font-family: 'Oswald', sans-serif;
 text-transform:uppercase;
 font-weight: 1;
 letter-spacing:5;
 text-align:left;}

hr {
 border:0;
 margin-top:5px;
 margin-bottom:5px;
 width:100%;
 height:2px;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 background-color:#000;}

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

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

#sidebar {
    position:absolute;
    top: 0px;
    right: 0px;
    height:100%;
    width:300px;
    background:#ddd;
    border-left: 50px solid #000;
    background-image: url('https://www.transparenttextures.com/patterns/axiom-pattern.png');}

.ban {
   overflow:hidden;
   position:absolute;
   bottom:0px;
   left: -500px;
   height:800px;
   width:600px;
   z-index: -1;
   filter: drop-shadow( -5px 0px 0px #b03a3a);
   background-image: url('http://i.picpar.com/wVQc.png');
   background-position:top center;
   background-attachment: absolute;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

.icon {
   overflow:hidden;
   position:absolute;
   bottom:552px;
   left: 100px;
   height:100px;
   width:100px;
   border: 1px solid #fff;
   background-image: url('http://i.picpar.com/0VQc.png');
   background-position:top center;
   background-attachment: absolute;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

.icon2 {
   overflow:hidden;
   position:absolute;
   bottom:300px;
   left: 100px;
   height:100px;
   width:100px;
   border: 1px solid #000;
   background-image: url('http://i.picpar.com/5VQc.png');
   background-position:top center;
   background-attachment: absolute;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

#middlebg {
   position: absolute;
   width:200px;
   height:430px;
   right: 221px;
   bottom: -1px;
   padding: 10px;
   margin: 1px;
   opacity: 1;}

.middleblock {
    z-index: 9;
    background-color: #000;
    border: 1px solid #fff;
    width: 110px;
    height: 135px;
    bottom: 410px;
    margin-left: 95px;
    position: absolute;}

#menu-dropdown {
    width: 80px;
    height: 160px;
    overflow: hidden;
    margin: 10px 0px 0px 16px;}

#menu-dropdown span {
    display: block;
    width: 80px;
    height: 20px;
    background-color: #b03a3a;
    color: #fff;
    font-family: 'Nova Slim', serif;
    text-transform: uppercase;
    font-size: 8px;
    text-align: center;
    line-height: 20px;
    letter-spacing: 1px;
    margin-bottom: 2px;}

.menubar-drop {
    background-color: #transparent;
    width: 80px;
    height: 20px;
    color: white;
    font-family: arial;
    text-transform: uppercase;
    font-size: 8px;
    text-align: center;}

.menubar-drop a {
    display: block;
    font-size: 8px;
    margin-top: 3px;
    width: 80px;
    height: 20px;
    background-color: #ccc;
    text-decoration: none;
    font-family: 'Nova Slim', serif;
    color: #000;
    line-height: 20px;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;}

.menubar-drop a:hover {
    background-color: #b03a3a;
    color: #fff;}

#container {
    position:absolute;
    bottom: 200px;
    left:50%;
    margin-left:-600px;
    height:400px;
    width:600px;
    background:#000;
    border: 50px solid #000;
    background-image: url('https://www.transparenttextures.com/patterns/bo-play.png');
    box-shadow:-10px -10px 0px #b03a3a;}

.smolban {
   overflow:hidden;
   position:absolute;
   bottom:-1px;
   right:-20px;
   height:300px;
   width:193px;
   z-index: 1;
   filter: drop-shadow( -5px 0px 0px #b03a3a);
   background-image: url('http://i.picpar.com/9VQc.png');
   background-position:top center;
   background-attachment: absolute;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

.fox {
   overflow:hidden;
   position:absolute;
   bottom:-100px;
   left:-100px;
   height:200px;
   width:200px;
   z-index: 1;
   filter: drop-shadow( -5px 0px 0px #b03a3a);
   background-image: url('http://i.picpar.com/MVQc.png');
   background-position:top center;
   background-attachment: absolute;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;}

#box {
   background-color: #eee;
   border: 1px solid #b03a3a;
   border-right: 1px solid #000;
   border-left: 1px solid #000;
   box-shadow:-5px -5px 0px #b03a3a;
   text-transform: uppercase;
   text-align: center;
   color: #000;
   font-size:10px;
   font-family: 'Roboto Condensed', sans-serif;
   position: absolute;
   width:400px;
   height:240px;
   left: 20px;
   top: 20px;
   line-height: 12px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;}

#box2 {
   background-color: #eee;
   border: 1px solid #b03a3a;
   box-shadow:-5px -5px 0px #b03a3a;
   border-right: 1px solid #000;
   border-left: 1px solid #000;
   position: absolute;
   width:400px;
   height:60px;
   left: 20px;
   bottom: 20px;
   line-height: 12px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;}

.abox, .abox2, .abox3 {
   background-color: #eee;
   border: 1px solid #b03a3a;
   border-right: 1px solid #000;
   border-left: 1px solid #000;
   box-shadow:-5px -5px 0px #b03a3a;
   text-transform: uppercase;
   text-align: left;
   color: #000;
   font-size:10px;
   font-family: 'Roboto Condensed', sans-serif;
   position: absolute;
   width:400px;
   height:240px;
   left: 20px;
   top: 20px;
   line-height: 12px;
   padding: 10px;
   margin: 1px;
   overflow:auto;
   opacity: 1;}

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

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

</style>

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

<div id= "sidebar">
<div class= "ban"></div>
<div class= "icon"></div>
<div class= "icon2"></div>

<div class="middleblock">
<div id="menu-dropdown">
<span>menu</span>
<div class="menubar-drop">
<a href="#1">History</a>
<a href="#2">Abilities</a>
<a href="#3">Out of Character</a>
<a href="#4">Reset</a>
</div>
</div>
</div>
</div>
</div>

<div id= "container">
<div class= "smolban"></div>
<div class= "fox"></div>

<div id= "box">
<h1>statistics!</h1>
<font style=float:left><b>Name</b> </font> <font style=float:right>Ban</font><br>
<font style=float:left><b>Nicknames</b> </font> <font style=float:right>Undead Ban, Fox's Sin of Greed, Lord Ban, Fairy King Ban</font><br>
<font style=float:left><b>Gender</b> </font> <font style=float:right>Male</font><br>
<font style=float:left><b>Race</b> </font> <font style=float:right>Human (Immortal) </font><br>
<font style=float:left><b>Age</b> </font> <font style=float:right>1500+ (chronologically) 23 (biologically)</font><br>
<hr>
<font style=float:left><b>Birthday</b> </font> <font style=float:right>February 14</font><br>
<font style=float:left><b>Height</b> </font> <font style=float:right>210cm (6'11")</font><br>
<font style=float:left><b>Weight</b> </font> <font style=float:right>70 kg (154 Ibs)</font><br>
<font style=float:left><b>Hair color</b> </font> <font style=float:right>Pale blue</font><br>
<font style=float:left><b>Eye color</b> </font> <font style=float:right>Red</font><br>
<hr>
<font style=float:left><b>Affiliation</b> </font> <font style=float:right>Seven Deadly Sins, Holy Knights, Boar Hat, Liones</font><br>
<font style=float:left><b>Occupation</b> </font> <font style=float:right>Member of the Seven Deadly Sins, Chef of the Boar Hat</font><br>
<font style=float:left><b>Symbol of Beast</b> </font> <font style=float:right>Fox</font><br>
<font style=float:left><b>Orientation</b> </font> <font style=float:right>Heterosexual</font><br>
<font style=float:left><b>Relationship</b> </font> <font style=float:right>Stole a heart</font><br>
</div>

<div id= "box2">
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">

<a target="_blank" href="https://roleplay.chat/profile.php?user=Chryssandra" title="A friend first. An unexpected lover the next. Enjoys every second spent with her. His small blonde princess.">
<img style="filter: drop-shadow( 0px 0px 2px #000); border: 3px solid #000; border-radius: 10%; height:50px;" src="https://i.imgur.com/BvZIztn.jpg"></a>

<a target="_blank" href="" title="words go here">
<img style="filter: drop-shadow( 0px 0px 2px #000); border: 3px solid #000; border-radius: 10%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

<a target="_blank" href="" title="words go here">
<img style="filter: drop-shadow( 0px 0px 2px #000); border: 3px solid #000; border-radius: 10%; height:50px;" src="http://i.picpar.com/FVIc.png"></a>

</marquee>
</div>

<div id="1" class="slide">
<div class="abox">
<h1>character history!</h1>
Ban「バン」 is a member of the Seven Deadly Sins and is the Fox's Sin of Greed. After the group's disbandment, Ban was initially imprisoned in the Baste Dungeon, but escaped when he discovered that Meliodas was still alive. His Sacred Treasure is the Holy Rod Courechouse. On top of being immortal, he is known for his ability, Snatch.
</div></div>

<div id="2" class="slide">
<div class="abox2">
<h1>abilities.</h1>
<li><b>Physical Hunt</b> A characteristic technique of Ban's magic that allows him to temporarily steal all of his opponents physical abilities, including both their strength and speed. These abilities are added to his own.</li>
<li><b>Fox Hunt</b>A technique best used in conjunction with a far-reaching weapon. Boasting pinpoint accuracy, the technique allows Ban to swiftly grab hold of an object and pull it towards himself, seemingly bypassing any obstructions</li>
<li><b>Hunter Fest</b> A technique that allows Ban to steal the physical strength of every living creature within a hundred foot radius of himself.</li>
<li><b>Etc</b> Unable to list other abilities. Much more abilities and growing.</li>
<h2>Snatch</h2>
Snatch, according to King, is an ability that enables its wielders to "rob" physical objects and the abilities of other creatures, without making any actual or direct contact. "Robbing" objects seems to have the effect of stopping the particular object's motion, and also allows the wielder to grab and pull it; such an ability can be used to stop the usage of equipment during a battle.
</div></div>

<div id="3" class="slide">
<div class="abox3">
<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 Ban. do not steal or redistribute. contact ufo for a profile of your own!<br>
<b>002.</b> Always Pm friendly<br>
<b>003.</b> 3rd person preferred but not limited.<br>
<b>004.</b> I'll play Ban however I see it. Following Anime and Manga.<br>
<b>005.</b> Story, Story and Smut, Smut. Long Term > Short Term.<br>
<b>006.</b> Let me know ahead of time before leaving/pausing rp. Common courtesy and all that jazz.<br>
<b>007.</b> Real life always comes first. We can't be on RPC 24/7.<br>
<b>008.</b> And I'll tell you one more thing. A real sin... can't be erased, no matter whaaaaat you do.<br>
<b>009.</b> I have Discord and Skype. If I know you well enough, I'll give it to you.<br>
<b>010.</b> I hate coding.<br>
</div></div>

</div>