@ -1,34 +1,29 @@
<!-- Main Navigation -->
< header >
<!-- Navbar -->
< mdb-navbar SideClass = "navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar ">
< mdb-navbar SideClass = "navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo ">
< 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 class = "nav-item waves-light" mdbWavesEffect >
< a class = "nav-link" mdbPageScroll href= "# introSection" [ pageScrollDuration ] = " 600 "> Home < span class = "sr-only" > (current)< / span > < / a >
< / li >
< li class = "nav-item waves-light" mdbWavesEffect >
< a class = "nav-link" href= "#" > Link < / a >
< a class = "nav-link" mdbPageScroll href = "#featuresSection" [ pageScrollDuration ] = " 600 " > Features < / a >
< / li >
< li class = "nav-item waves-light" mdbWavesEffect >
< a class = "nav-link" href= "#" > Profile < / a >
< a class = "nav-link" mdbPageScroll href = "#teamSection" [ pageScrollDuration ] = " 600 " > Team < / 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 ">
< section class = "view intro-2 mask rgba-gradient" id = "introSection" >
< div class = "full-bg-img mask rgba-gradient" >
< div class = "container flex-center" >
< div class = "d-flex align-items-center content-height w-100" >
@ -133,7 +128,224 @@
< / div >
< / section >
< / header >
<!-- Main Navigation -->
< button ( click ) = " facebook ( ) " class = "btn-floating btn-fb" > < i class = "fa fa-facebook" > < / i > < / button >
<!-- Section: Features v.1 -->
< section class = "features text-center" id = "featuresSection" >
< div class = "container-fluid wow fadeInDown" >
<!-- 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 >
< / div >
<!-- Grid row -->
< div class = "row" >
<!-- 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.
< / 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.
< / 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.
< / p >
< / div >
<!-- Grid column -->
< / div >
<!-- Grid row -->
< / section >
<!-- Section: Features v.1 -->
< hr id = "teamSection" >
<!-- Section: Team v.3 -->
< section class = "team-section 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 >
< / 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" >
< / 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 >
< / div >
< / div >
<!-- Grid column -->
< / div >
<!-- Grid row -->
<!-- Grid row -->
< div class = "row text-center text-md-left wow fadeInRight" >
<!-- 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 >
< / div >
< / div >
<!-- Grid column -->
<!-- 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 >
< / div >
< / div >
<!-- Grid column -->
< / div >
<!-- Grid row -->
< / section >
<!-- Section: Team v.3 -->
<!-- Footer -->
< footer class = "page-footer mdb-color text-center text-md-left pt-4 mt-4" >
<!-- Social buttons -->
< div class = "text-center mb-3" >
< a class = "btn-floating btn-small btn-fb waves-light" mdbWavesEffect >
< i class = "fa fa-facebook" > < / i >
< / a >
< a class = "btn-floating btn-small btn-tw waves-light" mdbWavesEffect >
< i class = "fa fa-twitter" > < / i >
< / a >
< a class = "btn-floating btn-small btn-gplus waves-light" mdbWavesEffect >
< i class = "fa fa-google-plus" > < / i >
< / a >
< / div >
<!-- /.Social buttons -->
<!-- Copyright -->
< div class = "footer-copyright text-center py-3" >
< div class = "container-fluid" >
© 2018 Copyright:
< a href = "https://www.MDBootstrap.com" > Nom < / a >
< / div >
< / div >
<!-- /.Copyright -->
< / footer >
<!-- /.Footer -->
<!-- <button (click)="facebook()" class="btn - floating btn - fb"><i class="fa fa - facebook"></i></button> -->