Profile Code 1

<style>
@import url('https://fonts.googleapis.com/css?family=Federant|Audiowide|Abril+Fatface');

body {

color: white;
background-color: black;
font-family: "Ariel";
font-size: 16px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
z-index: 99;

}

#CenterBG {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 360px;
height: 510px;
background-color: black;

background-position: center;
background-attachment:fixed;
border-top: 3px solid black;
border-bottom: 3px solid black;
z-index:2;
}

#LeftBG {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: black;

background-position: center;
background-attachment:fixed;
border: 3px solid black;
z-index:1;
}

#RightBG {
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: black;

background-position: center;
background-attachment:fixed;
border: 3px solid black;
z-index:1;
}

#Title {
position: fixed; left: 0px; right: 0px; top: -425px; bottom: 0px; margin: auto;
width: 300px;
height: 35px;
text-align: center;
font-size: 30px;
color: black;
font-family: "Tehoma";
text-shadow: 2px 0 0 #917c9b, -2px 0 0 #917c9b, 0 2px 0 #917c9b, 0 -2px 0 #917c9b, 1px 1px black, -1px -1px 0 #917c9b, 1px -1px 0 #917c9b, -1px 1px 0 black;
z-index: 5;
}

#MainPic {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 470px;
border: 3px solid silver;
z-index: 2;
}

#OOCBox {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: -290px; margin: auto;
width: 380px;
height: 240px;
padding: 10px;
border: 3px solid silver;
background-color: black;

z-index: 5;
overflow: auto;
}

#Tab {
position: fixed; left: -800px; right: 0px; top: -290px; bottom: 0px; margin: auto;
width: 380px;
height: 240px;
padding: 10px;
border: 3px solid silver;
background-color: black;

z-index: 5;
display: none;
overflow: auto;
}

#one #tab {
display: block;
}

#one:target #tab, #two:target #tab, #three:target #tab, #four:target #tab, #five:target #tab, #six:target #tab {
display: block;
z-index: 11;
}

#LeftNav {
position: fixed; left: -350px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 20px;
height: 300px;
z-index: 5;
}

#RightNav {
position: fixed; left: 0px; right: -350px; top: 0px; bottom: 0px; margin: auto;
width: 20px;
height: 300px;
z-index: 5;
}

