<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="../css/mdb.min.css" rel="stylesheet">

    <style>

        html,
        body,
        header,
        .view {
          height: 700px;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .view {
            height: 1000px;
          }
        }

        @media (min-width: 800px) and (max-width: 1030px) {
          html,
          body,
          header,
          .view  {
            height: 650px;
          }
        }

        .intro-2 {
            background: url("https://mdbootstrap.com/img/Photos/Others/architecture.jpg")no-repeat center center;
            background-size: cover;
        }
        
        .top-nav-collapse {
            background-color: #929fba !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #929fba !important;
            }
        }
        /*h6 {
            line-height: 1.7;
        }*/
        .rgba-gradient {
            background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
            background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
            background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.6)), to(rgba(50, 189, 229, 0.6)));
            background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
            background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.6), rgba(50, 189, 229, 0.6) 100%);
        }
        @media (max-width: 450px) {
            .margins {
                margin-right: 1rem;
                margin-left: 1rem;
            }
        }


    </style>

</head>

<body>


    <!--Main Navigation-->
    <header>

        <!--Navbar-->
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
            <div class="container">
                <a class="navbar-brand" href="#"><strong>MDB</strong></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                        </li>
                    </ul>
                    <form class="form-inline">
                        <div class="md-form my-0">
                            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                        </div>
                    </form>
                </div>
            </div>
        </nav>

        <!--Intro Section-->
        <section class="view intro-2">
          <div class="mask rgba-gradient"></div>
            <div class="container h-100 d-flex justify-content-center align-items-center">
                <div class="row flex-center pt-5 mt-3">
                    <div class="col-md-6 text-center text-md-left margins">
                        <div class="white-text">
                            <h1 class="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Make purchases with our app </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 iste.</h6>
                                <br>
                                <a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Learn more</a>
                                <a class="btn btn-outline-white wow fadeInLeft" data-wow-delay="0.3s">Download
                                    <i class="fa fa-android left right" aria-hidden="true"></i>
                                    <i class="fa fa-apple left" aria-hidden="true"></i>
                                    <i class="fa fa-windows" aria-hidden="true"></i>
                                </a>
                        </div>
                    </div>

                    <div class="col-md-6 wow fadeInRight d-flex justify-content-center" data-wow-delay="0.3s">
                        <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-admin.png" alt="" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>
        </section>

    </header>
    <!--Main Navigation-->


    <!--Main Layout-->
    <main>

        <div class="container">

            <!--Section: Features v.2-->
            <section class="text-center wow fadeIn" data-wow-delay="0.3s">

                <!--Section heading-->
                <h1 class="font-weight-bold text-center h1 my-5">Why is it so great?</h1>
                <!--Section description-->
                <p class="text-center grey-text mb-5 mx-auto w-responsive lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum.</p>

                <!--Grid row-->
                <div class="row text-left">

                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
                        <div class="col-1 col-md-2 float-left">
                            <i class="fa fa-bullhorn fa-2x blue-text"></i>
                        </div>
                        <div class="col-10 col-md-9 col-lg-10 float-right">
                            <h4 class="font-weight-bold mb-4">Marketing</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            <a class="btn btn-primary btn-sm ml-0">Learn more</a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
                        <div class="col-1 col-md-2 float-left">
                            <i class="fa fa-cogs fa-2x orange-text"></i>
                        </div>
                        <div class="col-10 col-md-9 col-lg-10 float-right">
                            <h4 class="font-weight-bold mb-4">Customization</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            <a class="btn btn-deep-orange btn-sm ml-0">Learn more</a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
                        <div class="col-1 col-md-2 float-left">
                            <i class="fa fa-dashboard fa-2x purple-text"></i>
                        </div>
                        <div class="col-10 col-md-9 col-lg-10 float-right">
                            <h4 class="font-weight-bold mb-4">Support</h4>
                            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            <a class="btn btn-secondary btn-sm ml-0">Learn more</a>
                        </div>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Grid row-->

            </section>
            <!--Section: Features v.2-->

            <hr class="my-5">

            
            <!-- Section: Pricing v.6 -->
            <section class="my-5 wow fadeIn" data-wow-delay="0.3s">

              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
              <!-- Section description -->
              <p class="text-center w-responsive mx-auto mb-5 grey-text">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>

              <!-- Grid row -->
              <div class="row">

                <!-- Grid column -->
                <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">

                  <!-- Pricing card -->
                  <div class="card pricing-card white-text">

                    <!-- Price -->
                    <div class="aqua-gradient rounded-top">
                      <h4 class="option">BASIC</h4>
                    </div>

                    <!-- Features -->
                    <div class="card-body striped green-striped card-background px-5">

                      <h2 class="my-4 pb-3 h1">20$</h2>
                      <ul>
                        <li>
                          <p><strong>1</strong> project</p>
                        </li>
                        <li>
                          <p><strong>100</strong> components</p>
                        </li>
                        <li>
                          <p><strong>150</strong> features</p>
                        </li>
                        <li>
                          <p><strong>200</strong> members</p>
                        </li>
                      </ul>
                      <button class="mb-3 mt-3 btn aqua-gradient btn-rounded">Buy now</button>

                    </div>
                    <!-- Features -->

                  </div>

                  <!-- Pricing card -->

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-lg-4 col-md-6 mb-md-0 mb-4">

                  <!-- Pricing card -->
                  <div class="card pricing-card white-text">

                    <!-- Price -->
                    <div class="peach-gradient rounded-top">
                      <h4 class="option">PRO</h4>
                    </div>

                    <!-- Features -->
                    <div class="card-body striped orange-striped card-background px-5">

                      <h2 class="my-4 pb-3 h1">80$</h2>
                      <ul>
                        <li>
                          <p><strong>1</strong> project</p>
                        </li>
                        <li>
                          <p><strong>100</strong> components</p>
                        </li>
                        <li>
                          <p><strong>150</strong> features</p>
                        </li>
                        <li>
                          <p><strong>200</strong> members</p>
                        </li>
                      </ul>
                      <button class="mb-3 mt-3 btn peach-gradient btn-rounded">Buy now</button>

                    </div>
                    <!-- Features -->

                  </div>
                  <!-- Pricing card -->

                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-lg-4 col-md-6">

                  <!-- Pricing card -->
                  <div class="card pricing-card white-text">

                    <!-- Price -->
                    <div class="purple-gradient rounded-top">
                      <h4 class="option">ENTERPRISE</h4>
                    </div>

                    <!-- Features -->
                    <div class="card-body striped purple-striped card-background px-5">

                      <h2 class="my-4 pb-3 h1">100$</h2>
                      <ul>
                        <li>
                          <p><strong>1</strong> project</p>
                        </li>
                        <li>
                          <p><strong>100</strong> components</p>
                        </li>
                        <li>
                          <p><strong>150</strong> features</p>
                        </li>
                        <li>
                          <p><strong>200</strong> members</p>
                        </li>
                      </ul>
                      <button class="mb-3 mt-3 btn purple-gradient btn-rounded">Buy now</button>

                    </div>
                    <!-- Features -->

                  </div>
                  <!-- Pricing card -->

                </div>
                <!-- Grid column -->

              </div>
              <!-- Grid row -->

            </section>
            <!-- Section: Pricing v.6 -->
                        

        </div>


    </main>
    <!--Main Layout-->

    <!--Footer-->
    <footer class="page-footer pt-4 mt-4   mdb-color lighten-3 text-center text-md-left">

        <!--Footer Links-->
        <div class="container wow fadeIn" data-wow-delay="0.3s">

            <!--First row-->
            <div class="row mt-3 mb-4">

                <!--Grid column-->
                <div class="col-lg-4 text-center">
                    <h5 class="font-weight-bold">MDBootstrap</h5>
                </div>
                <!--Grid column-->

                <hr class="w-100 clearfix d-lg-none">

                <div class="col-lg-4">
                    <ul class="list-unstyled d-flex justify-content-center mb-0">
                        <li>
                            <p class="font-weight-bold text-uppercase pr-4">about</p>
                        </li>
                        <li>
                            <p class="font-weight-bold text-uppercase pr-4">contact</p>
                        </li>
                        <li>
                            <p class="font-weight-bold text-uppercase pr-4">blog</p>
                        </li>
                        <li>
                            <p class="font-weight-bold text-uppercase pr-4">team</p>
                        </li>
                    </ul>
                </div>

                <hr class="w-100 clearfix d-lg-none">

                <!--Grid column-->
                <div class="col-lg-4">
                    <ul class="list-unstyled d-flex justify-content-center">
                        <li><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text"></i></a></li>
                        <li><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text"></i></a></li>
                        <li><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text"></i></a></li>
                        <li><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text"></i></a></li>
                    </ul>
                </div>
                <!--/Grid column-->

            </div>
            <!--/First row-->

        </div>
        <!--/Footer Links-->

        <!--Copyright-->
        <div class="footer-copyright text-center py-3 wow fadeIn" data-wow-delay="0.3s">
            <div class="container-fluid">
                &copy; 2018 Copyright: <a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
            </div>
        </div>
        <!--/Copyright-->

    </footer>
    <!--/Footer-->

        <!-- SCRIPTS -->
        <!-- JQuery -->
        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" src="../js/popper.min.js"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" src="../js/bootstrap.min.js"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" src="../js/mdb.min.js"></script>
        <script>
            new WOW().init();
        </script>
    </body>
</html>
