How TO - Login Form Web Page - Apna Hai - W3 HTML CSS Courses Tutorials

How TO - Login Form Web Page

CSS can make responsive web pages and is used for styling and its ... <div class="login">, The beginning of the journey in (front-end) web development can be ... As you can see, the page contains a title, a login form (for username and passward) Free HTML5 and CSS3 Login Forms for your website. Every Login Form has been hand-picked and tested by Colorlib to ensure the highest

Modal Login Form

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;}  /* Full-width input fields */ 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 all buttons */ button {   background-color: #4CAF50;   color: white;   padding: 14px 20px;   margin: 8px 0;   border: none;   cursor: pointer;   width: 100%; }  button:hover {   opacity: 0.8; }  /* Extra styles for the cancel button */ .cancelbtn {   width: auto;   padding: 10px 18px;   background-color: #f44336; }  /* Center the image and position the close button */ .imgcontainer {   text-align: center;   margin: 24px 0 12px 0;   position: relative; }  img.avatar {   width: 40%;   border-radius: 50%; }  .container {   padding: 16px; }  span.psw {   float: right;   padding-top: 16px; }  /* The Modal (background) */ .modal {   display: none; /* Hidden by default */   position: fixed; /* Stay in place */   z-index: 1; /* Sit on top */   left: 0;   top: 0;   width: 100%; /* Full width */   height: 100%; /* Full height */   overflow: auto; /* Enable scroll if needed */   background-color: rgb(0,0,0); /* Fallback color */   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */   padding-top: 60px; }  /* Modal Content/Box */ .modal-content {   background-color: #fefefe;   margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */   border: 1px solid #888;   width: 80%; /* Could be more or less, depending on screen size */ }  /* The Close Button (x) */ .close {   position: absolute;   right: 25px;   top: 0;   color: #000;   font-size: 35px;   font-weight: bold; }  .close:hover, .close:focus {   color: red;   cursor: pointer; }  /* Add Zoom Animation */ .animate {   -webkit-animation: animatezoom 0.6s;   animation: animatezoom 0.6s }  @-webkit-keyframes animatezoom {   from {-webkit-transform: scale(0)}    to {-webkit-transform: scale(1)} }    @keyframes animatezoom {   from {transform: scale(0)}    to {transform: scale(1)} }  /* 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%;   } } </style></head><body> <h2>Modal Login Form</h2><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button> <div id="id01" class="modal">     <form class="modal-content animate" action="/action_page.php" method="post">    <div class="imgcontainer">      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>      <img src="img_avatar2.png" alt="Avatar" class="avatar">    </div><div class="container">      <label for="uname"><b>Username</b></label>      <input type="text" placeholder="Enter Username" name="uname" required>       <label for="psw"><b>Password</b></label>      <input type="password" placeholder="Enter Password" name="psw" required>               <button type="submit">Login</button>      <label>        <input type="checkbox" checked="checked" name="remember"> Remember me       </label>    </div><div class="container" style="background-color:#f1f1f1">      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>      <span class="psw">Forgot <a href="#">password?</a></span>    </div></form></div><script>// Get the modal var modal = document.getElementById('id01');  // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } } </script> </body></html>

How TO - Login Form Web Page

Modal Login Form

No comments:

Labels

Popular Posts

Facebook

Blog Archive

Subscribe Us