Sup_File/src/app/home/home.component.html
2018-05-31 02:29:59 +02:00

137 lines
6.2 KiB
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" 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" data-error=" " data-success=" " mdbInputDirective>
<label for="form4">Password</label>
</div>
<div class="text-center">
<button class="btn btn-indigo waves-light" mdbWavesEffect>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=" " 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=" " class="form-control" mdbInputDirective>
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-indigo waves-light" 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-->