Miss Fortune Layout

--------------- ABOUT MEE -------------------------------

<style>
.xpdonnax { BG P R O P E R T I E S }

body {
background-color:#ffffff;
margin-top:300px;
overflow-y:auto; }


.xpdonnax { TABLE P R O P E R T I E S }

table, tr, td { background-color:transparent; border:0px!important; }


.xpdonnax { SCROLLBAR P R O P E R T I E S }

::-webkit-scrollbar-thumb { background-color:#ff0017; }

::-webkit-scrollbar {
width:3px;
height:3px;
background:#ffffff; }


.xpdonnax { REGULAR  L I N K S }

a:active, a:visited, a:link {
color:#000000;
font-family:consolas;
font-size:9px;
line-height:9px;
padding:0px 2px 0px 2px;
text-decoration:none;
text-transform:uppercase;
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
transition: all 0.6s linear;}


.xpdonnax { NAVIGATION L I N K S }

a.first, a.first:link, a.first:active, a.first:visited {
color:#ffffff;
font-family:georgia;
font-weight:lighter;
line-height:28px;
font-size:27px;
display:block;
height:28px;
text-align:right;
letter-spacing:-2px;
margin:0px 18px 0px 0px;
text-shadow:1px 1px 0px #000000;
text-transform:lowercase;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}

[data-nav]:after{
content: attr(data-nav);
padding:0px 0px 0px 8px;
margin:0px;
width:28px;
height:28px;
color: #ffffff;
line-height:28px;
font-family:times;
font-size:28px;
text-align:left;
position:absolute;
text-shadow:0px 0px 0px transparent;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;}

[data-nav]:hover:after{ color:#ff0017; }


.xpdonnax { EXTRA NAVIGATION L I N K S }

a.second, a.second:link, a.second:active, a.second:visited {
font-family:consolas;
font-size:10px;
display:inline-block;
line-height:75px;
width:5.38%;
height:775%;
float:left;
padding:0%;
color:#ffffff;
text-align:center;
background:#ff0017;
margin:0% .5% 0% 0%;
text-shadow:1px 1px 0px #000000;
text-transform:lowercase;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}

a.second:hover { text-transform:uppercase!important; }


.xpdonnax { EXTRA NAVIGATION L I N K S }

a.luv, a.luv:link, a.luv:active, a.luv:visited {
font-family:consolas;
font-size:105px;
display:inline-block;
line-height:110px;
width:70px;
height:100%;
float:left;
padding:0%;
margin:0%;
color:#ffffff;
text-align:center;
background:#000000;
text-shadow:1px 1px 0px #ffffff;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}

a.luv:hover { background:#ff0017; }


.text, table, tr, td, li, p, div {
color:#000000;
font-family:consolas;
font-size:10px;
font-weight:lighter;
line-height:9px;
letter-spacing:0px;
text-transform:normal;}


i {
color:#ffffff;
font-size:10px;
font-family:Palatino Linotype;
text-transform:none;
letter-spacing:1px;
font-weight:bold;}


b {
color:#000000;
font-size: 14px;
font-weight:lighter;
font-family: georgia;
text-transform: lowercase;
line-height:13px;
letter-spacing: -1px;}


u {
color:#ffffff;
font-family:ms gothic;
font-size:10px;
line-height:11px;
background-color:#ff0017;
text-transform:uppercase;
text-decoration:none;
font-weight:lighter;
font-style:normal;
padding:0px 0px 1px 2px;
letter-spacing:2px;}


strong {
color:#ff0017;
font-size: 14px;
font-weight:lighter;
font-family: georgia;
text-transform: lowercase;
line-height:13px;
letter-spacing: -1px;}


.xpdonnax { HEADERS }

h1{
color:#ff0017;
line-height:40px;
text-transform:uppercase;
font-family:arial;
font-size:38px;
font-style:italic;
text-align:center;
letter-spacing:-8px;
margin:11.5% 0px -1% -8px;}


h2{
color:#000000;
font-family:arial narrow;
font-size:9.5px;
font-style:normal;
font-weight:lighter;
line-height:8px;
text-align:center;
letter-spacing:0px;
text-transform:lowercase;
margin:0px;
height:10px;}

h3{
font-family:cambria;
font-size:12px;
font-style:normal;
font-weight:lighter;
line-height:13px;
text-align:center;
letter-spacing:.5px;
text-transform:lowercase;
margin:0px;
height:13px;}


h4{
color:#000000;
line-height:16px;
font-weight:lighter;
text-transform:uppercase;
font-family:arial narrow;
font-size:17px;
text-align:left;
word-spacing:5px;
letter-spacing:-.5px;
text-shadow:0px 0px 0px transparent;
margin:0px;
padding:0px 0px 0px 8px;}


h5{
width:100%;
float:left;
color:#000000;
line-height:16px;
font-weight:lighter;
font-style:italic;
text-transform:uppercase;
font-family:arial narrow;
border-bottom:1px solid #ff0017;
font-size:15px;
text-align:right;
letter-spacing:-1px;
margin:0px;
padding:0px;}


h6{
color:#000000;
line-height:24px;
text-transform:lowercase;
font-family:georgia;
font-size:24px;
text-align:left;
font-weight:lighter;
letter-spacing:-3px;
margin:0px;}


.xpdonnax { S P A N CLASS P R O P E R T I E S }

.dropcap {
float: left;
line-height:36px;
padding:4px 6px 4px 6px;
margin:0px 4px 2px 0px;
font:bold 20px georgia;}


.red{ color:#ff0017; }

blockquote{
margin:0px;
padding:0px;
width:50%;
float:left;
text-align:left;
line-height:8px;}

.xpdonnax { D I V T A B L E S }

#yolo{
top:0px;
left:0px;
width:100%;
height:100%;
position:fixed;}

#yolo .left{
top:0px;
left:0px;
width:50%;
height:100%;
z-index:1;
position:fixed;
background:#000000;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;}

#yolo:hover .left{
width:40%;}

#yolo .right{
top:0px;
right:0px;
width:50%;
height:100%;
z-index:1;
position:fixed;
background:#ff0309;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;}

#yolo:hover .right{
width:40%;}

#yolo .line{
top:0%;
right:49.5%;
width:1%;
height:100%;
z-index:2;
position:fixed;
background:#ffffff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;}

#yolo:hover .line{
top:50%;
height:0%;}


#yolo .puddin{
top:36%;
left:45%;
width:10%;
height:27.5%;
z-index:100;
position:fixed;
text-align:center;
background:transparent;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);}

