Advance Forms

Examples Snippet of Geeks Course Form which used in Theme.

Billing Form

Billing Address

  <!-- Card -->
 <div class="card mb-4">
   <!-- Card Header -->
   <div class="card-header">
     <h3 class="mb-0">Billing Address</h3>
   </div>
   <!-- Card Body -->
   <div class="card-body">
     <!-- Form -->
     <form class="row">
       <div class="mb-3 col-12 col-md-6">
         <label class="form-label" for="fname">First Name</label>
         <input type="text" id="fname" class="form-control" placeholder="First Name" required>
       </div>
       <div class="mb-3 col-12 col-md-6">
         <label class="form-label" for="lname">Last Name</label>
         <input type="text" id="lname" class="form-control" placeholder="Last Name" required>
       </div>
       <div class="mb-3 col-12 col-md-12">
         <label class="form-label" for="phone">Phone Number (Optional)</label>
         <input type="text" id="phone" class="form-control" placeholder="Phone" required>
       </div>

       <div class="mb-3 col-12 col-md-12">
         <label class="form-label" for="address1">Address Line 1</label>
         <input type="text" id="address1" class="form-control" placeholder="Address" required>
       </div>
       <div class="mb-3 col-12 col-md-12">
         <label class="form-label" for="address2">Address Line 2
           (Optional)</label>
         <input type="text" id="address2" class="form-control" placeholder="Address" required>
       </div>
       <div class="mb-3 col-12 col-md-4">
         <label class="form-label">State</label>
         <select class="selectpicker" data-width="100%">
           <option value="">Select State</option>
           <option value="1">Gujarat</option>
           <option value="2">Rajasthan</option>
           <option value="3">Maharashtra</option>
         </select>
       </div>
       <div class="mb-3 col-12 col-md-4">
         <label class="form-label">Country</label>
         <select class="selectpicker" data-width="100%">
           <option value="">Select Country</option>
           <option value="">India</option>
           <option value="UK">UK</option>
           <option value="USA">USA</option>
         </select>
       </div>
       <div class="mb-3 col-12 col-md-4">
         <label class="form-label" for="zipCode">Zip/Postal Code</label>
         <input type="text" id="zipCode" class="form-control" placeholder="Zip" required>
       </div>
       <div class="col-12">
         <div class="form-check">
           <input type="checkbox" class="form-check-input" id="shippingAddress">
           <label class="form-check-label" for="shippingAddress">Shipping
             address is the same as my billing address</label>
         </div>
         <div class="form-check">
           <input type="checkbox" class="form-check-input" id="saveCard" checked>
           <label class="form-check-label" for="saveCard">Save this
             information for next time</label>
         </div>
       </div>
     </form>
   </div>
</div>

Payment Form

Payment Method

