jmnyarega/Grammarly-login.html

## Grammarly-login.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
  <title>Document</title>
  <style>
    :root {
      --light: white;
      --dark: rgba(0,0,0, 0.8);
      --gray: rgba(0,0,0, 0.6);
      --fw-light: light;
      --fw-normal: normal;
      --fw-bold: bold;
      --theme: RGB(14, 246, 165);
      --spacer: 1.5rem;
    }
    *,
    *::after,
    *::before {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 1.125rem;
    }
    .container {
      height: fit-content;
      width: 40vw;
      border: 1px solid #dcdcdc;
      border-radius: .5em;
      align-content: center;
      margin: 20px auto;
      padding: var(--spacer);
      position: relative;
    }
    .container::after {
      content: "";
      height: 5px;
      width: 100%;
      top: 0;
      left: 0;
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
      background-image: linear-gradient(to left, var(--theme), RGB(0, 72, 236));
      position: absolute;
    }
    .login-top {
      text-align: center;
      padding: 0 5rem;
      margin: var(--spacer);
    }
    .login-text {
      color: var(--gray);
      margin: 0 0 var(--spacer) 0;
      line-height: 1.5;
    }
    .title {
      color: var(--dark);
      margin: 0 0 var(--spacer) 0;
    }
    .login-top img {
      border-radius: 50%;
      width: 100px;
      height: 150px;
      object-fit: cover;
    }

    .login-bottom {
      --spacer: 0.8rem;
      text-align: center;
    }

    input[type=email],
    input[type=password] {
      border: none;
      border: 1px solid #dcdcdc;
      border-radius: 0.5em;
      width: 100%;
      height: 2.5rem;
      padding: var(--spacer);
      margin: var(--spacer) 0;
    }

    input[type=email]::placeholder,
    input[type=password]::placeholder {
      color: #8c8c8c;
    }

    input[type=email]:focus::placeholder,
    input[type=password]:focus::placeholder {
      color: #dcdcdc;
    }

    input[type=email]:invalid {
      border: 1px solid red;
      border-radius: 0.5em;
      box-shadow: 0 0 0 0 red;
    }

    .terms-text {
      line-height: 1.5;
      color: var(--gray);
      margin: 0 0 var(--spacer) 0;
    }

    .login-help {
      color: var(--gray);
    }

    .login-button {
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      width: 100%;
      padding: 0.5rem var(--spacer);
      border: 0;
      background-color: var(--theme);
      color: white;
      border-radius: 0.5em;
      cursor: pointer;
      margin: 0 0 var(--spacer) 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="login-top">
      <h2 class="title">Member Login</h2>
      <p class="login-text">You already have a Grammarly account, please login in with your password.</p>
      <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="AV">
    </div>
    <div class="login-bottom">
      <form action="" class="login-form">
        <input type="email" placeholder="Email" >
        <input type="password" placeholder="password">
        <p class="terms-text">This site protected by reCAPTCHA and the Google
          <a href="" class="">Privacy Policy</a> and
          <a href="" class="">Terms of Service</a> apply.
        </p>
        <button class="login-button">Sign in</button>
      </form>
      <a href="" class="login-help"> Can't log in?</a>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
	<title>Document</title>
	<style>
	:root {
	--light: white;
	--dark: rgba(0,0,0, 0.8);
	--gray: rgba(0,0,0, 0.6);
	--fw-light: light;
	--fw-normal: normal;
	--fw-bold: bold;
	--theme: RGB(14, 246, 165);
	--spacer: 1.5rem;
	}
	*,
	*::after,
	*::before {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	}
	body {
	font-family: 'Roboto', sans-serif;
	font-size: 1.125rem;
	}
	.container {
	height: fit-content;
	width: 40vw;
	border: 1px solid #dcdcdc;
	border-radius: .5em;
	align-content: center;
	margin: 20px auto;
	padding: var(--spacer);
	position: relative;
	}
	.container::after {
	content: "";
	height: 5px;
	width: 100%;
	top: 0;
	left: 0;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	background-image: linear-gradient(to left, var(--theme), RGB(0, 72, 236));
	position: absolute;
	}
	.login-top {
	text-align: center;
	padding: 0 5rem;
	margin: var(--spacer);
	}
	.login-text {
	color: var(--gray);
	margin: 0 0 var(--spacer) 0;
	line-height: 1.5;
	}
	.title {
	color: var(--dark);
	margin: 0 0 var(--spacer) 0;
	}
	.login-top img {
	border-radius: 50%;
	width: 100px;
	height: 150px;
	object-fit: cover;
	}

	.login-bottom {
	--spacer: 0.8rem;
	text-align: center;
	}

	input[type=email],
	input[type=password] {
	border: none;
	border: 1px solid #dcdcdc;
	border-radius: 0.5em;
	width: 100%;
	height: 2.5rem;
	padding: var(--spacer);
	margin: var(--spacer) 0;
	}

	input[type=email]::placeholder,
	input[type=password]::placeholder {
	color: #8c8c8c;
	}

	input[type=email]:focus::placeholder,
	input[type=password]:focus::placeholder {
	color: #dcdcdc;
	}

	input[type=email]:invalid {
	border: 1px solid red;
	border-radius: 0.5em;
	box-shadow: 0 0 0 0 red;
	}

	.terms-text {
	line-height: 1.5;
	color: var(--gray);
	margin: 0 0 var(--spacer) 0;
	}

	.login-help {
	color: var(--gray);
	}

	.login-button {
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	width: 100%;
	padding: 0.5rem var(--spacer);
	border: 0;
	background-color: var(--theme);
	color: white;
	border-radius: 0.5em;
	cursor: pointer;
	margin: 0 0 var(--spacer) 0;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="login-top">
	<h2 class="title">Member Login</h2>
	<p class="login-text">You already have a Grammarly account, please login in with your password.</p>
	<img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="AV">
	</div>
	<div class="login-bottom">
	<form action="" class="login-form">
	<input type="email" placeholder="Email" >
	<input type="password" placeholder="password">
	<p class="terms-text">This site protected by reCAPTCHA and the Google
	<a href="" class="">Privacy Policy</a> and
	<a href="" class="">Terms of Service</a> apply.
	</p>
	<button class="login-button">Sign in</button>
	</form>
	<a href="" class="login-help"> Can't log in?</a>
	</div>
	</div>
	</body>

	</html>