Creating UI designed login form|RESPONSIVE LOGIN FORM|
Here is the code ,how to create A UI designed Login form with on click feature
 |
| Creating a login form |
Here you can learn step by step
Step1- writing the html basic code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Step2 - In that body tag create a division tag and in that took up the code to center using the center tag.
In that center tag ,write the input methods in separate divisions and aslo you have to allot required class identity to the separated input methods as shown below
<center>
<button onclick="document.getElementById('login').style.display='block'" style=";" class="mainbtn">Login</button>
<center>
<div id="login" class="card modal ">
<form class=" modal-content animate " action="/action_page.php " method="post ">
<h3>LOGIN HERE</h3>
<img src="E:\☻DINESH IMP☻/mr.jpg " class="logo " alt=" ">
<div class="container">
<div class="logina login ">
<input type="text " name="name " placeholder="username " required>
</div>
<div class="loginb login ">
<input type="email " name="Email " placeholder="email " required>
</div>
<div class="loginc login ">
<input type="password " name="Password " placeholder="password " required>
</div>
<button class="submit">login</button><br>
<a class="forgot">forgot password</a>
</div>
<div class="container">
<button type="button" onclick="document.getElementById('login').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
</center>
</center>
Step3 - Let's go to CSS .
Now I have designed the form accord to my wish you can also change or design the form .
<style>
body {
background: linear-gradient(-45deg, #EE7752, #E73c7E);
background-size: cover;
background-attachment: fixed;
transition: 0.5s;
}
.card {
margin-top: 10%;
border-radius: 13px;
transition: 0.5s;
display: inline-block;
display: block;
background: transparent;
position: relative;
}
.modal-content {
border: 1px solid rgba(255, 255, 255, 0.185);
box-shadow: 0 2px 20px rgb(27, 26, 26);
border-radius: 9px;
height: 350px;
}
.card h3 {
font-family: cursive;
font-size: 18px;
color: rgb(255, 255, 255);
}
.logo {
height: 50px;
width: 50px;
border: 2px solid rgba(241, 240, 240, 0.788);
border-radius: 50%;
margin-top: -10px;
}
.logo:hover {
transform: scale(0.9);
transition: 0.5s;
}
.login {
margin-top: 10px;
}
.card input {
background: transparent;
border: none;
text-align: center;
border-bottom: 2px solid rgba(255, 250, 250, 0.753);
padding: 5px;
border-radius: 7px;
color: #fff;
}
input:hover {
transform: scale(0.9);
transition: 0.5s;
}
.submit {
margin-top: 27px;
width: 110px;
padding: 5px;
background: url();
border-radius: 5px;
margin-bottom: 7px;
border: 1px solid #fff;
color: rgba(248, 248, 248, 0.856);
}
.submit:hover {
transform: scale(0.9);
transition: 0.5s;
}
.forgot {
font-size: 12px;
color: rgb(228, 224, 224);
font-family: cursive;
transition: 0.5s;
}
.forgot:hover {
transform: scale(0.8);
transition: 0.5s;
color: dodgerblue;
Step 4 - Now you have to write the code for the functioning of the button which is used to open the form
.modal {
display: none;
/* Hidden by default */
position: relative;
transition: 0.5s;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 280px;
/* Full width */
height: 300px;
/* Full height */
/* Enable scroll if needed */
background: transparent;
/* Fallback color */
background: transparent;
/* Black w/ opacity */
padding-bottom: 60px;
}
/* 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%;
}
}
.cancelbtn {
color: rgb(250, 249, 245);
border: 1px solid white;
transition: 0.5s;
margin-top: 20px;
background: transparent;
}
.mainbtn {
background-color: transparent;
width: 100px;
padding: 5px;
border: 1px solid #fff;
border-radius: 5px;
}Step 5 - Yeah now it's done ... And compile it you will be amazed with a beautiful login form
If you confused u can also download the complete source code which we provided in the link below.
OUTPUT👍👌
The out put for the code will be like this .
No comments: