Sup_File/src/app/home/home.component.html

<!--Main Navigation-->
<header>

  <!--Navbar-->
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <logo>
      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
    </logo>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" href="#">Profile</a>
        </li>
      </ul>
      <form class="form-inline waves-light" mdbWavesEffect>
        <div class="md-form mt-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </links>
  </mdb-navbar>

  <!--Intro Section-->
  <section class="view intro-2">
    <div class="full-bg-img mask rgba-gradient">
      <div class="container flex-center">
        <div class="d-flex align-items-center content-height w-100">
          <div class="row flex-center pt-5 mt-3 w-100">
            <div class="col-md-6 text-center text-md-left mb-5">
              <div class="white-text">
                <h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</h6>
                <br>
                <a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
              </div>
            </div>

            <div class="col-md-6 col-xl-5 offset-xl-1">
              <!--Form-->
              <div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
                <div class="card-body">
                  <!--Header-->
                  <div class="text-center">
                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>
                    <hr class="hr-light">
                  </div>

                  <!--Body-->
                  <div class="md-form">
                    <i class="fa fa-envelope prefix white-text"></i>
                    <input type="email" id="form2" class="form-control" [(ngModel)]="loginData.username" data-error=" " data-success=" " mdbInputDirective>
                    <label for="form2">Email</label>
                  </div>

                  <div class="md-form">
                    <i class="fa fa-lock prefix white-text"></i>
                    <input type="password" id="form4" class="form-control" [(ngModel)]="loginData.password" data-error=" " data-success=" " mdbInputDirective>
                    <label for="form4">Password</label>
                  </div>

                  <div class="text-center">
                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="login()">Log In</button>
                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
                    <hr class="hr-light mb-3 mt-4">
                    <div class="inline-ul text-center d-flex justify-content-center">
                      <a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <!--/.Form-->



              <!--Form-->
              <div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
                <div class="card-body">
                  <!--Header-->
                  <div class="text-center">
                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
                    <hr class="hr-light">
                  </div>

                  <!--Body-->
                  <div class="md-form">
                    <i class="fa fa-user prefix white-text"></i>
                    <input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>
                    <label for="form3">Your name</label>
                  </div>
                  <div class="md-form">
                    <i class="fa fa-envelope prefix white-text"></i>
                    <input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " [(ngModel)]="signupData.username" class="form-control" mdbInputDirective>
                    <label for="form2">Your email</label>
                  </div>

                  <div class="md-form">
                    <i class="fa fa-lock prefix white-text"></i>
                    <input type="password" id="form4" data-success=" " data-error=" " [(ngModel)]="signupData.password" class="form-control"  mdbInputDirective>
                    <label for="form4">Your password</label>
                  </div>

                  <div class="text-center">
                    <button class="btn btn-indigo waves-light" (click)="signup()" mdbWavesEffect>Sign up</button>
                    <button class="btn btn-indigo waves-light" mdbWavesEffect (click)="showregister()">Log In</button>
                    <hr class="hr-light mb-3 mt-4">

                    <div class="inline-ul text-center d-flex justify-content-center">
                      <a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <!--/.Form-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</header>
<!--Main Navigation-->