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

<!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.

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Thursday, December 27, 2018

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts

Cloud-Tech

Follow Us

2019 Delighted Offer

Translate

Thursday, December 27, 2018

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

RESPONSIVE USER LOGIN FORM USING HTML CSS JAVA

Subscribe via email

Pages

Most Recent

Categories

Popular

About & Social

Cloud-tech

About

Link list 3

Tags

Categories

Popular Posts