<div class="container-fluid">
            <form id='login' class="sign-box enters" method="post">
                <div class="sign-avatar">
                    <img src="https://i.imgur.com/p1XqpVg.png" alt="">
                </div>
           
            <!-- if($_POST && !$_POST[human]): -->
            <div class="alert alert-warning hidden">No bots allowed</div>
            <!-- elseif($_POST): -->
            <div class="alert alert-danger hidden">Wrong username/password</div>
            <!-- endif; -->
            <div class="form-group">
                <input type="text" name="login" class="form-control" placeholder="username"/>
            </div>
            <div class="form-group">
                <input type="password" name="pass" class="form-control" placeholder="Password"/>
            </div>
            <div class="form-group">
              <a href="#" class="bot"><i class="fa fa-circle"></i><span>I'm not a Bot</span></a>
            </div>
              <p>
            <button type="submit" class="btn btn-info">Sign In</button>
        </p>
        <a href="#" class="reset">Forgot my password</a>
    </form>
</div>

<a href="https://twitter.com/nodws" id="btn-twtr" target="_b">Follow me on Twitter</a>

body,
html {
    overflow: hidden;
    height: 100%;
    background: #e2e7ec url(https://images.unsplash.com/photo-1582139329536-e7284fece509?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MzQ3MTQxMDd8&ixlib=rb-4.0.3&q=85);
  background-size:cover;
    color:#666
}
.container-fluid{
  perspective: 300px;
}
.btn{
  cursor:pointer
}
.sign-box {
    width: 100%;
    max-width: 322px;
    margin: 20vh auto;
    background:rgba(255,255,255,0.7);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.43) 26%,rgba(255,255,255,0.9) 100%);
    border: 1px solid #d8e2e7;
    border-radius: 5px;
    padding: 20px;
    font-size: 1rem;
    position: relative;
    max-height: 600px;
    overflow: hidden;
    opacity: 1;
    text-align: center;
    backdrop-filter:blur(5px);
  transition: .3s cubic-bezier(.3,1.5,.7,1) transform;
}
.enters{
  animation: slidedown 1.84s 1;
}
.sign-box .sign-avatar {
    width: 200px;
    margin: 30px auto;
  filter: grayscale(1)
}
.sign-box .sign-avatar img {
    display: block;
    width: 100%;
}
.sign-box .btn {
    display: block;
    min-width: 108px;
    margin: 16px auto 12px;
    cursor:pointer
}
.sign-box .btn.sign-up {
    margin-top: 18px
}
.sign-box .sign-note {
    text-align: center
}
.sign-box a {
    text-decoration: none;
    color: #0082c6;
    border-bottom: solid 1px transparent
}
.sign-box a:hover {
    border-bottom-color: rgba(0, 130, 198, .5)
}
.sign-box .form-group {
    margin-bottom: 12px;
    zoom: 1
}
.sign-box .form-group:after,
.sign-box .form-group:before {
    content: " ";
    display: table
}
.sign-box .form-group:after {
    clear: both
}
.alert.hidden{
  display:none !important
}

.sign-box .reset {
    font-size: .875rem
}
.sign-box .close {
    position: absolute;
    right: 10px;
    top: 4px;
    opacity: 1;
    color: #c5d6de
}
.sign-box .close:hover {
    color: #00a8ff
}

::-webkit-input-placeholder {
    color: #bbb !important;
}
.bot{
    color: #999 !important;
    border: 0px solid #ddd !important;
    background:#ddd;
    overflow:hidden;
    display:inline-block;
    width:140px;
    white-space:nowrap;
    text-align:left;
    border-radius:20px;
    transition:all 0.2s
}
.bot i {
    font-size: 32px;
    vertical-align: middle;
    transform: rotate(90deg);
    transition: all 0.4s
}
.bot:hover i, .bot:hover span{
    color:#678
}
.bot .fa-check-circle {
    color: #5bc0de !important;
    transform: rotate(0deg);
}
.bot span{
    font-size:14px;
    padding:0  0 0 10px;
    display:inline-block;
    text-shadow:0 1px 0 #fff;
}
.bot.chk{
    width:28px;
    background:#fff
}
.shake {
    transform-origin: center;
    animation-name: shake;
    animation-duration: 400ms;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out
}
@keyframes slidedown{
  0%{ max-height:0px;opacity:0}
  100%{ max-height:600px;opacity:1}
}
@keyframes shake {
      0% {transform: none }
12.5% {transform: translateX(-6px) rotateY(-5deg) }
37.5% {transform: translateX(5px) rotateY(4deg) }
62.5% {transform: translateX(-3px) rotateY(-3deg) }
 87.5% {transform: translateX(2px) rotateY(2deg) }
 100% {transform: none }
}

  
/* follow me @nodws */
#btn-twtr{
  clear:both;
  color:#fff;
  border:2px solid;
  border-radius:3px;
  text-align:center;
  text-decoration:none;
  display:block;
  font-family:sans-serif;
  font-size:14px;
  width:13em;
  padding:5px 10px;
  font-weight:600;
  position:absolute;
  top:90vh;
  right:1vh;
  background:rgba(0,0,0,0.2);
  box-shadow:0 0 0px 3px rgba(0,0,0,0.2);
  opacity:0.6
}#btn-twtr:hover{color:#fff;opacity:1}

//By @nodws
//Feel free to use it on your project, paypal me a beer if you want :D pay@nodws.com

  
$('.bot').on('click',function(e){
    $(this).find('i').addClass('fa-check-circle');
  $(this).addClass('chk');
    $(this).find('i').removeClass('fa-circle');
    $(this).css('pointer-events','none');
  //If you get submits without this input you may add the IP to a blacklist
    $(this).append('<input name=human value=1 type=hidden>');
});
$('#login').on('submit',function(){
  $(this).removeClass('enters'); 
    if($('#login input[name=human]').val()!=1)
    { $('.alert').addClass('hidden');
      $('.alert-warning').removeClass('hidden');
      $('.bot').removeClass('shake'); setTimeout(function(){$('.bot').addClass('shake'); }, 400); return false;}
    else if(!$('#login input[name=login]').val() || !$('#login input[name=pass]').val())
    {  $('.alert').addClass('hidden');
      $('.alert-danger').removeClass('hidden');
     $('#login').addClass('shake'); setTimeout(function(){$('#login').removeClass('shake'); }, 400); return false;}
  else{ //Ajax goes here or remove this if you just want the form to submit
    $('#login').html('Welcome, redirecting...');
    return false;
  }
});