Full name as displayed on card.
By click start learning, you agree to our Terms of Service and Privacy Policy.

                           <div class="card  mb-3 mb-lg-0">
                              <!-- Card Header -->
                              <div class="card-header">
                                <h3 class="mb-0">Payment Method</h3>
                              </div>
                              <!-- Card Body -->
                              <div class="card-body">
                                <div class="d-inline-flex ">
                                              <div class="form-check me-3  ">
                                                <input type="radio" id="cardRadioone" name="cardRadioone" class="form-check-input" checked>
                                                <label class="form-check-label " for="cardRadioone">Credit
                                                    or Debit card</label>
                                              </div>
                                              <!-- Radio -->
                                              <div class="form-check">
                                                <input type="radio" id="cardRadioTwo" name="cardRadioone" class="form-check-input">
                                                <label class="form-check-label" for="cardRadioTwo">PayPal</label>
                                              </div>
                                            </div>
                                              <!-- Form -->
                                              <form class="row " id="cardpayment">
                                                <!-- Card number -->
                                                <div class="mb-3 mt-4 col-12">
                                                  <!-- Card Number -->
                                                  <label class="d-flex justify-content-between align-items-center form-label" for="cc-mask">Card
                                                    Number <span>

                                <svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="cc-amex" class="svg-inline--fa fa-cc-amex text-primary" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M325.1 167.8c0-16.4-14.1-18.4-27.4-18.4l-39.1-.3v69.3H275v-25.1h18c18.4 0 14.5 10.3 14.8 25.1h16.6v-13.5c0-9.2-1.5-15.1-11-18.4 7.4-3 11.8-10.7 11.7-18.7zm-29.4 11.3H275v-15.3h21c5.1 0 10.7 1 10.7 7.4 0 6.6-5.3 7.9-11 7.9zM279 268.6h-52.7l-21 22.8-20.5-22.8h-66.5l-.1 69.3h65.4l21.3-23 20.4 23h32.2l.1-23.3c18.9 0 49.3 4.6 49.3-23.3 0-17.3-12.3-22.7-27.9-22.7zm-103.8 54.7h-40.6v-13.8h36.3v-14.1h-36.3v-12.5h41.7l17.9 20.2zm65.8 8.2l-25.3-28.1L241 276zm37.8-31h-21.2v-17.6h21.5c5.6 0 10.2 2.3 10.2 8.4 0 6.4-4.6 9.2-10.5 9.2zm-31.6-136.7v-14.6h-55.5v69.3h55.5v-14.3h-38.9v-13.8h37.8v-14.1h-37.8v-12.5zM576 255.4h-.2zm-194.6 31.9c0-16.4-14.1-18.7-27.1-18.7h-39.4l-.1 69.3h16.6l.1-25.3h17.6c11 0 14.8 2 14.8 13.8l-.1 11.5h16.6l.1-13.8c0-8.9-1.8-15.1-11-18.4 7.7-3.1 11.8-10.8 11.9-18.4zm-29.2 11.2h-20.7v-15.6h21c5.1 0 10.7 1 10.7 7.4 0 6.9-5.4 8.2-11 8.2zm-172.8-80v-69.3h-27.6l-19.7 47-21.7-47H83.3v65.7l-28.1-65.7H30.7L1 218.5h17.9l6.4-15.3h34.5l6.4 15.3H100v-54.2l24 54.2h14.6l24-54.2v54.2zM31.2 188.8l11.2-27.6 11.5 27.6zm477.4 158.9v-4.5c-10.8 5.6-3.9 4.5-156.7 4.5 0-25.2.1-23.9 0-25.2-1.7-.1-3.2-.1-9.4-.1 0 17.9-.1 6.8-.1 25.3h-39.6c0-12.1.1-15.3.1-29.2-10 6-22.8 6.4-34.3 6.2 0 14.7-.1 8.3-.1 23h-48.9c-5.1-5.7-2.7-3.1-15.4-17.4-3.2 3.5-12.8 13.9-16.1 17.4h-82v-92.3h83.1c5 5.6 2.8 3.1 15.5 17.2 3.2-3.5 12.2-13.4 15.7-17.2h58c9.8 0 18 1.9 24.3 5.6v-5.6c54.3 0 64.3-1.4 75.7 5.1v-5.1h78.2v5.2c11.4-6.9 19.6-5.2 64.9-5.2v5c10.3-5.9 16.6-5.2 54.3-5V80c0-26.5-21.5-48-48-48h-480c-26.5 0-48 21.5-48 48v109.8c9.4-21.9 19.7-46 23.1-53.9h39.7c4.3 10.1 1.6 3.7 9 21.1v-21.1h46c2.9 6.2 11.1 24 13.9 30 5.8-13.6 10.1-23.9 12.6-30h103c0-.1 11.5 0 11.6 0 43.7.2 53.6-.8 64.4 5.3v-5.3H363v9.3c7.6-6.1 17.9-9.3 30.7-9.3h27.6c0 .5 1.9.3 2.3.3H456c4.2 9.8 2.6 6 8.8 20.6v-20.6h43.3c4.9 8-1-1.8 11.2 18.4v-18.4h39.9v92h-41.6c-5.4-9-1.4-2.2-13.2-21.9v21.9h-52.8c-6.4-14.8-.1-.3-6.6-15.3h-19c-4.2 10-2.2 5.2-6.4 15.3h-26.8c-12.3 0-22.3-3-29.7-8.9v8.9h-66.5c-.3-13.9-.1-24.8-.1-24.8-1.8-.3-3.4-.2-9.8-.2v25.1H151.2v-11.4c-2.5 5.6-2.7 5.9-5.1 11.4h-29.5c-4-8.9-2.9-6.4-5.1-11.4v11.4H58.6c-4.2-10.1-2.2-5.3-6.4-15.3H33c-4.2 10-2.2 5.2-6.4 15.3H0V432c0 26.5 21.5 48 48 48h480.1c26.5 0 48-21.5 48-48v-90.4c-12.7 8.3-32.7 6.1-67.5 6.1zm36.3-64.5H575v-14.6h-32.9c-12.8 0-23.8 6.6-23.8 20.7 0 33 42.7 12.8 42.7 27.4 0 5.1-4.3 6.4-8.4 6.4h-32l-.1 14.8h32c8.4 0 17.6-1.8 22.5-8.9v-25.8c-10.5-13.8-39.3-1.3-39.3-13.5 0-5.8 4.6-6.5 9.2-6.5zm-57 39.8h-32.2l-.1 14.8h32.2c14.8 0 26.2-5.6 26.2-22 0-33.2-42.9-11.2-42.9-26.3 0-5.6 4.9-6.4 9.2-6.4h30.4v-14.6h-33.2c-12.8 0-23.5 6.6-23.5 20.7 0 33 42.7 12.5 42.7 27.4-.1 5.4-4.7 6.4-8.8 6.4zm-42.2-40.1v-14.3h-55.2l-.1 69.3h55.2l.1-14.3-38.6-.3v-13.8H445v-14.1h-37.8v-12.5zm-56.3-108.1c-.3.2-1.4 2.2-1.4 7.6 0 6 .9 7.7 1.1 7.9.2.1 1.1.5 3.4.5l7.3-16.9c-1.1 0-2.1-.1-3.1-.1-5.6 0-7 .7-7.3 1zm20.4-10.5h-.1zm-16.2-15.2c-23.5 0-34 12-34 35.3 0 22.2 10.2 34 33 34h19.2l6.4-15.3h34.3l6.6 15.3h33.7v-51.9l31.2 51.9h23.6v-69h-16.9v48.1l-29.1-48.1h-25.3v65.4l-27.9-65.4h-24.8l-23.5 54.5h-7.4c-13.3 0-16.1-8.1-16.1-19.9 0-23.8 15.7-20 33.1-19.7v-15.2zm42.1 12.1l11.2 27.6h-22.8zm-101.1-12v69.3h16.9v-69.3z"></path></svg>
                                <svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="cc-mastercard" class="svg-inline--fa fa-cc-mastercard text-primary" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M482.9 410.3c0 6.8-4.6 11.7-11.2 11.7-6.8 0-11.2-5.2-11.2-11.7 0-6.5 4.4-11.7 11.2-11.7 6.6 0 11.2 5.2 11.2 11.7zm-310.8-11.7c-7.1 0-11.2 5.2-11.2 11.7 0 6.5 4.1 11.7 11.2 11.7 6.5 0 10.9-4.9 10.9-11.7-.1-6.5-4.4-11.7-10.9-11.7zm117.5-.3c-5.4 0-8.7 3.5-9.5 8.7h19.1c-.9-5.7-4.4-8.7-9.6-8.7zm107.8.3c-6.8 0-10.9 5.2-10.9 11.7 0 6.5 4.1 11.7 10.9 11.7 6.8 0 11.2-4.9 11.2-11.7 0-6.5-4.4-11.7-11.2-11.7zm105.9 26.1c0 .3.3.5.3 1.1 0 .3-.3.5-.3 1.1-.3.3-.3.5-.5.8-.3.3-.5.5-1.1.5-.3.3-.5.3-1.1.3-.3 0-.5 0-1.1-.3-.3 0-.5-.3-.8-.5-.3-.3-.5-.5-.5-.8-.3-.5-.3-.8-.3-1.1 0-.5 0-.8.3-1.1 0-.5.3-.8.5-1.1.3-.3.5-.3.8-.5.5-.3.8-.3 1.1-.3.5 0 .8 0 1.1.3.5.3.8.3 1.1.5s.2.6.5 1.1zm-2.2 1.4c.5 0 .5-.3.8-.3.3-.3.3-.5.3-.8 0-.3 0-.5-.3-.8-.3 0-.5-.3-1.1-.3h-1.6v3.5h.8V426h.3l1.1 1.4h.8l-1.1-1.3zM576 81v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V81c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM64 220.6c0 76.5 62.1 138.5 138.5 138.5 27.2 0 53.9-8.2 76.5-23.1-72.9-59.3-72.4-171.2 0-230.5-22.6-15-49.3-23.1-76.5-23.1-76.4-.1-138.5 62-138.5 138.2zm224 108.8c70.5-55 70.2-162.2 0-217.5-70.2 55.3-70.5 162.6 0 217.5zm-142.3 76.3c0-8.7-5.7-14.4-14.7-14.7-4.6 0-9.5 1.4-12.8 6.5-2.4-4.1-6.5-6.5-12.2-6.5-3.8 0-7.6 1.4-10.6 5.4V392h-8.2v36.7h8.2c0-18.9-2.5-30.2 9-30.2 10.2 0 8.2 10.2 8.2 30.2h7.9c0-18.3-2.5-30.2 9-30.2 10.2 0 8.2 10 8.2 30.2h8.2v-23zm44.9-13.7h-7.9v4.4c-2.7-3.3-6.5-5.4-11.7-5.4-10.3 0-18.2 8.2-18.2 19.3 0 11.2 7.9 19.3 18.2 19.3 5.2 0 9-1.9 11.7-5.4v4.6h7.9V392zm40.5 25.6c0-15-22.9-8.2-22.9-15.2 0-5.7 11.9-4.8 18.5-1.1l3.3-6.5c-9.4-6.1-30.2-6-30.2 8.2 0 14.3 22.9 8.3 22.9 15 0 6.3-13.5 5.8-20.7.8l-3.5 6.3c11.2 7.6 32.6 6 32.6-7.5zm35.4 9.3l-2.2-6.8c-3.8 2.1-12.2 4.4-12.2-4.1v-16.6h13.1V392h-13.1v-11.2h-8.2V392h-7.6v7.3h7.6V416c0 17.6 17.3 14.4 22.6 10.9zm13.3-13.4h27.5c0-16.2-7.4-22.6-17.4-22.6-10.6 0-18.2 7.9-18.2 19.3 0 20.5 22.6 23.9 33.8 14.2l-3.8-6c-7.8 6.4-19.6 5.8-21.9-4.9zm59.1-21.5c-4.6-2-11.6-1.8-15.2 4.4V392h-8.2v36.7h8.2V408c0-11.6 9.5-10.1 12.8-8.4l2.4-7.6zm10.6 18.3c0-11.4 11.6-15.1 20.7-8.4l3.8-6.5c-11.6-9.1-32.7-4.1-32.7 15 0 19.8 22.4 23.8 32.7 15l-3.8-6.5c-9.2 6.5-20.7 2.6-20.7-8.6zm66.7-18.3H408v4.4c-8.3-11-29.9-4.8-29.9 13.9 0 19.2 22.4 24.7 29.9 13.9v4.6h8.2V392zm33.7 0c-2.4-1.2-11-2.9-15.2 4.4V392h-7.9v36.7h7.9V408c0-11 9-10.3 12.8-8.4l2.4-7.6zm40.3-14.9h-7.9v19.3c-8.2-10.9-29.9-5.1-29.9 13.9 0 19.4 22.5 24.6 29.9 13.9v4.6h7.9v-51.7zm7.6-75.1v4.6h.8V302h1.9v-.8h-4.6v.8h1.9zm6.6 123.8c0-.5 0-1.1-.3-1.6-.3-.3-.5-.8-.8-1.1-.3-.3-.8-.5-1.1-.8-.5 0-1.1-.3-1.6-.3-.3 0-.8.3-1.4.3-.5.3-.8.5-1.1.8-.5.3-.8.8-.8 1.1-.3.5-.3 1.1-.3 1.6 0 .3 0 .8.3 1.4 0 .3.3.8.8 1.1.3.3.5.5 1.1.8.5.3 1.1.3 1.4.3.5 0 1.1 0 1.6-.3.3-.3.8-.5 1.1-.8.3-.3.5-.8.8-1.1.3-.6.3-1.1.3-1.4zm3.2-124.7h-1.4l-1.6 3.5-1.6-3.5h-1.4v5.4h.8v-4.1l1.6 3.5h1.1l1.4-3.5v4.1h1.1v-5.4zm4.4-80.5c0-76.2-62.1-138.3-138.5-138.3-27.2 0-53.9 8.2-76.5 23.1 72.1 59.3 73.2 171.5 0 230.5 22.6 15 49.5 23.1 76.5 23.1 76.4.1 138.5-61.9 138.5-138.4z"></path></svg>

                                <svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="cc-discover" class="svg-inline--fa fa-cc-discover text-primary" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M520.4 196.1c0-7.9-5.5-12.1-15.6-12.1h-4.9v24.9h4.7c10.3 0 15.8-4.4 15.8-12.8zM528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-44.1 138.9c22.6 0 52.9-4.1 52.9 24.4 0 12.6-6.6 20.7-18.7 23.2l25.8 34.4h-19.6l-22.2-32.8h-2.2v32.8h-16zm-55.9.1h45.3v14H444v18.2h28.3V217H444v22.2h29.3V253H428zm-68.7 0l21.9 55.2 22.2-55.2h17.5l-35.5 84.2h-8.6l-35-84.2zm-55.9-3c24.7 0 44.6 20 44.6 44.6 0 24.7-20 44.6-44.6 44.6-24.7 0-44.6-20-44.6-44.6 0-24.7 20-44.6 44.6-44.6zm-49.3 6.1v19c-20.1-20.1-46.8-4.7-46.8 19 0 25 27.5 38.5 46.8 19.2v19c-29.7 14.3-63.3-5.7-63.3-38.2 0-31.2 33.1-53 63.3-38zm-97.2 66.3c11.4 0 22.4-15.3-3.3-24.4-15-5.5-20.2-11.4-20.2-22.7 0-23.2 30.6-31.4 49.7-14.3l-8.4 10.8c-10.4-11.6-24.9-6.2-24.9 2.5 0 4.4 2.7 6.9 12.3 10.3 18.2 6.6 23.6 12.5 23.6 25.6 0 29.5-38.8 37.4-56.6 11.3l10.3-9.9c3.7 7.1 9.9 10.8 17.5 10.8zM55.4 253H32v-82h23.4c26.1 0 44.1 17 44.1 41.1 0 18.5-13.2 40.9-44.1 40.9zm67.5 0h-16v-82h16zM544 433c0 8.2-6.8 15-15 15H128c189.6-35.6 382.7-139.2 416-160zM74.1 191.6c-5.2-4.9-11.6-6.6-21.9-6.6H48v54.2h4.2c10.3 0 17-2 21.9-6.4 5.7-5.2 8.9-12.8 8.9-20.7s-3.2-15.5-8.9-20.5z"></path></svg>

                                <svg width="18" height="18" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="cc-visa" class="svg-inline--fa fa-cc-visa text-primary" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M470.1 231.3s7.6 37.2 9.3 45H446c3.3-8.9 16-43.5 16-43.5-.2.3 3.3-9.1 5.3-14.9l2.8 13.4zM576 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h480c26.5 0 48 21.5 48 48zM152.5 331.2L215.7 176h-42.5l-39.3 106-4.3-21.5-14-71.4c-2.3-9.9-9.4-12.7-18.2-13.1H32.7l-.7 3.1c15.8 4 29.9 9.8 42.2 17.1l35.8 135h42.5zm94.4.2L272.1 176h-40.2l-25.1 155.4h40.1zm139.9-50.8c.2-17.7-10.6-31.2-33.7-42.3-14.1-7.1-22.7-11.9-22.7-19.2.2-6.6 7.3-13.4 23.1-13.4 13.1-.3 22.7 2.8 29.9 5.9l3.6 1.7 5.5-33.6c-7.9-3.1-20.5-6.6-36-6.6-39.7 0-67.6 21.2-67.8 51.4-.3 22.3 20 34.7 35.2 42.2 15.5 7.6 20.8 12.6 20.8 19.3-.2 10.4-12.6 15.2-24.1 15.2-16 0-24.6-2.5-37.7-8.3l-5.3-2.5-5.6 34.9c9.4 4.3 26.8 8.1 44.8 8.3 42.2.1 69.7-20.8 70-53zM528 331.4L495.6 176h-31.1c-9.6 0-16.9 2.8-21 12.9l-59.7 142.5H426s6.9-19.2 8.4-23.3H486c1.2 5.5 4.8 23.3 4.8 23.3H528z"></path></svg></span></label>
                                                  <div class="input-group">
                                                    <input type="text" class="form-control" id="cc-mask" data-inputmask="'mask': '9999 9999 9999 9999'"
                                                    inputmode="numeric" placeholder="xxxx-xxxx-xxxx-xxxx" required />
                                                    <span class="input-group-text" id="basic-addon2"><i class="fe fe-lock "></i></span>

                                                  </div>
                                                  <small class="text-muted">Full name as displayed on card.</small>
                                                </div>
                                                <!-- Month -->
                                                <div class="mb-3 col-12 col-md-4">
                                                  <label class="form-label">Month</label>
                                                  <select class="selectpicker" data-width="100%">
                                                    <option value="">Month</option>
                                                    <option value="June">June</option>
                                                    <option value="July">July</option>
                                                    <option value="August">August</option>
                                                    <option value="Sep">Sep</option>
                                                    <option value="Oct">Oct</option>
                                                  </select>
                                                </div>
                                                <!-- Year -->
                                                <div class="mb-3 col-12 col-md-4">
                                                  <label class="form-label">Year</label>
                                                  <select class="selectpicker" data-width="100%">
                                                    <option value="">Year</option>
                                                    <option value="June">2018</option>
                                                    <option value="July">2019</option>
                                                    <option value="August">2020</option>
                                                    <option value="Sep">2021</option>
                                                    <option value="Oct">2022</option>
                                                  </select>
                                                </div>
                                                <!-- CVV Code -->
                                                <div class="mb-3 col-12 col-md-4">
                                                  <label for="cvv" class="form-label">CVV Code <i class="fe fe-help-circle ms-1 fs-6" data-bs-toggle="tooltip"
                                                      data-placement="right"
                                                      title="A 3 - digit number, typically printed on the back of a card."></i></label>
                                                  <input type="password" class="cc-inputmask form-control" name="cvv" id="cvv"  placeholder="xxx"
                                                    maxlength="3">
                                                </div>
                                                <!-- Name on card -->
                                                <div class="mb-3 col-12">
                                                  <label for="nameoncard" class="form-label">Name on Card</label>
                                                  <input id="nameoncard" type="text" class="form-control" name="nameoncard" placeholder="Name" required>
                                                </div>
                                                <!-- Country -->
                                                <div class="mb-3 col-6">
                                                  <label class="form-label">Country</label>
                                                  <select class="selectpicker" data-width="100%">
                                                    <option value="">India</option>
                                                    <option value="uk">UK</option>
                                                    <option value="usa">USA</option>
                                                  </select>
                                                </div>
                                                <!-- Zip Code -->
                                                <div class="mb-3 col-6">
                                                  <label for="postalcode" class="form-label">Zip/Postal Code</label>
                                                  <input id="postalcode" type="text" class="form-control" name="postalcode" placeholder="Zipcode"
                                                    required>
                                                </div>
                                                <!-- CheckBox -->
                                                <div class="col-12 mb-5">
                                                  <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="customCheck1">
                                                    <label class="form-check-label " for="customCheck1">Remember this
                                                      card</label>
                                                  </div>
                                                </div>
                                                <div class="col-md-4 col-12">
                                                  <!-- Button -->
                                                  <div>
                                                    <button type="submit" class="btn btn-primary mb-3 mb-lg-0 me-4">Make a
                                                      Payment</button>
                                                  </div>
                                                </div>
                                                <!-- Text -->
                                                <div class="col-md-8 col-12 d-flex align-items-center justify-content-end">
                                                  <small class="mb-0">By click start learning, you agree to our <a href="#">Terms of
                                                      Service and Privacy Policy.</a></small>
                                                </div>
                                              </form>
                                              <!-- Paypal -->
                                              <form id="internetpayment">
                                                <div class="mb-3 mt-4 ">
                                                  <label for="paypalemail" class="form-label">PayPal</label>
                                                  <input type="email" id="paypalemail" name="paypalemail" placeholder="Enter your PayPal email"
                                                    class="form-control" required>
                                                </div>
                                                <button type="submit" class="btn btn-primary">PayPal Checkout</button>
                                              </form>
                                            </div>

                            </div>