#yolo:hover .puddin{
height:0%;
font-size:0px;
z-index:-1;
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}


#yolo .diamond{
top:33%;
left:43%;
z-index:99;
width:13%;
height:35%;
position:fixed;
text-align:justify;
background:url('https://i.imgur.com/Fra8OPK.png');
background-size:12%;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);}

#yolo:hover .diamond{
height:0;
width:0;
left:46%;
z-index:-1;
font-size:0px;
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}


#yolo .info{
top:1.8%;
left:41%;
width:18%;
height:96%;
z-index:0;
position:fixed;
background:#ffffff;}


#yolo .love{
top:63.5%;
left:52.6%;
width:5.1%;
height:16.8%;
z-index:0;
font-size:0px;
color:transparent;
position:fixed;
background:#ffffff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;}

#yolo .love:hover{
color:#ffffff;
font-size:10px;
left:42.2%;
width:15.6%;}

#yolo .love .luvinfo{
float:right;
width:0%;
height:100%;
font-size:0px;
overflow-y:auto;
text-align:justify;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}

#yolo .love:hover .luvinfo{
width:63.2%;
font-size:10px;
filter:alpha(opacity=1);
-html-opacity:1;
-moz-opacity:1;
opacity:1;}


#yolo .connections{
display:inline;
overflow-x: auto;
overflow-y:hidden;
width:100%;
height:16%;
float:left;
margin-top:0%;}


#yolo .quote{
bottom:16%;
left:40%;
width:0%;
height:auto;
z-index:100;
position:fixed;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}

