Advertisement
Guest User

Untitled

a guest
Nov 9th, 2021
43
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  6. <meta http-equiv="x-ua-compatible" content="ie=edge" />
  7. <title>Create an Account</title>
  8. <!-- MDB icon -->
  9. <link rel="shortcut icon" href="https://i.imgur.com/iGwpCox.png" type="image/x-icon">
  10. <!-- Font Awesome -->
  11. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  12. <!-- Google Fonts Roboto -->
  13. <link
  14. rel="stylesheet"
  15. href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
  16. />
  17. <!-- MDB -->
  18. <link rel="stylesheet" href="css/mdb.min.css" />
  19. <style>
  20. body {
  21. background-image: url("https://images3.alphacoders.com/152/thumb-1920-152779.jpg");
  22. background-repeat: no-repeat;
  23. background-size: cover;
  24. }
  25. input[type="date"]:in-range::-webkit-datetime-edit-year-field,
  26. input[type="date"]:in-range::-webkit-datetime-edit-month-field,
  27. input[type="date"]:in-range::-webkit-datetime-edit-day-field,
  28. input[type="date"]:in-range::-webkit-datetime-edit-text { color: transparent; }
  29. </style>
  30. </head>
  31. <body>
  32. <!-- Start your project here-->
  33. <section class="vh-100" style="background-image: url(https://images3.alphacoders.com/152/thumb-1920-152779.jpg); background-repeat: no-repeat; background-size: cover;">
  34. <div class="container h-100">
  35. <div class="row d-flex justify-content-center align-items-center h-100">
  36. <div class="col-lg-12 col-xl-11">
  37. <div class="card text-black" style="border-radius: 25px;">
  38. <div class="card-body p-md-5">
  39. <div class="row justify-content-center">
  40. <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
  41.  
  42. <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Sign Up! <a href="https://cp.dnspark.in:2096/" style="font-size: 15px;"><span title="Webmail - Roundcube/Horde" style="margin-left:2em">Sign in</span></a></p>
  43.  
  44. <form class="needs-validation mx-1 mx-md-4" action="https://mail.syden.xyz:8443/create" method="post" novalidate>
  45.  
  46. <div class="d-flex flex-row align-items-center mb-4">
  47. <i class="fas fa-id-badge fa-lg me-3 fa-fw"></i>
  48. <div class="form-outline flex-fill mb-0">
  49. <input type="text" id="username" name="username" class="form-control" required/>
  50. <label class="form-label" for="username">Username</label>
  51. <div class="invalid-feedback">Please choose an unique and a valid username</div>
  52. </div>
  53.  
  54. <div class="form-outline mb-0" style="width: 7rem;">
  55. <input class="form-control" id="formControlDisabled" type="text" placeholder="Disabled input" aria-label="disabled input example" disabled/>
  56. <label class="form-label" for="formControlDisabled">@syden.xyz</label>
  57. </div>
  58. </div>
  59.  
  60. <div class="d-flex flex-row align-items-center mb-4">
  61. <i class="fas fa-user fa-lg me-3 fa-fw"></i>
  62. <div class="form-outline flex-fill mb-0">
  63. <input type="text" id="fullname" name="fullname" class="form-control" required/>
  64. <label class="form-label" for="fullname">Full Name</label>
  65. <div class="invalid-feedback">Please type your full name</div>
  66. </div>
  67. </div>
  68.  
  69. <div class="d-flex flex-row align-items-center mb-4">
  70. <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
  71. <div class="form-outline flex-fill mb-0">
  72. <input type="email" id="altmail" name="altmail" class="form-control" required/>
  73. <label class="form-label" for="altmail">Recovery Email</label>
  74. <div class="invalid-feedback">Please add an alternative email</div>
  75. </div>
  76. </div>
  77.  
  78. <div class="d-flex flex-row align-items-center mb-4">
  79. <i class="fas fas fa-calendar fa-lg me-3 fa-fw"></i>
  80. <div class="form-outline flex-fill mb-0">
  81. <input type="date" id="dob" name="dob" class="form-control" required/>
  82. <label class="form-label" for="dob">Date of Birth</label>
  83. <div class="invalid-feedback">Please enter your date of birth</div>
  84. </div>
  85. </div>
  86.  
  87. <div class="d-flex flex-row align-items-center mb-4">
  88. <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
  89. <div class="form-outline flex-fill mb-0">
  90. <input type="password" id="password" name="password" class="form-control" required/>
  91. <label class="form-label" for="password">Password</label>
  92. <div class="invalid-feedback">Please choose a password</div>
  93. </div>
  94. </div>
  95.  
  96. <div class="d-flex flex-row align-items-center mb-4">
  97. <i class="fas fa-key fa-lg me-3 fa-fw"></i>
  98. <div class="form-outline flex-fill mb-0">
  99. <input type="password" id="passwordrep" name="passwordrep" class="form-control" required/>
  100. <label class="form-label" for="passwordrep">Repeat password</label>
  101. <div class="invalid-feedback">Please type the same password again</div>
  102. </div>
  103. </div>
  104.  
  105. <div class="form-group form-check">
  106. <input class="form-check-input me-2" type="checkbox" id="checkbox" name="checkbox" required/>
  107. <label class="form-check-label" for="checkbox">I agree all statements in <a href="https://mailtos.syden.xyz">Terms of service</a></label>
  108. <div class="invalid-feedback">You must agree before creating an account with us.</div>
  109. </div>
  110. <!--<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  111. <div class="h-captcha" data-sitekey="bd9b5479-5421-4b78-be63-d62cd2b1b3ce" data-theme="light" data-error-callback="onError"></div>-->
  112.  
  113. <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
  114. <div class="butto">
  115. <button id= "button" class="btn btn-primary btn-lg" type="submit">Create Account</button>
  116. </div></div>
  117.  
  118. </form>
  119.  
  120. </div>
  121. <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
  122.  
  123. <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/draw1.png" class="img-fluid" alt="Sample image">
  124.  
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <script>
  133. // Example starter JavaScript for disabling form submissions if there are invalid fields
  134. (() => {
  135. 'use strict';
  136.  
  137. // Fetch all the forms we want to apply custom Bootstrap validation styles to
  138. const forms = document.querySelectorAll('.needs-validation');
  139.  
  140. // Loop over them and prevent submission
  141. Array.prototype.slice.call(forms).forEach((form) => {
  142. form.addEventListener('submit', (event) => {
  143. if (!form.checkValidity()) {
  144. event.preventDefault();
  145. event.stopPropagation();
  146. }
  147. form.classList.add('was-validated');
  148. }, false);
  149. });
  150. })();
  151. </script>
  152. </section>
  153. <!-- End your project here-->
  154.  
  155. <!-- MDB -->
  156. <script type="text/javascript" src="js/mdb.min.js"></script>
  157. <!-- Custom scripts -->
  158. <script type="text/javascript"></script>
  159. </body>
  160. </html>
  161.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement