s1

src/components/MainHeader.astro

@@ -16,6 +16,7 @@
         <!-- <li><a href="#">Services</a></li> -->
         <li><a href="/about">About</a></li>
         <li><a href="/overview">Overview</a></li>
+        <li><a href="/gallery">Gallery</a></li>
         <li><a href="/admission">Admission</a></li>
         <li><a href="/contact">Contact</a></li>
 

src/pages/curriculum.astro

@@ -237,7 +237,7 @@ let inSportsData = [
                         {outSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 text-center">{data.name}</h2>
                             </div>
                         ))}
                     </div>
@@ -246,7 +246,7 @@ let inSportsData = [
                         {inSportsData.map((data) => (
                             <div class="drop-shadow-2xl flex flex-col justify-center place-items-center items-center hover:bg-[#3084b530] p-2 rounded-lg duration-[1s] cursor-pointer">
                                 <img class="" src={data.image} alt="" />
-                                <h2 class="pt-3">{data.name}</h2>
+                                <h2 class="pt-3 ">{data.name}</h2>
                             </div>
                         ))}
                     </div>                    

src/pages/gallery.astro

@@ -1,53 +1,53 @@
 ---
 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" }];
+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-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="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="">
+                    <img class="lg:max-w-2xl aspect-video" src="/assets/school_image/hps-image8.jpg" 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>
+                    <!-- <h2 class="text-2xl md:text-3xl text-[#3084b5] py-4">Contact us for a brighter start at Holywisdom Preschool!</h2> -->
+                    <!-- <h3 class="text-xl text-justify pb-4">Drop us a line at Holywisdom Preschool – your gateway to educational excellence!</h3> -->
+                    <!-- <div class="flex flex-row place-content-between">
+                        <a href="#" class="text-sm xl:text-lg rounded-lg shadow-2xl text-[#3084b5] px-4 md:px-8 p-3 border-2 border-[#3084b5] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300">Get in Touch</a>
+                    </div> -->
                 </div>
             </div>
         </section>
-        <section class="container mx-auto px-4">
+        <section class="container mx-auto px-4 mt-8">
             <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" />
+                <ul id="lightgallery4">
+                    {img3DResInter.map((data) => (
+                        <li class="w-full md:w-[300px] aspect-video" 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] aspect-video">
+                                    <img class="img-responsive aspect-video" src={data.image_src} alt="Gallery item" />
                                 </div>
                                 <div class="demo-gallery-poster">
-                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom Icon" />
+                                    <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png" alt="Zoom icon" />
                                 </div>
                             </a>
                         </li>
                     ))}
                 </ul>
-            </div>
+              </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'));
+  lightGallery(document.getElementById('lightgallery4'))
 </script>
-
 <style>
 .gradintBack {
     background: linear-gradient(0deg, rgb(71, 174, 106) 0%, rgba(255, 255, 255) 40%);
@@ -56,51 +56,130 @@ const img3DResInter = [{ image_src: "/assets/school_image/hps-image1.jpg" },{ im
     margin-bottom: 0;
     padding-left: 15px;
     padding-right: 15px;
-}
-.demo-gallery > ul > li {
+    }
+
+    .demo-gallery > ul > li {
     margin-bottom: 15px;
     display: inline-block;
     list-style: outside none none;
-}
-.demo-gallery > ul > li a {
+    }
+
+    .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;
+    }
+
+    .demo-gallery > ul > li a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
     transform: scale3d(1, 1, 1);
     height: 100%;
     width: 100%;
-}
-.demo-gallery > ul > li a:hover > img {
+    }
+
+    .demo-gallery > ul > li a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
     transform: scale3d(1.1, 1.1, 1.1);
-}
-.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster > img {
     opacity: 1;
-}
-.demo-gallery > ul > li a .demo-gallery-poster {
+    }
+
+    .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 {
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .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 {
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+    }
+
+    .demo-gallery > ul > li a:hover .demo-gallery-poster {
     background-color: rgba(0, 0, 0, 0.5);
-}
-</style>
+    }
+
+    .demo-gallery .justified-gallery > a > img {
+    -webkit-transition: -webkit-transform 0.15s ease 0s;
+    -moz-transition: -moz-transform 0.15s ease 0s;
+    -o-transition: -o-transform 0.15s ease 0s;
+    transition: transform 0.15s ease 0s;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+    height: 100%;
+    width: 100%;
+    }
+
+    .demo-gallery .justified-gallery > a:hover > img {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
+    opacity: 1;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    -webkit-transition: background-color 0.15s ease 0s;
+    -o-transition: background-color 0.15s ease 0s;
+    transition: background-color 0.15s ease 0s;
+    }
+
+    .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
+    left: 50%;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    -webkit-transition: opacity 0.3s ease 0s;
+    -o-transition: opacity 0.3s ease 0s;
+    transition: opacity 0.3s ease 0s;
+
+
+    }
+
+    .demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
+    background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .demo-gallery .video .demo-gallery-poster img {
+    height: 48px;
+    margin-left: -24px;
+    margin-top: -24px;
+    opacity: 0.8;
+    width: 48px;
+    }
+
+    .demo-gallery.dark > ul > li a {
+    border: 3px solid #04070a;
+    }
+</style>

src/pages/test.astro

@@ -0,0 +1,20 @@
+<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
+    <div class="h-[200px] text-center bg-[#f59e0b]">
+        Grid - 1
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 2
+    </div>
+    <div class="h-[200px] text-center bg-[#84cc16]">
+        Grid - 3
+    </div>
+    <div class="h-[200px] text-center bg-[#4f46e5]">
+        Grid - 4
+    </div>
+    <div class="h-[200px] text-center bg-[#db2777]">
+        Grid - 5
+    </div>
+    <div class="h-[200px] text-center bg-[#b91c1c]">
+        Grid - 6
+    </div>
+</div>