#yolo:hover .quote{
width:13%;
left:26%;
filter:alpha(opacity=1);
-html-opacity:1;
-moz-opacity:1;
opacity:1;}

#yolo .harley{
bottom:-2%;
left:63%;
width:0%;
height:500px;
z-index:100;
position:fixed;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}

#yolo:hover .harley{
width:25%;
filter:alpha(opacity=1);
-html-opacity:1;
-moz-opacity:1;
opacity:1;}

#yolo .haha{
bottom:22%;
left:63%;
width:500px;
height:500px;
z-index:100;
position:fixed;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}

#yolo:hover .haha{
filter:alpha(opacity=1);
-html-opacity:1;
-moz-opacity:1;
opacity:1;}

#yolo .name{
bottom:20%;
left:39.8%;
width:48%;
height:10%;
z-index:100;
color:#ffffff;
position:fixed;
line-height:50px;
text-transform:uppercase;
font-family:arial narrow;
font-weight:lighter;
font-size:60px;
letter-spacing:-8px;
text-shadow:2px 2px 0px #000000;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}

#yolo:hover .name{
filter:alpha(opacity=1);
-html-opacity:1;
-moz-opacity:1;
opacity:1;}


#yolo .music{
bottom:6px;
width:150px;
left:6px;
height:85px;
z-index:100;
position:fixed;
border:1px solid #ffffff;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;}

#yolo .music:hover{
width:525px;
height:300px;}


.xpdonnax { C R E D I T  L I N K S }

a.hightimes, a.hightimes:link, a.hightimes:active, a.hightimes:visited {
font-size:30px;
font-family:sans serif;
display:block;
line-height:30px;
padding:0px;
margin:0px;
width:30px;
height:30px;
text-align:right;
background-color:transparent;
text-transform:uppercase;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;}


.credit {
bottom:6px;
right:12px;
width:30px;
height:30px;
z-index:100;
text-align:right;
overflow:hidden;
position:fixed;}


.xpdonnax { HIDE C O D E S & ETC }

.clearfix { display:none; }
table.profileInfo table tr:last-child { display:none; }
div.clearfix ul small { display:none!important; }
table.rail { display:none; }
#googlebar { display:none; }
.profileinfo { display:none; }
.extendedNetwork { display:none; }
.userProfileURL { display:none; }
.friendscomments { display:none; }
.interestsAndDetails { display:none; }
.lightbluetext8 { display:none; }
.userProfiledetail { display:none; }
.latestBlogEntry { display:none; }
.orangetext15 { display:none; }
.userAlbums { display:none; }
.friendspace { display:none; }
.contacttable { display:none; }
.msOnlineNow { display:none; }
#footerWarpper { display:none; }
</style>



---------------- LIKE TO MEET  -----------------

<div id="yolo">

<div class="line"></div>
<div class="left"></div>
<div class="right"></div>
<div class="diamond"></div>
<div class="haha"><img src="https://i.imgur.com/tUfKnx7.gif"></div>
<div class="harley"><img src="https://imgur.com/o5WPaja.png"></div>
<div class="credit"><a href="/hightimes" class="hightimes" title="credit">♦</a></div>

<div class="name">Sʜᴏᴄᴋ ﹠ Aʜʜ~<br>
<h4>"Fortune doesn't favor fools."</h4></div>

<div class="puddin">
<div style="color:#000000; text-align:center; margin:8.5% 0% 2% 0%; font-size:36px; line-height:35px;">♦</div>

<h1>HOVER</h1>
<h2>"The fun begins."</h2>

<div style="color:#ff0017; text-align:center; margin:16.5% 0% 0% 0%; padding-right:1%; font-size:36px; line-height:35px;">♦</div>
</div>

