API tools faq
paste
Kayloo_YT

Untitled

Kayloo_YT
Feb 25th, 2021
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.67 KB | None | 0 0
raw download clone embed print report
  1. <div class="app-content content ">
  2. <div class="content-overlay"></div>
  3. <div class="header-navbar-shadow"></div>
  4. <div class="content-wrapper">
  5. <div class="content-body">
  6.  
  7. <!-- Modern Horizontal Wizard -->
  8. <section class="modern-horizontal-wizard">
  9. <div class="bs-stepper wizard-modern modern-wizard-example">
  10. <div class="bs-stepper-header">
  11. <div class="step" data-target="#account-details-modern">
  12. <button type="button" class="step-trigger">
  13. <span class="bs-stepper-box">
  14. <i data-feather="file-text" class="font-medium-3"></i>
  15. </span>
  16. <span class="bs-stepper-label">
  17. <span class="bs-stepper-title">Account Details</span>
  18. <span class="bs-stepper-subtitle">Setup Account Details</span>
  19. </span>
  20. </button>
  21. </div>
  22. <div class="line">
  23. <i data-feather="chevron-right" class="font-medium-2"></i>
  24. </div>
  25. <div class="step" data-target="#personal-info-modern">
  26. <button type="button" class="step-trigger">
  27. <span class="bs-stepper-box">
  28. <i data-feather="user" class="font-medium-3"></i>
  29. </span>
  30. <span class="bs-stepper-label">
  31. <span class="bs-stepper-title">Personal Info</span>
  32. <span class="bs-stepper-subtitle">Add Personal Info</span>
  33. </span>
  34. </button>
  35. </div>
  36. <div class="line">
  37. <i data-feather="chevron-right" class="font-medium-2"></i>
  38. </div>
  39. <div class="step" data-target="#address-step-modern">
  40. <button type="button" class="step-trigger">
  41. <span class="bs-stepper-box">
  42. <i data-feather="map-pin" class="font-medium-3"></i>
  43. </span>
  44. <span class="bs-stepper-label">
  45. <span class="bs-stepper-title">Address</span>
  46. <span class="bs-stepper-subtitle">Add Address</span>
  47. </span>
  48. </button>
  49. </div>
  50. <div class="line">
  51. <i data-feather="chevron-right" class="font-medium-2"></i>
  52. </div>
  53. <div class="step" data-target="#social-links-modern">
  54. <button type="button" class="step-trigger">
  55. <span class="bs-stepper-box">
  56. <i data-feather="link" class="font-medium-3"></i>
  57. </span>
  58. <span class="bs-stepper-label">
  59. <span class="bs-stepper-title">Social Links</span>
  60. <span class="bs-stepper-subtitle">Add Social Links</span>
  61. </span>
  62. </button>
  63. </div>
  64. </div>
  65. <div class="bs-stepper-content">
  66. <div id="account-details-modern" class="content">
  67. <div class="content-header">
  68. <h5 class="mb-0">Account Details</h5>
  69. <small class="text-muted">Enter Your Account Details.</small>
  70. </div>
  71. <div class="row">
  72. <div class="form-group col-md-6">
  73. <label class="form-label" for="modern-username">Username</label>
  74. <input type="text" id="modern-username" class="form-control" placeholder="johndoe" />
  75. </div>
  76. <div class="form-group col-md-6">
  77. <label class="form-label" for="modern-email">Email</label>
  78. <input type="email" id="modern-email" class="form-control" placeholder="[email protected]" aria-label="john.doe" />
  79. </div>
  80. </div>
  81. <div class="row">
  82. <div class="form-group form-password-toggle col-md-6">
  83. <label class="form-label" for="modern-password">Password</label>
  84. <input type="password" id="modern-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
  85. </div>
  86. <div class="form-group form-password-toggle col-md-6">
  87. <label class="form-label" for="modern-confirm-password">Confirm Password</label>
  88. <input type="password" id="modern-confirm-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" />
  89. </div>
  90. </div>
  91. <div class="d-flex justify-content-between">
  92. <button class="btn btn-outline-secondary btn-prev" disabled>
  93. <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
  94. <span class="align-middle d-sm-inline-block d-none">Previous</span>
  95. </button>
  96. <button class="btn btn-primary btn-next">
  97. <span class="align-middle d-sm-inline-block d-none">Next</span>
  98. <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
  99. </button>
  100. </div>
  101. </div>
  102. <div id="personal-info-modern" class="content">
  103. <div class="content-header">
  104. <h5 class="mb-0">Personal Info</h5>
  105. <small>Enter Your Personal Info.</small>
  106. </div>
  107. <div class="row">
  108. <div class="form-group col-md-6">
  109. <label class="form-label" for="modern-first-name">First Name</label>
  110. <input type="text" id="modern-first-name" class="form-control" placeholder="John" />
  111. </div>
  112. <div class="form-group col-md-6">
  113. <label class="form-label" for="modern-last-name">Last Name</label>
  114. <input type="text" id="modern-last-name" class="form-control" placeholder="Doe" />
  115. </div>
  116. </div>
  117. <div class="row">
  118. <div class="form-group col-md-6">
  119. <label class="form-label" for="modern-country">Country</label>
  120. <select class="select2 w-100" id="modern-country">
  121. <option label=" "></option>
  122. <option>UK</option>
  123. <option>USA</option>
  124. <option>Spain</option>
  125. <option>France</option>
  126. <option>Italy</option>
  127. <option>Australia</option>
  128. </select>
  129. </div>
  130. <div class="form-group col-md-6">
  131. <label class="form-label" for="modern-language">Language</label>
  132. <select class="select2 w-100" id="modern-language" multiple>
  133. <option>English</option>
  134. <option>French</option>
  135. <option>Spanish</option>
  136. </select>
  137. </div>
  138. </div>
  139. <div class="d-flex justify-content-between">
  140. <button class="btn btn-primary btn-prev">
  141. <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
  142. <span class="align-middle d-sm-inline-block d-none">Previous</span>
  143. </button>
  144. <button class="btn btn-primary btn-next">
  145. <span class="align-middle d-sm-inline-block d-none">Next</span>
  146. <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
  147. </button>
  148. </div>
  149. </div>
  150. <div id="address-step-modern" class="content">
  151. <div class="content-header">
  152. <h5 class="mb-0">Address</h5>
  153. <small>Enter Your Address.</small>
  154. </div>
  155. <div class="row">
  156. <div class="form-group col-md-6">
  157. <label class="form-label" for="modern-address">Address</label>
  158. <input type="text" id="modern-address" class="form-control" placeholder="98 Borough bridge Road, Birmingham" />
  159. </div>
  160. <div class="form-group col-md-6">
  161. <label class="form-label" for="modern-landmark">Landmark</label>
  162. <input type="text" id="modern-landmark" class="form-control" placeholder="Borough bridge" />
  163. </div>
  164. </div>
  165. <div class="row">
  166. <div class="form-group col-md-6">
  167. <label class="form-label" for="pincode3">Pincode</label>
  168. <input type="text" id="pincode3" class="form-control" placeholder="658921" />
  169. </div>
  170. <div class="form-group col-md-6">
  171. <label class="form-label" for="city3">City</label>
  172. <input type="text" id="city3" class="form-control" placeholder="Birmingham" />
  173. </div>
  174. </div>
  175. <div class="d-flex justify-content-between">
  176. <button class="btn btn-primary btn-prev">
  177. <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
  178. <span class="align-middle d-sm-inline-block d-none">Previous</span>
  179. </button>
  180. <button class="btn btn-primary btn-next">
  181. <span class="align-middle d-sm-inline-block d-none">Next</span>
  182. <i data-feather="arrow-right" class="align-middle ml-sm-25 ml-0"></i>
  183. </button>
  184. </div>
  185. </div>
  186. <div id="social-links-modern" class="content">
  187. <div class="content-header">
  188. <h5 class="mb-0">Social Links</h5>
  189. <small>Enter Your Social Links.</small>
  190. </div>
  191. <div class="row">
  192. <div class="form-group col-md-6">
  193. <label class="form-label" for="modern-twitter">Twitter</label>
  194. <input type="text" id="modern-twitter" class="form-control" placeholder="https://twitter.com/abc" />
  195. </div>
  196. <div class="form-group col-md-6">
  197. <label class="form-label" for="modern-facebook">Facebook</label>
  198. <input type="text" id="modern-facebook" class="form-control" placeholder="https://facebook.com/abc" />
  199. </div>
  200. </div>
  201. <div class="row">
  202. <div class="form-group col-md-6">
  203. <label class="form-label" for="modern-google">Google+</label>
  204. <input type="text" id="modern-google" class="form-control" placeholder="https://plus.google.com/abc" />
  205. </div>
  206. <div class="form-group col-md-6">
  207. <label class="form-label" for="modern-linkedin">Linkedin</label>
  208. <input type="text" id="modern-linkedin" class="form-control" placeholder="https://linkedin.com/abc" />
  209. </div>
  210. </div>
  211. <div class="d-flex justify-content-between">
  212. <button class="btn btn-primary btn-prev">
  213. <i data-feather="arrow-left" class="align-middle mr-sm-25 mr-0"></i>
  214. <span class="align-middle d-sm-inline-block d-none">Previous</span>
  215. </button>
  216. <button class="btn btn-success btn-submit">Submit</button>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. </section>
  222. <!-- /Modern Horizontal Wizard -->
  223. </div>
  224. </div>
  225. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!