<?php
$title = 'Image Gallery';
$menu = 'image_gallery';
require 'includes/header-includes.php';
?>

        <div class="body">
			<?php require 'includes/header-menu.php'; ?>
            <div role="main" class="main">

				<section class="page-header">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<h1>Image Gallery</h1>
								<p class="lead">Images Gallery of Preci Craft CNC Works.</p>
							</div>
						</div>
					</div>
				</section>

				<div class="container mb-4 pb-3">
					<div class="row align-items-center mb-4">
						<div class="col-12 col-md-8 col-lg-9">
							<ul class="nav sort-source justify-content-center justify-content-md-start mb-4 mb-md-0" data-sort-id="portfolio2" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
								<li class="nav-item" data-option-value="*"><a class="nav-link active" href="#">SHOW ALL</a></li>

								<li class="nav-item" data-option-value=".textile"><a class="nav-link text-uppercase" href="#">Textile</a></li>

								<li class="nav-item" data-option-value=".automobile"><a class="nav-link text-uppercase" href="#">Automobile</a></li>

								<li class="nav-item" data-option-value=".engineering"><a class="nav-link text-uppercase" href="#">Engineering</a></li>
							</ul>
						</div>
					</div>
					<div class="row pb-3">
						<div class="col-12">
							<div class="lightbox" data-plugin-options="{'delegate': 'a.open-lightbox', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom'}">
								<div class="sort-destination-loader sort-destination-loader-showing">
									<ul class="portfolio-list sort-destination m-0" data-sort-id="portfolio2" id="portfolio2">
										

										<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item textile">
											<div class="portfolio-item m-0 p-0">
												<div class="image-frame image-frame-style-1 image-frame-effect-1">
													<span class="image-frame-wrapper">
														<img src="<?php echo BASE_URL; ?>img/product/products/Products.png" class="img-fluid" alt="Product 1" title="Product 1">
														<span class="image-frame-inner-border"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
															<a href="<?php echo BASE_URL; ?>img/product/products/Products.png" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>
															<a href="#">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-link text-color-light"></i>
																</span>
															</a>
														</span>
													</span>
												</div>
											</div>
										</li>

										<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item automobile">
											<div class="portfolio-item m-0 p-0">
												<div class="image-frame image-frame-style-1 image-frame-effect-1">
													<span class="image-frame-wrapper">
														<img src="<?php echo BASE_URL; ?>img/product/products/Products-1.png" class="img-fluid" alt="Card Holder Z">
														<span class="image-frame-inner-border"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
															<a href="<?php echo BASE_URL; ?>img/product/products/Products-1.png" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>
															<a href="#">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-link text-color-light"></i>
																</span>
															</a>
														</span>
													</span>
												</div>
											</div>
										</li>

										<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item automobile">
											<div class="portfolio-item m-0 p-0">
												<div class="image-frame image-frame-style-1 image-frame-effect-1">
													<span class="image-frame-wrapper">
														<img src="<?php echo BASE_URL; ?>img/product/products/Products-2.png" class="img-fluid" alt="Classic Note">
														<span class="image-frame-inner-border"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
															<a href="<?php echo BASE_URL; ?>img/product/products/Products-2.png" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>
															<a href="#">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-link text-color-light"></i>
																</span>
															</a>
														</span>
													</span>
												</div>
											</div>
										</li>

										<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item engineering">
											<div class="portfolio-item m-0 p-0">
												<div class="image-frame image-frame-style-1 image-frame-effect-1">
													<span class="image-frame-wrapper">
														<img src="<?php echo BASE_URL; ?>img/product/products/Products-3.png" class="img-fluid" alt="Cup EZ">
														<span class="image-frame-inner-border"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
															<a href="<?php echo BASE_URL; ?>img/product/products/Products-3.png" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>
															<a href="#">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-link text-color-light"></i>
																</span>
															</a>
														</span>
													</span>
												</div>
											</div>
										</li>

										<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item engineering">
											<div class="portfolio-item m-0 p-0">
												<div class="image-frame image-frame-style-1 image-frame-effect-1">
													<span class="image-frame-wrapper">
														<img src="<?php echo BASE_URL; ?>img/product/products/Products-4.png" class="img-fluid" alt="Cup EZ">
														<span class="image-frame-inner-border"></span>
														<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
															<a href="<?php echo BASE_URL; ?>img/product/products/Products-4.png" class="open-lightbox">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-magnifier text-color-light"></i>
																</span>
															</a>
															<a href="#">
																<span class="image-frame-action-icon">
																	<i class="lnr lnr-link text-color-light"></i>
																</span>
															</a>
														</span>
													</span>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>					
				</div>
			</div>

			<footer id="footer" class="footer-hover-links-light">
				<div class="container">

				</div>
			</footer>
            <?php require 'includes/footer-copyright.php'; ?>
		</div>
        <?php require 'includes/footer-includes.php'; ?>