<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Forgot your password</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
<style>
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
html,
body,
.container {
font-family: 'Segoe UI Light', 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}
.container {
max-width: 400px;
}
.form-box {
padding: 20px;
border: 1px solid #b8b8b8;
border-radius: 5px;
}
form {
margin-bottom: 0;
padding-bottom: 0;
}
.form-box h4 {
margin: 0 0 15px;
text-align: center;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.form-box h4:before,
.form-box h4:after {
content: "";
height: 2px;
width: 20%;
background: #b8b8b8;
position: absolute;
top: 50%;
z-index: 2;
}
.form-box h4:before {
left: 0;
}
.form-box h4:after {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div style="margin-top: 75%;"></div>
<div class="form-box">
<form>
<h4>Password Reset</h4>
<label for="usernameInput">Username:</label>
<input class="u-full-width" type="email" placeholder="johnsmith44" id="usernameInput">
<label for="passwordInput">Password:</label>
<input class="u-full-width" type="email" placeholder="hunter2" id="passwordInput">
<input class="u-full-width button-primary" type="submit" value="Change Password">
</form>
</div>
</div>
</body>
</html>