AnisB
/
Sup_File
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

home final version

Browse Source
anis
Viiciouss 6 years ago
parent 6a7f64c044
commit 1e87f74650
2 changed files with 138 additions and 137 deletions
Show Stats Download Patch File Download Diff File

269
src/app/home/home.component.html
Unescape Escape View File

@ -16,7 +16,7 @@
<a class="nav-link" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600">Features</a>
</li>
<li class="nav-item waves-light" mdbWavesEffect>
<a class="nav-link" mdbPageScroll href="#teamSection" [pageScrollDuration]="600">Team</a>
<a class="nav-link" mdbPageScroll href="#priceSection" [pageScrollDuration]="600">Offers</a>
</li>
</ul>
</links>
@ -32,9 +32,17 @@
<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>
<h6 class="wow fadeInLeft" data-wow-delay="0.3s">Easy, secured and accessible everywhere keep and save your data on SupFile !
All kind of files supported (medias, compressed files, …)
<br>
Keep the control on the cloud.
<br>
Accessible from any device.
<br>
Stay organized with a single simple interface.
</h6>
<br>
<a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
<a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600" mdbWavesEffect>Learn more</a>
</div>
</div>
@ -67,7 +75,7 @@
<button class="btn btn-secondary 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 fb-ic px-4" (click)="facebook()"><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>
@ -112,7 +120,7 @@
<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" (click)="facebook()"><i class="fa fa-facebook white-text"> </i></a>
<a class="icons-sm fb-ic px-4" (click)="facebook()" onclick="location.href='/api/facebook'"><i class="fa fa-facebook white-text"> </i></a>
<a class="icons-sm gplus-ic px-4" onclick="location.href='/api/github'" ><i class="fa fa-google white-text"> </i></a>
<a class="icons-sm px-4" onclick="location.href='/api/google'"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
</div>
@ -138,8 +146,7 @@
<!--Section heading-->
<h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.</p>
<p class="px-5 mb-5 pb-3 lead grey-text">SupFile is the easiest way to access anywhere to your files !</p>
</div>
<!--Grid row-->
@ -147,30 +154,27 @@
<!--Grid column-->
<div class="col-md-4 wow fadeInLeft">
<i class="fa fa-area-chart fa-3x red-text"></i>
<h5 class="font-weight-bold mt-3">Analytics</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.
<i class="fa fa-share-alt fa-3x pink-text"></i>
<h5 class="font-weight-bold mt-3">Simple</h5>
<p class="grey-text">With a simple and intuitive interface you are able to have a total control access to your data on SupFile.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 wow fadeInUp">
<i class="fa fa-book fa-3x cyan-text"></i>
<h5 class="font-weight-bold mt-3">Tutorials</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.
<i class="fa fa-lock fa-3x cyan-text"></i>
<h5 class="font-weight-bold mt-3">Secured</h5>
<p class="grey-text">You are the only holder on your files. SupFile is secured to keep your privacy and your datas in total security.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-4 wow fadeInRight">
<i class="fa fa-comments-o fa-3x orange-text"></i>
<h5 class="font-weight-bold mt-3">Support</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
deleniti hic.
<i class="fa fa-comments-o fa-3x purple-text"></i>
<h5 class="font-weight-bold mt-3">Accessible</h5>
<p class="grey-text">Accès to your cloud on any device. SupFile application is available soon on the PlayStore.
</p>
</div>
<!--Grid column-->
@ -181,140 +185,135 @@
</section>
<!--Section: Features v.1-->
<hr id="teamSection">
<!-- Section: Team v.3 -->
<section class="team-section my-5">
<hr class="wow fadeInRight" id="priceSection">
<!--Section: Pricing v.2-->
<section class="text-center pb-3 my-5">
<div class="container-fluid wow fadeInDown">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Our amazing team</h2>
<!-- Section description -->
<p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5"><strong>Expand</strong> your horizons</p>
</div>
<!-- Grid row-->
<div class="row text-center text-md-left wow fadeInLeft">
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-5">
<div class="col-md-4 col-lg-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
</div>
</div>
<div class="col-md-8 col-lg-6 float-right">
<h4 class="font-weight-bold mb-3">John Doe</h4>
<h6 class="font-weight-bold grey-text mb-3">Web Designer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook-->
<a class="p-2 fa-lg fb-ic">
<i class="fa fa-facebook"> </i>
</a>
<!-- Twitter -->
<a class="p-2 fa-lg tw-ic">
<i class="fa fa-twitter"> </i>
</a>
<!-- GitHub-->
<a class="p-2 fa-lg git-ic">
<i class="fa fa-github"> </i>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-5">
<div class="col-md-4 col-lg-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded z-depth-1" alt="Sample avatar">
<!--Grid row-->
<div class="row priceList">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInRight">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-cyan-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Basic</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">0</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>30</strong> Go</p>
</li>
<li>
<p>
<strong>Limited speed</strong>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
</div>
</div>
<div class="col-md-8 col-lg-6 float-right">
<h4 class="font-weight-bold mb-3">Maria Kate</h4>
<h6 class="font-weight-bold grey-text mb-3">Photographer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook-->
<a class="p-2 fa-lg fb-ic">
<i class="fa fa-facebook"> </i>
</a>
<!-- Twitter -->
<a class="p-2 fa-lg tw-ic">
<i class="fa fa-twitter"> </i>
</a>
<!-- GitHub-->
<a class="p-2 fa-lg git-ic">
<i class="fa fa-github"> </i>
</a>
<!--Pricing card-->
</div>
</div>
<!-- Grid column -->
<!--Grid column-->
</div>
<!-- Grid row-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInDown">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!-- Grid row-->
<div class="row text-center text-md-left wow fadeInRight">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Pro</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">5</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>90</strong> Go</p>
</li>
<li>
<p>
<strong>Fast Download</strong></p>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
<!-- Grid column -->
<div class="col-lg-6 col-md-12 mb-lg-0 mb-5">
<div class="col-md-4 col-lg-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
</div>
</div>
<div class="col-md-8 col-lg-6 float-right">
<h4 class="font-weight-bold mb-3">Anna Deynah</h4>
<h6 class="font-weight-bold grey-text mb-3">Web Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook-->
<a class="p-2 fa-lg fb-ic">
<i class="fa fa-facebook"> </i>
</a>
<!-- Twitter -->
<a class="p-2 fa-lg tw-ic">
<i class="fa fa-twitter"> </i>
</a>
<!-- GitHub-->
<a class="p-2 fa-lg git-ic">
<i class="fa fa-github"> </i>
</a>
<!--Pricing card-->
</div>
</div>
<!-- Grid column -->
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4 wow fadeInLeft">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-purple-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Premium</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">15</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>Unlimited</strong> Space</p>
</li>
<li>
<p>
<strong>Unlimited</strong> Speed</p>
</li>
</ul>
<a class="btn btn-outline-white waves-light" mdbPageScroll href="#introSection" [pageScrollDuration]="600" mdbWavesEffect> Subscribe now</a>
</div>
<!-- Grid column -->
<div class="col-lg-6 col-md-12">
<div class="col-md-4 col-lg-6 float-left">
<div class="avatar mx-auto mb-md-0 mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
</div>
</div>
<div class="col-md-8 col-lg-6 float-right">
<h4 class="font-weight-bold mb-3">Sarah Melyah</h4>
<h6 class="font-weight-bold grey-text mb-3">Front-end Developer</h6>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
<!-- Facebook-->
<a class="p-2 fa-lg fb-ic">
<i class="fa fa-facebook"> </i>
</a>
<!-- Twitter -->
<a class="p-2 fa-lg tw-ic">
<i class="fa fa-twitter"> </i>
</a>
<!-- GitHub-->
<a class="p-2 fa-lg git-ic">
<i class="fa fa-github"> </i>
</a>
<!--Pricing card-->
</div>
</div>
<!-- Grid column -->
<!--Grid column-->
</div>
<!-- Grid row-->
<!--Grid row-->
</section>
<!-- Section: Team v.3 -->
<!--Section: Pricing v.2-->
<!--Footer-->
<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">
@ -322,7 +321,7 @@
<!--Social buttons-->
<div class="text-center mb-3">
<a class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
<a class="btn-floating btn-small btn-fb waves-light" href="https://www.facebook.com/ArcadiaDev" mdbWavesEffect>
<i class="fa fa-facebook"> </i>
</a>
<a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
@ -339,7 +338,7 @@
<div class="footer-copyright text-center py-3">
<div class="container-fluid">
© 2018 Copyright:
<a href="https://www.MDBootstrap.com"> Nom </a>
<a href="https://www.MDBootstrap.com"> Arcadia </a>
</div>
</div>
@ -348,5 +347,5 @@
</footer>
<!--/.Footer-->
<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>
<a onclick="location.href='/api/facebook'">Login with face</a>
<!--<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>-->
<!--<a onclick="location.href='/api/facebook'">Login with face</a>-->

6
src/app/home/home.component.scss
Unescape Escape View File

@ -43,7 +43,9 @@ h6 {
}
}
.team-section {
padding : 5%;
.priceList {
padding: 10%;
padding-top: 0%;
padding-bottom: 5%;
}

Write Preview
Loading…
Cancel
Save