Indicoderz

login page using html and css - Hello friends, today we will see you in this blog you'll learn how to login page using html and css codes for website| HTML Website Tutorials indicoderz .Earlier I have shared a blog on how to create a login page using html and css codes for website| HTML Website Tutorials indicoderz Generally.

You might like this:

Instagram code Tutorial of login page

Pure CSS login page [Source Codes]

To create this program login page using html and css. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this login page using html and css from the below download button.website using html and css source code .

Html code :-

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

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

  </head>

  <body>

    <div class="wrapper">

      <div class="title">

Login Form</div>

<form action="#">

        <div class="field">

          <input type="text" required>

          <label>Email Address</label>

        </div>

<div class="field">

          <input type="password" required>

          <label>Password</label>

        </div>

<div class="content">

          <div class="checkbox">

            <input type="checkbox" id="remember-me">

            <label for="remember-me">Remember me</label>

          </div>

<div class="pass-link">

<a href="#">Forgot password?</a></div>

</div>

<div class="field">

          <input type="submit" value="Login">

        </div>

<div class="Join-now"> <a href="#"> Join now</a></div>

</form>

</div>

</body>

</html>

Css code :-

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

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

}

html,body{

  display: grid;

  height: 100%;

  width: 100%;

  place-items: center;

  background: #6937E1;

}

::selection{

  background: #1691F3;

  color: #fff;

}

.wrapper{

  width: 380px;

  background: #fff;

  border-radius: 15px;

  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);

}

.wrapper .title{

  font-size: 35px;

  font-weight: 600;

  text-align: center;

  line-height: 100px;

  color: #fff;

  user-select: none;

  border-radius: 15px 15px 0 0;

  background: #1691F3;

}

.wrapper form{

  padding: 10px 30px 50px 30px;

}

.wrapper form .field{

  height: 50px;

  width: 100%;

  margin-top: 20px;

  position: relative;

}

.wrapper form .field input{

  height: 100%;

  width: 100%;

  outline: none;

  font-size: 17px;

  padding-left: 20px;

  border: 1px solid lightgrey;

  border-radius: 25px;

  transition: all 0.3s ease;

}

.wrapper form .field input:focus,

form .field input:valid{

  border-color: #4158d0;

}

.wrapper form .field label{

  position: absolute;

  top: 50%;

  left: 20px;

  color: #999999;

  font-weight: 400;

  font-size: 17px;

  pointer-events: none;

  transform: translateY(-50%);

  transition: all 0.3s ease;

}

form .field input:focus ~ label,

form .field input:valid ~ label{

  top: 0%;

  font-size: 16px;

  color: #4158d0;

  background: #fff;

  transform: translateY(-50%);

}

form .content{

  display: flex;

  width: 100%;

  height: 50px;

  font-size: 16px;

  align-items: center;

  justify-content: space-around;

}

form .content .checkbox{

  display: flex;

  align-items: center;

  justify-content: center;

}

form .content input{

  width: 15px;

  height: 15px;

  background: red;

}

form .content label{

  color: #262626;

  user-select: none;

  padding-left: 5px;

}

form .content .pass-link{

  color: "";

}

form .field input[type="submit"]{

  color: #fff;

  border: none;

  padding-left: 0;

  margin-top: -10px;

  font-size: 20px;

  font-weight: 500;

  cursor: pointer;

  background: #1691F3;

  transition: all 0.3s ease;

}

form .field input[type="submit"]:active{

  transform: scale(0.95);

}

form .Join-now{

  color: #262626;

  margin-top: 20px;

  text-align: center;

} 

form .pass-link a,

form .Join-now a{

  color: #4158d0;

  text-decoration: none;

}

form .pass-link a:hover,

form .Join-now a:hover{

  text-decoration: underline;

}

Download source code file :-

DOWNLOAD CODE FILE