"Responsive and Effective login form Using HTML & CSS with Code?"

How to create a login form with HTML CSS?


Step1: Add an image inside a container and inputs with corresponding labels for each field in the first step of adding HTML. In order to process the input, enclose them in a "form" element. 


Step 2: Adding CSS In order to design the login page, add the necessary CSS. Try to keep the design as straightforward as you can.



Using HTML:-


<input type="text" placeholder="Enter Username" name="username" required>
 <label>Password : </label> <input type="password" placeholder="Enter Password" name="password" required>
 <button type="submit">Login</button>

Effective LOGIN FORM Using HTML, CSS:-



<html>
     <head>
               <link rel="preconnect" href="https://fonts.gstatic.com">
               <link rel="stylesheet" href="htttpd://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap">
               <title></title>
               <style>

                        body{
                                 background:linear-gradient(#EDA8FF,#6B63D3);
                                 height:100vh;

                        }
                        .container{
                                   position: absolute;
                                   transform: translate(-50%,-50%);
                                   top: 50%;
                                   left: 50%;
                                   
                        }
                        form{
                                   background: linear-gradient(#FF4773,#EDA8FF);
                                   padding:3em;
                                   height: 300px;
                                   border-radius: 20px;

                                   border-left: 1px solid $white;
                                   border-top: 1px solid $white;
                                   backdrop-filter:blur(10px);
                                   box-shadow: 20px 20px 40px -6px rbga(10,5,5,0.2);
                                   text-align: center;
                                   position: relative;
                                   color: black;

                                
                        }
                        p{
                                   font-family:Montserrat,sanse-serif;
                                   font-weight: 500;
                                   color: #0004ff;
                                   opacity:o.9;
                                   font-size: 1.4rem;
                                   margin-top: 0;
                                   margin-bottom: 60px;
                                   text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

                        }
                        input{
                                   background:#EDA8FF;
                                   width: 300px;
                                   padding: 1em;
                                   margin-bottom: 2em;
                                   border: none;
                                   border-left: 1px solid $white;
                                   border-radius: 500px;
                                   filter:blur(0.5px);
                                   box-shadow: 4px 4px 60px rgba(0,0,0,0.2);
                                   color: #black;
                                   font-family: Monotserrat,sanse-serif;
                                   font-size: small;
                                   transition: all 0.2s ease-in;
                                   text-shadow: 4px 4px 4px egba(0,0,0,0.2);

                        }
                        form:hover{
                                   background: black;
                                   transform: perspective(400px) rotateX(20deg) scaleZ(1.75);
                                   transeform-style: preserve-3d;
                                   transition-duration: 1s;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
                        }
               </style>
                
     </head>
     <body>
          <div class="container">
              <form>
                   <p>Login</p>
                   <input type="email" placeholder="Email"><br>
                   <input type="password" placeholder="password"><br>
                   <input type="button" value="submit">
              </form> 
              <div class="drops">
                   <div class="drop drop1"></div>
                   <div class="drop drop2"></div>
                   <div class="drop drop3"></div>
                   <div class="drop drop4"></div>
                   <div class="drop drop5"></div>
              </div>
          </div>
     </body>    
</html>

****************************************
For more visit - www.javaoneworld.com
Posted by

3 comments:

Subscribe to: Post Comments (Atom)