<div class="quote">
<a href="/home.php" class="first" data-nav="♦">home</a>
<a href="/send_message.php?member_id=428476" class="first" data-nav="♦">message</a>
<a href="/add_comment.php?member_id=428476" class="first" data-nav="♦">comment</a>
<a href="/gallery.php?member_id=428476" class="first" data-nav="♦">gallery</a>
<a href="/view_member_blog.php?member_id=428476" class="first" data-nav="♦">Blog</a>
<div style="border:1px solid #ffffff; width:120px; float:right; margin:10px 0px 10px 0px;"><img src="https://imgur.com/aUSs30x.png"></div>
<div style="float:right; color:#ffffff; font-family:courier new; text-transform:uppercase; font-size:16px; font-weight:lighter; line-height:16px; text-align:right;">
Watch your mouth<br>
kid, or you'll <br>
find yourself<br>
respawning at home!
</div>
</div>

<div class="info">

<div style="width:100%; float:left;">
<h6><span class="red">Oh, come on,</span> <span class="blue">How do you</span></h6>
<h3>like my guns... </h3>
<h5>Shock, and Awe!</h5></div>

<div style="width:100%; height:7%; margin:5.5% 0% 0% 0%; float:left;">

<blockquote>
<span class="red">▶</span>Sarah Fortune
▶Bilgewater
<span class="red">▶</span>Miss Fortune
▶League of Legends
<span class="red">▶</span>The Bounty Hunter
▶Captain of the 'Syren'
</blockquote>
<blockquote>
▶High intelligence
<span class="red">▶</span>Shock & Awe
▶Bounty Hunter
<span class="red">▶</span>Captain of the 'Syren'
▶Ruler of Bilgewater
</blockquote>


</div>

<div style="overflow:auto; width:46.6%; height:14.9%; margin:5.5% 5.9% 0% 0%; float:left; border:1px solid #000000;"><img src="https://imgur.com/IfrMEZs.gif" width="100%"></div>

<div style="overflow:auto; width:46.4%; height:22%; margin:5.5% 0% 0% 0%; text-align:justify; float:right;"><h6><span class="red">♦</span>Overview</h6>

<span class="dropcap">A</span>Bilgewater captain famed for her looks but feared for her ruthlessness, Sarah Fortune paints a stark figure among the hardened criminals of the port city. As a child, she witnessed the reaver king Gangplank murder her family—an act she brutally avenged years later, blowing up his flagship while he was still aboard. Those who underestimate her will face a beguiling and unpredictable opponent… and, likely, a bullet or two in their guts.

</div>

<div style="overflow:auto; width:46.8%; height:22%; margin:5.9% 0% 0% 0%; text-align:justify; float:left;"><h6><span class="red">♦</span>Biography</h6>

