Ari's profile

<style>
@import url(https://fonts.googleapis.com/css?family=Audiowide|Alegreya+SC|Alice);

body {
background-color: #6d81a3;
background-position: top;
background-image: url("https://i.imgur.com/zttdn4a.jpg");
background-attachment: fixed;
background-position: cover;
font-family: "Alice";
color: lightpink;
font-size: 16px;
}

#BGBox {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 975px;
height: 500px;
border: solid lightpink 5px;
background-color: #000000;
z-index: 1;
}

#TitleTop {
position: fixed; left: 0px; right: -325px; top: -575px; bottom: 0px; margin: auto;
font-size: 50px;
line-height: 35px;
height: 40px;
width: 650px;
text-align: left;
color: lightpink;
font-family: "Alegreya SC";
text-shadow: 2px 2px 1px #5c7290, -2px -2px 1px #5c7290, -2px 2px 1px #5c7290, 2px -2px 1px #5c7290;
z-index: 11;
}

#TitleBottom {
position: fixed; left: -325px; right: 0px; top: 0px; bottom: -575px; margin: auto;
font-size: 50px;
line-height: 35px;
height: 40px;
width: 650px;
text-align: right;
color: lightpink;
font-family: "Alegreya SC";
text-shadow: 2px 2px 1px #5c7290, -2px -2px 1px #5c7290, -2px 2px 1px #5c7290, 2px -2px 1px #5c7290;
z-index: 11;
}

#PictureLeft {
position: fixed; left: -650px; right: 0px; top: -300px; bottom: 0px; margin: auto;
height: 350px;
border: double #5c7290 10px;
background-color: lightpink;
z-index: 10;
}

#PictureRight {
position: fixed; left: 0px; right: -650px; top: 0px; bottom: -300px; margin: auto;
height: 350px;
border: double #5c7290 10px;
background-color: lightpink;
z-index: 10;
}

#NavigationTop{
position: fixed; left: 0px; right: 0px; top: -460px; bottom: 0px; margin: auto;
width: 300px;
height: 20px;
line-height: 20px;
z-index: 5;
text-align: center;
}

#NavigationBottom{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -460px; margin: auto;
width: 300px;
height: 20px;
line-height: 20px;
z-index: 5;
text-align: center;
}

.NaviTab{
display: inline-block;
background-color: lightpink;
background-image: url("https://i.imgur.com/4pQ5YKL.png");
width: 65px;
height: 10px;
z-index: 5;
margin: 0 10px 0 10px;
border: double #5c7290 5px;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
 pointer-events: auto;
}

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

#tab {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 400px;
padding: 10px;
border: solid lightpink 3px;
background-color: #000000;
background-image: url("");
z-index: 11;
overflow: auto;
display: none;
}

#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: 12;
}

#Stats {
position: fixed; left: -650px; right: 0px; top: 0px; bottom: -285px; margin: auto;
width: 265px;
height: 155px;
padding: 10px;
border: solid lightpink 3px;
background-color: #000000;
background-image: url("");
z-index: 11;
overflow: auto;
}

#OOC {
position: fixed; left: 0px; right: -650px; top: -285px; bottom: 0px; margin: auto;
width: 265px;
height: 155px;
padding: 10px;
border: solid lightpink 3px;
background-color: #000000;
background-image: url("");
z-index: 11;
overflow: auto;
}

.frienditempic {
border: 5px solid #5c7290;
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: 5px solid white;
border-radius: 0;
}

.gallerypic {
border: 5px solid lightpink;
width: 95%;
margin: 2px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
z-index: 99;
text-shadow: 2px 0 0 #4C9DCC, -2px 0 0 #4C9DCC, 0 2px 0 #4C9DCC, 0 -2px 0 #4C9DCC, 1px 1px #4C9DCC, -1px -1px 0 #4C9DCC, 1px -1px 0 #4C9DCC, -1px 1px 0 #4C9DCC;
}

