goldie locke

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: url(https://i.imgur.com/hNWK8Pa.png); /*background image*/
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Arial; /*body font*/
}

a {
    color: #606060; /*link color*/
    text-decoration: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a:hover {
    color: #e1e1e1; /*hover link color*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar-background {
    width: 1000px;
    height: 100%;
    background: #f0ff91; /*sidebar background color*/
    top: 0;
    left: -708px;
    position: fixed;
    transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
}

#sidebar-border {
    width: 1003px;
    height: 100%;
    border-right: 5px solid #f0ff91; /*sidebar background color*/
    left: 0;
    top: 0;
    margin-left: -708px;
    position: fixed;
    transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
}

#sidebar {
    width: 450px;
    height: auto;
    position: fixed;
}

#title {
    font-size: 70px;
    color: #0b1217; /*title color*/
    font-family: Arial Black;
    text-transform: lowercase;
    letter-spacing: -7px;
    padding-left: 20px;
}

#title:first-letter {
    color: #107c1b; /*first letter of title color*/
}

#navigation {
    text-align: right;
    height: auto;
    text-transform: uppercase;
    letter-spacing: -1px;
    position: fixed;
    margin-top: 30px;
    font-size: 14px;
    width: 1000px;
    left: -690px;
}

#navigation a {
   display: inline-block;
   text-align: right;
   width: 180px;
   position: relative;
   height: 28px;
   color: #0b1217; /*navigation link color*/
   line-height: 18px;
   font-weight: bold;
}

i {
    opacity: 0;
    width: 170px;
    height: 18px;
    background: #0b1217; /*hover navigation link background color*/
    border-left: 10px solid #fbbeff; /*hover navigation link left border color*/
    z-index: -1;
    position: absolute;
    margin-left: -160px;
    display: inline-block;
    transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#navigation a:hover i {
    opacity: 1;
    height: 18px;
}

#navigation a:hover {
    color: white; /*hover navigation link color*/
    height: 28px;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#description-background {
    background: white; /*description background color*/
    width: 400px;
    height: 280px;
    position: fixed;
    top: 34%;
    left: 47%;
    border-radius: 10px;
    opacity: 0.5; /*description background transparency*/
}

#description {
    width: 360px;
    height: 240px;
    position: fixed;
    top: 34%;
    left: 47%;
    margin-left: 20px;
    margin-top: 20px;
    overflow:  hidden;
    letter-spacing: 1px;
    text-align: justify;
    padding-right: 8px;
    font-size: 11px; /*description font size*/
    color: #0b1217; /*description font color*/
}

#quote {
    font-size: 12px;
    font-family: Arial Black;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    color: #0b1217; /*quote font color*/
}

#quote:first-letter {
    color: #107c1b; /*first letter of quote color*/
    font-size: 16px;
}

::-webkit-scrollbar {
    height: 10px;
    width: 7px;
    background: white; /*scrollbar background color*/
}

::-webkit-scrollbar-thumb:vertical {
    background: #107c1b; /*scrollbar color*/
    border: 2px solid white; /*scroll barbackground color*/
}

::selection {
    background: #606060; /*selection color*/
    color: #ffffff;
}

::-moz-selection {
    background: #606060; /*selection color*/
    color: #ffffff;
}

p::selection {
    background: #606060; /*selection color*/
    color: #ffffff;
}

p::-moz-selection {
    background: #606060; /*selection color*/
    color: #ffffff;
}

/* Credits to http://pohroro.tumblr.com */

#c {
    width: 55px;
    height: 18px;
    font-family: Arial;
    font-size: 7px;
    text-transform: uppercase;
    text-align: center;
    bottom: 10px;
    right: 10px;
    letter-spacing: 1px;
    line-height: 4px;
    padding: 10px 3px;
    display: block;
    background: #ffffff;
    border: 1px dotted #000000;
    position: fixed;
}

