Here is an amazing and awesome design of login page design in HTML CSS with a source code free download. you can download the free source code of simple login form page design template using HTML CSS. You can use this layout in your PHP, Laravel, Codeigniter, .net, java etc scripting language.

I have one question, Do you have a website? If your answer to this question is yes, then a classic must have is an attractive login form. It's no matter in which language or framework of your website. because this script is very simple and easy to integrate with all language or framework. we created using simple HTML and CSS code. it looks very professional login form.

So, let's simply get a code of professional login form design layout bellow HTML and CSS tab.


<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head> <body> <div class="main-section"> <div class="content-section"> <div class="head-section"> <h3>Login</h3> </div> <div class="body-section"> <form> <div class="form-input"> <input type="text" name="" placeholder="Username or Email"> </div> <div class="form-input"> <input type="text" name="" placeholder="Password"> </div> <div class="form-input"> <input type="checkbox" name=""> <label>Remember me on this computer</label> <button type="submit" class="btn-submit">Login</button> </div> </form> </div> </div> <div class="footer-section"> <a href="">Forgot your password?</a> <span>Click here to reset it.</span> </div> </div> </body> </html>
body{ font-family: 'Lato', sans-serif; position: relative; background: #3DA6D4; margin: 0px; } .main-section{ width: 460px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } .content-section{ background: #FFF; border-radius: 2px; box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.1); } .head-section{ background: #F3F3F3; text-align: center; padding: 15px 0px; border-bottom: 1px solid #CECECE; } .head-section h3{ margin: 0px; color: #565656; } .body-section{ padding:15px 30px 30px 30px; overflow: hidden; } .body-section .form-input{ width: 100%; padding: 15px 0px; } .body-section .form-input input[type='text']{ width: calc(100% - 30px); border: 1px solid #D3D3D3; border-radius: 1px; padding:10px 10px; box-shadow: 0px 0px 0px 5px rgb(239,244,247); } .body-section .form-input input[type='checkbox']{ float: left; } .body-section label{ color: #565656; padding: 1px 5px; float: left; } .body-section .btn-submit{ float: right; background: #DEEDF4; border:1px solid #B5CBCD; color: #56778E; font-weight: bold; padding:7px 20px; border-radius: 15px; } .footer-section{ color: #F1F1F1; text-align: center; padding-top: 15px; font-size: 12px; } .footer-section a{ color: #fff; font-weight: bold; text-decoration: none; }




Random Post




Related Post

Responsive bootstrap code of login design page

Responsive bootstrap code of login design page

sample code of bootstrap login page. bootsstrap login page with social login button. and you can easaly implement in your project. you can get code of how to...

Read More
Login form with social login design using bootstrap

Login form with social login design using bootstrap

Simple login page form design using html and css. we provide free code for login page. this page design using by bootstrap. you can get code of bootstrap log...

Read More
Register and login form page design with animation using bootstrap

Register and login form page design with animation using boo...

you can get free ragister and login form page design free. register and login form design in tab with every refresh different background animation. you can g...

Read More