CodeLiturgy.Dashboard/CodeLiturgy.Views/Views/Auth/Signup.cshtml

<div class="q-pa-md q-gutter-sm">
    <div class="row">
        <div class="col col-md-8">
            <div class="q-breadcrumbs">
                <div class="flex items-center justify-start q-gutter-sm">
                    <div class="flex items-center text-primary">
                        <a class="q-breadcrumbs__el q-link flex inline items-center relative-position q-link--focusable">
                            <i class="q-icon notranslate material-icons q-breadcrumbs__el-icon q-breadcrumbs__el-icon--with-label">share_location</i>
                            System
                        </a>
                    </div>
                    <div class="q-breadcrumbs__separator">/</div>
                    <div class="flex items-center q-breadcrumbs--last">
                        <span class="q-breadcrumbs__el q-link flex inline items-center relative-position q-link--focusable">Login</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="new-user-container">
        <div class="q-pa-md" style="max-width: 400px;">
            <form method="POST" action="SignupAction" class="q-form q-gutter-md">
                <label class="q-field row no-wrap items-start q-field--filled q-input q-field--labeled q-field--dark q-field--with-bottom">
                    <div class="q-field__inner relative-position col self-stretch">
                        <div class="q-field__control relative-position row no-wrap">
                            <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                                <input class="q-field__native q-placeholder" name="email" aria-label="Email" type="email">
                                <div class="q-field__label no-pointer-events absolute ellipsis">Name</div>
                            </div>
                        </div>
                        <div class="q-field__bottom row items-start q-field__bottom--animated">
                            <div class="q-field__messages col">
                                <div>Email address</div>
                            </div>
                        </div>
                    </div>
                </label>
                <label class="q-field row no-wrap items-start q-field--filled q-input q-field--labeled q-field--dark q-field--with-bottom">
                    <div class="q-field__inner relative-position col self-stretch">
                        <div class="q-field__control relative-position row no-wrap">
                            <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                                <input class="q-field__native q-placeholder" name="username" aria-label="username" type="name">
                                <div class="q-field__label no-pointer-events absolute ellipsis">Username</div>
                            </div>
                        </div>
                        <div class="q-field__bottom row items-start q-field__bottom--animated">
                            <div class="q-field__messages col">
                                <div>Username</div>
                            </div>
                        </div>
                    </div>
                </label>
                <label class="q-field row no-wrap items-start q-field--filled q-input q-field--labeled q-field--dark q-field--with-bottom">
                    <div class="q-field__inner relative-position col self-stretch">
                        <div class="q-field__control relative-position row no-wrap">
                            <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                                <input class="q-field__native q-placeholder" name="phoneNumber" aria-label="phoneNumber" type="phoneNumber">
                                <div class="q-field__label no-pointer-events absolute ellipsis">Phone Number</div>
                            </div>
                        </div>
                        <div class="q-field__bottom row items-start q-field__bottom--animated">
                            <div class="q-field__messages col">
                                <div>Phone Number</div>
                            </div>
                        </div>
                    </div>
                </label>
                
                
                <label class="q-field row no-wrap items-start q-field--filled q-input q-field--labeled q-field--dark q-field--with-bottom">
                    <div class="q-field__inner relative-position col self-stretch">
                        <div class="q-field__control relative-position row no-wrap" tabindex="-1">
                            <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                                <input class="q-field__native q-placeholder" tabindex="0" aria-label="Password" name="password" type="password">
                            </div>
                            <div class="q-field__bottom row items-start q-field__bottom--animated">
                                <div class="q-field__messages col">
                                    <div>Password</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
                <label class="q-field row no-wrap items-start q-field--filled q-input q-field--labeled q-field--dark q-field--with-bottom">
                    <div class="q-field__inner relative-position col self-stretch">
                        <div class="q-field__control relative-position row no-wrap" tabindex="-1">
                            <div class="q-field__control-container col relative-position row no-wrap q-anchor--skip">
                                <input class="q-field__native q-placeholder" tabindex="0" aria-label="confirmPassword" name="confirmPassword" type="password">
                            </div>
                            <div class="q-field__bottom row items-start q-field__bottom--animated">
                                <div class="q-field__messages col">
                                    <div>Confirm Password</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </label>
                
                
                <div>
                    <button class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable">
                        <span class="q-focus-helper"></span>
                        <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                            <span class="block">Login</span>
                        </span>
                    </button>
                    <button class="q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle text-primary q-btn--actionable q-focusable q-hoverable q-ml-sm" type="reset">
                        <span class="q-focus-helper"></span>
                        <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
                            <span class="block">Reset</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>