Login Page In Html Css | Responsive Login Form Html Css

In this article post, we create a login page using html and css code. We create a responsive login form with complete html and css code. So let’s write html code for our login form and create a baisc structure for the login form.

Html Code

<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>Login Form</title>
    <script
      src="https://kit.fontawesome.com/66aa7c98b3.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="./Login Form.css" />
  </head>
  <body>
    <div class="container">
      <form class="form-1">
        <h1>Login</h1>
        <label for="email">Email</label>
        <input type="email" name="email" id="email" required />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" required />
        <span>Forgot Password</span>
        <button>Login</button>

        <!-- .........///sign-up///.......... -->

        <p>Or SignUp Using</p>
        <div class="icons">
          <a href="https://www.facebook.com/" target="blank"
            ><i class="fab fa-facebook-f"></i
          ></a>
          <a href="https://twitter.com/" target="blank"
            ><i class="fab fa-twitter"></i
          ></a>
          <a href="https://mail.google.com/" target="blank"
            ><i class="fab fa-google"></i
          ></a>
        </div>
      </form>
    </div>
  </body>
</html>

In this Html code, we create the Baisc Html template and our css file. Also, we use font awesome CDN link for social media icon because we use social media icon in the login form.

And after the body tag, we create div, and in div create form and use input type email and password.

50+ Frontend Project With Code

Then use some text like forgot password, login text with a button, and use social media icon.

Here you👇 can see an output with only Html🤯 Code.

Html Output

Login Page In Html Css | Responsive Login Form Html Css

Let’s Write Css Code.

Css Code

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}

.container .form-1 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 40%;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3);
}

.form-1 h1 {
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 1.5rem;
}

input[type="email"],
input[type="password"] {
  border: none;
  outline: none;
  border-bottom: 1px solid;
  background: none;
  margin: 0.9rem 2rem;
  font-size: 1rem;
}

label {
  margin: 0 2rem;
}

span {
  margin: 0 2rem;
  color: blue;
  cursor: pointer;
}

button {
  margin: 2rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 1rem;
  border: none;
  font-size: 1.1rem;
  font-weight: bolder;
  color: #fff;
  background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
}

/* ........///Sign-Up///......... */

p {
  text-align: center;
  font-weight: bolder;
}

.icons {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  margin-top: 0.5rem;
}

.icons a {
  text-decoration: none;
  font-size: 1rem;
  margin: 0.2rem;
}

.icons .fa-facebook-f {
  border-radius: 50%;
  background: #5d75ab;
  color: #fff;
  padding: 1rem;
}

.icons .fa-twitter {
  border-radius: 50%;
  background: #1da1f2;
  color: white;
  padding: 1rem;
}

.icons .fa-google {
  border-radius: 50%;
  background: #ee5645;
  color: #fff;
  padding: 1rem;
}

/* ....///Media query///..... */

@media (max-width: 501px) {
  html {
    font-size: 15px;
  }

  .container .form-1 {
    width: 300px;
  }
}

@media (min-width: 501px) and (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .container .form-1 {
    width: 450px;
  }
}

@media (min-width: 765px) and (max-width: 1200px) {
  html {
    font-size: 18px;
  }

  .container .form-1 {
    width: 540px;
    height: 550px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .container {
    height: 100vmax;
  }
}

This is all css code for our login form with the social media icon. We use css basic code to style our login form. We style form and then use input type email and password styling together.

Then styling our social media icon using font awesome classes. Then use a media query for a responsive login form, we use 3 to 4 media queries to make a responsive login form.

Final Output

Here you can see the final output of our login form, here you can see from box have 3d shadow and that’s all for this project💝.

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Sanket Bodake

written by – Codewithrandom

Login Page In Html Css | Responsive Login Form Html Css

Html Code

Css Code

Final Output

Leave a Comment Cancel reply