So I have the code to design a log in screen, need some help to actually make the functions on it work, to clarify, I need to actually make it register user names, passwords, the remember me function, etc.,

input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; }

button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; }

button:hover { opacity: 0.8; }

.cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; }

.imgcontainer { text-align: center; margin: 24px 0 12px 0; }

img.avatar { width: 40%; border-radius: 50%; }

.container { padding: 16px; }

span.psw { float: right; padding-top: 16px; }

/* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } }

Login Form

Username

Password Remember me

Forgot password?