#c a {
    font-weight: bold;
    line-height: 17px;
    font-size: 15px;
    font-family: Libre Baskerville;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -1px;
}
 .far{
width:330px;
height: 300px;
overflow:auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--


 ▪ ▪ ▪ ▪ ▪ ▪ { Pʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛs!

 ___ ___ ___ ___ ___ ___ __ __
 / __|/ _ \ | \ | __|/ __| | _ )\ \ / /
 | (__| (_) || |) || _| \__ \ | _ \ \ V /
 \___|\___/ |___/ |___||___/ |___/ |_|
 ___ ___ _ _ ___ ___ ___ ___
 | _ \ / _ \ | || || _ \ / _ \ | _ \ / _ \
 | _/| (_) || __ || /| (_) || /| (_) |
 |_| \___/ |_||_||_|_\ \___/ |_|_\ \___/


 ★ http://pohroro.tumblr.com } ▪ ▪ ▪ ▪ ▪ ▪



-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<style type="text/css">



</style>
</head>
<body>

<div id="sidebar-border"></div>
<div id="sidebar-background"></div>
<div id="sidebar">
<div id="title">ZŁOTA</div>

<div id="navigation">
<a href="#we" style="left: 56px;">This one is to hot,<i></i></a><br />
<a href="#will" style="left: 43px;">This one is too cold,<i></i></a><br />
<a href="#rock" style="left: 29px;">This one is<i></i></a><br />
<a href="#you" style="left: 17px;">Just right<i></i></a><br />
<a target="_blank" href=" " style="left: 4px;"> <i></i></a><br />
<a target="_blank" href=" " style="left: -9px;"> <i></i></a><br />
<a target="_blank" href=" " style="left: -22px;"> <i></i></a><br />
<a target="_blank" href=" " style="left: -35px;"> <i></i></a><br />
</div>

<div id="description-background"></div>
<div id="description">


<!--start of description-->
 <div id="we" class="far">
<div id="quote"><!--edit quote here-->Dossier</div>
<font style="float:left"><b>Name</b></font>
<font style="float:right">Zlota</font><br>
<font style="float:left"><b>Nicknames</b></font>
<font style="float:right">Z, Lot, Lota, Goldie Lockes</font><br>
<font style="float:left"><b>Age</b></font>
<font style="float:right">24</font><br>
<font style="float:left"><b>Gender</b></font>
<font style="float:right">♀ Female</font><br>
<font style="float:left"><b>Race</b></font>
<font style="float:right">Human</font><br>
<font style="float:left"><b>Height + Weight</b></font>
<font style="float:right">6'2"・130lbs</font><br>
<font style="float:left"><b>Hair + Eye </b></font>
<font style="float:right">Blond・Gold</font><br>
<font style="float:left"><b>Alignment</b></font>
<font style="float:right">None</font><br>
<font style="float:left"><b>Origin</b></font>
<font style="float:right">Goldie Lockes and the 3 bears</font><br>
<font style="float:left"><b>Sexual Orientation</b></font>
<font style="float:right">Meh doesn't matter. </font><br>
<font style="float:left"><b>Martial Status</b></font>
<font style="float:right">Single</font><br></p></div>

 <div id="will" class="far">
<div id="quote"><!--edit quote here-->About</div>

<p>A scrappy and tough chick. Zlota's far from a straight arrow. She's a mama with a short fuse, and quick temper. What's that mean for you? Well stay away. That's all really. She tends to keep her perosnal issues to herself and does well off. Her 'friends' or crew are made up of varying outcasts. Those who ran away from the queen's circle, those who are the wrong side of the law, or those who just don't have a place to go.</p>

<p> Zlota is a single mother, her son is still fairly young, and in her case. Despite her questionable background. She was a run away, as a kid. Why? Some say it was cause her dad was an alcholic, and hner mother was a hooker. Others say she killed her own parents....then ran off. While the real truth is? She was a foster kid. No real family. She packed her stuff up and ran. Was filed as a missing child, but hopped a buss cross country that night and made her way to Grimm Well.</p>

<p>Her first real crime wasn't comitted until she was 18. Her 'boyfriend' at the time, her baby daddy, and her were young, stupid and in love. What the two thought was an abandoned house they were going to be squatting in turned out to be the 'side home' of some fuddy duddy right guy.... So their break in resulted in both being prosecuted and Zlota being released with a eight month old... on good behavior and pleas, she was able to get out with a leash.</p>

<p>She tries to make a living however she can. Avoding illegal activity at this point.Despite watching over a bunch of misfits. All in all she stays tough for her little Terry. </div>

 <div id="rock" class="far">
<div id="quote">Friends</div>

<p>N/A</p></div>

 <div id="you" class="far">
<div id="quote">Rules</div>
o1. PM friendly.<Br>
o2. IC =/= OOC..<Br>
o3. No fucks given.<Br>
o4. I play my character. Br>
o5. For the Grimm justice room.<Br>
o6. What ever.<Br>
o7. Start with a post if you really want to. I will decline if I am not interested. Do not take it personally.<Br>
o8. Story > Smut.<Br>
o9. I am a bit of a bitch if you cross me.<Br>
1o. Keep drama away please.<Br>
11. No profile? No RP<Br>
</div>
</div>

<!--end of description-->

<div id="c">codes by<br /><a target="_blank" href="http://pohroro.tumblr.com">pohroro</a></div>

</body>
</html>