Thursday, December 27, 2018

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

Cloud Tech December 27, 2018 COMPUTER, WEB DESIGN

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

Also read :UPLOAD PROFILE IMAGE WITH PREVIEW USING HTML CSS JQUERY

Also read :RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

Also read :3D IMAGE SLIDE SHOW USING HTML CSS

<!DOCTYPE html>
<html>
 <style>
 body{
  background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('back.jpg');
  height: auto;
  width: auto;
  background-size: cover;
  background-attachment: fixed;
  font-family: arial;
 }
  .modal{
   display: none;
   height: 100%;
   width: 100%;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
   padding-top: 60px;
   overflow: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
  }
  .modal-content{
   width: 80%;
   margin: 5% auto 15% auto;
   border:1px solid pink;
   background-color: #fefefe;
  }
  .imgcontainer{
   position: relative;
   text-align: center;
   margin: 24px 012px 0;
  }
  img.avatar{
   width: 15%;
   box-shadow:  0px 0px 2px 2px #dc143c;
   border-radius: 50%;
  }
  img.avatar:hover{
   width: 15%;
   box-shadow:  0px 0px 2px 2px yellow;
   border-radius: 50%;
  }
  .close{
   position: absolute;
   right: 20px;
   top: 0px;
   font-size: 30px;
   font-weight: bold;
   color: #9400d3;
  }
  .close:hover{
   color: blue;
   cursor: pointer;
   color: #dc143c;
  }
  .container{
   padding: 16px;
  }
  input[type=text],input[type=password]{
   padding: 12px 20px;
   margin: 8px 0;
   border:1px solid #ccc;
   font-size: 18px;
   width: 100%;
   box-sizing: border-box;
   display: inline-block;
  }
  input[type=text]:focus,input[type=password]:focus{
   box-shadow:  0px 0px 2px 2px yellow;
   background-color: lightpink;
  }
  button{
   width: 100%;
   padding: 14px 20px;
   margin: 8px 0;
   border:none;
   background-color: #48d1cc;
   color: #fff;
   cursor: pointer;
   font-size: 18px;
  }
  button:hover{
   background-color: #00ffff;
   color: #4838db;
   cursor: pointer;
   box-shadow:  0px 0px 2px 2px yellow;
  }
  .cancelbtn{
   width: auto;
   padding: 10px 18px;
   background-color: #4682b4;
  }
  .cancelbtn:hover{
   width: auto;
   padding: 10px 18px;
   background-color: #00ffff;
   box-shadow:  0px 0px 2px 2px yellow;
  }
  span.psw{
   float: right;
   padding-top: 20px;
  }
  .animate{
   -webkit-animation:animatezoom 0.8s;
   animation: animatezoom 0.8s;
  }
  @-webkit-keyframes animatezoom{
   from{-wekit-transform:scale(0);}
   to{-wekit-transform:scale(1);}
  }
  @keyframes animatezoom{
   from{transform: scale(0);}
   to{transform: scale(1);}
  }
  @media screen and(max-width: 300px){
   span.psw{
    display: block;
    float: none;
   }
  }
 </style>
 <body>
  <h3>
Login</h3>
<button style="width: auto;" onclick="document.getElementById('id01').style.display='block'">Login</button>
  <div class="modal" id="id01">
   <form class="modal-content animate" action="home.html">
    <div class="imgcontainer">
     <span class="close" onclick="document.getElementById('id01').style.display='none'" title="close modal">×</span>
     <img src="ml.png" class="avatar">
    </div>
<div class="container">
     <label><b>User Name</b></label>
     <input type="text" name="uname" placeholder="Enter Username" required>
     <label><b>Password</b></label>
     <input type="password" name="password" placeholder="Enter Password" required>
     <button type="submit">Login</button>
     <input type="checkbox" checked="checked">Remember me
    </div>
<div class="container" style="background-color: skyblue">
     <button type="button" onclick="document.getElementById('id01').style.display='none'"  class="cancelbtn">Cancel</button>
     <span class="psw">Forgot <a href="#" style="text-decoration: none;">Password ?</a></span>
    </div>
</form>
</div>
</body>
</html>

About Cloud Tech
Cloud-Tech is a Entertainment site is a provider of Bascic Knolwedge on Computer, Mobile, Festival, Life Changing Quotes Wishes. The main mission of Cloud-Tech is to provide the Updated News On Technology.