Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //HTML
- <div class="registerBody">
- <div class="registerClass">
- <div class="row">
- <form class="col s12" id="reg-form">
- <div class="row">
- <div class="input-field col s6">
- <input asp-for="FirstName" type="text" name="firstname" id="your-firstName" class="input-text" placeholder="First Name">
- <span asp-validation-for="FirstName" id="validate-firstName" class="custom-validation" data-placeholder=""></span>
- </div>
- <div class="input-field col s6">
- <input asp-for="LastName" type="text" name="lastname" id="your-lastName" class="input-text" placeholder="Last Name">
- <span asp-validation-for="Email" id="validate-email" class="custom-validation" data-placeholder=""></span>
- </div>
- </div>
- <div class="row">
- <div class="input-field col s6">
- <input asp-for="Email" type="text" name="email" id="your-email" class="input-text" placeholder="Email" required pattern="[^@@]+@@[^@@]+.[a-zA-Z]{2,6}">
- <span asp-validation-for="Email" id="validate-email" class="custom-validation" data-placeholder=""></span>
- </div>
- <div class="input-field col s6">
- <input asp-for="UserName" type="text" name="username" id="your-name" class="input-text" placeholder="Username" required>
- <span asp-validation-for="UserName" id="validate-name" class="custom-validation" data-placeholder=""></span>
- </div>
- </div>
- <div class="row">
- <div class="input-field col s6">
- <input asp-for="Password" type="password" name="password" id="password" class="input-text" placeholder="Password" required>
- <p asp-validation-for="Password" id="validate-password" class="custom-validation" data-placeholder=""></p>
- </div>
- </div>
- <div class="row">
- <div class="input-field col s6">
- <input asp-for="Password" type="password" name="confirmpassword" id="confirm-password" class="input-text" placeholder="Cofirm Password" required>
- <p asp-validation-for="ConfirmPassword" class="custom-validation" id="ConfirmPassword" data-placeholder=""></p>
- </div>
- </div>
- <div class="input-field col s6">
- <div class="gender-male" id="operator-manager">
- <input class="with-gap" name="role" value="Operator" type="radio" id="operator" required />
- <label for="operator">Operator</label>
- </div>
- <div class="gender-female">
- <input class="with-gap" name="role" value="Manager" type="radio" id="manager" required />
- <label for="manager">Manager</label>
- </div>
- </div>
- <div class="input-field col s6">
- <input type="button" id="RegisterButton" name="register" class="register btn btn-large btn-register waves-effect waves-light" value="Register">
- </div>
- </div>
- </form>
- </div>
- </div>
- </div>
- @section scripts{
- <script src="~/lib/jquery/dist/jquery.js"></script>
- <script src="~/js/Register.js"></script>
- }
- -------------------------------------------------------------------------------------------------------
- //CSS
- .registerBody {
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
- background-fill-mode: rgba(0,0,0,0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- height: 450px;
- width: 550px;
- margin:auto;
- position:relative;
- }
- .registerClass {
- background: white;
- padding: 20px 25px;
- border: 3px solid #EC7423;
- border-radius: 5px;
- width: 550px;
- height: auto;
- box-sizing: border-box;
- position: relative;
- }
- .col.s6 > .btn {
- color: white;
- background: #EC7423;
- border: 1px solid #EC7423;
- margin-left: -14px;
- margin-top: 10px;
- width: 39%;
- margin-left: 247px;
- }
- .col.s6 > .btn:hover {
- color: #EC7423;
- border: 1px solid #EC7423;
- background: #FFF;
- }
- .gender-male, .gender-female {
- display: inline-block;
- margin-left: -12px;
- }
- .gender-female {
- margin-left: 35px;
- }
- radio:required {
- border-color: red;
- }
- @keyframes showUp {
- 0% {
- transform: scale(0);
- }
- 100% {
- transoform: scale(1);
- }
- }
- .row {
- margin-bottom: 10px;
- }
- .ngl {
- position: absolute;
- top: -20px;
- right: -20px;
- }
- button, input {
- color: #000;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement