HYDRA MAINFRAME PAGE (v2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

PAGE IS MADE BY {http://ofmagicandice.tumblr.com}
DO NOT REMOVE THE CREDITS.

-->

<head>
<title>HYDRA MAINFRAME</title>
<link rel="shortcut icon" href="https://31.media.tumblr.com/68bf9037eeb209ebbc453b8232fb964d/tumblr_inline_n6amw4fiwo1r80x1c.png">
<style type="text/css">

@font-face { font-family: silkscreen; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }


html, body, ul, li {
margin: 0;
padding: 0;
}

a {
    text-decoration: none;
    color: white;
}

body {
background: url() black;
margin: 0 auto;
}

::-webkit-scrollbar {
height: 10px;
width: 0px;
background: black;
}

::-webkit-scrollbar-thumb:vertical {
background: #353a3d; /*change the color of the scrollbar face here*/
}

.image {
position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

.css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

input {
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(246, 220, 220, .10);
color:white;
background:#111;

}

input[type="button"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(246, 220, 220, .10);
color:#fff;
background:#111;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

input[type="button"]:hover{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid #e70000;
color:#e70000;
background:#111;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;

}

input[type="reset"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(246, 220, 220, .10);
color:#fff;
background:#111;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

input[type="reset"]:hover{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid #e70000;
color:#e70000;
background:#111;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

	</style>
</head>
<body>
<img class="image" src="https://31.media.tumblr.com/9977958f80125731b202258a32bf7dee/tumblr_inline_n6anbk7ocT1r80x1c.gif">

<p class="css-typing" style="color:#fff; font-family: calibri; text-transform: uppercase; position: relative; top: 327px; left: 583px; z-index: 1;">Authorization required</p>

<div style="position: relative; top: 340px; left: 500px">
<form name="login">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: calibri; font-size: 12px; color: #e70000">USERNAME&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="userid" style="position:relative; left: 1px"></span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family: calibri; font-size: 12px; color: #e70000">PASSWORD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="pswrd"/></span><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)
{
{
window.location.replace('put-link-here-for-redirection')/*opens the target page*/
}
}
</script>
</div>

<div style="position:fixed;bottom:3px; right:10px; font-size:9px; letter-spacing:1px; font-family:silkscreen;"><a href="http://ofmagicandice.tumblr.com/">ofmagicandice</a></div>

</body>
</html>