How to design login page in HTML5 and CSS

on
This is how the page will be displayed 



Code: 

<html>
<head>
<title> Basic login page </title>
<style>
/* border of the form which is light grey*/
form { border: 4px solid #bfb5b1; }
/* user inputs */
input[type=text], input[type=password] {
    width: 40%;
    padding: 12px 12px;
    margin: 8px 0;
    display: inline-block;
    border: 2px solid #ccc;
    box-sizing: border-box;
}
/* button properties */
button {
    background-color: #133bb2; /* background color*/
    color: white;   /* color of the text of button*/
    padding: 15px 16px;
    margin: 8px 0;
    border: none;
    border-radius:8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* border shadow */
    cursor: pointer;
    font-size: 18 px;
    width: 20%; /* width of the button visible on screen*/
}
/* Hover effect for buttons*/
/* Whenever you bring cursor on the button there will be some animation */
     button:hover {  opacity: 0.5; }
.cancelbtn {
    width: auto;
    padding: 12px 19px;
    background-color: #f22133;
}
span.psw {
    float: right;
    padding-top: 16px;
}
}
</style>
</head>


<body>
<form action="action_page.php">

<div class="container" style="background-color:#f1f1f1">
    <label for="uname"> <b> Username </b> </label>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <br>
    <label for="psw"> <b> Password </b> </label>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <br>
    <button type="submit"> Login </button>
    <br>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    <br>
   <button type="button" class="cancelbtn"> Cancel </button>
   <span class="psw">Forgot <a href="#">password?</a></span>


</div>
</form>
</body>
</html>
How to design login page in HTML5 and CSS