<span class="dropcap">L</span>ike most who rise to notoriety in the twisting, salt-encrusted labyrinth of Bilgewater, Miss Fortune has no shortage of blood on her hands. Yet, it was not always this way, for she was once known as Sarah, the beloved daughter of a renowned gun-dame who lived peacefully at her isolated island workshop. Young Sarah helped her mother in the forge, filing wheel locks, calibrating trigger pulls, or casting custom pistol shot. Her mother's skill in crafting firearms was legendary, and her bespoke handguns were to be found in the collections of many a wealthy noble. But ofttimes, they were desired by those with more meager means and darker hearts.
<br><br>
One who desired such a weapon was an up-and-coming reaver of Bilgewater called Gangplank. Cocksure and certain of his power, he demanded Sarah's mother fashion a pair of pistols the likes of which no other man possessed. A reluctant deal was struck, and a year later to the day, Gangplank returned for his weapons. He had donned a red scarf face-mask and had no intention of paying for the guns - he was there to take them by force.
<br><br>
The pistols Sarah's mother had crafted were masterpieces, twin hand cannons of pinpoint lethality and exquisite beauty. Too fine for the likes of him, declared Sarah's mother, seeing the brutish pirate that Gangplank had become. Enraged, Gangplank seized the pistols and gunned her down with her own creations before turning them on her husband and Sarah herself. Then, for spite's sake, he set the workshop ablaze and smashed both pistols on the ground, declaring that if they were too good for the likes of him, then no one would have them.
<br><br>
Sarah awoke to agony, straw-colored hair stained red with her mother's blood and bullets lodged on either side of her heart. She crawled from the burning ruins of her home with the broken remains of the two pistols clutched to her bleeding chest. Her body healed, but a part of her mind remained trapped in her mother's burning workshop, and no amount of soap could wash the vivid red from Sarah's hair – or at least, so the story is told. Waking nightmares and night terrors would forever torment her, but Sarah endured them with an all-consuming obsession with vengeance. She rebuilt her mother's pistols and learned all she could of the red-masked reaver during his rise to power, preparing for the day when she would be ready to slay him.
<br><br>
Taking ship to Bilgewater, Sarah killed her first man within minutes of setting foot on the crooked timbers of the quayside, a drunken pirate with a gallon of Myron's Dark in his gut and a bounty on his head. Sarah shot him in his stupor and dragged his corpse to the Bounty Board, before tearing off a dozen more warrants.
<br><br>
Within a week, every one of them was settled, and those criminals who'd had the misfortune to be hunted by Sarah were either dead or in chains. She quickly earned a fearsome reputation in the taverns and gambling dens of Bilgewater, becoming Miss Fortune to inspire fear in those she hunted and to mask her true intent with flamboyant exploits. Gangplank would never see her coming; she would be just another bounty hunter among many in the crowded streets of Bilgewater.
<br><br>
In the years that followed, tales of Miss Fortune spread far and wide, each more fanciful than the last. She captured the 'Syren' from a captain who learned the hard way what it meant to slip a hand where it wasn't wanted, drowned the master of the Silk-Knife Corsairs in a barrel of her own rum, and dragged the insane Doxy-Ripper from his lair in the belly of a half-dismembered leviathan in the slaughter docks.
<br><br>
Gangplank was still too powerful to confront openly, so Miss Fortune spent the years wisely, surrounding herself with a small but loyal cadre of allies and lovers she would eventually use to lay her demons to rest. But just killing Gangplank would never be enough for Miss Fortune. Only his abject humiliation and the burning to ash of all he cared for would satisfy the bloody-haired bounty hunter.
<br><br>
And that day has come at last.
<br><br>
Miss Fortune has risked everything to make her opening move against Gangplank. Plots within plots have seen the 'Dead Pool' blown to flaming wreckage at the quayside and the self-professed King of Bilgewater overthrown. Best of all, everyone in Bilgewater saw him fall.
<br><br>
Now, with Gangplank deposed, every reaver captain and ganglord in the port city is vying to take his position.
<br><br>
The battle for Bilgewater has begun.
</div>

<div style="width:46.4%; height:14.8%; margin:5.9% 0% 0% 5.9%; float:left; border:1px solid #000000;"><img src="https://imgur.com/BnSVKVV.png" width="100%"></div>

<div class="love">
<a href="/FRIENDID" class="luv">♥</a>

<div class="luvinfo">
<b>Status:</b> Single<br>
<strong>Sexual Orientation:</strong> Heterosexual<br>
<b>Started Dating:</b> 00/00/00<BR>
<strong>Official:</strong> 00/00/00<BR>
<b>First Kiss:</b> 00/00/00 | Where at?<BR>
<strong>Song Dedication:</strong> Song Title - Artist<BR>
<b>Lyrics:</b> Lyric that relates to your relationship<BR>
<strong>Love Songs:</strong> Song Title - Artist | Song Title - Artist | Song Title - Artist
</div>
</div>

<div style="width:99.2%; height:21.9%; border:1px solid #000000; float:left; margin-top:5.9%;"><img src="https://imgur.com/hwBMFxK.gif" width="100%"></div>

<div class="connections">
<div style="width: 2010px; height:10%; float:left; margin-top:5.9%;">

<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
<a href="/FRIENDID" class="second">connection name</a>
</div>
</div>

</div>


<div class="music"><object height="100%" width="100%"><param name="movie" value="https://www.youtube.com/v/vdNHYCUjDCk&loop=1"></param>
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" src="https://www.youtube.com/v/vdNHYCUjDCk?&version=3&showinfo=0&controls=0&rel=0&autoplay=1" height="100%" width="100%" wmode="transparent" />
</object></div>


</div>