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
No comments:
Post a Comment