<div class="my-account">
    <div class="header-title" style="background: url(assets/images/background/header.jpg);">
        <div class="container" id="mainDIV" >
        <div class="title">
            <h2>My Account</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Aenean commodo ligula eget dolor</p>
          </div>
    </div>
    </div>
    <div class="my-acc sec-padding" style="background: url(assets/images/background/download.svg);">
        <div class="container">
            <mat-card fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="start start"  class="p-0">
                <div class="my-account-wrap p-0" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="start start" >
                    <div class="login-wrapper pr-50" fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50">
                        <div class="title">
                          <h3>Login</h3>
                        </div>
                        <form fxLayout="row wrap">
                            <div  fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                                <mat-form-field class="w-100">
                                    <input matInput placeholder="Username or email address (required)" #name="ngModel" ngModel name="name" required>
                                    <mat-error *ngIf="name.invalid">Please enter a valid message</mat-error>
                                  </mat-form-field>
                            </div>
                            <div  fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                                <mat-form-field class="w-100">
                                    <input matInput placeholder="Password (required)" #email="ngModel" ngModel name="email" required>
                                    <mat-error *ngIf="email.invalid">Please enter a valid message</mat-error>
                                  </mat-form-field>
                            </div>
                            <div class="button-wrap" fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                                <button class="btn-project" mat-raised-button color="accent" type="submit">Log in</button>
                              </div>
                            </form>
                      </div>
                      <div class="register-wrapper pr-15" fxFlex="100" fxFlex.gt-md="50" fxFlex.md="50">
                          <div class="title">
                              <h3>Register</h3>
                            </div>
                            <div class="register-body">
                              <p>Create new account today to reap the benefits of a personalized shopping experience.</p>
                              <form fxLayout="row wrap">
                                  <div  fxFlex="100" fxFlex.gt-sm="100" class="px-1" ngClass.sm="mt-1" ngClass.xs="mt-1">
                                      <mat-form-field class="w-100">
                                          <input matInput placeholder="Username or email address (required)" #name="ngModel" ngModel name="name" required>
                                          <mat-error *ngIf="name.invalid">Please enter a valid message</mat-error>
                                        </mat-form-field>
                                  </div>

                                  <p>Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our privacy policy.</p>
                                  <div class="button-wrap" fxFlex="100" fxFlex.gt-sm="100" ngClass.sm="mt-1" ngClass.xs="mt-1">
                                      <button class="btn-project" mat-raised-button color="accent" type="submit">Register</button>
                                    </div>
                                  </form>
                            </div>
                        </div>
              </div>
            </mat-card>

        </div>
    </div>

</div>