Final Fantasy VII Code


<html>
<body><style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');

html, body {
background: #000;
background-image:url("");
background-size:400px;
background-repeat:no-repeat;
background-position:center bottom;
}

::-webkit-scrollbar-button:vertical:{
background-color: #transparent;}

::-webkit-scrollbar-thumb:vertical {
background-color:#transparent;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#transparent;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#transparent;}

#container {
background-image:url(http://i.picpar.com/vLQc.png);
width: 800px;
height: 550px;
margin:auto;
position: absolute;
left: 20%;
bottom: 8%;
border: 5px solid #C0C0C0;
border-radius: 5px;
z-index:1;
}

#container2 {
background-image:url(http://i.picpar.com/zLQc.png);
width: 150px;
height: 300px;
margin:auto;
position: absolute;
right: -15%;
top: -5%;
border: 5px solid #C0C0C0;
border-radius: 5px;
z-index:1;
}

#content {
background-color:transparent;
width: 450px;
height: 400px;
margin:auto;
font-family: 'Share Tech Mono';
color: #fff;
text-shadow: 2px 2px #2F4F4F;
font-size: 18px;
position: absolute;
padding: 10px;
right: 8%;
bottom: 15%;
z-index:1;
}

#image {
width: 150px;
margin: 0px;
border: none;
height: 150px;
background-color:transparent;
position: absolute;
left: 8%;
top: 15%;
background-image:url("http://i.picpar.com/0LQc.jpg");
background-repeat:no-repeat;
background-position: bottom;
background-size: 100%;
}

#nav {
background-color: transparent;
width: 50px;
height: 70px;
margin:auto;
position: absolute;
font-family: 'Share Tech Mono';
font-size: 20px;
text-shadow: 2px 2px #2F4F4F;
left: 10%;
top: 5%;
text-align:left;
z-index:1;
}

#nav a, #nav a:link, #nav a:visited {
display:inline-block;
height: 30px;
width: 50px;
text-decoration:none;
background: #transparent;
color: #fff;
}

#nav a:active, #nav a:hover {
display:inline-block;
height: 30px;
width: 50px;
text-decoration:none;
background: #transparent;
color: #fff;
margin:0px;
}

*{cursor: url('http://i.picpar.com/nMQc.png'), auto;}

.credit {
position: fixed;
bottom: 0px;
right: 2px;
height: 25px;
width: 25px;
line-height: 15px;
font-size: 10px;
color: #999;
text-align: center;
font-family: roboto;
}

#Layout {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}

a{color: #fff; text-decoration: none;}
</style>
<div class="credit" title="Profile by RageQxeen">♛</div>
<div id="Layout" oncontextmenu="return false;">

<div id="container">

<div id="container2">
<div id="nav">
<a href="#one">Item</a>
<a href="#two">Magic</a>
<a href="#three">Materia</a>
<a href="#four">Equip</a>
<a href="#five">Status</a>
</div>
</div>

<div id="image"></div>

<div id="content">
<div style="width: 450px; height: 400px; overflow-y: hidden;">

<a name="one"></a>
<div style="width: 450px; height: 400px; overflow: auto;" align="center">
<font style=float:left><b>Name</b></font> <font style=float:right></font><br>
<font style=float:left><b>Nickname</b></font> <font style=float:right><a title="">hover</a></font><br>
<font style=float:left><b>Gender</b></font> <font style=float:right></font><br>
<font style=float:left><b>Apparent Age</b></font> <font style=float:right></font><br>
<font style=float:left><b>Race</b></font> <font style=float:right></font><br>
<font style=float:left><b>Height</b></font> <font style=float:right></font><br>
<font style=float:left><b>Weight</b></font> <font style=float:right></font><br>
<font style=float:left><b>Tresses</b></font> <font style=float:right></font><br>
<font style=float:left><b>Irises</b></font> <font style=float:right></font><br>
<font style=float:left><b>Marital</b></font> <font style=float:right><a target="_blank" href=""></a></font><br>
<font style=float:left><b>Orientation</b></font> <font style=float:right></font><br>
<font style=float:left><b>Album</b></font> <font style=float:right><a target="_blank" href="">Here</a></font><br>
</div>

<a name="two"></a>
<div style="width: 450px; height: 400px; overflow: auto;" align="center">
POWERS HERE
</div>

<a name="three"></a>
<div style="width: 450px; height: 400px; overflow: auto;" align="center">
HISTORY HERE
</div>

<a name="four"></a>
<div style="width: 450px; height: 400px; overflow: auto;" align="center">
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
<a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a><br>
</div>

<a name="five"></a>
<div style="width: 450px; height: 400px; overflow: auto;" align="center">
OOC HERE
</div>
</div>
</div>
</div>

</body>
</html>