<div class="component--login">
	<div class="login-card">
		<header>
			<h5>Welcome Back !</h5>
			<p>Sign in to continue</p>
		</header>
		<div class="login-content">
			<div class="avatar">
				<img src="img/avatar.jpg" alt="">
			</div>
			<form action="" method="post">
				<ul>
					<li>
						<label class="title" for="username">Username</label>
						<input type="text" id="username" placeholder="Enter username">
					</li>
					<li>
						<label class="title" for="password">Password</label>
						<input type="password" id="password" placeholder="Enter password">
					</li>
					<li>
						<label class="checkbox">
							<input type="checkbox" name="remember_me" value="1">
							<span class="checkbox"><img src="img/icon-check.svg" alt=""></span>
							<span class="text">Remember me</span>
						</label>
					</li>
					<li>
						<button type="submit">Log In</button>
						<a href="#" class="forgot-password">
							<img src="img/icon-lock.svg" alt="">
							Forgot your password
						</a>
					</li>
				</ul>
			</form>
		</div>
	</div>
	<div class="login-text">
		<p>
			Don't have an account ? <a href="#">Signup now</a>
		</p>
		<p>
			&copy; 2020 Crafted and designed by 10ursabanoglu. ?
		</p>
	</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Poppins', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F8F8FB;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.component {
  &--login {
    $primary-color: #556EE6;
    width: 451px;

    .login-card {
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 12px 24px 0 rgba(#12263F, .05);
      overflow: hidden;
      margin-bottom: 36px;

      header {
        background: rgba($primary-color, .25) url(../img/login-image.svg) no-repeat right;
        height: 112px;
        padding: 24px;
        color: $primary-color;

        h5 {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 8px;
        }

        p {
          font-size: 13px;
        }
      }

      .login-content {
        padding: 0 28px 24px;

        .avatar {
          position: relative;
          top: -24px;
          margin-bottom: 8px;

          img {
            border: 3px solid #F8F8FB;
            width: 72px;
            height: 72px;
            border-radius: 50%;
          }
        }

        ul {
          li {
            margin-bottom: 16px;

            &:last-child {
              margin-bottom: 0;
            }

            .title {
              display: block;
              color: #495057;
              font-size: 13px;
              font-weight: 500;
              margin-bottom: 8px;
            }

            input {
              width: 100%;
              height: 36px;
              border-radius: 4px;
              border: 1px solid #CED4DA;
              padding: 0 12px;
              font-size: 13px;
              transition: 300ms border-color;

              &:focus {
                border-color: $primary-color;
                caret-color: $primary-color;
              }

              &::placeholder {
                color: #495057;
              }
            }

            > .checkbox {
              display: flex;
              align-items: center;
              cursor: pointer;

              .checkbox {
                width: 16px;
                height: 16px;
                border-radius: 4px;
                border: 1px solid #ADB5BD;
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 300ms background-color, 300ms border-color;

                img {
                  height: 8px;
                }
              }

              .text {
                font-size: 13px;
                color: #495057;
                font-weight: 500;
              }


              input {
                display: none;

                &:checked + .checkbox {
                  background: $primary-color;
                  border-color: $primary-color;
                }
              }
            }

            button {
              height: 36px;
              border-radius: 4px;
              background: $primary-color;
              color: #fff;
              width: 100%;
              cursor: pointer;
              font-size: 13px;
              transition: 300ms background-color;

              &:hover {
                background: darken($primary-color, 5%);
              }
            }

            .forgot-password {
              display: flex;
              align-items: center;
              font-size: 13px;
              color: #74788D;
              justify-content: center;
              margin-top: 24px;
              transition: 300ms color;

              &:hover {
                color: darken(#74788D, 30%);
              }

              img {
                margin-right: 8px;
              }
            }
          }
        }
      }
    }

    .login-text {
      p {
        font-size: 13px;
        color: #495057;
        margin-bottom: 16px;
        text-align: center;

        a {
          color: $primary-color;
          font-weight: 500;

          &:hover {
            text-decoration: underline;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}