ThePage

Tryin

HTML

<!DOCTYPE HTML>

<html>

<head>
	<title>Title</title>
	<link rel="stylesheet" href="css/stylesheet.css"/>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
	<div id="nav">
		<ul id="nav-ul">
			<li><a class="nav-link active" href="#">Home</a></li>
			<li><a class="nav-link" href="#">Products</a></li>
			<li><a class="nav-link" href="#">FAQ</a></li>
			<li><a class="nav-link" href="#">Jobs</a></li>
			<li><a class="nav-link" href="#">Contact us</a></li>
		</ul>
		<span class="login-reg">
			<a href="#" id="login-link" class="login-reg-a">Login</a>
			<a style="color: gold;">/</a>
			<a href="#" id="register-link" class="login-reg-a">Register</a>
		</span>
	</div>
	<img src="images/angel-header.png" id="angel-header"/>
	<img src="images/logo.png" id="logo-header"/>
	<div id="loginModal" class="modalDialog">
		<div id="login-div">
			<a href="#" title="Close" id="login-close-button" class="close">X</a>
			<h3 class="login-header">Login to Website</h3>
			<hr/>
			<br/>
			<form>
			<p class="form-p">
				<label for="username" class="modal-label">Username</label>
				<input id="username" class="modal-input" type="text">
			</p>
			<p class="form-p form-p-2">
				<label for="password" class="modal-label modal-label-2">Password</label>
				<input id="password" class="modal-input" type="password">
			</p>
		</form>
			<button id="login-button">Login</button>
			<div class="modal-footer">
				<a class="modal-footer-a">Forgot your password?</a>
				<a class="modal-footer-a">Not a member yet?</a>
			</div>
		</div>
	</div>
	
	<div id="registerModal" class="modalDialog">
		<div id="register-div">
			<a href="#" title="Close" id="register-close-button" class="close">X</a>
			<h3 class="login-header">Register on Website</h3>
			<hr/>
			<br/>
			<form>
			<p class="form-p">
				<label for="username" class="modal-label">Username</label>
				<input id="username" class="modal-input" type="text">
			</p>
			<p class="form-p form-p-2">
				<label...

CSS

/*
░░░░░░░░░░░▄▄▀▀▀▀▀▀▀▀▄▄
░░░░░░░░▄▀▀░░░░░░░░░░░░▀▄▄
░░░░░░▄▀░░░░░░░░░░░░░░░░░░▀▄
░░░░░▌░░Yuuki&Omni░▀▄░░░░░░░▀▀▄
░░░░▌░░░░░░░░░░░░░░░░▀▌░░░░░░░░▌
░░░▐░░░░░░░░░░░░▒░░░░░▌░░░░░░░░▐
░░░▌▐░░░░▐░░░░▐▒▒░░░░░▌░░░░░░░░░▌
░░▐░▌░░░░▌░░▐░▌▒▒▒░░░▐░░░░░▒░▌▐░▐
░░▐░▌▒░░░▌▄▄▀▀▌▌▒▒░▒░▐▀▌▀▌▄▒░▐▒▌░▌
░░░▌▌░▒░░▐▀▄▌▌▐▐▒▒▒▒▐▐▐▒▐▒▌▌░▐▒▌▄▐
░▄▀▄▐▒▒▒░▌▌▄▀▄▐░▌▌▒▐░▌▄▀▄░▐▒░▐▒▌░▀▄
▀▄▀▒▒▌▒▒▄▀░▌█▐░░▐▐▀░░░▌█▐░▀▄▐▒▌▌░░░▀
░▀▀▄▄▐▒▀▄▀░▀▄▀░░░░░░░░▀▄▀▄▀▒▌░▐
░░░░▀▐▀▄▒▀▄░░░░░░░░▐░░░░░░▀▌▐
░░░░░░▌▒▌▐▒▀░░░░░░░░░░░░░░▐▒▐
░░░░░░▐░▐▒▌░░░░▄▄▀▀▀▀▄░░░░▌▒▐
░░░░░░░▌▐▒▐▄░░░▐▒▒▒▒▒▌░░▄▀▒░▐
░░░░░░▐░░▌▐▐▀▄░░▀▄▄▄▀░▄▀▐▒░░▐
░░░░░░▌▌░▌▐░▌▒▀▄▄░░░░▄▌▐░▌▒░▐
░░░░░▐▒▐░▐▐░▌▒▒▒▒▀▀▄▀▌▐░░▌▒░▌
░░░░░▌▒▒▌▐▒▌▒▒▒▒▒▒▒▒▐▀▄▌░▐▒▒ */
* {
	margin: 0;
	padding: 0;
}
body {
	background-image: url(../images/background.jpg);
}
@font-face {
	font-family: infierno;
	src: url(../fonts/infierno.ttf) format('truetype'),
    url(../fonts/infierno.woff) format('woff'),
    url(../fonts/infierno.eot);
}
form  { display: table;      }
p     { display: table-row;  }
input { display: table-cell; }
hr {
	margin-top: 5px;
	border-color: rgba(142,142,142,0.2);
}
#nav  {
	z-index: 9999;
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgba(93, 97, 104, 0.8);
	height: 55px;
	line-height: 55px;
	text-align: center;
	border-bottom: 2px solid;
	border-bottom-color: gold;
}
#nav-ul li{
	margin: 0 auto;
	display: inline-block;
	position: relative;
}
.nav-link {
	text-decoration: none;
	padding-left: 15px;
	padding-right: 15px;
	color: #fff;
	font-size: 25px;
	height: 40px;
	margin-top: 10px;
	transition-duration: 1s;
	font-family: "infierno";
}
.nav-link:hover {
	color: orange;
}
.login-reg {
	padding: 0;
	margin: 0;
	position: fixed;
	top: 0px;
	right: 10px;
}
.login-reg-a {
	padding: 5px;
	font-size: 15px;
	color: #fff;
	transition-duration: 1s;
	text-decoration: none;
}
.login-reg-a:hover {
	color: orange;
	cursor: pointer;
}
.active {
	color: gold;
}
.user-icon {
	height: 32px;
	width: 32px;
	border: 1px solid rgba(142,142,142,0.4);
	position:...