<header>
<!--Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark gradient-multiline z-depth-0 fixed-top">
<a class="navbar-brand" href="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" alt="mdb logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-pinterest-p"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-dribbble"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<!-- Intro -->
<section class="view">
<div class="row">
<div class="col-md-6">
<div class="d-flex flex-column justify-content-center align-items-center h-100">
<h1 class="heading display-3">Material Design for Bootstrap</h1>
<h4 class="subheading font-weight-bold">World's most popular framework for building responsive, mobile-first websites and apps</h4>
<div class="mr-auto">
<button type="button" class="btn btn-lily btn-margin btn-rounded">Get started <i class="fas fa-caret-right ml-3"></i></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="view">
<img src="https://images.pexels.com/photos/325045/pexels-photo-325045.jpeg" class="img-fluid" alt="smaple image">
<div class="mask flex-center hm-gradient">
</div>
</div>
</div>
</div>
</section>
<!-- Intro -->
</header>
<main>
<div class="container">
<!-- Section: Features v.3 -->
<section class="features my-5">
<!-- Section heading -->
<h2 class="title h1-responsive font-weight-bold text-center">Why is it so great?</h2>
<!-- Section description -->
<h6 class="subtitle font-weight-bold text-center">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam.</h6>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Safety</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Technology</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!--Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Finance</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima
veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.3 -->
<section class="form-section">
<!-- Section heading -->
<h2 class="title h1-responsive font-weight-bold text-center">Register on our website</h2>
<!-- Default form login -->
<form class="text-center">
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">
<input type="text" id="example0" class="form-control">
<label for="example0">Name</label>
</div>
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">
<input type="email" id="example1" class="form-control">
<label for="example1">E-mail</label>
</div>
<div class="md-form md-outline mx-auto" style="max-width: 20rem;">
<input type="password" id="example2" class="form-control">
<label for="example2">Password</label>
</div>
<!-- Sign in button -->
<button type="button" class="btn btn-lily btn-rounded mt-2">Sign up <i class="fas fa-thumbs-up ml-2"></i></button>
</form>
<!-- Default form login -->
</section>
</div>
</main>
<!-- Footer -->
<footer class="page-footer font-small">
<!-- Footer Elements -->
<div class="container">
<!-- Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 py-5">
<div class="mb-5 flex-center">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Pinterest-->
<a class="pin-ic">
<i class="fab fa-pinterest fa-lg white-text fa-2x"> </i>
</a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
.navbar {
background-color: transparent;
}
.navbar .navbar-brand img {
height: 40px;
margin: 10px;
}
.hm-gradient {
background: linear-gradient(40deg, rgba(0,51,199,.3), rgba(209,149,249,.3));
}
.heading {
margin: 0 6rem;
font-weight: 700;
color: #5d4267;
}
.subheading {
margin: 2.5rem 6rem;
color: #bcb2c0;
}
.btn.btn-margin {
margin-left: 6rem;
margin-top: 3rem;
}
.btn.btn-lily {
background: linear-gradient(40deg, rgba(0,51,199,.7), rgba(209,149,249,.7));
}
.btn.btn-lily:hover {
color: #fff;
}
.title {
margin-top: 6rem;
margin-bottom: 2rem;
color: #5d4267;
}
.subtitle {
color: #bcb2c0;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 6rem;
}
.features i {
color: #0033c7;
}
.form-section .title {
margin-bottom: 5rem;
}
.md-form.mat-2 input[type=text]:focus,
.md-form.mat-2 input[type=email]:focus,
.md-form.mat-2 input[type=password]:focus {
border-color: #4285f4;
box-shadow: inset 0px 0px 0px 1px #4285f4;
}
.fa-thumbs-up {
padding-bottom: .2rem;
}
.form-section {
margin-bottom: 6rem;
}
.page-footer {
background-color: #eeeeee;
}
.page-footer a i {
color: #5d4267 !important;
}
.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label,
.md-outline >input[type=date]:not(.browser-default)+label,
.md-outline >input[type=time]:not(.browser-default)+label {
transform: translateY(-17px);
transform-origin: 0 0;
background: #fff;
font-weight: 500;
padding-right: 5px;
padding-left: 5px;
font-size: 11px;
left: 8px;
}
.md-outline>input[type]:-webkit-autofill:not(.browser-default):not([type="search"])+label.active,
.md-outline >input[type=date]:not(.browser-default)+label.active,
.md-outline >input[type=time]:not(.browser-default)+label.active {
transform: translateY(-17px);
transform-origin: 0 0;
}