Responsive login page template free download
login page design in html with source code free download
<!DOCTYPE html> < html > < style > /*set border to the form*/ form { border: 3px solid #f1f1f1; } /*assign full width inputs*/ 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; } /*set a style for the buttons*/ button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } /* set a hover effect for the button*/ button:hover { opacity: 0.8; } /*set extra style for the cancel button*/ .cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /*centre the display image inside the container*/ .imgcontainer { text-align: center; margin: 24px 0 12px 0; } /*set image properties*/ img.avatar { width: 40%; border-radius: 50%; } /*set padding to the container*/ .container { padding: 16px; } /*set the forgot password text*/ span.psw { float: right; padding-top: 16px; } /*set styles for span and cancel button on small screens*/ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } </ style > < body > < h2 >Login Form</ h2 > <!--Step 1 : Adding HTML--> < form action = "/action_page.php" > < div class = "imgcontainer" > < img src = "data:image/png;base64,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" alt = "Avatar" class = "avatar" > </ div > < div class = "container" > < label >< b >Username</ b ></ label > < input type = "text" placeholder = "Enter Username" name = "uname" required> < label >< b >Password</ b ></ label > < input type = "password" placeholder = "Enter Password" name = "psw" required> < button type = "submit" >Login</ button > < input type = "checkbox" checked = "checked" > Remember me </ div > < div class = "container" style = "background-color:#f1f1f1" > < button type = "button" class = "cancelbtn" >Cancel</ button > < span class = "psw" >Forgot < a href = "#" >password?</ a ></ span > </ div > </ form > </ body > </ html > |