Login Form 2

NHT
Posted by NHT 04/06/2021 Thêm Bình Luận
Preview

Nội dung

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form 2</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="#" class="login-form-2">
    <h1>Sign In</h1>
    <div class="input-login">
      <input type="email" required>
      <div class="placeholder">Email / Username</div>
    </div>

    <div class="input-login">
      <input type="password" required>
      <div class="placeholder">Password</div>
    </div>
    
    <div class="checkbox">
      <input type="checkbox">
      <div class="fas fa-check"></div>
      Stay signed in
    </div>

    <button href="#" class="btn fas fa-arrow-right"></button>
  </form>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins",sans-serif;
}

body{
  background-color: #ddd;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-2{
  width: 65%;
  border-radius: 20px;
  max-width: 500px;
  background-color: #fff;
  padding: 50px 40px;
  border-radius: 22px;
}

.login-form-2 h1{
  text-align: center;
  margin: 48px 0;
  font-size: 36px;
  color: #111;
  font-size: 36px;
}

.input-login{
  margin-bottom: 12px;
  position: relative;
}

.input-login input{
  width: 100%;
  height: 70px;
  border: none;
  outline: none;
  background-color: #ededed;
  border-radius: 4px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  padding: 14px 65px 0 10px;
}

.placeholder{
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  line-height: 70px;
  top: 0;
  left: 20px;
  color: #9d9d9d;
  user-select: none;
  pointer-events: none;
  left: 10px;
  top: -16px;
}

.checkbox{
  display: flex;
  align-items: center;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 20px 0;
}

.checkbox input{
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
  background-color: #ededed;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
}

.checkbox .fa-check{
  position: absolute;
  color: #fff;
  font-size: 14px;
  width: 24px;
  text-align: center;
  user-select: none;
  pointer-events: none;
  opacity: 0;
}

.checkbox input:checked{
  background-color: #319AD1;
  transition: all 0.3s linear;
}

.checkbox input:checked + .fa-check{
  opacity: 1;
}

.btn{
  display: block;
  width: 100px;
  height: 45px;
  margin: 40px auto;
  background-color: #2E5D9F;
  color: #fff;
  font-size: 25px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: .3s linear;
}

.btn:hover{
  background-color: #319AD1;
}
Download Source Code