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

home page beta

Browse Source
anis
Viiciouss 6 years ago
parent 4f7c77dddb
commit 26dc279a9b
2 changed files with 241 additions and 24 deletions
Show Stats Download Patch File Download Diff File

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

@ -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>-->

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

@ -1,21 +1,21 @@
.header {
height: 100%;
}
.features {
padding: 5%;
}
.intro-2 {
background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
background-size: cover;
background-attachment: fixed
}
.view {
height: 100vh !important;
}
.top-nav-collapse {
background-color: #3f51b5 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5 !important;
}
.navbar.scrolling-navbar.top-nav-collapse {
background: indigo;
}
.rgba-gradient .full-bg-img {
background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
@ -42,3 +42,8 @@ h6 {
height: 1040px;
}
}
.team-section {
padding : 5%;
padding-top: 0%;
}

Write Preview
Loading…
Cancel
Save