<!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.6.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">

</head>

<body class="fixed-sn mdb-skin">

    <!--Double navigation-->
    <header>
        <!-- Sidebar navigation -->
        <ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
            <!-- Logo -->
            <li>
                <div class="logo-wrapper waves-light">
                    <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
                </div>
            </li>
            <!--/. Logo -->
            <!--Social-->
            <li>
                <ul class="social">
                    <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
                    <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
                    <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
                    <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
                </ul>
            </li>
            <!--/Social-->
            <!--Search Form-->
            <li>
                <form class="search-form" role="search">
                    <div class="form-group waves-light">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                </form>
            </li>
            <!--/.Search Form-->
            <!-- Side navigation links -->
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-heart"></i> New Arrivals<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Handbags</a>
                                </li>
                                <li><a href="#" class="waves-effect">Shoes</a>
                                </li>
                                <li><a href="#" class="waves-effect">Dresses</a>
                                </li>
                                <li><a href="#" class="waves-effect">Skirts</a>
                                </li>
                                <li><a href="#" class="waves-effect">Jeans</a>
                                </li>
                                <li><a href="#" class="waves-effect">Outerwear</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-diamond"></i> Accessories<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Jewelry</a>
                                </li>
                                <li><a href="#" class="waves-effect">Wallets & Purses</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-gitlab"></i> For kids<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Girls</a>
                                </li>
                                <li><a href="#" class="waves-effect">Boys</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-sun-o"></i> Summer<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Swimsuits</a>
                                </li>
                                <li><a href="#" class="waves-effect">Sandals</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-briefcase"></i> Fall / Winter<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Coats</a>
                                </li>
                                <li><a href="#" class="waves-effect">Boots</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-coffee "></i> Spring<i class="fa fa-angle-down rotate-icon"></i></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="#" class="waves-effect">Denim jackets</a>
                                </li>
                                <li><a href="#" class="waves-effect">Sneakers</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <!--/. Side navigation links -->
            <div class="sidenav-bg mask-strong"></div>
        </ul>
        <!--/. Sidebar navigation -->

        <!--Navbar-->
        <nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">

            <!-- SideNav slide-out button -->
            <div class="float-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
            </div>

            <!-- Breadcrumb-->
            <div class="breadcrumb-dn mr-auto">
                <p>MDB E-commerce Product Page</p>
            </div>

            <ul class="nav navbar-nav nav-flex-icons ml-auto">
                <li class="nav-item">
                    <a class="nav-link"> <span class="badge red z-depth-1">2</span> <i class="fa fa-shopping-cart"></i> <span class="hidden-sm-down">Cart</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"><i class="fa fa-sign-in"></i> <span class="hidden-sm-down">Register</span></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-user"></i> <span class="hidden-sm-down">Profile</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Logout</a>
                        <a class="dropdown-item" href="#">My account</a>
                    </div>
                </li>
            </ul> 
        </nav>
        <!--/.Navbar-->
    </header>
    <!--/Double navigation-->
   
    <!--Main layout-->
    <main>
        <div class="container-fluid">

            <!--Section: Product intro-->
            <section class="section section-blog-fw">

                <!--First row-->
                <div class="row">
                    <div class="col-md-12 wow fadeIn">
                        <!--Featured image-->
                        <img src="https://mdbootstrap.com/images/slides/slide%20(25).jpg">

                        <!--Post data-->
                        <div class="jumbotron wow fadeIn" data-wow-delay="0.2s">
                            <h1 class="h1-responsive">Big Handbag for Fall / Winter Season</h1>
                            <hr class="mb-3">
                            <p>Short description</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat maiores dicta, illo ullam reiciendis sed, ab recusandae et perferendis in, distinctio, harum molestias eum quasi totam enim! Quibusdam, iure ipsa.</p>
                            <a href="" class="btn btn-primary"><i class="fa fa-shopping-cart left"></i> <span class="hidden-sm-down">Add to cart</span></a>
                            <a href="" class="btn btn-default"><i class="fa fa-star left"></i> <span class="hidden-sm-down">Live preview</span></a>
                            <a href="" class="btn btn-secondary"><i class="fa fa-envelope left"></i> <span class="hidden-sm-down">Ask for details</span></a>

                        </div>
                        <!--/Post data-->

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

            </section>
            <!--/Section: Product intro-->

            <!--Section: Product description-->
            <section class="section">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Product description</h1>
                <!--Section sescription-->

                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-3 indigo wow fadeIn" data-wow-delay="0.3s" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#panel5" role="tab"><i class="fa fa-diamond"></i> Product description</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel6" role="tab"><i class="fa fa-heart-o"></i> About designer</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-coffee"></i> More product details</a>
                    </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">

                    <!--Panel 1-->
                    <div class="tab-pane animated wow fadeIn active" data-wow-delay="0.3s" id="panel5" role="tabpanel">
                        <br>

                        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Tempora, placeat ratione porro voluptate odit minima.</p>

                    </div>
                    <!--/.Panel 1-->

                    <!--Panel 2-->
                    <div class="tab-pane animated wow fadeIn" data-wow-delay="0.3s" id="panel6" role="tabpanel">
                        <br>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>

                    </div>
                    <!--/.Panel 2-->

                    <!--Panel 3-->
                    <div class="tab-pane animated wow fadeIn" data-wow-delay="0.3s" id="panel7" role="tabpanel">
                        <br>
                            <p><i class="fa fa-minus"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
                            <p><i class="fa fa-minus"></i> 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><i class="fa fa-minus"></i> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                            
                    </div>
                    <!--/.Panel 3-->

                </div>

            </section>
            <!--/Section: Product description-->

            <hr class="between-sections">

            <!--Section: Product gallery-->
            <section class="section mb-4">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Product gallery</h1>
                <!--Section sescription-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">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">
                    <div class="col-md-12 wow fadeIn" data-wow-delay="0.3s">

                        <div id="mdb-lightbox-ui"></div>

                        <div class="mdb-lightbox no-margin">


                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(52)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(52)" class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(53)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(53)" class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(55)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(55)" class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(54)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(54)" class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(57)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(57)" class="img-fluid" />
                                </a>
                            </figure>

                            <figure class="col-md-4">
                                <a href="https://mdbootstrap.com/images/docs/lightbox-gallery/img%20(56)" data-size="1600x1067">
                                    <img src="https://mdbootstrap.com/images/docs/lightbox-thumbs/img%20(56)" class="img-fluid" />
                                </a>
                            </figure>

                        </div>

                    </div>
                </div>

            </section>
            <!--/Section: Product gallery-->

            <hr class="between-sections">

            <!--Section: Features v.3-->
            <section class="section feature-box">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Why is it so great?</h1>
                <!--Section sescription-->
                <p class="section-description lead wow fadeIn" data-wow-delay="0.2s">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>

                <!--First row-->
                <div class="row features-small wow fadeIn" data-wow-delay="0.4s">

                    <!--First column-->
                    <div class="col-md-5 mb-r center-on-small-only">
                        <img src="https://mdbootstrap.com/wp-content/uploads/2016/07/img-2-min.jpg" alt="" class="z-depth-0">
                    </div>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-7 center-on-small-only">
                        <!--First row-->
                        <div class="row">
                            <div class="col-1">
                                <i class="fa fa-bank indigo-text"></i>
                            </div>
                            <div class="col-10">
                                <h4 class="feature-title">Safety</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/First row-->

                        <div style="height:50px"></div>

                        <!--Second row-->
                        <div class="row">
                            <div class="col-1">
                                <i class="fa fa-code indigo-text"></i>
                            </div>
                            <div class="col-10">
                                <h4 class="feature-title">Technology</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/Second row-->

                        <div style="height:50px"></div>

                        <!--Third row-->
                        <div class="row">
                            <div class="col-1">
                                <i class="fa fa-money indigo-text"></i>
                            </div>
                            <div class="col-10">
                                <h4 class="feature-title">Finance</h4>
                                <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                            </div>
                        </div>
                        <!--/Third row-->
                    </div>
                    <!--/Second column-->
                </div>
                <!--/First row-->

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

            <hr class="between-sections">

            <!--Section: Testimonials v.3-->
            <section class="section team-section">

                <!--Section heading-->
                <h1 class="section-heading wow fadeIn" data-wow-delay="0.2s">Testimonials</h1>
                <!--Section description-->
                <p class="section-description wow fadeIn" data-wow-delay="0.4s">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>

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

                    <!--First column-->
                    <div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.3s">

                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/images/avatars/img%20(1).jpg" class="rounded-circle img-fluid">
                            </div>

                            <!--Content-->
                            <h4>Anna Deynah</h4>
                            <h5>Web Designer</h5>
                            <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.</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>
                    <!--/First column-->

                    <!--Second column-->
                    <div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.4s">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/images/avatars/img%20(3).jpg" class="rounded-circle img-fluid">
                            </div>

                            <!--Content-->
                            <h4>John Doe</h4>
                            <h5>Web Developer</h5>
                            <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>
                    <!--/Second column-->

                    <!--Third column-->
                    <div class="col-md-4 mb-r wow fadeInDown" data-wow-delay="0.5s">
                        <div class="testimonial">
                            <!--Avatar-->
                            <div class="avatar">
                                <img src="https://mdbootstrap.com/images/avatars/img%20(2).jpg" class="rounded-circle img-fluid">
                            </div>
                            <!--Content-->
                            <h4>Maria Kate</h4>
                            <h5>Photographer</h5>
                            <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>
                    <!--/Third column-->

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

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

        </div>
    </main>
    <!--/Main layout-->


    <!--Footer-->
    <footer class="page-footer center-on-small-only">

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

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

                <hr class="hidden-md-up">

                <!--Second column-->
                <div class="col-md-2 offset-md-1">
                    <h5 class="title">Links</h5>
                    <ul>
                        <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="hidden-md-up">

                <!--Third column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <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="hidden-md-up">

                <!--Fourth column-->
                <div class="col-md-2">
                    <h5 class="title">Links</h5>
                    <ul>
                        <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>

        <!--Call to action-->
        <div class="call-to-action wow fadeIn" data-wow-delay="0.3s">
            <ul>
                <li>
                    <h5>Register for free</h5></li>
                <li><a href="" class="btn btn-danger">Sign up!</a></li>
            </ul>
        </div>
        <!--/.Call to action-->

        <hr>

        <!--Social buttons-->
        <div class="social-section wow fadeIn" data-wow-delay="0.3s">
            <ul>
                <li><a href="https://www.facebook.com/mdbootstrap" target="_blank" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a href="https://twitter.com/MDBootstrap" target="_blank" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a href="https://plus.google.com/u/0/+Mdbootstrap" target="_blank" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a href="https://pl.linkedin.com/in/dawid-adach-97435534/pl" target="_blank" class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a href="https://pl.pinterest.com/materialdesignf/" target="_blank" class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a href="https://www.instagram.com/material_design_for_bootstrap/" target="_blank" class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Social buttons-->

        <!--Copyright-->
        <div class="footer-copyright">
            <div class="container-fluid">
                © 2017 Copyright: <a href="http://www.MDBootstrap.com"> MDBootstrap.com </a>

            </div>
        </div>
        <!--/.Copyright-->

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


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.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>
        // SideNav init
        $(".button-collapse").sideNav();
        var el = document.querySelector('.custom-scrollbar');
        Ps.initialize(el);


        // MDB Lightbox Init
        $(function() {
            $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
        });
    </script>

    <script>
        new WOW().init();
    </script>
    
</body>

</html>