<?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>Donation </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>General Campaign Info</h2>
                    <div id="donationForm">
                      <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="Donate To Make A Difference" 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="7"></textarea>
                      </div>
                    </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="tabs_area">
    <h3 class="customh4 mt-0">Suggested donation amounts</h3>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
         <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
        </li>
            <!-- <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">One Time</button>
            </li> -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Monthly</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Quarterly</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="nav-annual-tab" data-bs-toggle="tab" data-bs-target="#nav-annual" type="button" role="tab" aria-controls="nav-annual" aria-selected="false">Annually</button>
            </li>
         </ul>
    </div>
    <div class="Donationprice Donats">
        <div class="tab-content" id="myTabContent">
         
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="Donatexl Class_box">
                    <div class="mainbox-d">
                              
                              <label class="donation-level">
                                    <input type="radio" name="donation" value="500">
                                    <div class="label-content">
                                      <div class="donation-amount">$500</div>
                                      <div class="donation-tier">Diamond</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="1000">
                                    <div class="label-content">
                                      <div class="donation-amount">$1000</div>
                                      <div class="donation-tier">Philanthropist</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="25">
                                    <div class="label-content">
                                      <div class="donation-amount">$25</div>
                                      <div class="donation-tier">Bronze</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="50">
                                    <div class="label-content">
                                      <div class="donation-amount">$50</div>
                                      <div class="donation-tier">Silver</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="100">
                                    <div class="label-content">
                                      <div class="donation-amount">$100</div>
                                      <div class="donation-tier">Gold</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="250">
                                    <div class="label-content">
                                      <div class="donation-amount">$250</div>
                                      <div class="donation-tier">Platinum</div>
                                    </div>
                                  </label>
                    
                    </div>

                  
                        <div class="DOnate-Second">
                            <div id="donationForm">
                                  <!-- <div class="row">
                                      <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="title">Custom Donation</label>
                                                <input type="text" id="title" name="title" placeholder="$0.00" required="">
                                            </div>
                                        
                                          </div>
                                  </div> -->
                            </div>
                        </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="Donatexl Class_box">
                <div class="mainbox-d">
                              
                              <label class="donation-level">
                                    <input type="radio" name="donation" value="500">
                                    <div class="label-content">
                                      <div class="donation-amount">$500</div>
                                      <div class="donation-tier">Diamond</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="1000">
                                    <div class="label-content">
                                      <div class="donation-amount">$1000</div>
                                      <div class="donation-tier">Philanthropist</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="25">
                                    <div class="label-content">
                                      <div class="donation-amount">$25</div>
                                      <div class="donation-tier">Bronze</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="50">
                                    <div class="label-content">
                                      <div class="donation-amount">$50</div>
                                      <div class="donation-tier">Silver</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="100">
                                    <div class="label-content">
                                      <div class="donation-amount">$100</div>
                                      <div class="donation-tier">Gold</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="250">
                                    <div class="label-content">
                                      <div class="donation-amount">$250</div>
                                      <div class="donation-tier">Platinum</div>
                                    </div>
                                  </label>
                    
                    </div>
                    <div class="mainbox-d">
                              
                              <label class="donation-level">
                                    <input type="radio" name="donation" value="500">
                                    <div class="label-content">
                                      <div class="donation-amount">$500</div>
                                      <div class="donation-tier">Diamond</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="1000">
                                    <div class="label-content">
                                      <div class="donation-amount">$1000</div>
                                      <div class="donation-tier">Philanthropist</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="25">
                                    <div class="label-content">
                                      <div class="donation-amount">$25</div>
                                      <div class="donation-tier">Bronze</div>
                                    </div>
                                  </label>
                                
                    
                    </div>
                    </div>


            </div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">

                        <div class="Donatexl Class_box">
                        <div class="mainbox-d">
                              
                              <label class="donation-level">
                                    <input type="radio" name="donation" value="500">
                                    <div class="label-content">
                                      <div class="donation-amount">$500</div>
                                      <div class="donation-tier">Diamond</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="1000">
                                    <div class="label-content">
                                      <div class="donation-amount">$1000</div>
                                      <div class="donation-tier">Philanthropist</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="25">
                                    <div class="label-content">
                                      <div class="donation-amount">$25</div>
                                      <div class="donation-tier">Bronze</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="50">
                                    <div class="label-content">
                                      <div class="donation-amount">$50</div>
                                      <div class="donation-tier">Silver</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="100">
                                    <div class="label-content">
                                      <div class="donation-amount">$100</div>
                                      <div class="donation-tier">Gold</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="250">
                                    <div class="label-content">
                                      <div class="donation-amount">$250</div>
                                      <div class="donation-tier">Platinum</div>
                                    </div>
                                  </label>
                    
                    </div>
                                </div>

                   
                    
                </div>
                <div class="tab-pane fade" id="nav-annual" role="tabpanel" aria-labelledby="nav-annual-tab">
                        <div class="Donatexl Class_box">
                        <div class="mainbox-d">
                              
                              <label class="donation-level">
                                    <input type="radio" name="donation" value="500">
                                    <div class="label-content">
                                      <div class="donation-amount">$500</div>
                                      <div class="donation-tier">Diamond</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="1000">
                                    <div class="label-content">
                                      <div class="donation-amount">$1000</div>
                                      <div class="donation-tier">Philanthropist</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="25">
                                    <div class="label-content">
                                      <div class="donation-amount">$25</div>
                                      <div class="donation-tier">Bronze</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="50">
                                    <div class="label-content">
                                      <div class="donation-amount">$50</div>
                                      <div class="donation-tier">Silver</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="100">
                                    <div class="label-content">
                                      <div class="donation-amount">$100</div>
                                      <div class="donation-tier">Gold</div>
                                    </div>
                                  </label>
                                  <label class="donation-level">
                                    <input type="radio" name="donation" value="250">
                                    <div class="label-content">
                                      <div class="donation-amount">$250</div>
                                      <div class="donation-tier">Platinum</div>
                                    </div>
                                  </label>
                    
                    </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 donationForm DonationMain ">
                  <div class="DonationMain">
                    <h3>Foundation</h3>
                    <h2>Donate to make a difference</h2>
                    <div class="Donationprice">
                      <div class="Donatexl Class_box">
                        <ul>
                          <li>
                            <a href="javascripts:;">
                              <h4>$25</h4>
                              <h6>Bronze</h6>
                            </a>
                          </li>
                          <li>
                            <a href="javascripts:;">
                              <h4>$50</h4>
                              <h6>Silver</h6>
                            </a>
                          </li>
                          <li>
                            <a href="javascripts:;">
                              <h4>$100</h4>
                              <h6>Gold</h6>
                            </a>
                          </li>
                          <li>
                            <a href="javascripts:;">
                              <h4>$250</h4>
                              <h6>Platinum</h6>
                            </a>
                          </li>
                          <li>
                            <a href="javascripts:;">
                              <h4>$500</h4>
                              <h6>Diamond</h6>
                            </a>
                          </li>
                          <li>
                            <a href="javascripts:;">
                              <h4>$1000</h4>
                              <h6>Philanthropist</h6>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="DOnate-Second">
                        <div id="donationForm">
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label for="title">Custom Donation</label>
                                <input type="text" id="title" name="title" placeholder="$0.00" required>
                              </div>
                              <div class="form-group">
                                <p class="textnew">
                                  <img src="images/err.png" alt="">
                                  <span>
                                    <strong>Did you know?</strong> When you give on any other platform, up to 10% of your gift is used to cover fees. We choose to fundraise on Knoxville to receive 100% of your gift. </span>
                                </p>
                                <h4>Your Details</h4>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-12">
                              <div class="form-group">
                                <label for="title">Email*</label>
                                <input type="text" id="title" name="name" required>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label for="title">Last name*</label>
                                <input type="text" id="title" name="name" 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" required>
                              </div>
                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-6">
                              <div class="form-group">
                                <label for="exampleFormControlSelect1">Country*</label>
                                <select class="form-select" id="exampleFormControlSelect1">
                                  <option value="">United State</option>
                                  <option value="">United kingdom</option>
                                  <option value="">Australia</option>
                                  <option value="">france</option>
                                  <option value="">Canada</option>
                                </select>
                              </div>
                            </div>
                            <div class="col-md-6">
                              <div class="form-group">
                                <label for="title">State*</label>
                                <input type="text" id="title" name="name" required>
                              </div>
                            </div>
                          </div>
                          <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">This is a corporate/organization donation</label>
                          </div>
                          <div class="spce"></div>
                          <h2 class="Customh4">Summary</h2>
                          <div class="summary-container">
                            <div class="summary-item">
                              <p>Donation</p>
                              <a href="javascripts:;">$0.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="javascripts:;" class="btn btn-Custom">Donate</a>
                            <p class="footer-text"> This site is protected by reCAPTCHA, their <a href="javascripts:;">Privacy Policy</a> and <a href="javascripts:;">Terms of Service</a> apply. By confirming your payment, you agree to Knoxville <a href="javascripts:;"> Privacy Policy.</a>
                            </p>
                          </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 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'?>