Form, Login Form

Login form template in Html and CSS | Login page in Html

In this post, we are going to learn how to create a login/sign-in form using Html and CSS. In the last lesson, we learned how to create a Responsive Registration form template with source code.

A login form means you have already provided your credentials to the website or app. Now you want to access your account. For signing in to our account we use the sign-in form. It may contain a username or email and password. We have also created the same sign-in form using HTML and CSS templates with source code.

We are going to create a login form and it’s going to be a unique and responsive login form.

A field is a part in which user can input their data. Then we have the option of remembering me. After checking this checkbox you have no need to enter your details once again for signing in to your account.

On the right side, we have the option of forgetting a password. It means that when you forgot your password then you can change your password with the help of forgot password button.

At the bottom, we have the option of login in. You can click on this button after filling in the fields of username and password. Without filling these fields you can’t proceed further and it will give an error and the fields become red.

Log-in form (Source code):

Name this file with the extension of .html

<!-- Fantacy Design -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    <title>Login </title>
    <title></title>
  </head>
  <body>
    <div class="main">
      <p class="sign" align="center">Login </p>
      <form class="form1">
        <input class="un " type="text" align="center" placeholder="Username">
        <input class="pass" type="password" align="center" placeholder="Password">
        <a class="submit" align="center">Login</a>
        <p class="forgot" align="center"><a href="#">Forgot Password?</p>


      </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Login </title>

</head>

<body>

<p class="sign" align="center">Login </p>

<a class="submit" align="center">Login</a>

<p class="forgot" align="center"><a href="#">Forgot Password?</p>

</div>

</body>

</html>

Once again create a file with the name login.CSS and paste the given code.

body {
     background-color: #F3EBF6;
     font-family: 'Ubuntu', sans-serif;
 }

 .main {
     background-color: #FFFFFF;
     width: 400px;
     height: 400px;
     margin: 7em auto;
     border-radius: 1.5em;
     box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
 }

 .sign {
     padding-top: 40px;
     color: #8C55AA;
     font-family: 'Ubuntu', sans-serif;
     font-weight: bold;
     font-size: 23px;
 }

 .un {
 width: 76%;
 color: rgb(38, 50, 56);
 font-weight: 700;
 font-size: 14px;
 letter-spacing: 1px;
 background: rgba(136, 126, 126, 0.04);
 padding: 10px 20px;
 border: none;
 border-radius: 20px;
 outline: none;
 box-sizing: border-box;
 border: 2px solid rgba(0, 0, 0, 0.02);
 margin-bottom: 50px;
 margin-left: 46px;
 text-align: center;
 margin-bottom: 27px;
 font-family: 'Ubuntu', sans-serif;
 }

 form.form1 {
     padding-top: 40px;
 }

 .pass {
         width: 76%;
 color: rgb(38, 50, 56);
 font-weight: 700;
 font-size: 14px;
 letter-spacing: 1px;
 background: rgba(136, 126, 126, 0.04);
 padding: 10px 20px;
 border: none;
 border-radius: 20px;
 outline: none;
 box-sizing: border-box;
 border: 2px solid rgba(0, 0, 0, 0.02);
 margin-bottom: 50px;
 margin-left: 46px;
 text-align: center;
 margin-bottom: 27px;
 font-family: 'Ubuntu', sans-serif;
 }


 .un:focus, .pass:focus {
     border: 2px solid rgba(0, 0, 0, 0.18) !important;

 }

 .submit {
   cursor: pointer;
     border-radius: 5em;
     color: #fff;
     background: linear-gradient(to right, #ec6f66 , #f3a183
);
     border: 0;
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 10px;
     padding-top: 10px;
     font-family: 'Ubuntu', sans-serif;
     margin-left: 35%;
     font-size: 13px;
     box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);
 }

 .forgot {
     text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
     color: #E1BEE7;
     padding-top: 15px;
 }

 a {
     text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);
     color: #E1BEE7;
     text-decoration: none
 }

 @media (max-width: 600px) {
     .main {
         border-radius: 0px;
     }

100

101

102

103

104

105

body {

background-color: #F3EBF6;

font-family: 'Ubuntu', sans-serif;

}

.main {

background-color: #FFFFFF;

width: 400px;

height: 400px;

margin: 7em auto;

border-radius: 1.5em;

box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);

}

.sign {

padding-top: 40px;

color: #8C55AA;

font-family: 'Ubuntu', sans-serif;

font-weight: bold;

font-size: 23px;

}

.un {

width: 76%;

color: rgb(38, 50, 56);

font-weight: 700;

font-size: 14px;

letter-spacing: 1px;

background: rgba(136, 126, 126, 0.04);

padding: 10px 20px;

border: none;

border-radius: 20px;

outline: none;

box-sizing: border-box;

border: 2px solid rgba(0, 0, 0, 0.02);

margin-bottom: 50px;

margin-left: 46px;

text-align: center;

margin-bottom: 27px;

font-family: 'Ubuntu', sans-serif;

}

form.form1 {

padding-top: 40px;

}

.pass {

width: 76%;

color: rgb(38, 50, 56);

font-weight: 700;

font-size: 14px;

letter-spacing: 1px;

background: rgba(136, 126, 126, 0.04);

padding: 10px 20px;

border: none;

border-radius: 20px;

outline: none;

box-sizing: border-box;

border: 2px solid rgba(0, 0, 0, 0.02);

margin-bottom: 50px;

margin-left: 46px;

text-align: center;

margin-bottom: 27px;

font-family: 'Ubuntu', sans-serif;

}

.un:focus, .pass:focus {

border: 2px solid rgba(0, 0, 0, 0.18) !important;

}

.submit {

cursor: pointer;

border-radius: 5em;

color: #fff;

background: linear-gradient(to right, #ec6f66 , #f3a183

);

border: 0;

padding-left: 40px;

padding-right: 40px;

padding-bottom: 10px;

padding-top: 10px;

font-family: 'Ubuntu', sans-serif;

margin-left: 35%;

font-size: 13px;

box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.04);

}

.forgot {

text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);

color: #E1BEE7;

padding-top: 15px;

}

a {

text-shadow: 0px 0px 3px rgba(117, 117, 117, 0.12);

color: #E1BEE7;

text-decoration: none

}

@media (max-width: 600px) {

.main {

border-radius: 0px;

}

If you like this post then like it, share it, and comment below. and if you are facing any errors then comment below.

If you are unable to create your files and paste that code into your files. Then we created a zip file that contains all these files with code and proper extensions. Download the file then extract these files with the help of any file extractor. And you can run the files easily.

Like it, share it, and follow us

Thanks for reading this article

Download Source File