Form Login-Register is displayed in Popup format
Minimum 8 characters with 1 number and 1 letter
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login-register-modal"> Login </button> <div class="modal fade login-register login-register-modal" id="login-register-modal" tabindex="-1" role="dialog" aria-labelledby="login-register-modal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered mxw-571" role="document"> <div class="modal-content"> <div class="modal-header border-0 p-0"> <div class="nav nav-tabs row w-100 no-gutters" id="myTab" role="tablist"> <a class="nav-item col-sm-3 ml-0 nav-link pr-6 py-4 pl-9 active fs-18" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a> <a class="nav-item col-sm-3 ml-0 nav-link py-4 px-6 fs-18" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">Register</a> <div class="nav-item col-sm-6 ml-0 d-flex align-items-center justify-content-end"> <button type="button" class="close m-0 fs-23" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> </div> </div> <div class="modal-body p-4 py-sm-7 px-sm-8"> <div class="tab-content shadow-none p-0" id="myTabContent"> <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"> <form class="form"> <div class="form-group mb-4"> <label for="username" class="sr-only">Username</label> <div class="input-group input-group-lg"> <div class="input-group-prepend "> <span class="input-group-text bg-gray-01 border-0 text-muted fs-18" id="inputGroup-sizing-lg"> <i class="far fa-user"></i></span> </div> <input type="text" class="form-control border-0 shadow-none" id="username" placeholder="Username / Your email" name="username"> </div> </div> <div class="form-group mb-4"> <label for="password" class="sr-only">Password</label> <div class="input-group input-group-lg"> <div class="input-group-prepend "> <span class="input-group-text bg-gray-01 border-0 text-muted fs-18"> <i class="far fa-lock"></i> </span> </div> <input type="text" class="form-control border-0 shadow-none" id="password" name="password" placeholder="Password"> <div class="input-group-append"> <span class="input-group-text bg-gray-01 border-0 text-body fs-18"> <i class="far fa-eye-slash"></i> </span> </div> </div> </div> <div class="d-flex mb-4"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="remember-me" name="remember-me"> <label class="form-check-label" for="remember-me"> Remember me </label> </div> <a href="#" class="d-inline-block ml-auto text-orange fs-15"> Lost password? </a> </div> <div class="d-flex p-2 border re-capchar align-items-center mb-4"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="verify" name="verify"> <label class="form-check-label" for="verify"> I'm not a robot </label> </div> <a href="#" class="d-inline-block ml-auto"> <img src="../../images/re-captcha.png" alt="Re-capcha"> </a> </div> <button type="submit" class="btn btn-primary btn-lg btn-block">Log in</button> </form> <div class="divider text-center my-2"> <span class="px-4 bg-white lh-17 text"> or continue with </span> </div> <div class="row no-gutters mx-n2"> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block facebook text-white px-0"> <i class="fab fa-facebook-f"></i> </a> </div> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block google px-0"> <img src="../../images/google.png" alt="Google"> </a> </div> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block twitter text-white px-0"> <i class="fab fa-twitter"></i> </a> </div> </div> </div> <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab"> <form class="form"> <div class="form-group mb-4"> <label for="full-name" class="sr-only">Full name</label> <div class="input-group input-group-lg"> <div class="input-group-prepend "> <span class="input-group-text bg-gray-01 border-0 text-muted fs-18"> <i class="far fa-address-card"></i></span> </div> <input type="text" class="form-control border-0 shadow-none" id="full-name" name="full-name" placeholder="Full name"> </div> </div> <div class="form-group mb-4"> <label for="username01" class="sr-only">Username</label> <div class="input-group input-group-lg"> <div class="input-group-prepend "> <span class="input-group-text bg-gray-01 border-0 text-muted fs-18"> <i class="far fa-user"></i></span> </div> <input type="text" class="form-control border-0 shadow-none" id="username01" name="user-name" placeholder="Username / Your email"> </div> </div> <div class="form-group mb-4"> <label for="password01" class="sr-only">Password</label> <div class="input-group input-group-lg"> <div class="input-group-prepend "> <span class="input-group-text bg-gray-01 border-0 text-muted fs-18"> <i class="far fa-lock"></i> </span> </div> <input type="text" class="form-control border-0 shadow-none" id="password01" name="password" placeholder="Password"> <div class="input-group-append"> <span class="input-group-text bg-gray-01 border-0 text-body fs-18"> <i class="far fa-eye-slash"></i> </span> </div> </div> <p class="form-text">Minimum 8 characters with 1 number and 1 letter</p> </div> <button type="submit" class="btn btn-primary btn-lg btn-block">Sign up</button> </form> <div class="divider text-center my-2"> <span class="px-4 bg-white lh-17 text"> or continue with </span> </div> <div class="row no-gutters mx-n2"> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block facebook text-white px-0"> <i class="fab fa-facebook-f"></i> </a> </div> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block google px-0"> <img src="../../images/google.png" alt="Google"> </a> </div> <div class="col-4 px-2 mb-4"> <a href="#" class="btn btn-lg btn-block twitter text-white px-0"> <i class="fab fa-twitter"></i> </a> </div> </div> <div class="mt-2">By creating an account, you agree to HomeID <a class="text-heading" href="#"><u>Terms of Use</u> </a> and <a class="text-heading" href="#"><u>Privacy Policy</u></a>. </div> </div> </div> </div> </div> </div> </div>