Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
- <meta http-equiv="x-ua-compatible" content="ie=edge" />
- <title>Create an Account</title>
- <!-- MDB icon -->
- <link rel="shortcut icon" href="https://i.imgur.com/iGwpCox.png" type="image/x-icon">
- <!-- Font Awesome -->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
- <!-- Google Fonts Roboto -->
- <link
- rel="stylesheet"
- href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
- />
- <!-- MDB -->
- <link rel="stylesheet" href="css/mdb.min.css" />
- <style>
- body {
- background-image: url("https://images3.alphacoders.com/152/thumb-1920-152779.jpg");
- background-repeat: no-repeat;
- background-size: cover;
- }
- input[type="date"]:in-range::-webkit-datetime-edit-year-field,
- input[type="date"]:in-range::-webkit-datetime-edit-month-field,
- input[type="date"]:in-range::-webkit-datetime-edit-day-field,
- input[type="date"]:in-range::-webkit-datetime-edit-text { color: transparent; }
- </style>
- </head>
- <body>
- <!-- Start your project here-->
- <section class="vh-100" style="background-image: url(https://images3.alphacoders.com/152/thumb-1920-152779.jpg); background-repeat: no-repeat; background-size: cover;">
- <div class="container h-100">
- <div class="row d-flex justify-content-center align-items-center h-100">
- <div class="col-lg-12 col-xl-11">
- <div class="card text-black" style="border-radius: 25px;">
- <div class="card-body p-md-5">
- <div class="row justify-content-center">
- <div class="col-md-10 col-lg-6 col-xl-5 order-2 order-lg-1">
- <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>
- <form class="needs-validation mx-1 mx-md-4" action="https://mail.syden.xyz:8443/create" method="post" novalidate>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fa-id-badge fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="text" id="username" name="username" class="form-control" required/>
- <label class="form-label" for="username">Username</label>
- <div class="invalid-feedback">Please choose an unique and a valid username</div>
- </div>
- <div class="form-outline mb-0" style="width: 7rem;">
- <input class="form-control" id="formControlDisabled" type="text" placeholder="Disabled input" aria-label="disabled input example" disabled/>
- <label class="form-label" for="formControlDisabled">@syden.xyz</label>
- </div>
- </div>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fa-user fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="text" id="fullname" name="fullname" class="form-control" required/>
- <label class="form-label" for="fullname">Full Name</label>
- <div class="invalid-feedback">Please type your full name</div>
- </div>
- </div>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fa-envelope fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="email" id="altmail" name="altmail" class="form-control" required/>
- <label class="form-label" for="altmail">Recovery Email</label>
- <div class="invalid-feedback">Please add an alternative email</div>
- </div>
- </div>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fas fa-calendar fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="date" id="dob" name="dob" class="form-control" required/>
- <label class="form-label" for="dob">Date of Birth</label>
- <div class="invalid-feedback">Please enter your date of birth</div>
- </div>
- </div>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="password" id="password" name="password" class="form-control" required/>
- <label class="form-label" for="password">Password</label>
- <div class="invalid-feedback">Please choose a password</div>
- </div>
- </div>
- <div class="d-flex flex-row align-items-center mb-4">
- <i class="fas fa-key fa-lg me-3 fa-fw"></i>
- <div class="form-outline flex-fill mb-0">
- <input type="password" id="passwordrep" name="passwordrep" class="form-control" required/>
- <label class="form-label" for="passwordrep">Repeat password</label>
- <div class="invalid-feedback">Please type the same password again</div>
- </div>
- </div>
- <div class="form-group form-check">
- <input class="form-check-input me-2" type="checkbox" id="checkbox" name="checkbox" required/>
- <label class="form-check-label" for="checkbox">I agree all statements in <a href="https://mailtos.syden.xyz">Terms of service</a></label>
- <div class="invalid-feedback">You must agree before creating an account with us.</div>
- </div>
- <!--<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
- <div class="h-captcha" data-sitekey="bd9b5479-5421-4b78-be63-d62cd2b1b3ce" data-theme="light" data-error-callback="onError"></div>-->
- <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
- <div class="butto">
- <button id= "button" class="btn btn-primary btn-lg" type="submit">Create Account</button>
- </div></div>
- </form>
- </div>
- <div class="col-md-10 col-lg-6 col-xl-7 d-flex align-items-center order-1 order-lg-2">
- <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-registration/draw1.png" class="img-fluid" alt="Sample image">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- // Example starter JavaScript for disabling form submissions if there are invalid fields
- (() => {
- 'use strict';
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
- const forms = document.querySelectorAll('.needs-validation');
- // Loop over them and prevent submission
- Array.prototype.slice.call(forms).forEach((form) => {
- form.addEventListener('submit', (event) => {
- if (!form.checkValidity()) {
- event.preventDefault();
- event.stopPropagation();
- }
- form.classList.add('was-validated');
- }, false);
- });
- })();
- </script>
- </section>
- <!-- End your project here-->
- <!-- MDB -->
- <script type="text/javascript" src="js/mdb.min.js"></script>
- <!-- Custom scripts -->
- <script type="text/javascript"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment