<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="login_page relative"> <div class="container-fluid p-0"> <div class="row g-0"> <div class="col-lg-6"> <div class="image_box"> <img src="https://themes.codezion.com/tf/html/deadfire/assets/images/login_image.jpg" alt="img" class="image-fit"> </div> </div> <div class="col-lg-6 align-self-center"> <div class="section"> <div class="login_box box_wrapper mb-0 mx-auto"> <h1 class="title">Login</h1> <form action="#" method="POST"> <div class="form-group form-floating"> <input type="email" name="email" id="emailId" class="form-control form-control-custom" placeholder="Email I'd" autocomplete="off" required> </div> <div class="form-group form-floating"> <input type="password" name="password" id="password" class="form-control form-control-custom" placeholder="Password" autocomplete="off" required> </div> <div class="row align-items-center justify-content-between"> <div class="col-auto"> <div class="form-group mb-xl-20"> <div class="form-check form-switch lh-normal mb-0"> <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked=""> <label class="form-check-label fw-600 mb-0" for="flexSwitchCheckChecked">Keep me logged in</label> </div> </div> </div> <div class="col-auto"> <div class="form-group mb-xl-20"> <a href="#" class="fw-600">Forgot Password?</a> </div> </div> </div> <button type="submit" class="thm-btn mb-xl-20"> <span>Submit</span> <cite class="liquid"></cite> </button> <div class="text-center"> <p class="mb-0 fw-600">Don't Have an account? <a href="signup.html">Register</a></p> </div> </form> </div> </div> </div> </div> </div> </div>

body { font-family:'Rajdhani', sans-serif; color: #fff; background-color: #080029; font-size: 16px; line-height: 1.8; font-weight: 400; overflow-x: hidden; } .box_wrapper { position: relative; overflow: hidden; margin-bottom: 30px; border-radius: 18px; padding: 30px; border: 6px solid #780cba; background-color: #14074c; } .error_page, .login_page .image_box { height: 100vh; } .login_page .login_box { max-width: 60%; } .login_page .login_box .title { line-height: 1; text-transform: uppercase; font-weight: 600; font-size: 28px; margin-bottom: 20px; } /*error page*/ .thm-btn { position: relative; padding: 5px 15px; display: inline-block; text-decoration: none; text-transform: uppercase; overflow: hidden; border-radius: 50px; border: none; background: #780cba; } .thm-btn span { position: relative; color: #fff; letter-spacing: 4px; z-index: 1; } .relative { position: relative; } .section { position: relative; padding: 40px 0; } .section-padding { position: relative; padding: 80px 0 50px; } .image-fit { width: 100%; height: 100%; object-fit: cover; object-position: center; } .login_page .login_box { max-width: 60%; } .image-fit-contain { width: 100%; height: 100%; object-fit: contain; object-position: center; } .transform-center { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0%, -50%); z-index: 1; } .rotate_elem { animation-name: rotateme; animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: linear; } .slideTop{ animation: slideTop 1s linear infinite; } .form-control-custom { border-radius: 8px; border: 1px solid #d1d1d1; background-color: transparent; padding: 10px 20px; height: auto; transition: 0.3s all; } .form-control-custom, .form-control-custom:focus, .form-control-custom::placeholder { font-size: 14px; font-weight: 600; color: #fff; font-family: 'Rajdhani', sans-serif; } .form-control-custom:focus { box-shadow: none; background-color: transparent; border-color: #780cba; z-index: 1; } .form-control-custom+i { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); color: #d1d1d1; pointer-events: none; } textarea.form-control-custom+i { top: 23px; transform: none; } .form-floating>textarea.form-control { height: auto; } .form-floating>.form-control:focus~label { color: #fff; opacity: 1; }