Google Setting

Google Settings

Google Map

<!-- Card -->
 <div class="card mb-4 ">
    <!-- Card Header -->
    <div class="card-header d-flex align-items-center justify-content-between">
       <h4 class="mb-0">Google Settings</h4>
       <div class="form-check form-switch">
          <input type="checkbox" class="form-check-input" id="googleSwitch">
          <label class="form-check-label" for="googleSwitch"></label>
       </div>
    </div>
    <!-- Card Body -->
    <div class="card-body">
       <form>
          <div class="mb-3">
             <label for="googleage" class="form-label">Google Analytics Tracking ID<small class="text-muted">
             (ex. UA-000000-2 )</small>
             </label>
             <input class="form-control" id="googleage" placeholder="UA-000000-2 " type="text" required="">
          </div>
          <button type="submit" class="btn btn-primary">
          Update Settings
          </button>
       </form>
    </div>
 </div>
 <!-- Card -->
 <div class="card mb-4 ">
    <!-- Card Header -->
    <div class="card-header d-flex align-items-center justify-content-between">
       <h4 class="mb-0">Google Map</h4>
       <div class="form-check form-switch">
          <input type="checkbox" class="form-check-input" id="MapSwitch">
          <label class="form-check-label" for="MapSwitch"></label>
       </div>
    </div>
    <!-- Card Body -->
    <div class="card-body">
       <!-- Form -->
       <form>
          <div class="mb-3">
             <label for="trackingPage" class="form-label">Goole Map API KeY
             </label>
             <input class="form-control" id="trackingPage" placeholder="6LeJd8IUAAAAAFOR_aW-SO8wMASDSDFRuYT-zQDLnHC " type="text" required="">
          </div>
          <div class="mb-3 mb-4">
             <label for="latitudePage1" class="form-label">Map Latitude:</label>
             <input class="form-control" id="latitudePage1" placeholder="e.g. 25.3500 " type="text" required="">
          </div>
          <div class="mb-3 mb-4">
             <label for="latitudePage2" class="form-label">Map Longitude:</label>
             <input class="form-control" id="latitudePage2" placeholder="e.g. 74.6333 " type="text" required="">
          </div>
          <button type="submit" class="btn btn-primary">
          Update Settings
          </button>
       </form>
 </div>
 </div>

