Telegram Group Join Now
ADVERTISEMENT
Create Login and SignUp Page In HTML & CSS

Hello coder! Welcome to the blog today we will see how to make this Cool Login and SignUp Page In HTML & CSS. This form is a cool design. On the right side, there’s the login field and when clicked, the border turns red. On the left side, we have a signup section to attract new users to create accounts. All buttons have a cool sliding hover effect too.
ADVERTISEMENT
ADVERTISEMENT
The Preview Of Project video is at the bottom of the page.
Codepen Preview Login and SignUp Page:
ADVERTISEMENT
ADVERTISEMENT
Code by | codingporium |
Project Download | Link Available Below |
Language used | HTML, and CSS |
External link / Dependencies | No |
Responsive | No |
Â
HTML Code For Login and SignUp Page
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sign In Form</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper login"> <div class="container"> <div class="col-left"> <div class="login-text"> <h2>Welcome!</h2> <p>Create your account.<br>For Free!</p> <a href="" class="btn">Sign Up</a> </div> </div> <div class="col-right"> <div class="login-form"> <h2>Login</h2> <form action=""> <p> <label>Username/Email address<span>*</span></label> <input type="text" placeholder="Username or Email" required> </p> <p> <label>Password<span>*</span></label> <input type="password" placeholder="Password" required> </p> <p> <input type="submit" value="Sign In"> </p> <p> <a href="">Forgot password?</a> </p> </form> </div> </div> </div> </div> </body> </html>
The information for the registration and login forms has been added to the HTML code in the sections below. The codes listed below are copied, and they are then added directly to your HTML file.
Restaurant Website Using HTML And CSS With Source Code
- To start, weâll add a âlogin-wrapâ class to a div tag, which will wrap our signup and login forms.’
- Now we will create a login welcome using the div tag we will create the container for the login form and using the h2 tag we will add a heading to our login form.
- Using the paragraph tag we will add a little welcome introduction and link for creating the account using the <a> tag.
- We will now create our login form. To do that, we will design a label that requests a username and, beneath it, a text-only input box for the username.
- Weâre going to make a âpasswordâ input box now.
- Now we will create a forgot password link using the anchor tag.
Letâs look at our login form now that we have created it.
ADVERTISEMENT
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here
The output would be:
ADVERTISEMENT

CSS Code For Login and SignUp Page
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); *{ box-sizing: border-box; } body{ margin: 0; font-family: poppins, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: #666666; background: #eaeff4; } .wrapper{ margin: 0 auto; width: 100%; max-width: 1140px; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .container{ position: relative; width: 100%; max-width: 600px; height: auto; display: flex; background: #ffffff; box-shadow: 0 0 5px #999999; } .login .col-left, .login .col-right{ padding: 30px; display: flex; } .login .col-left{ width: 60%; clip-path: polygon(0 0, 0% 100%, 100% 0 ); background: #2aa15f; } .login .col-right{ padding: 60px 30px; width: 50%; margin-left: -10%; } @media(max-width: 575px){ .login .container{ flex-direction: column; box-shadow: none; } .login .col-left, .login .col-right{ width: 100%; margin: 0; clip-path: none; } .login .col-right{ padding: 30px; } } .login .login-text{ position: relative; width: 100%; color: #ffffff; } .login .login-text h2{ margin: 0 0 15px 0; font-size: 30px; font-weight: 700; } .login .login-text p{ margin: 0 0 20px 0; font-size: 16px; font-weight: 500; line-height: 22px; } .login .login-text .btn{ display: inline-block; font-family: poppins; padding: 7px 20px; font-size: 16px; letter-spacing: 1px; text-decoration: none; border-radius: 30px; color: #ffffff; outline: none; border: 1px solid #ffffff; box-shadow: inset 0 0 0 0 #ffffff; transition: .3s; } .login .login-text .btn:hover{ color: #2aa15f; box-shadow: inset 150px 0 0 0 #ffffff; } .login .login-form{ position: relative; width: 100%; } .login .login-form h2{ margin: 0 0 15px 0; font-size: 22px; font-weight: 700; } .login .login-form p{ margin: 0 0 10px 0; text-align: left; color: #666666; font-size: 15px; } .login .login-form p:last-child{ margin: 0; padding-top: 3px; } .login .login-form p a{ color: #2aa15f; font-size: 14px; text-decoration: none; } .login .login-form label { display: block; width: 100%; margin-bottom: 2px; letter-spacing: .5px; } .login .login-form p:last-child label{ width: 60%; float: left; } .login .login-form label span{ color: #ff574e; padding-left: 2px; } .login .login-form input{ display: block; width: 100%; height: 35px; padding: 0 10px; outline: none; border: 1px solid #cccccc; border-radius: 30px; } .login .login-form input:focus{ border-color: #ff574e; } .login .login-form button, .login .login-form input[type=submit] { display: inline-block; width: 100%; margin-top: 5px; color: #2aa15f; font-size: 16px; letter-spacing: 1px; cursor: pointer; background: transparent; border: 1px solid #2aa15f; border-radius: 30px; box-shadow: inset 0 0 0 0 #2aa15f; transition: .3s; } .login .login-form button:hover, .login .login-form input[type=submit]:hover{ color: #ffffff; box-shadow: inset 250px 0 0 0 #2aa15f; }
We will give our login form some simple design. We will apply some default styling to the login form using the universal selector. We’ll be incorporating a few of the new fonts into our login form using the Google import link to give the form fresh font design.
ADVERTISEMENT
10+ HTML CSS Projects For Beginners with Source Code
We’ll use the margin property to set the margin to “zero,” the font-family property to set the font for our login form to “Poppins,” and the background colour property to set the background to “light blue.”
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { box-sizing: border-box; } body { margin: 0; font-family: poppins, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: #666666; background: #eaeff4; }
Step2: We’ll now set the margin to zero, the width to 100%, the maximum width to 1140px, and the minimum height to “100vh” using the minimum height attribute of the class selector (.wrapper). Our form’s display is configured to “flex.”
Create A Travel Website Using HTML & CSS
Because our project is responsive, we will utilise the media query property to add responsiveness to our login form by setting the maximum width to 575px and the direction of flex display to “column.”
ADVERTISEMENT
.wrapper { margin: 0 auto; width: 100%; max-width: 1140px; min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .container { position: relative; width: 100%; max-width: 600px; height: auto; display: flex; background: #ffffff; box-shadow: 0 0 5px #999999; } .login .col-left, .login .col-right { padding: 30px; display: flex; } .login .col-left { width: 60%; clip-path: polygon(0 0, 0% 100%, 100% 0); background: #2aa15f; } .login .col-right { padding: 60px 30px; width: 50%; margin-left: -10%; } @media(max-width: 575px) { .login .container { flex-direction: column; box-shadow: none; } .login .col-left, .login .col-right { width: 100%; margin: 0; clip-path: none; } .login .col-right { padding: 30px; } }
In order to help you get expertise with the login form, we’ve added the fundamental styling to our login form. Now, we’ll recommend that you add your own styling. The many CSS ideas will become more familiar to you.
ADVERTISEMENT

Live Output:
ADVERTISEMENT
And that’s all for this project!
ADVERTISEMENT
written by @codingporium
ADVERTISEMENT
Which code editor do you use for this Login and SignUp Form project coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
ADVERTISEMENT