File: /home/suanchonac/domains/suanchon.ac.th/public_html/skc/gallery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>PhotoFolio Bootstrap Template - Gallery</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: PhotoFolio
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/photofolio-bootstrap-photography-website-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid d-flex align-items-center justify-content-between">
<a href="index.html" class="logo d-flex align-items-center me-auto me-lg-0">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<i class="bi bi-camera"></i>
<h1>PhotoFolio</h1>
</a>
<nav id="navbar" class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown"><a href="#" class="active"><span>Gallery</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="gallery.html">Nature</a></li>
<li><a href="gallery.html">People</a></li>
<li><a href="gallery.html">Architecture</a></li>
<li><a href="gallery.html">Animals</a></li>
<li><a href="gallery.html">Sports</a></li>
<li><a href="gallery.html">Travel</a></li>
<li class="dropdown"><a href="#"><span>Sub Menu</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- .navbar -->
<div class="header-social-links">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
</div>
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
</div>
</header><!-- End Header -->
<main id="main" data-aos="fade" data-aos-delay="1500">
<!-- ======= End Page Header ======= -->
<div class="page-header d-flex align-items-center">
<div class="container position-relative">
<div class="row d-flex justify-content-center">
<div class="col-lg-6 text-center">
<h2>Nature (16 images)</h2>
<p>Odio et unde deleniti. Deserunt numquam exercitationem. Officiis quo odio sint voluptas consequatur ut a odio voluptatem. Sit dolorum debitis veritatis natus dolores. Quasi ratione sint. Sit quaerat ipsum dolorem.</p>
<a class="cta-btn" href="contact.html">Available for hire</a>
</div>
</div>
</div>
</div><!-- End Page Header -->
<!-- ======= Gallery Section ======= -->
<section id="gallery" class="gallery">
<div class="container-fluid">
<div class="row gy-4 justify-content-center">
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-1.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-1.jpg" title="Gallery 1" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-2.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-2.jpg" title="Gallery 2" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-3.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-3.jpg" title="Gallery 3" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-4.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-4.jpg" title="Gallery 4" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-5.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-5.jpg" title="Gallery 5" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-6.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-6.jpg" title="Gallery 6" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-7.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-7.jpg" title="Gallery 7" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-8.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-8.jpg" title="Gallery 8" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-9.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-9.jpg" title="Gallery 9" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-10.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-10.jpg" title="Gallery 10" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-11.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-11.jpg" title="Gallery 11" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-12.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-12.jpg" title="Gallery 12" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-13.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-13.jpg" title="Gallery 13" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-14.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-14.jpg" title="Gallery 14" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-15.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-15.jpg" title="Gallery 15" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="gallery-item h-100">
<img src="assets/img/gallery/gallery-16.jpg" class="img-fluid" alt="">
<div class="gallery-links d-flex align-items-center justify-content-center">
<a href="assets/img/gallery/gallery-16.jpg" title="Gallery 16" class="glightbox preview-link"><i class="bi bi-arrows-angle-expand"></i></a>
<a href="gallery-single.html" class="details-link"><i class="bi bi-link-45deg"></i></a>
</div>
</div>
</div><!-- End Gallery Item -->
</div>
</div>
</section><!-- End Gallery Section -->
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<div class="container">
<div class="copyright">
© Copyright <strong><span>PhotoFolio</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/photofolio-bootstrap-photography-website-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer><!-- End Footer -->
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader">
<div class="line"></div>
</div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>