General

General Settings

The site title might be the name of your company or organization, or a brief description of the organization, or a combination of the two.
The site title might be the name of your company or organization, or a brief description of the organization, or a combination of the two.

Logo

(Upload your website logo - 120 x 40 )

Favicon (Upload your website favicon - Standard for most desktop browsers. 32×32)

 <!-- Card -->
  <div class="card mb-4 ">
    <!-- Card Header -->
    <div class="card-header">
      <h4 class="mb-0">General Settings</h4>
    </div>
    <!-- Card Body -->
    <div class="card-body">
      <form>
        <div class="mb-3 mb-4">
            <label for="siteName" class="form-label">Site Name
  <small class="text-muted">(Enter your website name below)</small>
  </label>
  <input class="form-control" id="siteName" placeholder="Your Site " type="text" required="">
   <small>The site title might be the name of your company or
                      organization, or a brief description of the organization, or a combination of the two.
  </small>
    </div>
    <div class="mb-3 mb-4">
        <label for="siteDescription" class="form-label">Site Description
      <small class="text-muted">(Enter your website description below)</small>
    </label>
  <textarea class="form-control" id="siteDescription" placeholder="Site Description " required="" rows="4"></textarea>
   <small>The site title might be the name of your company or
     organization, or a brief description of the organization, or a combination of the two.
   </small>
     </div>
     <div class="mb-3">
         <p class="mb-1 text-dark">Logo</p>
         <div class="input-group mb-1">
             <input type="file" class="form-control" id="inputLogo">
             <label class="input-group-text" for="inputLogo">Upload</label>
           </div>
           <small class="text-muted">(Upload your website logo - 120 x 40 )</small>
     </div>
   <div class="mb-3">
       <p class="mb-1 text-dark">Favicon <small class="text-muted">(Upload your website favicon - Standard for most
      desktop browsers. 32×32)</small></p>
       <div class="input-group mb-1">
     <input type="file" class="form-control" id="inputfavicon">
     <label class="input-group-text" for="inputfavicon">Upload</label>
         </div>
   </div>
<button type="submit" class="btn btn-primary">
  Update Settings </button>
 </form>
 </div>
 </div>

Currency

Currency Settings

<!-- Card -->
 <div class="card mb-4 ">
   <!-- Card Header -->
   <div class="card-header">
     <h4 class="mb-0">Currency Settings</h4>
   </div>
   <!-- Card Body -->
   <div class="card-body">
     <form>
       <select class="selectpicker" data-width="100%">
         <option value="">Select</option>
         <option value="&#8377; Indian">&#8377; Indian</option>
  <option value="$ USD">$ USD</option>
  <option value="€ Euro">€ Euro</option>
  <option value="£ British Pound">£ British Pound</option>
