<center><form>
<img id="avatar" src="https://cdn1.savepice.ru/uploads/2020/9/5/369914267d6ca7e30ed349dd60626b30-full.jpg" width="100px;" style="pointer-events:none;-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;"></img>
  <br>
  <h1 style="pointer-events:none;-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;">Log in, please!</h1>
<input id="name" name="username" placeholder="Username or email" autocomplete="off" required></input>
<br>
<br>
<input id="pass" type="password" name="password" placeholder="Password" autocomplete="off" required></input>
<br>
<br>
<div class="privacy" required
><input style="-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;" type="checkbox" id="agree" required>I agree with <a id="link" href="https://www.termsfeed.com/live/2e9762e3-fae3-4180-99f3-04fa6c770978" required>Privacy Policy</a></input>
</div>
<input type="checkbox" class="h-captcha"
         data-sitekey="a9adb41b-c424-41ca-8af3-cc7a0f6f32cf"
         data-callback="onSubmit" required>I'm not a robot!</input>
<p style="-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;">Have not account? Create <a href="https://codepen.io/ExpertManSa/full/LYNeZrL" id="link">here<p>
<a id="fpass" href="https://codepen.io/ExpertManSa/full/WNwXWmp">Forgot password?</a></p>
<br>
<script src="https://hcaptcha.com/1/api.js?hl=en&onload=yourFunction" data-size="invisible" async defer></script>
<div class="h-captcha" data-sitekey="a9adb41b-c424-41ca-8af3-cc7a0f6f32cf" data-size="invisible"></div>
<button id="login" onclick="prompt('Wow,+'this.form.username.value'!')" required>LOG IN</button>
  </form></center>
<script type="text/javascript">
   var yourFunction = function() {
      console.log("hCaptcha is ready.");
      var widgetID = hcaptcha.render('captcha-1', { 'sitekey':'a9adb41b-c424-41ca-8af3-cc7a0f6f32cf' });
   };
</script>
body{
  background-color:#ff0000;
}
form {
  background-color:#ff0000;
  border-radius:5000px;
  font-family:cursive;
  font-style:italic;
  width:400px;
  padding:20px;
  color:white;  
  }
#avatar {
  border-radius:5000px;
  pointer-events:none;
  -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
#name{
  border:none;
  font-size:20px;
  border-radius:5000px;
  border-color:#8b0000;
  background-color:white;
  color:red;
  font-family:cursive;
  font-style:italic;
}
#pass {
  border:none;
  font-size:20px;
  border-radius:5000px;
  border-color:#8b0000;
  background-color:white;
  color:red;
  font-family:cursive;
  font-style:italic;
  }
#link{
  color:white;
}
#fpass{
  color:white;
}
#login {
  background-color:white;
  color:red;
  border:none;
  font-size:30px;
  border-radius:5000px;
  padding:20px;
  border-color:#8b0000;
  
}
#login:hover{
  background-color:red;
  color:white;
}
#agree{
    -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
div.privacy{
    -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.