Talon Layout

------ OKAY, THIS CODE WILL GO IN YOUR ABOUT ME SECTION ------------------

<link href='https://fonts.googleapis.com/css?family=Syncopate|Quicksand|Source+Code+Pro|Raleway|Play|Cinzel|Jura|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>


<style type="text/css">

{ LAYOUT made by D O W N F A L L /@HIGHTIMES}

{ TABLE P R O P E R T I E S }
table { position:relative; margin-bottom:0px; }
table, tr, td { background-color:transparent; border:none; }
table table { margin:0px; }
table table table table td { width:0px; border:none; }
table table table td { border:none; margin:0px; padding:0px;}
table table br { display:block; margin:0px; padding:0px;}
table table table br { display:block; margin:0px; padding:0px;}
table table table table { border:0; margin:0; padding:0; }
table table table { display:none; }

td.text table {position:relative; top:5px;}
td.text table table {position:static;}



{ LAYOUT made by D O W N F A L L /@HIGHTIMES}


{ BACKGROUND P R O P E R T I E S }
body{
background-color:#000000;
background: url('https://i.imgur.com/WKpFEDE.png') no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }


{ LAYOUT made by D O W N F A L L /@HIGHTIMES}


{ TEXT P R O P E R T I E S }
.text, table, tr, td, li, p, div {
font-family: 'Open Sans Condensed', sans-serif;
font-size:12;
letter-spacing:0px;
line-height:14px;
text-align:justify;
color:#FFFFFF;}



{ LAYOUT made by D O W N F A L L /@HIGHTIMES}


{ REGULAR L I N K PROPERTIES }
a:active, a:visited, a:link {
font-family: arial;
font-size: 10px;
text-transform: uppercase;
line-height: 11px;
border-bottom: 0px;
text-decoration: none;
font-weight: normal;
color:#3B3B3B;}

a:hover {
color:#212121;}



{ LAYOUT made by D O W N F A L L @/HIGHTIMES }
{ C R E D I T }


a.hightimes, a.hightimes:link, a.hightimes:active,
a.hightimes:visited {
font-size:10px;
font-family:georgia;
color:#000000;
display:block;
line-height:25px;
padding:0px;
text-align:center;
margin:0px;
width:25px;
height:25px;
text-transformation:uppercase;
text-decoration:none;
background:#212121;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out; }

a.hightimes:hover {
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out; }



{ LAYOUT made by D O W N F A L L /@HIGHTIMES}
{ N A V I G A T I O N }


a.first, a.first:link, a.first:active,
a.first:visited{
font-family: arial;
font-size:12px;
line-height:10px;
margin-top:2px;
border-radius:7px;
padding-top:8px;
margin-left:-.5px;
text-transform:uppercase;
text-align:center;
color:#212121;
background-color:#3B3B3B;
display:inline-block;
width:70px;
height:20px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;}


a.first:hover {
color:#3B3B3B;
background-color:#212121;}





{ LAYOUT made by D O W N F A L L /@HIGHTIMES}
{ C O N N E C T I O N S }

a.second, a.second:link, a.second:active,
a.second:visited{
font-family: arial;
font-size:10px;
line-height:11px;
color:#212121;
padding-top:7px;
margin:2px 0px 0px 0px;
text-transform:uppercase;
text-align:center;
display:inline-block;
width:223px;
height:15px;
background-color:#3B3B3B;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}


a.second:hover {
color:#3B3B3B;
background-color:#212121;}


{ LAYOUT made by D O W N F A L L /@HIGHTIMES }
{ H A C K S & M A I N S }

a.third, a.third:link, a.third:active,
a.third:visited{
font-family: arial;
font-size:12px;
line-height:13px;
color:#212121;
padding-top:4px;
margin:2px 0px 0px 0px;
text-transform:uppercase;
text-align:center;
display:inline-block;
width:159px;
height:15px;
border-left:solid 30px #212121;
background:#000000;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}


a.third:hover {
color:#000000;
background-color:#212121;
border-left:solid 30px #000000;}


a.fourth, a.fourth:link, a.fourth:active,
a.fourth:visited{
font-family: arial;
font-size:12px;
line-height:13px;
color:#000000;
background-color:#212121;
border-right:solid 30px #000000;
padding-top:4px;
margin:2px 0px 0px 0px;
text-transform:uppercase;
text-align:center;
display:inline-block;
width:159px;
height:15px;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
transition: all .5s linear;}


a.fourth:hover {
color:#212121;
background:#000000;
border-right:solid 30px #212121;}


{ LAYOUT made by D O W N F A L L /@HIGHTIMES}
{ T E X T}


big {
font-family: 'Cinzel', serif;
font-size:17px;
line-height:18px;
color:#7E706D;
font-weight:bold;
text-transform:lowercase;
letter-spacing:-2px;}

small {
font-size:14px;
line-height:13px;
color:#423F43;
text-transform:uppercase;
letter-spacing:-1px;}

i {
font-size:15px;
line-height:14px;
color:#686466;
font-style:italic;
text-transform:lowercase;
letter-spacing:-1px;}


b {
font-size:13px;
line-height:12px;
color:#5a4c4c;
text-transform:uppercase;
letter-spacing:1px;}

tt {
font-family: 'Quicksand', sans-serif;
font-size:13px;
line-height:12px;
color:#484236;
text-transform:uppercase;
letter-spacing:-1px;}

underline {
font-size:14px;
line-height:13px;
margin-bottom:0px;
color:#00000;
border-bottom:solid 1px #000000;
text-transform:lowercase;
letter-spacing:0px;}

em {
font-family: 'Jura', sans-serif;
font-size:16px;
line-height:18px;
color:#3C2F2F;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}


h1{
font-family: 'Raleway', sans-serif;
font-size:42px;
line-height:43px;
color:#1C1414;
letter-spacing:-6px;
text-transform:none;
font-weight:lighter;
text-align:right;
margin:5px 0px 0px 0px;}


h2 {
font-family: 'Jura', sans-serif;
font-size:35px;
line-height:39px;
margin:0px 0px 3px 1px;
color:#000000;
font-weight:lighter;
text-transform:uppercase;
text-align:right;
padding-right:12px;
border-bottom: 4px solid #3d3737;
background-color:#212121;
letter-spacing: 1px;}


h3{
font-family: 'Quicksand', sans-serif;
font-size:15px;
color:#617990;
line-height:17px;
text-align:center;
letter-spacing:11px;
color:#3d3737;
padding-top:100px;
text-shadow: 2px 2px 0px #000000;
background-color:transparent;
text-transform:lowercase;}




h4 {
font-family: 'Quicksand', sans-serif;
font-size:15px;
color:#617990;
line-height:17px;
text-align:center;
letter-spacing:8px;
color:#3d3737;
text-shadow: 2px 2px 0px #000000;
padding-top:78px;
background-color:transparent;
text-transform:lowercase;}


h5 {
font-family: 'Cinzel', serif;
font-size:35px;
line-height:39px;
text-align:left;
padding-left:13px;
color:#212121;
font-weight:lighter;
margin-top:1px;
border-radius: 20px 20px 0px 0px;
letter-spacing:-2px;
background-color:#000000;
text-transform:lowercase;}




h6 {
font-family: 'Cinzel', serif;
font-size:35px;
line-height:39px;
text-align:right;
padding-right:12px;
color:#212121;
font-weight:lighter;
letter-spacing:-2px;
border-radius: 20px 20px 0px 0px;
margin-top:1px;
background-color:#000000;
text-transform:lowercase;}




{ LAYOUT made by D O W N F A L L /@HIGHTIMES }
{ D I V BOXES }

.music {
top:80px;
left:20px;
height:14px;
overflow:hidden;
width:52px;
position:fixed;
z-index:101;}


.credit {
bottom:6px;
right:10px;
position:fixed;
width:25px;
height:25px;
z-index:100;
overflow:auto;}


.spacer {
top:935px;
left:215px;
height:10px;
width:465px;
position:absolute;
background-color:transparent;}


.storybanner {
top:10px;
left:215px;
width:465px;
height:175px;
border:3px solid #212121;
position:absolute;
overflow:hidden;
z-index:-1;}


.storyline {
top:10px;
left:215px;
width:465px;
height:175px;
background-color:#1C1414;
border:3px solid #3B3B3B;
position:absolute;
z-index:101;
overflow:auto;
-webkit-transition: all 1.5s linear;
-moz-transition: all 1.5s linear;
transition: all 1.5s linear;
filter:alpha(opacity=0);
-html-opacity:0;
-moz-opacity:0;
opacity:0;}


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



.personality {
top:218px;
left:215px;
height:150px;
width:148px;
overflow:auto;
position:absolute;
border:solid 3px #3B3B3B; }


.banner1 {
top:218px;
left:374px;
height:150px;
width:148px;
position:absolute;
border:solid 3px #212121; }


.basics {
top:218px;
left:532px;
height:150px;
overflow:auto;
width:148px;
position:absolute;
border:solid 3px #3B3B3B; }


.hacks {
top:381px;
left:256.2px;
height:160px;
width:383px;
z-index:99;
position:absolute;
border:solid 3px #3B3B3B; }

.hackback {
top:378px;
left:253.2px;
height:166px;
width:389px;
position:absolute;
z-index:99;
background-color:transparent;
border:solid 3px #212121; }



.connections {
top:594.5px;
left:215px;
height:150px;
overflow:auto;
width:227px;
z-index:101;
position:absolute;
border:solid 3px #3B3B3B; }

.connectbanner {
top:594.5px;
left:453px;
height:150px;
width:227px;
position:absolute;
border:solid 3px #212121; }


.relationship{
top:813px;
left:453px;
height:150px;
width:227px;
overflow:auto;
z-index:101;
position:absolute;
border:solid 3px #3B3B3B; }


.relationbanner {
top:813px;
left:215px;
height:150px;
width:227px;
position:absolute;
border:solid 3px #212121; }



.personalityheader {
top:196px;
left:218px;
height:25px;
width:148px;
position:absolute;
font-family: 'Philosopher', sans-serif;
font-size:20px;
line-height:21px;
text-align:left;
letter-spacing:-1px;
color:#3d3737;
border-top:solid 2px #000000;
text-transform:lowercase;}


.basicsheader {
top:196px;
left:535px;
height:25px;
width:148px;
position:absolute;
font-family: 'Philosopher', sans-serif;
font-size:20px;
line-height:22px;
text-align:right;
letter-spacing:-1px;
color:#3d3737;
border-top:solid 2px #000000;
text-transform:lowercase;}



.mainsheader {
top:447px;
left:584px;
height:32px;
width:168px;
position:absolute;
font-family: 'Play', sans-serif;
font-size:30px;
line-height:32px;
text-align:center;
color:#000000;
font-weight:lighter;
letter-spacing:-2px;
border-bottom:solid 2px #3d3737;
border-top:solid 2px #3d3737;
text-transform:uppercase;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);}


.hacksheader {
top:447px;
left:149px;
height:32px;
width:168px;
position:absolute;
font-family: 'Play', sans-serif;
font-size:30px;
line-height:32px;
text-align:center;
color:#000000;
font-weight:lighter;
letter-spacing:-2px;
border-bottom:solid 2px #3d3737;
border-top:solid 2px #3d3737;
text-transform:uppercase;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);}




.connectsheader {
top:553px;
left:215px;
height:80;
width:470px;
position:absolute;
border-radius: 20px 20px 0px 0px;
z-index:99;}


.relationheader {
top:770px;
left:215px;
height:80;
width:470px;
position:absolute;
border-radius: 20px 20px 0px 0px;
z-index:99;}






.leftbar {
top:0px;
left:0px;
width:200px;
height:100%;
background-color:#212121;
overflow:hidden;
background-image:url('https://i.imgur.com/WYLLnrA.jpg');
position:fixed;
border-right:solid 5px #3B3B3B;}



.rightbar {
top:0px;
left:700px;
width:5px;
height:100%;
background-color:#212121;
position:fixed;
border-left:solid 5px #3B3B3B;}



.box {
top:0px;
left:45px;
width:655px;
height:100%;
z-index:-1;
background-color:#1C1414;
position:fixed;}


.navirp {
top:250px;
left:900px;
width:300px;
height:275px;
background-color:transparent;
position:fixed; }





.displayname {
line-height:35px;
color:#423a3a;
font-size:50px;
text-align:left;
font-weight:heavy;
letter-spacing:4px;
text-transform:uppercase;
font-family:'Source Code Pro';
bottom:290px;
left:445px;
height:60;
width:550px;
text-shadow: 2px 2px 0px #212121;
position:fixed;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);}



{ LAYOUT made by D O W N F A L L /@HIGHTIMES}
{ SCROLL BOX PROPERTIES }


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

::-webkit-scrollbar-thumb {
background: #1e1e1e;
border: 0px none #000000;
border-radius: 50px;}

::-webkit-scrollbar-thumb:active {
background: #000000;}

::-webkit-scrollbar-track {
background: #transparent;
border: 0px none #transparent;
border-radius: 50px;}

::-webkit-scrollbar-corner {
background: #transparent;}




{ LAYOUT made by D O W N F A L L /@HIGHTIMES}
{ RPER.ME H I D E CODES }
.clearfix { display: none; }
.lightbluetext8 { display:none; }
.contacttable { display:none; }
.whitetext12 { display:none; }
.interestsanddetails { display:none; }
.userProfiledetail { display:none; }
.friendSpace { display:none; }
.friendsComments { display:none; }
.latestBlogEntry { display:none; }
.navigationBar { display:none; }
.navbar { visibility:hidden; }
.orangetext15 { display:none; }
.profileinfo { display:none; }
.userProfileURL { display:none; }
.extendedNetwork { display:none; }
.blurbs { display:none; }
.userAlbums { display:none; }
.mslogo { display: none; }
#footerWarpper{ display:none; }
</style>







------------ AND THIS ONE GOES INTO YOUR LIKE TO MEET SECTION ---------------

</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="spacer"></div>
<div class="credit"><a href="/44274" class="hightimes" title="credit">HT</a></div>
<div class="rightbar"></div>
<div class="box"></div>
<div class="hackback"></div>
<div class="banner1"><img src="https://imgur.com/zfHAfj1.png"></div>


<div class="music">
<object type="application/x-shockwave-flash" style="width:1px; height:1px;" data="//www.youtube.com/v/Qp0Tnss-RPE?color2=FBE9EC&loop=1&playlist=Qp0Tnss-RPE&autoplay=1&showsearch=0&showinfo=0&controls=0&version=3&fs=1">
        <param name="movie" value="//www.youtube.com/v/Qp0Tnss-RPE?color2=FBE9EC&loop=1&playlist=Qp0Tnss-RPE&autoplay=1&showsearch=0&showinfo=0&controls=0&version=3&fs=1" />
        <param name="allowFullScreen" value="true" />
        <param name="allowscriptaccess" value="always" />
        </object>
</div>


<div class="leftbar"><div style="padding-top:150px; width:150px; padding-left:25px;">
<big>You won't break me</big> <Br>
<small>Or silence this heartbeat,</small> <br>
<i>Your words-they mean nothing.</i> <br>
<b>I will break free</b> <br>
<tt>From walls that surround me,</tt> <br>
<em>I'm sick of this feeling</em> <br>
<underline>You won't break me.</underline><br>
</div>
</div>

<div class="displayname">вℓα∂є'ѕ ѕнα∂σω</div>


<div class="navirp"><h1>Find your way,</h1>
<a href="/home.php" class="first">Home</a>
<a href="/send_message.php?member_id=406917" class="first">Message</a>
<a href="/add_comment.php?member_id=406917" class="first">Comment</a>
<a href="/albums.php?member_id=406917" class="first">Albums</a>


<div style="height:135px; overflow:auto; margin-top:10px;text-align:center;width:215px;">

<b>Status:</b> <i>active</i>
<br>
<b>Writing Style:</b> <i>Multi Para, Para, Novella</i>
<br>
<tt>League of Legends</tt> <b>|</b> <tt>RWBY</tt> <b>|</b> <tt>Overwatch</tt>
<br>
<br>

<big>I OWE YOU:</big>
<br>
<small>Name</small> - <i>starter</i>
<br>
<small>Name</small> - <i>reply</i>


<br>
<br>

<big>YOU OWE ME:</big>
<Br>
<small>Name</small> - <i>starter</i>
<br>
<small>Name</small> - <i>reply</i>
<br>

</div>
</div>


<div class="connectbanner"><img src="https://imgur.com/j2XF0Tb.png"></div>
<div class="connectsheader"><h5>connections</h5> <h3>it's the family business.</h3></div>
<div class="connections">
<div style="overflow-y: scroll; overflow-x:hidden;">
<a href="/386633" class="second">Twisted Fate</a>
<a href="/423937" class="second">Yasuo</a>
<a href="/416108" class="second">Akali</a>
<a href="/423918" class="second">Zed</a>
<a href="/425719" class="second">Katarina</a>
<a href="/427963" class="second">Caitlyn</a>
<a href="/428476" class="second">Miss Fortune</a>

</div></div>


<div class="relationbanner"><img src="https://imgur.com/6NHNiXM.png"></div>
<div class="relationheader"><h6>relationship status</h6> <h4>If you're a bird, I'm a bird.</h4></div>
<div class="relationship">
<div style="float:center;">

<b>Status: Taken</b>
<br>
<b>Orientation: Heterosexual</b>
</br>
<b>Lover:</b> <a href="/425719">Katarina</a>
<br>
<b>Since:</b> 00/00/00
<br>
<b>Engaged:</b> 00/00/00
<br>
<b>Married:</b> 00/00/00
<br>
<b>Song:</b> <a href="link">Name of Song</a>
<br>
<b>Comments:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div></div>


<div class="mainsheader">mains</div>
<div class="hacksheader">hacks</div>
<div class="hacks">
<div style="float:left; overflow-y: scroll; overflow-x:hidden; height:160px; width:190px;">

<a href="/386633" class="third">Twisted Fate</a>
Twisted Fate is an infamous card shark and swindler who has gambled and charmed his way across much of the known world, earning the enmity and admiration of the rich and foolish alike. He rarely takes things seriously, greeting each day with a mocking smile and an insouciant swagger. In every possible way, Twisted Fate always has an ace up his sleeve.
<a href="/423937" class="fourth">Yasuo</a>
An Ionian of deep resolve, Yasuo is an agile swordsman, trained to wield the air itself against his enemies. As a young man, pride led him down a path of loss, costing him his position, his mentor, and ultimately his own brother. Disgraced by false accusations and now hunted as little more than a criminal, Yasuo wanders his homeland seeking redemption for his past, with only the wind to guide his blade.

</div>


<div style="float:right; overflow-y: scroll; overflow-x:hidden; height:160px; width:190px;">

<a href="link" class="fourth">Name</a>
storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here.
<a href="link" class="third">Name</a>
storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here. storyline here.

</div>
</div>


<div class="basicsheader">basic information</div>
<div class="basics">
<div style="float:center;">

<b>BIRTH NAME: Talon Du Couteau</b>
<br>
<b>ALIAS(ES): The Blade's Shadow</b>
<br>
<b>HEIGHT:5'8</b>
<br>
<b>HAIR COLOR: Brown</b>
<br>
<b>EYE COLOR: Brown</b>
<br>
<b>GENDER: Male</b>
<br>
<b>WEAPONS: Arm Blade, Circular Daggers, Double Edged Daggers</b>
<br>
<b>AGE: 25</b>
<br>
<b>SPECIES: Human</b>
<br>
<b>Birthplace: Noxus Prime, Noxus</b>
<br>
<b>Current Abode:Noxus Prime, Noxus</b>
<br>
</div></div>


<div class="personalityheader">Biography</div>
<div class="personality">
<div style="float:center;">

Talon's earliest memories are the darkness of Noxus' underground passages and the reassuring steel of a blade. He remembers no family, warmth, or kindness. Instead, the clink of stolen gold and the security of a wall at his back are all the kinship he has ever craved. Kept alive only by his quick wits and deft thievery, Talon scraped out a living in the seedy underbelly of Noxus. His mastery of the blade quickly marked him as a threat, and Noxian guilds sent assassins to him with a demand: join their ranks or be killed. He left the bodies of his pursuers dumped in Noxus' moat as his response.
<br><br>
The assassination attempts grew increasingly frequent until one assailant met Talon blade-for-blade in a match of strength. To his surprise, Talon was disarmed and facing down his executioner's sword when the assassin revealed himself to be General Du Couteau. The General offered Talon the choice between death at his hand, or life as an agent of the Noxian High Command. Talon chose life, on the condition that his service was to Du Couteau alone, for the only type of orders he could respect were from one he could not defeat.
<br><br>
Talon remained in the shadows, carrying out secret missions on Du Couteau's orders that took him from the frigid lands of the Freljord to the inner sanctums of Demacia itself. When the general vanished, Talon considered claiming his freedom, but he had gained immense respect for Du Couteau after years in his service. He became obsessed with tracking down the general's whereabouts, and scours the land in search of those responsible for Du Couteau's disappearance.

</div></div>


<div class="storybanner"><img src="https://imgur.com/jJaUEL3.png"></div>
<div class="storyline"><h2>storyline</h2>
<div style="height:127px; width:464px; margin-top:4px; float:center; overflow:auto;">

Talon is the knife in the darkness, a merciless killer able to strike without warning and escape before any alarm is raised. He carved out a dangerous reputation on the brutal streets of Noxus, where he was forced to fight, kill, and steal to survive. Adopted by the notorious Du Couteau family, he now plies his deadly trade at the empire's command, assassinating enemy leaders, captains, and heroes… as well as any Noxian foolish enough to earn the scorn of their masters.

</div></div>