@ -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 = "# team Section" [ pageScrollDuration ] = " 600 " > Team < / a >
< a class = "nav-link" mdbPageScroll href = "# price Section" [ 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" mdb PageScroll href = "#featuresSection" [ pageScrollDuration ] = " 600 " mdb WavesEffect> 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< / strong > Speed< / p >
< / 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> -- >