<?php include 'include/links.php'?> <title>Event Steps</title> <?php include 'include/Donation-header.php'?> <div class="content">
     <!--content inner-->
     <div class="content__inner">
          <div class="container overflow-hidden">
               <!--multisteps-form-->
               <div class="multisteps-form">
                    <!--progress bar-->
                    <div class="row">
                         <div class="col-12 col-lg-12 ml-auto mr-auto mb-4">
                              <div class="multisteps-form__progress progren">
                                   <button class="multisteps-form__progress-btn js-active" type="button" title="User Info"><span>01</span>General Information</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Address"><span>02</span>Registration</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Order Info"><span>03</span>Payment</button>
                                   <button class="multisteps-form__progress-btn" type="button" title="Comments"><span>04</span>Thank you </button>
                               
                              </div>
                         </div>
                    </div>
                    <!--form panels-->
                    <div class="row">
                         <div class="col-12 col-lg-12 m-auto">
                              <form class="multisteps-form__form">
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel   js-active" data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                            <div class="DonationMain">
                                             <h2>ASL Classes info</h2>

      
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="title">Title of The Form*</label>
                                                                    <input type="text" id="title" name="title" value="ASL classes Membership" required>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6">
                                                                <div class="form-group">
                                                                    <label for="language">Language*</label>
                                                                    <select id="language" name="language" required>
                                                                        <option value="en">En</option>
                                                                        <option value="es">Es</option>
                                                                        <!-- More language options can be added here -->
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <!-- <div class="form-group flexj">
                                                            <input type="checkbox" id="autoTaxReceipts" name="autoTaxReceipts" checked>
                                                            <label for="autoTaxReceipts">Generate Automatic Tax Receipts</label>
                                                            <a  href="KNOXVILLE-Invoice.pdf" target="_blank" id="invoicePreview">Invoice Preview <i class="fa-regular fa-eye"></i></a>
                                                        </div> -->

                                                        <!-- <div class="form-group">
                                                            <p class="info-text"><img src="images/er.png" alt=""><span>It is important to explain what you will do
                                                                    with the donation. It is proven that donations increase by 120% if the donor knows the exact
                                                                    purpose of their donation.</span></p>
                                                        </div> -->

                                                        <div class="form-group">
                                                            <label for="description">Description</label>
                                                            <textarea id="description" name="description" rows="5"></textarea>
                                                        </div>
                                            </div>

                                                   

                                             <div class="button-row d-flex justify-content-end">
                                                  <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel" data-animation="scaleIn">
                                        <div class="multisteps-form__content donationForm DonationMain ">
                                                <div class="DonationMain">
                                                <h2>ASL Class Registration Form</h2>
                                                    <div id="donationForm Formne">
                                                            <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">First Name*</label>
                                                                            <input type="text" id="title" name="name" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">Last Name*</label>
                                                                            <input type="text" id="title" name="name" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">Phone*</label>
                                                                            <input type="text" id="title" name="phone" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">How did you hear about us?*</label>
                                                                            <input type="text" id="title" name="about" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">Email*</label>
                                                                            <input type="text" id="title" name="email" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label for="title">Please re-enter Email*</label>
                                                                            <input type="text" id="title" name="email" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="title">Street Address*</label>
                                                                            <input type="text" id="title" name="address" placeholder="" required>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-4">
                                                                        <div class="form-group gha">
                                                                            <label for="title">City*</label>
                                                                            <input type="text" id="rate" name="name" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group">
                                                                            <label for="exampleFormControlSelect1">State*</label>
                                                                            <select class="form-select" aria-label="Default select example">
                                                                                <option selected>Open this select menu</option>
                                                                                <option value="United State">United State</option>
                                                                                <option value="United kingdom">United kingdom</option>
                                                                                <option value="Australia">Australia</option>
                                                                                <option value="france">france</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group">
                                                                            <label for="title">Zip/Postal Code*</label>
                                                                            <input type="text" id="title" name="name" required>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="texth">
                                                                            <h6>I am*</h6>
                                                                        </div>
                                                                        <div class="mainfl">
                                                                            <div class="flex-alla">
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault1">
                                                                                        <label class="form-check-label" for="flexRadioDefault1"> Deaf </label>
                                                                                </div>
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault2">
                                                                                        <label class="form-check-label" for="flexRadioDefault2"> Hard of Hearing </label>
                                                                                </div>
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault3">
                                                                                        <label class="form-check-label" for="flexRadioDefault3"> DeafBlind </label>
                                                                                </div>
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault4">
                                                                                        <label class="form-check-label" for="flexRadioDefault4"> DeafDisabled </label>
                                                                                </div>
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault5">
                                                                                        <label class="form-check-label" for="flexRadioDefault5">Hearing </label>
                                                                                </div>
                                                                                <div class="form-group form-check">
                                                                                        <input class="form-check-input" type="radio" name="" id="flexRadioDefault6">
                                                                                        <label class="form-check-label" for="flexRadioDefault6"> N/A </label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <!-- <div class="event-date">
                                                                    <h2>Event location</h2>
                                                                    <div class="form-group form-check">
                                                                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                                                        <label class="form-check-label" for="exampleCheck1">Give the option to participants to add a donation for your organization</label>
                                                                    </div>
                                                            </div> -->
                                                            <!-- <div class="event-date">
                                                                    <h2>Questions for the buyer</h2>
                                                                    <h6>These questions will only be asked once. By default, we ask email, full name, state, and country.</h6>
                                                            </div> -->
                                                            <!-- <div class="row">
                                                                    <div class="col-md-4">
                                                                        <div class="form-group ">
                                                                            <label for="title">Email*</label>
                                                                            <input type="text" name="email" placeholder="johnsmith123@gmail.com" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group ">
                                                                            <label for="title">First name*</label>
                                                                            <input type="text" name="text" placeholder="john" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group ">
                                                                            <label for="title">Last name*</label>
                                                                            <input type="text" name="text" placeholder="Smith" required>
                                                                        </div>
                                                                    </div>
                                                            </div> -->
                                                            <!-- <div class="row">
                                                                    <div class="col-md-4">
                                                                        <div class="form-group ">
                                                                            <label for="title">Country*</label>
                                                                            <input type="text" name="email" placeholder="USA" required>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group">
                                                                                <label for="exampleFormControlSelect1">State*</label>
                                                                                <select class="form-select" aria-label="Default select example">
                                                                                    <option selected>Open this select menu</option>
                                                                                    <option value="United State">United State</option>
                                                                                    <option value="United kingdom">United kingdom</option>
                                                                                    <option value="Australia">Australia</option>
                                                                                    <option value="france">france</option>
                                                                                </select>
                                                                            </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-group ">
                                                                            <label for="title">Address</label>
                                                                            <input type="text" name="text" required>
                                                                        </div>
                                                                    </div>
                                                            </div> -->
                                                            <div class="event-date selection">
                                                                    <h2>Class Selection</h2>
                                                                    <h6>All classes take place from 6:30-8pm Central, unless otherwise noted.</h6>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="event-date">
                                                                            <h4>What Level of ASL Class are you interested in?*</h4>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-2">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                            <label class="form-check-label" for="flexCheckDefault"> ASL 101 </label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                            <label class="form-check-label" for="flexCheckDefault"> ASL 102 (Pre-Requisite: ASL 101) </label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-5">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                            <label class="form-check-label" for="flexCheckDefault"> ASL 103 (Pre-Requisite: ASL 101, 102) </label>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row marg">
                                                                    <div class="col-md-5">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                            <label class="form-check-label" for="flexCheckDefault"> ASL 104 (Pre-Requisite: ASL 101, 102, 103) </label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-5">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                                                            <label class="form-check-label" for="flexCheckDefault"> ASL 101-104 (See All Adult Classes) </label>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="form-group Grouptotal ">
                                                                            <label for="title">How much TOTAL for the Classes Signed Up for*</label>
                                                                            <input type="text" name="text" placeholder="" required>
                                                                            <label for="title">Please enter a number (without decimals).</label>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                            <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="Donationprice Custombox">
                                                                            <h2>Demographic Information</h2>
                                                                            <p> Why do we ask for this information? Our organizational funding depends upon the clients that we serve, and having this information helps us provide transparency and accountability to our funders. We appreciate your help! </p>
                                                                            <div class="fombox">
                                                                                <div class="row">
                                                                                        <div class="col-md-8">
                                                                                            <div class="form-group ">
                                                                                                <label for="title">Birth of date*</label>
                                                                                                <input type="text" name="text" placeholder="" required>
                                                                                            </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="row">
                                                                                        <div class="col-md-4">
                                                                                        <div class="form-group">
                                                                                                    <label for="exampleFormControlSelect1">State*</label>
                                                                                                    <select class="form-select" aria-label="Default select example">
                                                                                                       
                                                                                                        <option value="">English</option>
                                                                                                        <option value="English USA">English USA</option>
                                                                                                        <option value="English  UK">English  UK</option>
                                                                                                      
                                                                                                    </select>
                                                                                                </div>
                                                                                            
                                                                                        </div>
                                                                                        <div class="col-md-4">
                                                                                            <div class="form-group ">
                                                                                                <label for="title">Last name*</label>
                                                                                                <input type="text" name="text" placeholder="" required>
                                                                                            </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="row">
                                                                                        <div class="col-md-4">
                                                                                            <div class="form-group racetext">
                                                                                                <label for="title">Race (please select all that apply)</label>
                                                                                                <select class="form-select" id="exampleFormControlSelect1">
                                                                                                    <option value="">select</option>
                                                                                                    <option value="">select </option>
                                                                                                    <option value="">select </option>
                                                                                                    <option value="">select </option>
                                                                                                    <option value="">select </option>
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-4">
                                                                                            <div class="form-group ">
                                                                                                <label for="title">Marital Status*</label>
                                                                                                <select class="form-select" id="exampleFormControlSelect1">
                                                                                                    <option value="">Option</option>
                                                                                                    <option value="">Option 01</option>
                                                                                                    <option value="">Option 01</option>
                                                                                                    <option value="">Option 01</option>
                                                                                                    <option value="">Option 01</option>
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                            <div class="row">
                                                                                <div class="col-md-8">
                                                                                        <div class="texth">
                                                                                            <h6>Veteran Status*</h6>
                                                                                        </div>
                                                                                        <div class="mainfl">
                                                                                            <div class="flex-alla">
                                                                                                <div class="form-group form-check">
                                                                                                    <input class="form-check-input" type="radio" name="" id="flexRadioDefault8">
                                                                                                    <label class="form-check-label" for="flexRadioDefault4"> I am a veteran or active service member </label>
                                                                                                </div>
                                                                                                <div class="form-group form-check">
                                                                                                    <input class="form-check-input" type="radio" name="" id="flexRadioDefault9">
                                                                                                    <label class="form-check-label" for="flexRadioDefault5"> I am not a veteran </label>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                </div>
                                                        
                                                </div>
                                             <div class="button-row d-flex">
                                                  <button class="btn BackButon js-btn-prev" type="button" title="Prev">BACK</button>
                                                  <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                             </div>
                                        </div>
                                   </div>
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel " data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div class="DonationMain">
                                                <h3>Foundation</h3>
                                                <h2>Donate to make a difference</h2>
                                             </div>
                                             <div class="Donationprice">
           
           <div class="DOnate-Second donationForm">
                 
                   <div class="row">
                       <div class="col-md-12">
                          
                           <div class="form-group">
                              
                               <h4>Your Details</h4>
                           </div>
                       </div>
                   </div>
                  
                  

                  

                 
                   <div class="summary-container">

                       <div class="summary-item">
                          <div class="itemleft">
                            <p><b>Order</b></p>
                            <p>Deaf Disabled</p>
                            <p>ASL 104 (Pre-Requisite: ASL 101, 102, 103) </p>
                          </div>
                           <a href="#">$500.00</a>
                       </div>
                   </div>
                   <h2 class="Customh4">Payment Method</h2>
                   <div class="payment-container">

                       <div class="cards">
                           <img src="images/card-1.png" alt="Visa">
                           <img src="images/card-2.png" alt="MasterCard">
                           <img src="images/card-3.png" alt="PayPal">
                           <img src="images/card-4.png" alt="Skrill">
                           <img src="images/card-5.png" alt="Google Pay">
                           <img src="images/card-6.png" alt="Google Pay">
                           <img src="images/card-7.png" alt="Google Pay">
                       </div>

                       
                           <div class="row">
                               <div class="col-md-12">
                                   <div class="form-group">
                                       <label for="title">Card Number</label>
                                       <input type="text" id="title" name="name" placeholder="1234 4567 8900 1480"
                                           required>
                                   </div>
                               </div>
                           </div>
                           <div class="row">
                               <div class="col-md-6">
                                   <div class="form-group">
                                       <label for="title">Expiration Date</label>
                                       <input type="text" id="title" name="name" placeholder="MM/YY" required>
                                   </div>
                               </div>

                               <div class="col-md-6">
                                   <div class="form-group">
                                       <label for="title">Security Code </label>
                                       <input type="text" id="title" name="name" placeholder="Security Code (CVC)"
                                           required>
                                   </div>
                               </div>
                           </div>

                           <a href="event-step-05.php" class="btn btn-Custom">Donate</a>
                      

                       <p class="footer-text">
                           This site is protected by reCAPTCHA, their <a href="#">Privacy Policy</a> and <a href="#">Terms
                               of Service</a> apply. By confirming your payment, you agree to Knoxville <a
                               href="#"> Privacy Policy.</a>
                       </p>
                   </div>



              
           </div>
   </div>
                                             <div class="row">
                                                  <div class="button-row d-flex  col-12">
                                                       <button class="btn BackButon js-btn-prev" type="button" title="Prev">BACK</button>
                                                       <button class="btn next-btn  js-btn-next" type="button" title="Next">Next</button>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                                 
                                   <!--single form panel-->
                                   <div class="multisteps-form__panel DonationMain " data-animation="scaleIn">
                                        <div class="multisteps-form__content">
                                             <div class="Donationprice">
                                                  <div class="ThankyouPage">
                                                       <figure>
                                                            <img src="images/thank.png" alt="">
                                                       </figure>
                                                       <h5>Thank You! </h2>
                                                            <p> Your Payment have been received Successfully! </p>
                                                            <div class="buttonflex">
                                                                 <a href="step-02.php" class="btn next-btn">Back Home</a>
                                                            </div>
                                                            <h6>if You have any issues <a href="">contact us! </a>
                                                            </h6>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </form>
                         </div>
                    </div>
               </div>
          </div>
     </div>
</div> <?php include 'include/footer.php'?>