Untitled

<img class="wave" src="../img/wave.png">
    <div class="container_main">
        <div class="img">
            <img src="../img/bg.svg">
        </div>
        <body class="jumbotron vertical-center">
    <div class="container_main1 justify-content-center align-items-center">
        <div class="row">
            <div class="col-md-12 justify-content-center align-items-center">
                <div class="login-form mt-5">
                    <h3>Forgot Your Password?</h3>
                    <h6>Change your password by following the procedure.</h6>
                    <form class="form" action="../php/change-password.php " method="post" enctype="multipart/form-data" autocomplete="off " id="changePassword">
                    <div id="DialogBox1">

                        <label for="">Enter Your User ID:</label>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Your User ID *" name="userid" id="userID" />
                        </div>
                        <input type="button" value="Confirm" class="btn btn-block btn-primary" onclick="GetQuestion();" />
                    </div>
                     <div class="error-message" id="errorMessage1"></div>
                      <div id="DialogBox2" hidden>

                    <label for="">Please answer the following security question:</br>
                        <div id="question"></div></label>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Answer *" id="answer" />
                    </div>
                    <input type="button" value="Confirm" class="btn btn-block btn-primary" onclick="CheckAnswer();" />
                    <input type="hidden" id="sampleAnswer" />
                    <input type="hidden" id="questionType" />
                    <div class="error-message" id="errorMessage2"></div>
                </div>

                <div id="DialogBox3" hidden>

                    <label for="">Please enter a new password for your account:</label>
                    <div class="form-group">
                        <input type="password" class="form-control " placeholder="Password * " name="password" autocomplete="new-password" id="password" />
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="Confirm Password * " autocomplete="new-password" id="confirmPassword" />
                    </div>
                    <input type="button" value="Confirm" class="btn btn-block btn-primary" onclick="ChangePassword();" />
                <div class="error-message" id="errorMessage3"></div>
                </div>
                 </div>


                </form>
            </div>
        </div>
    </div>