a.credit {color:#f0f0f0; font-family: "Audiowide"; font-size: 16px; text-decoration:none;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}

b {color:#f0f0f0;}

a {color: white; font-family: "Alegreya SC"; font-size: 20px; -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;}
a:visited {color: white;}
a:hover {color:#5c7290;}

h1 {
    font-family: "Alegreya SC";
    overflow: hidden;
    text-align: center;
    font-size: 25px;
    padding: 0px;
    margin: 0px;
}

h1:before,
h1:after {
    border-top: 3px solid #5c7290;
    content: "";
    display: inline-block;
    height: .05em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .05em;
}

h1:before {
    right: 0.5em;
    margin-left: -50%;
}

h1:after {
    left: 0.5em;
    margin-right: -50%;
}
/*Credit for the original header style goes to https://css-tricks.com/line-on-sides-headers/*/

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

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

::-webkit-scrollbar-thumb {
background: lightpink;
}

</style>
<body>

<div id="TitleTop">lorem ipsum dolor sit amet</div>
<div id="TitleBottom">lorem ipsum dolor sit amet</div>
<div id="BGBox"></div>
<img id="PictureLeft" src="LEFT PICTURE URL HERE" alt="picture left" />
<img id="PictureRight" src="RIGHT PICTURE URL HERE" alt="picture right" />

<div id="Stats">
<h1>Stats</h1>

<b> Name: <span style=float:right>Arisu Kiyomi Miki </span><br>
<b> Nickname(s) <span style=float:right> Ari, Su, Foxy, Lady,</span><br><span style=float:right> Flower- By Shale</span><br><br><br>
<b>Age: <span style=float:right>21</span><br>
<b>Birthday: <span style=float:right>April 14th</span><br>
<b>Gender: <span style=float:right>Female</span><br>
<b>Sexuality: <span style=float:right>Straight</span><br>
<b>Status: <span style=float:right>Seeking a mate</span><br>
<b>Height: <span style=float:right>5'4"</span><br>
<b>Weight: <span style=float:right>120 lbs </span><br>
<b>Hair: <span style=float:right>Brown</span><br>
<b>Eyes: <span style=float:right>Purple, but varies</span><br>
<b>Lycanthrope Species: <span style=float:right>Fox </span>
<br>
<b>Family: <span style=float:right>Brothers: Airo, Zada </span><br>
<b>Tattoo(s): <span style=float:right>WIP</span><br>
<b>Scar(s): <span style=float:right>WIP</span><br>
<b>Resident: <span style=float:right>Rowan Lakes</span><br>
<b>Occupation: <span style=float:right>Homemaker</span><br>
</div>

<div id="OOC">
<h1>Out of Character</h1>
<b>01.</b> OOC line here.<br>
<b>02.</b> OOC line here.<br>
<b>03.</b> OOC line here.<br>
<b>04.</b> OOC line here.<br>
<b>05.</b> OOC line here.
</div>

<div id="one">
<div id="tab">
<h1>Personality</h1>
<b><i> Arisu is a very proper lady, and refuses to be anything else, but that way a lady should act. She can come off as quite firm handed, but only due to wanting to bring out the most proficient aspects of those that are around her. She can be very tricky to deal with being a fox, but to her it isn't so much trickery as it is one being quite wise in an approach. She often enjoys 'training' other animals to bring out the best in them. It's not often that she shows others her more gentler side, but if one could manage to get close enough to her she'll begin to open up like a gentle flower. Now, when it comes to fighting she thinks that it's such a barbaric way to handle things, and will only shift fully to protect herself or those that she cares about. In which once she's that angry she unleashes a fierceness that would even make her wonder on how much of a lady she really is. She also dislikes it when her clothing gets ruined or anything spilt on her dresses and will often storm away from the situation that caused it. </i></b> <p>

<a target="_blank" href="www.example.com">Link example.</a>
</div></div>

<div id="two">
<div id="tab">
<h1>History</h1>
Lorem ipsum...
</div></div>

<div id="three">
<div id="tab">
<h1>Abilities</h1>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.<br>
<b>Ability Name:</b> Description here.
</div></div>

<div id="four">
<div id="tab">
<h1>Gallery</h1>
<center>
<img class="gallerypic" src ="PICHERE" alt="Gallery Picture"/>
<img class="gallerypic" src ="PICHERE" alt="Gallery Picture"/>
<img class="gallerypic" src ="PICHERE" alt="Gallery Picture"/>
<img class="gallerypic" src ="PICHERE" alt="Gallery Picture"/>
<img class="gallerypic" src ="PICHERE" alt="Gallery Picture"/>
</center>
</div></div>

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

<div id="six">
<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 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 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 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 picture"></a>
</center>
</div></div>

<div id="NavigationTop">
<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="NavigationBottom">
<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>