.NaviTab{
display: inline-block;
border: 3px solid black;
background-color:Silver;

width: 14px;
height: 80px;
z-index: 5;
margin: 10 0 10 0;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.NaviTab:hover {
background-color: black;
}

.frienditempic {
border: 7px solid silver;
width: 75px;
height: 75px;
margin: 5px;
padding: 0;
border-radius: 50%;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.frienditempic:hover {
border: 7px solid Silver;
border-radius: 0;
}

#MarqueeBox{
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 380px;
height: 530px;
padding: 10px;
border: 3px solid silver;
background-color: black;

z-index: 5;
}

.Marquee {
  height: 482px;
  width: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.MoveIt {
width: 400px;
height: 10000px;
position: absolute;
overflow-y:hidden;
top: 0;
left: 0;
-moz-animation: MoveIt 25s linear infinite;
-webkit-animation: MoveIt 25s linear infinite;
animation: MoveIt 25s linear infinite;
}

.MoveIt img {
display:inline-block;
vertical-align:middle;
height: 230px;
width: auto;
border: 3px solid silver;
margin: 10 20 10 20;
}

.MoveIt:hover {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

@keyframes MoveIt {
0% {
     -moz-transform: translateY(515px);
 -webkit-transform: translateY(515px);
 transform: translateY(515px);
}
  100% {
     -moz-transform: translateY(-1280px);
 -webkit-transform: translateY(-1280px);
 transform: translateY(-1280px);
  }
}


h1, h2, h3 {padding: 0px; margin: 0 0 8 0; text-align: center; color: black; font-family: "Abril Fatface"; border-bottom: dashed silver 3px; text-shadow: 2px 0 0 white, -2px 0 0 white, 0 2px 0 white, 0 -2px 0 white, 1px 1px white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
}

a {color: Silver; font-family: "Abril Fatface"; font-size: 16px; text-decoration:none;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;}
a:visited {color: silver;}
a:hover {color: silver;}

a.credit:link {color:silver; font-family: "Audiowide"; font-size: 16px;}
a.credit:visited {color:silver;}
a.credit:hover {color:silver;}
a.credit {text-decoration:none;}

b {color: silver;}


::-webkit-scrollbar {
width: 8px;
height: 1px;
}

::-webkit-scrollbar-track {
border-radius: 5px;
}

::-webkit-scrollbar-thumb {
background: black;
}
</style>
<body>

<div id="CenterBG"></div>
<div id="LeftBG"></div>
<div id="RightBG"></div>

<div id="Title"></div>
<img id="MainPic" src ="https://i.imgur.com/Y91amTn.jpg"alt="Main Picture"></div>

<div id="MarqueeBox">
<h1>Gallery</h1>
<div class="Marquee">
<div class="MoveIt">
<center>
<img src="https://i.imgur.com/qHjKveJl.png" alt="Gallery Picture"/><br>
<img src="https://i.imgur.com/xhpIeI5l.png" alt="Gallery Picture"/><br>
<img src="https://i.imgur.com/6oCcd42l.png" alt="Gallery Picture"/><br>

</center>
</div>
</div>

<div id="one">
<div id="tab">
<h1>Statistics</h1>
<b>Name:</b><span style=float:right>Seir</span><br>
<b>Alias:</b><span style=float:right>None</span><br>
<b>Class:</b><span style=float:right>Sorcerer(Secret)</span><br>
<b>Sub Class:</b><span style=float:right>Fighter(Brawler)</span><br>
<b>Race:</b><span style=float:right>Arch Demon</span><br>
<b>Age:</b><span style=float:right>Young for an Arch Demon</span><br>
<b>Body Weight/Height:</b><span style=float:right>5ft / 101lbs</span><br>
<b>Gender:</b><span style=float:right>Male</span><br>
<b>Size:</b><span style=float:right>Medium</span><br>
<b>Background:</b><span style=float:right>Prince</span><br>
<b>Arcane Methods:</b><span style=float:right>Undisclosed</span><br>
<b>Language:</b><span style=float:right>Common, Abyssal, Infernal, Orcish, Giant, Draconic, Elemental, Fey, Elven, Dwarvish, Gnomish, and Undercommon</span><br>
<b>Background:</b><span style=float:right>Prince</span><br>
<b>Hobbies:</b><span style=float:right>Gambling</span>
</div></div>

<div id="two">
<div id="tab">
<h1>Personality</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="three">
<div id="tab">
<h1>History</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="four">
<div id="tab">
<h1>Abilities</h1>
Lorem ipsum... <b>bold example.</b> <i>italics example.</i> <a target="_blank" target="www.example.com">Link example.</a>
</div></div>

<div id="five">
<div id="tab">
<h1>Associates</h1>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="frienditempic" title="DESCRIPTION OF FRIEND HERE" alt="friend/item picture"></a>
</center>
</div></div>

<div id="six">
<div id="tab">
<h1>Inventory</h1>
<center>
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
<img src="PICHERE" class="frienditempic" title="DESCRIPTION OF ITEM HERE" alt="friend/item picture">
</center>
</div></div>

<div id="OOCBox">
<h1>Out of Character</h1>
<b>OOC is not IC. I tend to shit post, but can get serious. Sexual rp is usually boring to me, so its unexpected. I work odd hours. It is highly unlikely to get Discord and other means of communication from me. I will roleplay with anyone, but our characters might not get along. It is unlikely I will block you, but if you get rude, I get rude back. More will be added when I get a chance.</b>
</div>


<div id="LeftNav">
<a href="#one"><div class="NaviTab"></div></a>
<a href="#two"><div class="NaviTab"></div></a>
<a href="#three"><div class="NaviTab"></div></a></div>

<div id="RightNav">
<a href="#four"><div class="NaviTab"></div></a>
<a href="#five"><div class="NaviTab"></div></a>
<a href="#six"><div class="NaviTab"></div></a></div>

<div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>
</body>