<!DOCTYPE html>
<html lang="en" class="full-height">
<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,
        .jarallax {
          height: 700px;
        }

        @media (max-width: 740px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 800px) and (max-width: 850px) {
          html,
          body,
          header,
          .jarallax {
            height: 100vh;
          }
        }

        @media (min-width: 560px) and (max-width: 650px) {
          header .jarallax h1 {
            margin-bottom: .5rem !important;
          }
          header .jarallax h5 {
            margin-bottom: .5rem !important;
          }
        }

        
        @media (min-width: 660px) and (max-width: 700px) {
          header .jarallax h1 {
            margin-bottom: 1.5rem !important;
          }
          header .jarallax h5 {
            margin-bottom: 1.5rem !important;
          }
        }

        .top-nav-collapse {
            background-color: #9da4b1 !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #9da4b1 !important;
            }
        }
        
        @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #9da4b1!important;
            }
        }

        footer.page-footer {
            background-color: #9da4b1;
        }

    </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 -->
        <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('https://mdbootstrap.com/img/Photos/Others/gradient2.png'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
          <div class="mask rgba-purple-slight">
            <div class="container h-100 d-flex justify-content-center align-items-center">
                <div class="row pt-5 mt-3">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="text-center">
                                    <h1 class="display-4 font-weight-bold mb-5 wow fadeInUp">Our New Course is Ready</h1></li>
                                    <h5 class="mb-5 wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow videos and images. Check it out now!</h5>
                                <div class="wow fadeInUp" data-wow-delay="0.4s">
                                    <a class="btn btn-purple btn-rounded"><i class="fa fa-user left"></i> Sign up!</a>
                                    <a class="btn btn-outline-purple btn-rounded"><i class="fa fa-book left"></i> Learn more</a>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>

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

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

        <div class="container">

            <!--Section: Features v.4-->
            <section class="section 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 porro a pariatur accusamus veniam.</p>

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

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

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-flag-checkered indigo-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">International</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-flask blue-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">Experimental</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-glass cyan-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">Relaxing</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

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

                    <!--Grid column-->
                    <div class="col-md-4 mb-2 text-center text-md-left flex-center">
                        <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
                    </div>
                    <!--Grid column-->

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

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-heart deep-purple-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">Beloved</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-flash purple-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">Rapid</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row mb-2">
                            <div class="col-2">
                                <i class="fa fa-2x fa-magic pink-text"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="font-weight-bold mb-4">Magical</h5>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.</p>
                            </div>
                        </div>
                        <!--Grid row-->

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

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

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

            <hr class="mb-5">

            <!--Section: Testimonials v.3-->
            <section class="section team-section text-center pb-3 wow fadeIn" data-wow-delay="0.3s">

                <!--Section heading-->
                <h1 class="font-weight-bold text-center h1 my-5">Testimonials</h1>
                <!--Section description-->
                <p class="text-center grey-text mb-5 mx-auto w-responsive">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 accusamus veniam.</p>

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

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

                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar mx-auto">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid">
                            </div>

                            <!--Content-->
                            <h4 class="font-weight-bold mt-4 mb-3">Anna Deynah</h4>
                            <h6 class="mb-3 font-weight-bold grey-text">Web Designer</h6>
                            <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.</p>

                            <!--Review-->
                            <div class="orange-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-half-full"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar mx-auto">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded-circle z-depth-1 img-fluid">
                            </div>

                            <!--Content-->
                            <h4 class="font-weight-bold mt-4 mb-3">John Doe</h4>
                            <h6 class="mb-3 font-weight-bold grey-text">Web Developer</h6>
                            <p><i class="fa fa-quote-left"></i> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>

                            <!--Review-->
                            <div class="orange-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                            </div>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 mb-4">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar mx-auto">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid">
                            </div>
                            <!--Content-->
                            <h4 class="font-weight-bold mt-4 mb-3">Maria Kate</h4>
                            <h6 class="mb-3 font-weight-bold grey-text">Photographer</h6>
                            <p><i class="fa fa-quote-left"></i> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.</p>

                            <!--Review-->
                            <div class="orange-text">
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star"> </i>
                                <i class="fa fa-star-o"> </i>
                            </div>

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

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

            </section>
            <!--Section: Testimonials v.3-->

            <hr class="mb-5">

            <!-- Section: Pricing v.3 -->
            <section class="text-center 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">

                  <!-- Card -->
                  <div class="card">

                    <!-- Content -->
                    <div class="card-body">

                      <!-- Offer -->
                      <h5 class="mb-4">Basic plan</h5>
                      <div class="d-flex justify-content-center">
                        <div class="card-circle d-flex justify-content-center align-items-center">
                          <i class="fa fa-home light-blue-text"></i>
                        </div>
                      </div>

                      <!-- Price -->
                      <h2 class="font-weight-bold my-4">59$</h2>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
                      <a class="btn btn-light-blue btn-rounded">Buy now</a>

                    </div>
                    <!-- Content -->

                  </div>
                  <!-- Card -->

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

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

                  <!-- Card -->
                  <div class="card purple-gradient">

                    <!-- Content -->
                    <div class="card-body white-text">

                      <!-- Offer -->
                      <h5 class="mb-4">Premium plan</h5>
                      <div class="d-flex justify-content-center">
                        <div class="card-circle d-flex justify-content-center align-items-center">
                          <i class="fa fa-group"></i>
                        </div>
                      </div>

                      <!--Price -->
                      <h2 class="font-weight-bold my-4">79$</h2>
                      <p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
                      <a class="btn btn-outline-white btn-rounded">Buy now</a>

                    </div>
                    <!-- Content -->

                  </div>
                  <!-- Card -->

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

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

                  <!-- Card -->
                  <div class="card">

                    <!-- Content -->
                    <div class="card-body">

                      <!-- Offer -->
                      <h5 class="mb-4">Advanced plan</h5>
                      <div class="d-flex justify-content-center">
                        <div class="card-circle d-flex justify-content-center align-items-center">
                          <i class="fa fa-bar-chart light-blue-text"></i>
                        </div>
                      </div>

                      <!--Price -->
                      <h2 class="font-weight-bold my-4">99$</h2>
                      <p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
                      <a class="btn btn-light-blue btn-rounded">Buy now</a>

                    </div>
                    <!-- Content -->

                  </div>
                  <!-- Card -->

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

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

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

            <hr class="mb-5">

            <!--Section: Contact v.2-->
            <section class="section pb-5 wow fadeIn" data-wow-delay="0.3s">

                <!--Section heading-->
                <h2 class="font-weight-bold text-center h1 my-5">Contact us</h2>
                <!--Section description-->
                <p class="text-center grey-text mb-5 mx-auto w-responsive">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 accusamus veniam. Quia, minima?</p>

                <div class="row">

                    <!--Grid column-->
                    <div class="col-md-8 col-xl-9">
                        <form>

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

                                <!--Grid column-->
                                <div class="col-md-6">
                                    <div class="md-form">
                                            <input type="text" id="contact-name" class="form-control">
                                            <label for="contact-name" class="">Your name</label>
                                    </div>
                                </div>
                                <!--Grid column-->

                                <!--Grid column-->
                                <div class="col-md-6">
                                    <div class="md-form">
                                            <input type="text" id="contact-email" class="form-control">
                                            <label for="contact-email" class="">Your email</label>
                                    </div>
                                </div>
                                <!--Grid column-->

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

                            <!--Grid row-->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="md-form">
                                        <input type="text" id="contact-Subject" class="form-control">
                                        <label for="contact-Subject" class="">Subject</label>
                                    </div>
                                </div>
                            </div>
                            <!--Grid row-->

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

                                <!--Grid column-->
                                <div class="col-md-12">

                                    <div class="md-form">
                                        <textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>
                                        <label for="contact-message">Your message</label>
                                    </div>

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

                        </form>

                        <div class="text-center text-md-left my-4">
                            <a class="btn btn-light-blue btn-rounded">Send</a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-md-4 col-xl-3">
                        <ul class="contact-icons text-center list-unstyled">
                            <li><i class="fa fa-map-marker fa-2x"></i>
                                <p>San Francisco, CA 94126, USA</p>
                            </li>

                            <li><i class="fa fa-phone fa-2x"></i>
                                <p>+ 01 234 567 89</p>
                            </li>

                            <li><i class="fa fa-envelope fa-2x"></i>
                                <p>contact@mdbootstrap.com</p>
                            </li>
                        </ul>
                    </div>
                    <!--Grid column-->

                </div>

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

        </div>

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


    <!--Footer-->
    <footer class="page-footer pt-4 mt-4   text-center text-md-left mt-5">

        <!--Footer Links-->
        <div class="container">
            <div class="row">

                <!--First column-->
                <div class="col-md-3">
                    <h5 class="text-uppercase">Footer Content </h5>
                    <p>Here you can use rows and columns here to organize your footer content.</p>
                </div>
                <!--/.First column-->

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

                <!--Second column-->
                <div class="col-md-2 ml-auto">
                    <h5 class="text-uppercase">Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Second column-->

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

                <!--Third column-->
                <div class="col-md-2 ml-auto">
                    <h5 class="text-uppercase">Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Third column-->

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

                <!--Fourth column-->
                <div class="col-md-2 ml-auto">
                    <h5 class="text-uppercase">Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#!">Link 1</a></li>
                        <li><a href="#!">Link 2</a></li>
                        <li><a href="#!">Link 3</a></li>
                        <li><a href="#!">Link 4</a></li>
                    </ul>
                </div>
                <!--/.Fourth column-->

            </div>
        </div>

        <hr>

        <div class="container">
            <!--Grid row-->
            <div class="row mb-3">

                <!--First column-->
                <div class="col-md-12">

                    <ul class="list-unstyled d-flex justify-content-center mb-0 py-4 list-inline">
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a></li>
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a></li>
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a></li>
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg li-ic"><i class="fa fa-linkedin white-text fa-lg"> </i></a></li>
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg ins-ic"><i class="fa fa-instagram white-text fa-lg"> </i></a></li>
                        <li class="list-inline-item"><a class="p-2 m-2 fa-lg pin-ic"><i class="fa fa-pinterest white-text fa-lg"> </i></a></li>
                    </ul>

                </div>
                <!--/First column-->
            </div>
            <!--/Grid row-->
        </div>
        <!--/.Footer Links-->

        <!--Copyright-->
        <div class="footer-copyright py-3 text-center">
            <div class="container-fluid">
                © 2015 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>
