Advance Forms
Examples Snippet of Ajoru 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
<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
<!-- 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="₹ Indian">₹ 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 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/showyourtradesuidesign)</small>
</label>
<input class="form-control" id="facebookPage" placeholder="showyourtradesuidesign " 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="showyourtradesuidesign " 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/showyourtradesuidesign)</small>
</label>
<input class="form-control" id="youtubePage" placeholder="showyourtradesuidesign " 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/showyourtradesuidesign)</small>
</label>
<input class="form-control" id="instaPage" placeholder="showyourtradesuidesign " type="text" required="">
</div>
<button type="submit" class="btn btn-primary">
Update Settings
</button>
</form>
</div>
</div>Facebook login
Facebook Login Settings
<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/showyourtrades/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
<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/showyourtrades/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
<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/showyourtrades/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
<!-- 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/showyourtrades/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 Ajoru 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 Ajoru 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="Ajoru" 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@showyourtradesuidesign.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
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.
<!-- 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
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
<!-- 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 showyourtradeslearn@gmail.com
Change Password
We will email you a confirmation when changing your password, so please expect that email after submitting.
<!-- 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">showyourtradeslearn@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 Profiles
Add your social profile links in below social accounts.
Add your Twitter username (e.g.
johnsmith).
Add your Facebook username (e.g.
johnsmith).
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>
Social