src/pages/gallery.astro

@@ -1,106 +0,0 @@
----
-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>