

<?php include('include/head.php'); ?>



<body>
    <!-- Spinner Start -->
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->


    <?php include('include/header.php'); ?> 


    <!-- Header Start -->
    <div class="container-fluid bg-primary page-header">
        <div class="container ">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class=" text-white animated slideInDown">Gallery</h1>
                    <!--<nav aria-label="breadcrumb">-->
                    <!--    <ol class="breadcrumb justify-content-center">-->
                    <!--        <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>-->
                    <!--        <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>-->
                    <!--        <li class="breadcrumb-item text-white active" aria-current="page">gallery</li>-->
                    <!--    </ol>-->
                    <!--</nav>-->
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->


    <!-- ==== new gallery start ==== -->
    <section id="portfolio">
        <div class="container">
            <!-- <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                <h6 class="section-title bg-white text-center text-primary px-3">GALLERY</h6>
                <h1 class="new-font">   Our Photo <span style="color: #78c043;"> Gallery   </span></h1>
            </div> -->

            <!--<div class="text-center mt-5">-->
            <!--    <button class="btn btn-default filter-button active" data-filter="all">All</button>-->
            <!--    <button class="btn btn-default filter-button" data-filter="nature">COWORKING</button>-->
            <!--    <button class="btn btn-default filter-button" data-filter="people">VIRTUAL OFFICE</button>-->
            <!--    <button class="btn btn-default filter-button" data-filter="cars">DEDICATED DESK</button>-->
            <!--    <button class="btn btn-default filter-button" data-filter="buildings">MEETING SPACES</button>-->
                
            <!--</div>-->
            
            <div class="row">
                
                <div class="gallery_product col-md-4 filter nature">
                    <img src="img/gallery/final-gallery1.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter people">
                    <img src="img/gallery/final-gallery2.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter nature">
                    <img src="img/gallery/final-gallery3.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery4.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter buildings">
                    <img src="img/gallery/final-gallery5.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery6.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter buildings">
                    <img src="img/gallery/final-gallery7.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery8.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter nature">
                    <img src="img/gallery/final-gallery9.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter people">
                    <img src="img/gallery/final-gallery10.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter nature">
                    <img src="img/gallery/final-gallery11.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery12.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter buildings">
                    <img src="img/gallery/final-gallery13.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery14.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter buildings">
                    <img src="img/gallery/final-gallery15.webp" style="width: 100%;">
                </div>
                
                <div class="gallery_product col-md-4 filter cars">
                    <img src="img/gallery/final-gallery16.webp" style="width: 100%;">
                </div>
                
                
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".filter-button").click(function () {
                var value = $(this).attr('data-filter');
                if (value == "all") {
                    $('.filter').show('1000');
                } else {
                    $(".filter").not('.' + value).hide('3000');
                    $('.filter').filter('.' + value).show('3000');
                }
                $(".filter-button").removeClass("active");
                $(this).addClass("active");
            });
        });
    </script>

    <style>
        #portfolio {
            padding: 40px;
            margin: 0 auto;
        }

        #portfolio .gallery-title {
            font-size: 36px;
            color: #db584e;
            text-align: center;
            font-weight: 700;
            padding: 40px 20px 60px;
        }

        #portfolio .filter-button {
            font-size: 18px;
            border: 1px solid #db584e;
            border-radius: 5px;
            text-align: center;
            color: #db584e;
            margin-bottom: 30px;
            background-color: #ffffff;
            cursor: pointer;
        }

        #portfolio .filter-button:hover,
        #portfolio .filter-button.active {
            background-color: #db584e;
            color: white;
        }

        #portfolio .port-image {
            width: 100%;
        }

        #portfolio .gallery_product {
            margin-bottom: 30px;
        }
    </style>
    <!-- ==== new gallery end ==== -->


    
    <?php include('include/footer.php'); ?> 


</body>

</html>