Xaela

IN STYLE BOX --- COPY BELOW -----

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

body {
background-image: url("https://i.imgur.com/YUkiVW0.png");
color: white;
background-color: #000000;
font-family: "Federant";
font-size: 16px;
}

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

#CenterBG {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 360px;
height: 510px;
background-color: #000000;
background-image: url("https://i.imgur.com/zZiqHn5.png");
background-position: center;
background-attachment:fixed;
border-top: 3px solid #737CA1;
border-bottom: 3px solid #737CA1;
z-index:2;
}

#LeftBG {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: #000000;
background-image: url("https://i.imgur.com/zZiqHn5.png");
background-position: center;
background-attachment:fixed;
border: 3px solid #737CA1;
z-index:1;
}

#RightBG {
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 420px;
height: 570px;
padding: 10px;
background-color: #000000;
background-image: url("https://i.imgur.com/zZiqHn5.png");
background-position: center;
background-attachment:fixed;
border: 3px solid #737CA1;
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: #737CA1;
font-family: "Abril Fatface";
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #917c9b, 1px 1px #917c9b, -1px -1px 0 #917c9b, 1px -1px 0 #000, -1px 1px 0 #000;
z-index: 5;
}

#MainPic {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 300px;
height: 470px;
border: 3px solid #737CA1;
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 #737CA1;
background-color: #000000;
background-image: url("https://i.imgur.com/oJUsgm3.png");
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 #737CA1;
background-color: #000000;
background-image: url("https://i.imgur.com/oJUsgm3.png");
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 #737CA1;
background-color: #000000;
background-image: url("https://i.imgur.com/oJUsgm3.png");
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: #a0caf0;
}

.frienditempic {
border: 7px solid #737CA1;
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 #a0caf0;
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 #737CA1;
background-color: #000000;
background-image: url("https://i.imgur.com/oJUsgm3.png");
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 #737CA1;
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);
 }
}
/* Credit for the original CSS Marquee solution that this is based on to https://stackoverflow.com/questions/38604929/how-to-create-marquee-infinite-loop-of-logos-slider-with-css-only */

h1, h2, h3 {padding: 0px; margin: 0 0 8 0; text-align: center; color: #737CA1; font-family: "Abril Fatface"; border-bottom: dashed pink 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: #a0caf0; 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: #a0caf0;}
a:hover {color: pink;}

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

b {color: #737CA1;}


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

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

::-webkit-scrollbar-thumb {
background: #737CA1;
}


**** END STYLE BOX HERE DO NOT INCLUDE THIS COMMENT!*****


****COPY BELOW FOR BODY PART********
<div id="CenterBG"></div>
<div id="LeftBG"></div>
<div id="RightBG"></div>

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

<div id="MarqueeBox">
<h1>Gallery</h1>
<div class="Marquee">
<div class="MoveIt">
<center>
<img src="https://pbs.twimg.com/media/EHmPRDuWwAAIFPY?format=jpg&name=large" alt="Gallery Picture"/><br>
<img src="https://pbs.twimg.com/media/EGz-2QNXkAEjDSb?format=jpg&name=large" alt="Gallery Picture"/><br>
<img src="https://pbs.twimg.com/media/EGdBxuxXoAA4-rS?format=jpg&name=large" alt="Gallery Picture"/><br>
<img src="https://pbs.twimg.com/media/EGe-cqWXkAEChKL?format=jpg&name=large" alt="Gallery Picture"/><br>
<img src="https://pbs.twimg.com/media/EF7LQycXoAAm8gj?format=jpg&name=large" alt="Gallery Picture"/><br>
</center>
</div>
</div>

<div id="one">
<div id="tab">
<h1>Statistics</h1>
<b>True Name:</b><span style=float:right>Chinua Dotharl</span><br>
<b>Alias:</b> <span style=float:right> Laine Brinwyld</span><br>
<b>Age:</b><span style=float:right>23</span><br>
<b>Gender:</b><span style=float:right>Female</span><br>
<b>Race:</b><span style=float:right>AuRa [Xaela]</span><br>
<b>Height:</b><span style=float:right>Five Fulms, Five Ilms</span><br>
<b>Weight:</b><span style=float:right>One hundred twenty night ponze</span><br>
<b>Orientation:</b><span style=float:right>Heterosexual</span><br>
<b>Preferences:</b><span style=float:right>AuRa, Roegadyn, Hyur</span><br>
<b>Status:</b><span style=float:right>Widow [Heavy Male Lean]</span><br>
<b>Occupation:</b><span style=float:right>Adventurer, Warrior of Light</span>
</div></div>

<div id="two">
<div id="tab">
<h1>Personality</h1>
Laine Brinwyld is the oldest female among the Brinwyld siblings. Her usual countenance is one of silent stoicism, reserved in a public environment. Once comfortable with her surroundings and the people she retains familiarity to, Laine's personality seems to take on a complete one-eighty.The Xaela becomes more outgoing, perky and flirty to the point of distraction. Laine both cares for her studies and for her fun and always seeks to balance one against the other. To her family she is insufferable, her friends a trial. To her enemies? She is <i>Indestructible.</i><br> <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>
Work in Progress.<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>
<b><i>The Echo:</i></b><br>The Echo is a special ability that some rare individuals possess. Those who have been "gifted", as the members of the Path of the Twelve call it, can resonate with other people's souls—and see their past, albeit not able to interfere or change it—as well as being able to speak every language in the world. The Echo prevents its user from being tempered by primals, and advanced users can transcend their mortal forms.<br>

<b><i>Jobs:</b></i><br>
Mastered List [80]:<br>
DRAGOON | ASTROLOGIAN | BLACK MAGE | DARK KNIGHT<br><br>

In Training [50-70+]:<br>
SCH/SMN | MNK | SAM | RDM |<br> WHM |
 MCH | PLD | WAR | DNC | GNB |<br>



</br><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>01.</b> Holy shit this code is so long so--<br>
<b>02.</b> Tis a work in progress.<br>
<b>03.</b> Chinua/ Laine is my character from FFXIV. Over 5+years of backstory to come.<br>
<b>04.</b> I'm DM Friendly.<br>
<b>05.</b> Laine is PM Tolerant.<br>
<b>06.</b> Not here for smut.<br>
<b>07.</b> Here for story.<br>
<b>08.</b> Story + Smut? Depends on my mood.<br>
<b>09.</b> Typist is a snowballing p.o.s.<br>
<b>10.</b> 3rd person Room RP preferred.
</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>

***END BODY PART --- DO NOT INCLUD THIS COMMMENT!*****