Muthu Annamalai Venkatachalam
Muthu Annamalai Venkatachalam's Blog

Muthu Annamalai Venkatachalam's Blog

How To Create A Login Page With HTML And CSS

How To Create A Login Page With HTML And CSS

Muthu Annamalai Venkatachalam

Published on Dec 25, 2021

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Signup and registration forms on your website can generate sales, lead generation, and customer growth.

The majority of websites use HTML5. HTML is a language used to communicate on the Internet. You should start at the beginning when learning a programming language.

In this article, I'll show you how to create a simple login form in HTML and CSS, so that you can use it right away.

Demo:

Steps to Follow:

1) Create a Project Folder and open it up in an IDE of your choice and link HTML with CSS with the below code

<head>
  <link rel="stylesheet" href="style.css" />
</head>

2) Next, create a structure for the login page using HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Login Form Demo</title>
  </head>
  <body>
    <div class="login-wrapper">
      <form action="" class="form">
        <h2>Login</h2>
        <div class="input-group">
          <input type="text" name="loginUser" id="loginUser" required />
          <label for="loginUser">User Name</label>
        </div>
        <div class="input-group">
          <input
            type="password"
            name="loginPassword"
            id="loginPassword"
            required
          />
          <label for="loginPassword">Password</label>
        </div>
        <input type="submit" value="Login" class="submit-btn" />
      </form>
    </div>
  </body>
</html>

3) Next, we are adding CSS to style our login page

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-size: cover;
  font-family: sans-serif;
}
.login-wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 80px 40px 40px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  transform: skewX(-26deg);
  transform-origin: bottom left;
  border-radius: 10px;
  pointer-events: none;
}
.form img {
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
  width: 100px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.form h2 {
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 2rem;
  color: white;
}
.form .input-group {
  position: relative;
}
.form .input-group input {
  width: 100%;
  padding: 10px 0;
  font-size: 1rem;
  letter-spacing: 1px;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: inherit;
}
.form .input-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 1rem;
  pointer-events: none;
  transition: 0.3s ease-out;
}
.form .input-group input:focus + label,
.form .input-group input:valid + label {
  transform: translateY(-18px);
  color: white;
  font-size: 0.8rem;
}
.submit-btn {
  display: block;
  margin-left: auto;
  border: none;
  outline: none;
  background: #ff652f;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.forgot-pw {
  color: inherit;
}

#forgot-pw {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
  transition: 0.6s;
}
#forgot-pw:target {
  height: 100%;
  opacity: 1;
}
.close {
  position: absolute;
  right: 1.5rem;
  top: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  text-decoration: none;
  color: inherit;
}

4) Before Applying the CSS the output look like this:

Login Form Demo (2).png

5) After Applying the CSS our final output will look like this:

Login Form Demo (3).png

The Final Output in Video Form:

Have a Look At the deployed site here

A login page has been successfully created. I hope you find this article helpful. Please ask any questions in the comment section if you have any.

You can now extend your support by buying me a Coffee.๐Ÿ˜Š๐Ÿ‘‡

Buy Me A Coffee

If you want to contact me you can do it here:

Thanks for Reading ๐Ÿ˜Š

Did you find this article valuable?

Support Muthu Annamalai Venkatachalam by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this