Hello Developers, Today on this blog you’ll discover ways to create Login and Signup with the use of the most effective HTML & CSS. Earlier I have shared a blog on How to create a Login Signup Page Using Simple HTML & CSS. Now I’m going to create a Login SignUp Page using Advance CSS and HTML.
I’m sure you’ve seen many HTML login forms templates on many websites. A simple login form is a set of inputs used to authenticate or authenticate a user before accessing a private page. The login form contains one field for the username and another for the password.
In this layout [HTML CSS Login Form], as you can see in the preview image, this is a stunning transparent login form built with HTML CSS and JavaScript. JavaScript is only used to switch between showing or hiding the password. login form has an image, shape, text, and social media icons. You can modify this form according to your requirements if you have basic knowledge of HTML and CSS.
This is a login form without a Unity backend. You can use a server-side language like PHP to make this login form active and dynamic. If you don’t understand what I’m talking about, you can read the complete blog tutorial in this form [HTML CSS Login Form]
You Might Like this Blog:
How to create Login Signup Page Using Simple HTML & CSS.
How to create an HTML CSS animated sidebar navigation menu.
To create this program: (Login SignUp Page).
Initially you need to create two files one HTML (.html) and another CSS file (.css).After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.
<!DOCTYPE html>
<!-- Coding By CodeWithNepal - codewithnepal.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form validation in HTML & CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Login Form</header>
<form action="#">
<div class="field email">
<div class="input-area">
<input type="text" placeholder="Email Address">
<i class="icon fas fa-envelope"></i>
<i class="error error-icon fas fa-exclamation-circle"></i>
</div>
<div class="error error-txt">Email can't be blank</div>
</div>
<div class="field password">
<div class="input-area">
<input type="password" placeholder="Password">
<i class="icon fas fa-lock"></i>
<i class="error error-icon fas fa-exclamation-circle"></i>
</div>
<div class="error error-txt">Password can't be blank</div>
</div>
<div class="pass-txt"><a href="#">Forgot password?</a></div>
<input type="submit" value="Login">
</form>
<div class="sign-txt">Not yet member? <a href="#">Signup now</a></div>
</div>
<script src="script.js"></script>
</body>
</html>Step 2:
And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #a50fe1;
}
::selection{
color: #fff;
background: #a50fe1;
}
.wrapper{
width: 380px;
padding: 40px 30px 50px 30px;
background: #fff;
border-radius: 5px;
text-align: center;
box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 35px;
font-weight: 600;
}
.wrapper form{
margin: 40px 0;
}
form .field{
width: 100%;
margin-bottom: 20px;
}
form .field.shake{
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100%{
margin-left: 0px;
}
20%, 80%{
margin-left: -12px;
}
40%, 60%{
margin-left: 12px;
}
}
form .field .input-area{
height: 50px;
width: 100%;
position: relative;
}
form input{
width: 100%;
height: 100%;
outline: none;
padding: 0 45px;
font-size: 18px;
background: none;
caret-color: #a50fe1;
border-radius: 5px;
border: 1px solid #bfbfbf;
border-bottom-width: 2px;
transition: all 0.2s ease;
}
form .field input:focus,
form .field.valid input{
border-color: #a50fe1;
}
form .field.shake input,
form .field.error input{
border-color: #dc3545;
}
.field .input-area i{
position: absolute;
top: 50%;
font-size: 18px;
pointer-events: none;
transform: translateY(-50%);
}
.input-area .icon{
left: 15px;
color: #bfbfbf;
transition: color 0.2s ease;
}
.input-area .error-icon{
right: 15px;
color: #dc3545;
}
form input:focus ~ .icon,
form .field.valid .icon{
color: #a50fe1;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
color: #bfbfbf;
}
form input::placeholder{
color: #bfbfbf;
font-size: 17px;
}
form .field .error-txt{
color: #dc3545;
text-align: left;
margin-top: 5px;
}
form .field .error{
display: none;
}
form .field.shake .error,
form .field.error .error{
display: block;
}
form .pass-txt{
text-align: left;
margin-top: -10px;
}
.wrapper a{
color: #a50fe1;
text-decoration: none;
}
.wrapper a:hover{
text-decoration: underline;
}
form input[type="submit"]{
height: 50px;
margin-top: 30px;
color: #fff;
padding: 0;
border: none;
background: #a50fe1;
cursor: pointer;
border-bottom: 2px solid rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
form input[type="submit"]:hover{
background: #a50fe1;
}Output
Thank you for thhe auspicious writeup. It inn fact was a amusement account it.
Look advancsd to more added agreeable from you!
By the way, how could we communicate?
Take a look at myy webpage moviedailynews