login page template 2022

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,iVBORw0KGgoAAAANSUhEUgAAAQQAAADCCAMAAACYEEwlAAAA51BMVEX39/e84K0AYb3qeQAAWb77+fu+4q3rdwC55bO74KrscwC64KnB5KzrdQAAXr3D5qydyrDtcADPu34AV77kijPjjTjYp2P09fgAXL2/26cAU77J4NGLtrO13KlEhbnKxYvS496+28h2qbXWrWu36LfTsnKq0a+y2a7O5c212rW93MHh6uyz2bHh6+rdm1C93MKXxLFilbfflkjboFfX6N1Xjbgvc7uHs7R1pLY3fboAZbzFz5ja5+fNv4PQ58fH4cnK39Y0druUvbIga7xvprUAT75hm7ZLirjngiE+gbkxerrD1J7hkkEBF7GZAAAL30lEQVR4nO2dfVfaPhvHVySB0tKK9WcRrCIitRREHYOpbDrd3OZ8/6/nTltAHtKShCYt3v3+s3OGx0M+Xk+5cjX99ClTpkyZMmXKlClTpkwpFlhQ0t9GsPw1u25v8FivX1x8/35xUa8/Dnqu+38CAy3S7A3qHcdWFHlJimI7nfqgZ35kEt6fv/GAlo8WLIXIY2E7Dw33Q4JAFjB+cCwldPkLKBTLeRibH4sDItDoWOF/f7xNWJ3Gx+HgEyAzgRWD8Dgk/f03F4oD9S4LgSmHbt3dcnMAYIzcgJXAhIPVGW8xBuQHDrsRzJuDs61eAQBCsDmBQAjDNloDGMeHIMAw3jYKoNeJFYGPodPbJgzAPN00HOIkW6fbExpAw+aAwMdgN7aDAjD7sXvCu5T+NhgDPzMItAXGgKIBRzMIpKQ8MgDX4WoGgWTHTTEF0LAgfwaSBK30ugRKjCIQeELJMunV4sU1KywLZYmk14uTG2+ZvJaC4ya94lW5XQEhcV5yN3UUXJsuJEJVn0lli6bQThcF0KNKC1CHuy/HNcPX85eRrTJxgFaadlSIARWC3Ze8UdVyE2n52nAkMWFIEwUqBnr72KjmFqUZWhOyUUh67VPRxAOof61pOYzyd12VHkJq4oLbpWAgfTFwCDxrqD7pDBTSkSNMiu0ChM/5EAZItSYDBdlJQdUEKPpoEOaxrjCV8cJAQekkHhwBzdZZ/xHJANnCE0NcUE4TpgAaNAxeInwhUJ6y5gooJLunBC5FcoRPYTHxXdoPpkSZaH/B7FJ8Vf1ujTP4YWHE4BBSN8HgCE4pNk3qaL0heGIxBTm5sEAVECT4TGAIKCo0WUwhubDg2jQMrsgMQRsypElJSqpyBH2aDoJ+vbxhCFGNogB9l9xPxhSonEFSh0TegPzhiMUfkEMkwcCkcQa0aaiRMchVr5kgSHYCGYIqM5AVCYG0Z6agkEiGoOohIG84WlstzsQGIYHeAujQ9VUFQJBF76ToSgQxEIQXC8Ch/IIiIEiOWAi0hiAGgtg0SbVxEgdB6EYKNKhPm9QRMQSNHYIsMCpQRwSvLUxaLGlf2CEIjApgzHL0SmoI1a9sFaMvRdiwI22N4Ev/S7h3MK42GPQQVyu4LIZAHBQ2CAlIiqAtNeWuYSJok0GoXm8EQdQOgm77OBNhQ8Fobzb2JGYzyZAffZHlh+omucGTmCzJFBY96dcEDsHWV5qHICQ0mswjavr65hLTEdSiLAH+AAbM81nQXgchv1lU9KUM+JsCszcgqU/RYaH6g2lSY1Ei/IHdG5D0URSF6o9NA4Iv/v5A3U1ZovCkhbqEcRuDHUgieivgYbNxRdUe4nOElv+qxzMYLT9wh0DdSZgIwmBOD9rXtdWqSTOej/yYCFV9Y3vo8obgMhkCAmAdDWtX3jqhbl/njHmn0KrG8EhX/c9+/rq9kljHOyeSOe8fmBIk1K2ft3do3UZw2Ap1OLrO1fKBjNqwuasHH6iontKMu+OmtIlr8E6SDCEBqu1rbTKrZLwEi/OM3j4KdCVN51mhepyfxIfcyy47Bt5Bgb6npHdv52KAcTuzdOQivmYhQLWe33+wWvsqMRePnPtLtDtIqL4sDqxpubCZTf1q8SfzuRFraOC8k+zRhQS1/bqcELW7K2xprI9WCoj8b5YxLiSF64EcZVyEu5gxJc24WrUFqDZXa0nNGLI1F/hGRrq4iIpkbHn4q7kc9KD6ZYmBljfuhsPhMxMFvpGRavek/wzrHxjHi94O7WF1kUDuuNm2vAdCmCyB7x6Kpl5UV518pupre84l1N2FmS4tPxxZurpJ4ci1ZgTkyQHauYjugaa9U9CfFtJCfvjkFw7FQEwQbJ4QKJrtavTEnpafDvbrzfkZFi334hOQ7s8CnRwycODaeCc/eoLNdQ1Fzd81Qv3L/A9Wn9uITfH+slwpByqV3r61qCGM+TEAA9K4SNJaNl4ghPbveTuo3loQIXirlHfeVa78OaG0BpljjiSHoP8mmWP+ay8WU9VX5Aqts9I8Ak+FyiUdBa4Q6oQQCMdXtbuF4Kn98OzgrbSzqtKfQyoIdY4QSA/giAxhRXddxGAfxwAZww4NBZ6HcaQFI2wTjvAuyBjpUmv/3RUKXlyco0ADgWPJSApB/Uo+mzOTdqtKxbOZHZQqbzdIlVJhGh9vyOMCVwjfySAQHDWtKn8Fpfspg9KfvcOgWPo284/KHjEF+TtPCERfAdqkI7zzhjBEhvDfxPwrB7NSsdjam1IokzKQpOQhUAxpzRnCT1W6r0z/5vPlUXFqH6VzYlPgCoHIHfRXBm+otmHxJjCE0sHiYot7Ezg7pKUjV3e4IINAjwBZAsqPwVoLf5b/4K3LgE7lnhTCReLZATIkSO2vKp0EZl/6tmL1hwGe8hmhP3DNDkTFEmyzJMhjvfi5HBb/ivt+oizsk0LgWSwRlc1wlyU5zCDg6oHieYkOAs+ymS+EoCwqf8ZAmKTJCmHtzBUC0S6SGcIkEZ5gfuckKBBD4NluHpNAUNf2U/hD4NhUIWuvpQAC37lWklmdFECweDIgOopMAQSuh5FEh9IsEDTjb5wQuB5LEz0eTQ+hmv97/QSXICwYHR0Evg9OExUKtBC0u59db0CnNYVQXBUlBI5lAuEAHyWE/KvtHUAUD08mXYODPYwm24pzoqMYzkN8JKOcdO2E6m/v0LF4f1OZ9U5KGE0+K1X2Cc4gOI9zkjwLSGkJ3iBGca+yfNYQpkLl89quAucnA0kiIxWEvHeRTPFbZf3qZ6pgNhcL4n2hBHiMGYL/oEuRAoHnE//WQHjkPM3Z4wBhslEmVnnNoZzM+w4BgpqRHsIBaUAIVPgvGgL3x6AIgkLSEPjfMUMwv5Y0BAGPvqzfTVPVCTwg8H8+dP0eKmkIAh4aX799UJvTAXYC/YqAUCgX8P8fCYHvxmGitdfqwPYu0tPR1S7Jv+i3hUAo7V/eYIuoaAhCLtlZ7w+QRlIYhNJeq9i6x1UQ0RDEXKHwGPfF9VgIZX+LUNzDUIiEoDyKYPCJ5jZOdgjT3grGISIhWGLuDtjk8VAKCMGJ5D9KCKJukWC7TYQWQuHNW2nrDPdRBARh94kwPxZIA2GndHkoSWe49BAFgfvjgDPFHBrDUuRN65w2RQoKi54Y79KghFC+bOH32BEQBF7KSDzZKhqCkGpxqnhNgRpC6JiC0Ns5YzaFE+xaQyGETrEJNYTYowI2/oVCCJ3fEnxNK6jHmSAmI0krro+tEtAHIb9GEWsILJcRRgnvDwX8YUToDJv4G903u1FjSVQ997ADyQRubgZxvhTxfWZ1vXCDXZ5kwZeT+qK8szharTfyDluIMyTyNiS2e+jCdEh6/lLBzXBIib3dIN7YiNsz4xiEPfSQ1HsuxnE6RBG/WVpmEHYCZ/Ec2osS1Zt/1lM4Ka+NC6F2kOAbgEwnzlfGFv+FPAk3VXknbEADJvlGrJjbjcglwjGUI+YSBDUW8drwErJVCtLZn0qpsKpSpXwQPq6U9IugYs2THobiv/O3/RWd30sRzdWkXwlG83o8Yg4YRfx8Cl6RZ8ZyfeAGgkm+CWsiulenclAqXqEKGolSSMkb18FjghQs3pNqpAKxH9ESS0kLg7ibbTQMRDfUopQQhVQxSCgupCYeTJUAhdQx8DOl0KoJpiQ3Lgr07Ngr6HDJdhpqJIzc+PcRoQycVLxYHCezLyhJKP3k9wuhEhQeUxgS5wXGXe4uIXeFveeIVWas3VeMlNMUu8JUoMEzS8h2GjMjRhyNYSvMIBAYO1wwKE7qo8GcgFm3YvcJ2aqbW8Tgk4fhNF4MsnW6ZQg8AbcfHwbZ6rvbh8BTbBi2F4En4J7aG4dIxT7dYgSegPnoKBuYg6w4j1sYC5YFzN6DzcZBVuyH3gdA4AuYjb4tU3KQZbvf+CgEfAHE4aFrkRqErFjdB0TgIyHwhTj0Bn0PRCQJ2QPQH/Q+IIGJEAizUe84iARiIS8uHv2XYjmdesP8uACmAkim2xvULzodx/EHxW3H6XQu6oOea3qfJv0NxQlglPR3ypQpU6ZMmTJlypQpU6j+ByjpXt5TuPI1AAAAAElFTkSuQmCC"
                 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>