fixed gallery

index.php

@@ -5,7 +5,8 @@
 <main>
     <div id="mainCarousel" class="carousel container slide mt-5 mb-2" data-bs-ride="carousel">
         <div class="carousel-inner">
-            <img src="assets/images/banners/banner.jpg" alt="EMPower Renewable Energy Banner" id="mainBanner" class="rounded-4">
+            <img src="assets/images/banners/banner.jpg" alt="EMPower Renewable Energy Banner" id="mainBanner"
+                class="rounded-4">
         </div>
     </div>
     <div class="container" data-bs-spy="scroll" data-bs-target="#mainNavbar">
@@ -18,7 +19,8 @@
                         <i class="bi bi-person-fill"></i>
                     </div>
                     <h3 class="fs-2 text-body-emphasis">ทีมงานมืออาชีพ</h3>
-                    <p>เรามีทีมงานมืออาชีพพร้อมด้วยประสบการณ์ในการติดตั้งระบบ Solar Rooftop มามากกว่า 10 ปี พร้อมสำหรับการติดตั้งในสถานที่ต่างๆ</p>
+                    <p>เรามีทีมงานมืออาชีพพร้อมด้วยประสบการณ์ในการติดตั้งระบบ Solar Rooftop มามากกว่า 10 ปี
+                        พร้อมสำหรับการติดตั้งในสถานที่ต่างๆ</p>
                 </div>
                 <div class="feature col">
                     <div
@@ -34,7 +36,8 @@
                         <i class="bi bi-calendar-check-fill"></i>
                     </div>
                     <h3 class="fs-2 text-body-emphasis">บริการดูแล</h3>
-                    <p>เรามีบริการหลังการติดตั้ง เช่น การติดตั้งระบบ Monitor Software และบริการดูแลระบบและล้างแผงโซล่าเซลล์ 2 ปี - 2 ครั้งใน 1 ปี - พร้อมการรับประกัน 5 ปี</p>
+                    <p>เรามีบริการหลังการติดตั้ง เช่น การติดตั้งระบบ Monitor Software
+                        และบริการดูแลระบบและล้างแผงโซล่าเซลล์ 2 ปี - 2 ครั้งใน 1 ปี - พร้อมการรับประกัน 5 ปี</p>
                 </div>
             </div>
         </div>
@@ -42,33 +45,41 @@
         <div id="gallerySection" class="container px-4 py-4">
             <h2 class="pb-2 border-bottom">Gallery</h2>
             <div class="album">
-                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+                <div class="row row-cols-1 row-cols-md-3 align-items-center g-3">
-                    <?php
+                <div class='col d-grid gap-3'>
-                    $photoSet1 = array(
-                        array("assets/images/gallery/1.jpg", "1"),
-                        array("assets/images/gallery/2.jpg", "2"),
-                        array("assets/images/gallery/3.jpg", "3"),
-                        array("assets/images/gallery/4.jpg", "4"),
-                        array("assets/images/gallery/5.jpg", "5"),
-                        array("assets/images/gallery/6.jpg", "6"),
-                        array("assets/images/gallery/7.jpg", "7"),
-                        array("assets/images/gallery/8.jpg", "8"),
-                        array("assets/images/gallery/9.jpg", "9"),
-                        array("assets/images/gallery/10.jpg", "10"),
-                        array("assets/images/gallery/11.jpg", "11"),
-                        array("assets/images/gallery/12.jpg", "12"),
-                    );
-
-                    foreach ($photoSet1 as $fileInfo) {
-                        $imageSrc = $fileInfo[0];
-                        $text = $fileInfo[1];
-                        echo "<div class='col'>
                         <div class='card shadow-sm'>
-                                    <img src='$imageSrc' class='bd-placeholder-img card-img-top' width='100%' height='270' />
+                            <img src='assets/images/gallery/1.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/7.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                    </div>
+                    <div class='col d-grid gap-3'>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/3.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/6.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                    </div>
+                    <div class='col d-grid gap-3'>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/2.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/4.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
+                        <div class='card shadow-sm'>
+                            <img src='assets/images/gallery/5.jpg' class='bd-placeholder-img card-img-top'
+                                style='max-width: 100%; height: auto' />
+                        </div>
                     </div>
-                            </div>";
-                    }
-                    ?>
                 </div>
             </div>
         </div>