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

<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 h5 {
            margin-bottom: 1.5rem !important;
          }
        }

        .top-nav-collapse {
            background-color: #6f7782 !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #6f7782 !important;
            }
        }
        @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #6f7782!important;
            }
        }
        h1 {
            letter-spacing: 8px;
        }
        h5 {
            letter-spacing: 3px;
        }
        .hr-light {
            border-top: 3px solid #fff;
            width: 80px;
        }
        footer.page-footer {
            background-color: #6f7782;
        }
        
        @media (max-width: 450px) {
            .btn-floating {
                margin-left: 0;
                margin-right: 0;
            }
        }

    </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/img%20%2848%29.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
          <div class="mask rgba-black-light">
            <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">
                        <div class="text-center">
                            <h1 class="h1-reponsive white-text text-uppercase font-weight-bold mb-3 wow fadeInDown" data-wow-delay="0.3s"><strong>welcome to my blog</strong></h1>
                            <hr class="hr-light mt-4 wow fadeInDown" data-wow-delay="0.4s">
                            <h5 class="text-uppercase mb-5 white-text wow fadeInDown" data-wow-delay="0.4s"><strong>Photography & design</strong></h5>
                            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">portfolio</a>
                            <a class="btn btn-outline-white wow fadeInDown" data-wow-delay="0.4s">About me</a>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>

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


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

        <div class="container">

            <!--Section: Blog v.3-->
            <section class="section extra-margins pb-3 text-center text-lg-left wow fadeIn" data-wow-delay="0.3s">

                <!--Section heading-->
                <h2 class="font-weight-bold text-center h1 my-5">Recent posts</h2>
                <!--Section description-->
                <p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

                    <!--Grid column-->
                    <div class="col-lg-4 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" class="img-fluid" alt="First sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-7 mb-4">
                        <!--Excerpt-->
                        <a href="" class="teal-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle </strong></h6></a>
                        <h4 class="mb-4"><strong>This is title of the news</strong></h4>
                        <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor.</p>
                        <p>by <a><strong>Jessica Clark</strong></a>, 26/08/2016</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

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

                <hr class="mb-5">

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

                    <!--Grid column-->
                    <div class="col-lg-4 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" class="img-fluid" alt="Second sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-7 mb-4">
                        <!--Excerpt-->
                        <a href="" class="cyan-text"><h6 class="pb-1"><i class="fa fa-plane"></i><strong> Travels</strong></h6></a>
                        <h4 class="mb-4"><strong>This is title of the news</strong></h4>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.</p>
                        <p>by <a><strong>Jessica Clark</strong></a>, 24/08/2016</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

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

                <hr class="mb-5">

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

                    <!--Grid column-->
                    <div class="col-lg-4 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Others/img (35).jpg" class="img-fluid" alt="Third sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-7 mb-4">
                        <!--Excerpt-->
                        <a href="" class="brown-text"><h6 class="pb-1"><i class="fa fa-camera"></i><strong> Photography</strong></h6></a>
                        <h4 class="mb-4"><strong>This is title of the news</strong></h4>
                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

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

                <hr class="mb-5">

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

                    <!--Grid column-->
                    <div class="col-lg-4 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1">
                            <img src="https://mdbootstrap.com/img/Photos/Others/img (39).jpg" class="img-fluid" alt="Third sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-7 mb-4">
                        <!--Excerpt-->
                        <a href="" class="red-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle</strong></h6></a>
                        <h4 class="mb-4"><strong>This is title of the news</strong></h4>
                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

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

                <!--Pagination dark-->
                <nav class="wow fadeIn mb-4 mt-5" data-wow-delay="0.4s" style="visibility: visible; animation-delay: 0.4s; animation-name: fadeIn;">
                        <ul class="pagination pg-dark flex-center">
                            <!--Arrow left-->
                            <li class="page-item">
                                <a class="page-link waves-effect waves-effect" aria-label="Previous">
                                    <span aria-hidden="true">«</span>
                                    <span class="sr-only">Previous</span>
                                </a>
                            </li>

                            <!--Numbers-->
                            <li class="page-item active"><a class="page-link waves-effect waves-effect">1</a></li>
                            <li class="page-item"><a class="page-link waves-effect waves-effect">2</a></li>
                            <li class="page-item"><a class="page-link waves-effect waves-effect">3</a></li>
                            <li class="page-item"><a class="page-link waves-effect waves-effect">4</a></li>
                            <li class="page-item"><a class="page-link waves-effect waves-effect">5</a></li>

                            <!--Arrow right-->
                            <li class="page-item">
                                <a class="page-link waves-effect waves-effect" aria-label="Next">
                                    <span aria-hidden="true">»</span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                    <!--/Pagination dark-->

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

            <hr class="mb-5">

            <!--Section: Blog v.2-->
            <section class="section extra-margins text-center pb-3 wow fadeIn" data-wow-delay="0.3s">

                <!--Section heading-->
                <h2 class="font-weight-bold text-center h1 my-5">Older posts</h2>
                <!--Section description-->
                <p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-12 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1 mb-2">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" class="img-fluid" alt="First sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <a href="" class="pink-text"><h6 class="mb-3 mt-3"><i class="fa fa-map "></i><strong> Adventure</strong></h6></a>
                        <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
                        <p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p>
                        <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1 mb-2">
                            <img src="https://mdbootstrap.com/img/Photos/Others/img6.jpg" class="img-fluid" alt="Second sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <a href="" class="indigo-text"><h6 class="mb-3 mt-3"><i class="fa fa-graduation-cap"></i><strong> Education</strong></h6></a>
                        <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
                        <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-4 col-md-6 mb-4">
                        <!--Featured image-->
                        <div class="view overlay z-depth-1 mb-2">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" class="img-fluid" alt="Thrid sample image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>

                        <!--Excerpt-->
                        <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a>
                        <h4 class="mb-3 font-weight-bold">This is title of the news</h4>
                        <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p>
                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p>
                        <a class="btn btn-primary">Read more</a>
                    </div>
                    <!--Grid column-->

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

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

        </div>

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


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

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

                <!--First column-->
                <div class="col-md-3">
                    <h5 class="text-uppercase font-weight-bold">About author </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 font-weight-bold">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 font-weight-bold">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 font-weight-bold">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>
        <!--/.Footer Links-->

        <hr>

        <!--Social buttons-->
        <div class="text-center mb-3">

            <a class="btn-floating btn-fb"><i class="fa fa-facebook"> </i></a>
            <a class="btn-floating btn-tw"><i class="fa fa-twitter"> </i></a>
            <a class="btn-floating btn-gplus"><i class="fa fa-google-plus"> </i></a>
            <a class="btn-floating btn-li"><i class="fa fa-linkedin"> </i></a>
            <a class="btn-floating btn-dribbble"><i class="fa fa-dribbble"> </i></a>

        </div>
        <!--/.Social buttons-->

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