</select>
 <button type="submit" class="btn btn-primary mt-3">Update Setting</button>
 </form>
</div>
 </div>
 <!-- Card -->

Langauge

Language Settings

 <!-- Card -->
 <div class="card ">
   <!-- Card Header -->
   <div class="card-header">
     <h4 class="mb-0">Language Settings</h4>
   </div>
   <!-- Card Body -->
   <div class="card-body">
     <form>
       <select class="selectpicker" data-width="100%">
         <option value="">Select</option>
         <option value="English">English</option>
         <option value="German">German</option>
         <option value="Spanish">Spanish</option>
         <option value="Hindi">Hindi</option>
       </select>
       <button type="submit" class="btn btn-primary mt-3">Update Setting</button>
     </form>
   </div>
</div>

Social

Social Network

<!-- Card -->
  <div class="card mb-4 ">
     <!-- Card Header -->
     <div class="card-header">
        <h4 class="mb-0">Social Network</h4>
     </div>
     <!-- Card Body -->
     <div class="card-body">
        <!-- Form -->
        <form>
 <div class="mb-3 mb-4">
   <label for="facebookPage" class="form-label">Facebook Page ID
   <small class="text-muted">
   (ex. https://www.facebook.com/geeksuidesign)</small>
   </label>
   <input class="form-control" id="facebookPage" placeholder="geeksuidesign " type="text" required="">
</div>
   <div class="mb-3 mb-4">
      <label for="twitterPage" class="form-label">Twitter Username
      <small class="text-muted">
      (Enter your website description below)</small>
      </label>
      <input class="form-control" id="twitterPage" placeholder="geeksuidesign " type="text" required="">
   </div>
   <div class="mb-3 mb-4">
      <label for="youtubePage" class="form-label">YouTube Channel Name<small class="text-muted">
      (ex. https://www.youtube.com/geeksuidesign)</small>
      </label>
      <input class="form-control" id="youtubePage" placeholder="geeksuidesign " type="text" required="">
   </div>
   <div class="mb-3 mb-4">
    <label for="instaPage" class="form-label">Instagram Username<small class="text-muted">
    (ex.https://www.instagram.com/geeksuidesign)</small>
    </label>
    <input class="form-control" id="instaPage" placeholder="geeksuidesign " type="text" required="">
 </div>
   <button type="submit" class="btn btn-primary">
   Update Settings
   </button>
</form>
 </div>
 </div>

Facebook login

Facebook Login Settings

If you are not sure what is your APP ID, Please head over to Getting Started.
<div class="card mb-4 ">
  <!-- Card Header -->
  <div class="card-header d-flex align-items-center justify-content-between">
     <h4 class="mb-0">
        <i class="mdi mdi-facebook fs-4 text-primary mdi-24px align-middle me-2"></i>Facebook
        Login Settings
     </h4>
     <!-- Custom Control -->
     <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="facebookSwitch">
        <label class="form-check-label" for="facebookSwitch"></label>
     </div>
  </div>
 <!-- Card Body -->
 <div class="card-body">
    <!-- form -->
    <form>
       <div class="mb-3 mb-4">
          <label for="facebookAppid" class="form-label">App ID<span class="text-danger">*</span>
          </label>
          <input class="form-control" id="facebookAppid" placeholder="26346567894578985 " type="text" required="">
          <small class="text-muted">If you are not sure what is your APP ID, Please
          head
          over to
          <span class="text-primary">Getting Started.</span></small>
       </div>
 <div class="mb-3 mb-4">
    <label for="consumerKey1" class="form-label">App Secret<span class="text-danger">*</span></label>
    <input class="form-control" id="consumerKey1" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
 </div>
 <div class="mb-3 mb-4">
    <label for="consumerSecret1" class="form-label">Login Redirect URL
    </label>
    <input class="form-control" id="consumerSecret1" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
 </div>
 <button type="submit" class="btn btn-primary">
  Update Settings </button>
 </form>
</div>
</div>

Twitter login

Twitter Login Settings

If you are not sure what is your APP ID, Please head over to Getting Started.
<div class="card mb-4 ">
  <!-- Card Header -->
  <div class="card-header d-flex align-items-center justify-content-between">
     <h4 class="mb-0">
        <i class="mdi mdi-twitter text-primary mdi-24px align-middle me-2"></i>Twitter
        Login Settings
     </h4>
     <!-- Custom Control -->
     <div class="form-check form-switch">
        <input type="checkbox" class="form-check-input" id="twitterSwitch">
        <label class="form-check-label" for="twitterSwitch"></label>
     </div>
  </div>
  <!-- Card Body -->
  <div class="card-body">
     <!-- Form -->
     <form>
        <div class="mb-3 mb-4">
           <label for="twiiterAppid" class="form-label">Consumer Key (API Key)<span class="text-danger">*</span>
           </label>
           <input class="form-control" id="twiiterAppid" placeholder="26346567894578985 " type="text" required="">
           <small class="text-muted">If you are not sure what is your APP ID, Please
           head
           over to
           <span class="text-primary">Getting Started.</span></small>
        </div>
        <div class="mb-3 mb-4">
           <label for="consumerKey2" class="form-label">Consumer Secret (Secret
           Key)<span class="text-danger">*</span></label>
           <input class="form-control" id="consumerKey2" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
        </div>
        <div class="mb-3 mb-4">
           <label for="consumerSecret2" class="form-label">Login Redirect URL
           </label>
           <input class="form-control" id="consumerSecret2" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
        </div>
        <button type="submit" class="btn btn-primary">
        Update Settings
        </button>
  </form>
    </div>
 </div>

Google login

Google Login Settings

If you are not sure what is your APP ID, Please head over to Getting Started.
<div class="card mb-4 ">
<!-- Card Header -->
<div class="card-header d-flex align-items-center justify-content-between">
  <h4 class="mb-0">
  <i class="mdi mdi-google text-primary mdi-24px align-middle me-2"></i>Google
  Login Settings
</h4>
<!-- Custom Control -->
<div class="form-check form-switch">
   <input type="checkbox" class="form-check-input" id="googleSwitch">
   <label class="form-check-label" for="googleSwitch"></label>
     </div>
  </div>
  <!-- Card Body -->
  <div class="card-body">
     <!-- Form -->
     <form>
        <div class="mb-3 mb-4">
           <label for="googleAppid" class="form-label">Client ID<span class="text-danger">*</span>
           </label>
   <input class="form-control" id="googleAppid" placeholder="26346567894578985 " type="text" required="">
   <small class="text-muted">If you are not sure what is your APP ID, Please
   head
   over to
   <span class="text-primary">Getting Started.</span></small>
</div>
   <div class="mb-3 mb-4">
      <label for="consumerKey3" class="form-label">Client Secret Key<span class="text-danger">*</span></label>
      <input class="form-control" id="consumerKey3" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
   </div>
   <div class="mb-3 mb-4">
      <label for="consumerSecret3" class="form-label">Login Redirect URL
      </label>
    <input class="form-control" id="consumerSecret3" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
 </div>
 <button type="submit" class="btn btn-primary">
 Update Settings
 </button>
  </form>
   </div>
  </div>

LinkedIn login

LinkedIn Login API Settings

If you are not sure what is your APP ID, Please head over to Getting Started.
<!-- card -->
  <div class="card mb-4 ">
     <!-- Card Header -->
     <div class="card-header d-flex align-items-center justify-content-between">
        <h4 class="mb-0">
           <i class="mdi mdi-linkedin text-primary mdi-24px align-middle me-2"></i>LinkedIn
           Login API Settings
        </h4>
        <!-- Custom Control -->
        <div class="form-check form-switch">
           <input type="checkbox" class="form-check-input" id="linkedinSwitch">
           <label class="form-check-label" for="linkedinSwitch"></label>
        </div>
     </div>
     <!--  Card Body -->
     <div class="card-body">
        <!-- Form -->
        <form>
           <div class="mb-3 mb-4">
  <label for="linkedinAppid" class="form-label">Client ID<span class="text-danger">*</span>
 </label>
 <input class="form-control" id="linkedinAppid" placeholder="26346567894578985 " type="text" required="">
 <small class="text-muted">If you are not sure what is your APP ID, Please
 head over to
 <span class="text-primary">Getting Started.</span></small>
   </div>
   <div class="mb-3 mb-4">
 <label for="consumerKey4" class="form-label">Client Secret Key<span class="text-danger">*</span></label>
   <input class="form-control" id="consumerKey4" placeholder="WJYSy0+wRF3fOYBJq+AdyNvfzk0AzHikc89OSTW " type="text" required="">
   </div>
   <div class="mb-3 mb-4">
      <label for="consumerSecret4" class="form-label">Login Redirect URL
      </label>
  <input class="form-control" id="consumerSecret4" placeholder="https://codescandy/geeks/demo/public/auth/facebook/callback " type="text" required="">
    </div>
    <button type="submit" class="btn btn-primary">
    Update Settings
    </button>
 </form>
   </div>
 </div>

Paypal

Paypal

Enter your PayPal email address below to accept payments from students.

<!-- Card -->
 <div class="card mb-4 ">
    <!-- Card Header -->
    <div class="card-header d-flex align-items-center justify-content-between">
       <h4 class="mb-0">Paypal</h4>
       <div class="form-check form-switch">
          <input type="checkbox" class="form-check-input" id="paypalSwitch1" checked="">
          <label class="form-check-label" for="paypalSwitch1"></label>
       </div>
    </div>
    <!-- Card Body -->
    <div class="card-body">
   <img src="../assets/images/brand/paypal.svg" alt="" class="mb-2">
   <p class="mb-4">Enter your PayPal email address below to accept payments from
      students.
   </p>
   <!-- Form -->
   <form>
      <div class="mb-3">
         <label for="paypalEmail" class="form-label">Paypal Email Address
         </label>
   <input class="form-control" id="paypalEmail" placeholder="your@example.com" type="email" required="">
</div>
<button class="btn btn-primary" type="submit">
Save
</button>
  </form>
 </div>
 </div>

Stripe

Stripe

Connect your Geeks to your stripe account for faster payouts.

<div class="card mb-4 ">
 <!-- Card Header -->
 <div class="card-header  d-flex align-items-center justify-content-between">
    <h4 class="mb-0">Stripe</h4>
    <div class="form-check form-switch">
       <input type="checkbox" class="form-check-input" id="stripeSwitch1">
       <label class="form-check-label" for="stripeSwitch1"></label>
    </div>
 </div>
 <!-- Card Body -->
 <div class="card-body">
    <img src="../assets/images/brand/stripe.svg" alt="" class="mb-2">
    <p class="mb-4">Connect your Geeks to your stripe account for faster payouts.</p>
    <!-- Form -->
    <form>
       <div class="mb-3">
     <label for="stripeEmail" class="form-label">Stripe Email Address
     </label>
  <input class="form-control" id="stripeEmail" placeholder="your@example.com" type="email" required="">
 </div>
 <button class="btn btn-primary" type="submit">
 Save
 </button>
 </form>
</div>
</div>

SMPT Server Setting

SMTP Server Setting

<div class="card mb-4">
 <!-- Card Header -->
 <div class="card-header">
    <h4 class="mb-0">SMTP Server Setting</h4>
 </div>
 <!-- Card Body -->
 <div class="card-body">
    <!-- Form -->
    <form class="row">
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="senderName" class="form-label">Sendere’s Name </label>
          <input class="form-control" id="senderName" placeholder="Geeks" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="address" class="form-label">Mail Address<span class="text-danger">*</span> </label>
          <input class="form-control" id="address" placeholder="Address here" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="mailDriver" class="form-label">Mail Driver (SMTP, Mail)<span class="text-danger">*</span> </label>
          <input class="form-control" id="mailDriver" placeholder="e.g.smtp,gmail.com" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="userName" class="form-label">Mail Username<span class="text-danger">*</span> (info@geeksuidesign.com) </label>
          <input class="form-control" id="userName" placeholder="e.g.smtp,gmail.com" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="mailHost" class="form-label">Mail Host<span class="text-danger">*</span> </label>
          <input class="form-control" id="mailHost" placeholder="smtp,gmail.io" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="mailPassword" class="form-label">Mail Password<span class="text-danger">*</span> </label>
          <input class="form-control" id="mailPassword" placeholder="*****************" type="password" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="mailPort" class="form-label">Mail Port Number<span class="text-danger">*</span> </label>
          <input class="form-control" id="mailPort" placeholder="e.g. 465, 587" type="text" required="">
       </div>
       <div class="mb-3 col-12 col-md-12 col-lg-6">
          <label for="mailEncryption" class="form-label">Mail Encryption (TLS / SSL) </label>
          <input class="form-control" id="mailEncryption" placeholder="tls" type="text" required="">
       </div>
       <div class="col-12 col-md-12 col-lg-6">
          <button class="btn btn-primary" type="submit">
          Save
          </button>
          <a href="#" class="btn btn-outline-white">
          Cancel
          </a>
       </div>
    </form>
  </div>
 </div>

Create Post Form

Create Post

Keep your post titles under 60 characters. Write heading that describe the topic content. Contextualize for Your Audience.
https://example.com/
Field must contain an unique value
A short extract from writing.

One Ring to Rule Them All


Three Rings for the Elven-kingsunder the sky,
Seven for the Dwarf-lords in halls of stone, Nine for Mortal Men,
doomed to die, One for the Dark Lord on his dark throne.
In the Land of Mordor where the Shadows lie.

One Ring to rule them all,
One Ring to find them,
One Ring to bring them all and in the darkness bind them.
In the Land of Mordor where the Shadows lie.


Publish Save to Draft
  <!-- Card -->
 <div class="card border-0 mb-4">
   <!-- Card header -->
   <div class="card-header">
     <h4 class="mb-0">Create Post</h4>
   </div>
   <!-- Card Body -->
   <div class="card-body">
     <button type="button" class="btn btn-outline-white">
       <i class="fe fe-image me-1"></i>
       Photo
     </button>
     <button type="button" class="btn btn-outline-white">
       <i class="fe fe-video me-1"></i>
       Video
     </button>
     <button type="button" class="btn btn-outline-white">

       Quote
     </button>
     <button type="button" class="btn btn-outline-white">
       <i class="fe fe-link me-1"></i>
       Link
     </button>
     <form action="#" class="dropzone mt-4 border-dashed">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
  </form>
  <div class="mt-4">
    <form>
      <!-- Form -->
      <div class="row">
        <!-- Date -->
        <div class="mb-3 col-md-4">
          <label for="selectDate" class="form-label">Date</label>
          <input type="text" id="selectDate" class="form-control text-dark flatpickr "
  placeholder="Select Date">
 </div>
 <div class="mb-3 col-md-9">
<!-- Title -->
  <label for="postTitle" class="form-label">Title</label>
  <input type="text" id="postTitle" class="form-control text-dark "
    placeholder="Post Title">
  <small>Keep your post titles under 60 characters. Write heading
    that  describe the topic content. Contextualize for Your Audience.</small>
 </div>
 <!-- Slug -->
 <div class="mb-3 col-md-9">
   <label for="basic-url" class="form-label">Slug</label>
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text" id="basic-addon3">https://example.com/</span>
  </div>
  <input type="text" class="form-control" id="basic-url"
    aria-describedby="basic-addon3" placeholder="post-title">
  </div>
  <small>Field must contain an unique value</small>
</div>
<!-- Excerpt -->
 <div class="mb-3 col-md-9">
   <label for="Excerpt">Excerpt</label>
   <textarea rows="3" id="Excerpt" class="form-control text-dark "
     placeholder="Excerpt"></textarea>
   <small>A short extract from writing.</small>
 </div>
 <!-- Category -->
 <div class="mb-3 col-md-9">
   <label class="form-label">Category</label>
   <select class="selectpicker" data-width="100%">
     <option value="">Course</option>
     <option value="Post Category">Post Category</option>
     <option value="Workshop">Workshop</option>
     <option value="Marketing">Marketing</option>
   </select>
   </div>
 </div>
    </form>
  </div>
  <!-- Editor -->
  <div class="mt-2 mb-4">
    <div id="editor">
      <br>
      <h4>One Ring to Rule Them All</h4>
      <br>
      <p>
        Three Rings for the <i> Elven-kingsunder</i> the sky,
  <br> Seven for the
   <u>Dwarf-lords</u> in halls of stone, Nine for Mortal Men,
   <br> doomed to die, One for the Dark Lord on his dark throne.
   <br> In the Land of Mordor where the Shadows lie.
   <br>
   <br>
   </p>
   <p>
     One Ring to
     <b>rule</b> them all,
     <br> One Ring to find them,
     <br> One Ring to bring them all and in the darkness bind them.
     <br> In the Land of Mordor where the Shadows lie.
   </p>
    <p>
      <br>
    </p>
  </div>
   </div>
   <!-- button -->
   <a href="#" class="btn btn-primary ">
     Publish
    </a>
    <a href="#" class="btn btn-outline-white ">
      Save to Draft
    </a>
  </div>
 </div>

Payment Method

Credit / Debit card
Note: that you can later remove your card at the account setting page.
 <div>
  <form class="row mb-4">
    <div class="mb-3 col-12 col-md-12 mb-4">
        <h5 class="mb-3">Credit / Debit card</h5>
        <!-- Radio button -->
        <div class="d-inline-flex">
        <div class="form-check me-2">
            <input type="radio" id="paymentRadioOne" name="paymentRadioOne" class="form-check-input" />
            <label class="form-check-label" for="paymentRadioOne"><img
  src="../assets/images/creditcard/americanexpress.svg" alt="" /></label>
  </div>
  <!-- Radio button -->
  <div class="form-check me-2">
      <input type="radio" id="paymentRadioTwo" name="paymentRadioOne" class="form-check-input" />
      <label class="form-check-label" for="paymentRadioTwo"><img
                            src="../assets/images/creditcard/mastercard.svg" alt="" /></label>
  </div>
  <!-- Radio button -->
  <div class="form-check">
      <input type="radio" id="paymentRadioFour" name="paymentRadioOne" class="form-check-input" />
      <label class="form-check-label" for="paymentRadioFour"><img src="../assets/images/creditcard/visa.svg"
 alt="" /></label>
 </div>
 </div>
 </div>
 <!-- Name on card -->
 <div class="mb-3 col-12 col-md-4">
     <label for="nameoncard" class="form-label">Name on card</label>
     <input id="nameoncard" type="text" class="form-control" name="nameoncard" placeholder="Name" required />
 </div>
 <!-- Month -->
 <div class="mb-3 col-12 col-md-4">
     <label class="form-label">Month</label>
     <select class="selectpicker" data-width="100%">
  <option value="">Month</option>
  <option value="Jan">Jan</option>
  <option value="Feb">Feb</option>
  <option value="Mar">Mar</option>
  <option value="Apr">Apr</option>
  <option value="May">May</option>
  <option value="June">June</option>
  <option value="July">July</option>
  <option value="Aug">Aug</option>
  <option value="Sep">Sep</option>
  <option value="Oct">Oct</option>
  <option value="Nov">Nov</option>
  <option value="Dec">Dec</option>
  </select>
   </div>
   <!-- Year -->
   <div class="mb-3 col-12 col-md-4">
<label class="form-label">Year</label>
   <select class="selectpicker" data-width="100%">
    <option value="">Year</option>
  <option value="June">2018</option>
  <option value="July">2019</option>
  <option value="August">2020</option>
  <option value="Sep">2021</option>
  <option value="Oct">2022</option>
</select>
   </div>
   <!-- Card number -->
   <div class="mb-3 col-md-8 col-12">
       <label for="cc-mask" class="form-label">Card Number</label>
       <input type="text" class="form-control" id="cc-mask" data-inputmask="'mask': '9999 9999 9999 9999'" inputmode="numeric" placeholder="xxxx-xxxx-xxxx-xxxx" required />
   </div>
   <!-- CVV -->
   <div class="mb-3 col-md-4 col-12">
       <div class="mb-3">
   <label for="cvv" class="form-label">CVV Code
  <i class="fe fe-help-circle ms-1" data-bs-toggle="tooltip" data-placement="top" title=""
    data-original-title="A 3 - digit number, typically printed on the back of a card."></i></label>
   <input type="password" class="form-control" name="cvv" id="cvv" placeholder="xxx" maxlength="3" inputmode="numeric" required />
  </div>
  </div>
  <!-- Button -->
  <div class="col-md-6 col-12">
      <button class="btn btn-primary" type="submit">
 Add New Card  </button>
<button class="btn btn-outline-white" type="button" data-bs-dismiss="modal">
                        Close
</button>
 </div>
 </form>
 <span><strong>Note:</strong> that you can later remove your card at
the account setting page.</span>
 </div>

Personal

Profile Details

You have full control to manage your own account setting.

Your avatar

PNG or JPG no bigger than 800px wide and tall.


Personal Details

Edit your personal information and address.

 <!-- Card -->
  <div class="card ">
    <!-- Card Header -->
    <div class="card-header">
      <h3 class="mb-0 ">Profile Details</h3>
      <p class="mb-0 ">You have full control to manage your own account setting.</p>
    </div>
    <!-- Card Body -->
    <div class="card-body">
      <div class="d-lg-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center mb-4 mb-lg-0">
          <img src="../assets/images/avatar/avatar-3.jpg" id="img-uploaded"
            class="avatar-xl rounded-circle " alt="">
          <div class="ms-3">
            <h4 class="mb-0">Your avatar</h4>
            <p class=" mb-0">PNG or JPG no bigger than 800px wide and tall.</p>
    </div>
  </div>
  <div>
    <a href="#" class="btn btn-outline-white btn-sm">Update</a>
    <a href="#" class="btn btn-outline-danger btn-sm ">Delete</a>
  </div>
  </div>
  <hr class="my-5">
  <div>
    <h4 class="mb-0">Personal Details</h4>
    <p class="mb-4 ">Edit your personal information and address.</p>
    <!-- Form -->
    <form class="row">
      <div class="mb-3 col-12 col-md-6">
        <label class="form-label" for="profilefname">First Name</label>
        <input type="text" id="profilefname" class="form-control" placeholder="First Name"
          required>
      </div>
  <div class="mb-3 col-12 col-md-6">
    <label class="form-label" for="profilelname">Last Name</label>
    <input type="text" id="profilelname" class="form-control" placeholder="Last Name"
      required>
  </div>
 <div class="mb-3 col-12 col-md-6">
   <label class="form-label" for="profilephone">Phone</label>
   <input type="text" id="profilephone" class="form-control" placeholder="Phone"
     required>
 </div>
  <div class="mb-3 col-12 col-md-6">
    <label class="form-label" for="birth">Birthday</label>
    <input class="form-control flatpickr" type="text" placeholder="Birth of Date"
      id="birth" name="birth">
  </div>
  <div class="mb-3 col-12 col-md-6">
    <label class="form-label" for="profileaddress">Address Line 1</label>
    <input type="text" id="profileaddress" class="form-control" placeholder="Address"
  required>
  </div>
  <div class="mb-3 col-12 col-md-6">
    <label class="form-label" for="profileaddress2">Address Line
      2</label>
    <input type="text" id="profileaddress2" class="form-control" placeholder="Address"
 required>
  </div>
  <div class="mb-3 col-12 col-md-6">
    <label class="form-label">State</label>
    <select class="selectpicker" data-width="100%">
      <option value="">Select State</option>
      <option value="1">Gujarat</option>
      <option value="2">Rajasthan</option>
  <option value="3">Maharashtra</option>
</select>
</div>
<div class="mb-3 col-12 col-md-6">
<label class="form-label">Country</label>
<select class="selectpicker" data-width="100%">
  <option value="">Select Country</option>
  <option value="1">India</option>
  <option value="2">UK</option>
  <option value="3">USA</option>
  </select>
</div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Update Profile</button>
  </div>
</form>
   </div>
 </div>
 </div>

Password Reset

Security

Edit your account settings and change your password here.

Email Address

Your current email address is geekslearn@gmail.com


Change Password

We will email you a confirmation when changing your password, so please expect that email after submitting.

Password strength

Can't remember your current password? Reset your password via email

<!-- Card -->
 <div class="card ">
    <!-- Card Header -->
    <div class="card-header">
       <h3 class="mb-0">Security</h3>
       <p class="mb-0 ">Edit your account settings and change your password here.</p>
    </div>
    <!-- Card  body -->
    <div class="card-body">
       <h4 class="mb-0">Email Address </h4>
       <p>Your current email address is <span class="text-success">geekslearn@gmail.com</span></p>
       <form class="row">
          <div class="mb-3 col-lg-6 col-md-12 col-12">
             <label class="form-label" for="email">New email address</label>
             <input id="email" type="email" name="email" class="form-control" placeholder="" required="">
             <button type="submit" class="btn btn-primary mt-2">Update Details</button>
          </div>
       </form>
       <hr class="my-5">
       <div>
          <h4 class="mb-0">Change Password</h4>
  <p>We will email you a confirmation when changing your password, so please expect that
     email after submitting.
  </p>
  <!-- Form -->
  <form class="row">
     <div class="col-lg-6 col-md-12 col-12">
        <div class="mb-3">
           <label class="form-label" for="currentpassword">Current password</label>
           <input id="currentpassword" type="currentpassword" name="currentpassword" class="form-control" placeholder="" required="">
        </div>
        <div class="mb-3 password-field">
           <label class="form-label" for="newpassword">New password</label>
           <input id="newpassword" type="password" name="newpassword" class="form-control mb-2" placeholder="" required="">
           <div class="row align-items-center g-0">
              <div class="col-6 ">
                 <span data-bs-toggle="tooltip" data-placement="right" title="" data-original-title="Test it by typing a password in the field below. To reach full strength, use at least 6 characters, a capital letter and a digit, e.g. 'Test01'">Password
                 strength <i class="fe fe-help-circle ms-1"></i></span>
              </div>
           </div>
        </div>
        <div class="mb-3">
           <label class="form-label" for="confirmpassword">Confirm New Password</label>
           <input id="confirmpassword" type="password" name="confirmpassword" class="form-control mb-2" placeholder="" required="">
        </div>
  <button type="submit" href="#" class="btn btn-primary">Save Password</button>
  <div class="col-6">
  </div>
  </div>
  <div class="col-12 mt-4">
  <p class="mb-0 ">Can't remember your current password? <a href="#">Reset your
 password via email</a>
          </p>
       </div>
    </form>
 </div>
 </div>
 </div>

Social Profile

Social Profiles

Add your social profile links in below social accounts.

Twitter
Add your Twitter username (e.g. johnsmith).
Facebook
Add your Facebook username (e.g. johnsmith).
Instagram
Add your Instagram username (e.g. johnsmith).
LinkedIn Profile URL
Add your linkedin profile URL. ( https://www.linkedin.com/in/jitu-chauhan-ba004b78)
YouTube
Add your Youtube profile URL.
<!-- Card -->
 <div class="card ">
    <!-- Card Header -->
    <div class="card-header">
       <h3 class="mb-0">Social Profiles</h3>
       <p class="mb-0 ">Add your social profile links in below social accounts.</p>
    </div>
    <!-- Card Body -->
    <div class="card-body">
 <div class="row mb-5">
    <div class="col-lg-3 col-md-4 col-12">
       <h5>Twitter</h5>
    </div>
    <div class="col-lg-9 col-md-8 col-12">
       <input type="text" class="form-control mb-1" placeholder="Twitter Profile Name">
       <small class="text-muted">Add your Twitter username (e.g. johnsmith).</small>
    </div>
 </div>
 <div class="row mb-5">
    <div class="col-lg-3 col-md-4 col-12">
       <h5>Facebook</h5>
    </div>
    <div class="col-lg-9 col-md-8 col-12">
       <input type="text" class="form-control mb-1" placeholder="Facebook Profile Name">
  <small class="text-muted">Add your Facebook username (e.g. johnsmith).</small>
   </div>
   </div>
   <div class="row mb-5">
  <div class="col-lg-3 col-md-4 col-12">
  <h5>Instagram</h5>
  </div>
  <div class="col-lg-9 col-md-8 col-12">
     <input type="text" class="form-control mb-1" placeholder="Instagram Profile Name">
     <small class="text-muted">Add your Instagram username (e.g. johnsmith).</small>
  </div>
   </div>
   <div class="row mb-5">
      <div class="col-lg-3 col-md-4 col-12">
         <h5>LinkedIn Profile URL</h5>
      </div>
      <div class="col-lg-9 col-md-8 col-12">
 <input type="text" class="form-control mb-1" placeholder="LinkedIn Profile URL ">
 <small class="text-muted">Add your linkedin profile URL. (
 https://www.linkedin.com/in/jitu-chauhan-ba004b78)</small>
   </div>
</div>
<div class="row mb-3">
 <div class="col-lg-3 col-md-4 col-12">
    <h5>YouTube</h5>
 </div>
 <div class="col-lg-9 col-md-8 col-12">
    <input type="text" class="form-control mb-1" placeholder="YouTube URL">
    <small class="text-muted">Add your Youtube profile URL. </small>
 </div>
 </div>
 <div class="row">
    <div class="offset-lg-3 col-lg-6 col-12">
       <a href="#" class="btn btn-primary">Save Social Profile</a>
    </div>
 </div>
 </div>
</div>