Merge pull request 's1' (#2) from b4 into master

Reviewed-on: #2

src/pages/gallery.astro

@@ -0,0 +1,106 @@
+---
+import Layout from "../layouts/Layout.astro";
+const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ image_src: "/assets/school_image/hps-image2.jpg" },{ image_src: "/assets/school_image/hps-image3.jpg" },{ image_src: "/assets/school_image/hps-image4.jpg" },{ image_src: "/assets/school_image/hps-image5.jpg" },{ image_src: "/assets/school_image/hps-image6.jpg" },{ image_src: "/assets/school_image/hps-image7.jpg" },{ image_src: "/assets/school_image/hps-image8.jpg" },{ image_src: "/assets/school_image/hps-image9.jpg" },{ image_src: "/assets/school_image/hps-image10.jpg" },{ image_src: "/assets/school_image/hps-image11.jpg" },{ image_src: "/assets/school_image/hps-image12.jpg" },{ image_src: "/assets/school_image/hps-image13.jpg" },{ image_src: "/assets/school_image/hps-image14.jpg" },{ image_src: "/assets/school_image/hps-image15.jpg" },{ image_src: "/assets/school_image/hps-image16.jpg" },{ image_src: "/assets/school_image/hps-image17.jpg" },{ image_src: "/assets/school_image/hps-image18.jpg" },{ image_src: "/assets/school_image/hps-image19.jpg" },{ image_src: "/assets/school_image/hps-image20.jpg" },{ image_src: "/assets/school_image/hps-image21.jpg" },{ image_src: "/assets/school_image/hps-image22.jpg" },{ image_src: "/assets/school_image/hps-image23.jpg" },{ image_src: "/assets/school_image/hps-image24.jpg" },{ image_src: "/assets/school_image/hps-image25.jpg" },{ image_src: "/assets/school_image/hps-image26.jpg" },{ image_src: "/assets/school_image/hps-image27.jpg" },{ image_src: "/assets/school_image/hps-image28.jpg" },{ image_src: "/assets/school_image/hps-image29.jpg" },{ image_src: "/assets/school_image/hps-image30.jpg" },{ image_src: "/assets/school_image/hps-image31.jpg" }];
+
+---
+<Layout title="">
+    <div>
+        <section class="container-fluid gradintBack">
+            <div class="container mx-auto px-4 flex flex-col-reverse lg:flex-row place-items-center">
+                <div class="w-full">
+                    <img class="lg:max-w-2xl" src="/img/rec_girl.png" alt="">
+                </div>
+                <div class="flex flex-col w-full">
+                    <h1 class="text-3xl md:text-4xl lg:text-5xl text-[#47ae6a]">Holy Wisdom Paublic School Gallery!</h1>
+                </div>
+            </div>
+        </section>
+        <section class="container mx-auto px-4">
+            <div class="demo-gallery">
+                <ul id="lightgallery4" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+                    {img3DResInter.map((data: { image_src: string | undefined }) => (
+                        <li
+                            class="w-full md:w-[300px]"
+                            data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`}
+                            data-src={data.image_src}
+                            data-sub-html=" "
+                        >
+                            <a href="">
+                                <div class="w-full md:w-[400px] h-[400px]">
+                                    <img class="img-responsive" src={data.image_src} alt="School Image" />
+                                </div>
+                                <div class="demo-gallery-poster">
+                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom Icon" />
+                                </div>
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </section>
+    </div>
+</Layout>
+
+<script is:inline src="/assets/lightgallery.min.js"></script>
+<link rel="stylesheet" href="/assets/lightgallery.min.css">
+
+<script is:inline>
+  lightGallery(document.getElementById('lightgallery4'));
+</script>
+
+<style>
+.gradintBack {
+    background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
+}
+.demo-gallery > ul {
+    margin-bottom: 0;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.demo-gallery > ul > li {
+    margin-bottom: 15px;
+    display: inline-block;
+    list-style: outside none none;
+}
+.demo-gallery > ul > li a {
+    border: 3px solid #FFF;
+    border-radius: 3px;
+    display: block;
+    overflow: hidden;
+    position: relative;
+    background-color: #fff;
+}
+.demo-gallery > ul > li a > img {
+    transition: transform 0.15s ease;
+    transform: scale3d(1, 1, 1);
+    height: 100%;
+    width: 100%;
+}
+.demo-gallery > ul > li a:hover > img {
+    transform: scale3d(1.1, 1.1, 1.1);
+}
+.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
+    opacity: 1;
+}
+.demo-gallery > ul > li a .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background-color 0.15s ease;
+}
+.demo-gallery > ul > li a .demo-gallery-poster > img {
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    transition: opacity 0.3s ease;
+}
+.demo-gallery > ul > li a:hover .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+</style>