File "index.php"

Full path: /home/fsibplc/public_html/sommilito-bank/index.php
File size: 6.23 B (6.23 KB bytes)
MIME-type: text/html
Charset: utf-8

Download   Open   Edit   Advanced Editor   Back

   <?php include 'header.php' ?>

<!-- Popup Overlay -->
    <div id="popupOverlay" class="fixed inset-0 bg-black/60 flex items-center justify-center opacity-0 invisible transition-all duration-300 z-50">
        
        <!-- Modal -->
        <div id="popupModal" class="relative max-w-lg w-full mx-4 transform scale-95 transition-all duration-300">
            
            <!-- Close Button -->
            <button id="closePopup" class="absolute -top-3 -right-3 bg-white rounded-full p-2 shadow-md hover:bg-gray-100 transition cursor-pointer">
                <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
                </svg>
            </button>

            <!-- Image -->
            <img 
                src="assets/pop-up/CASA.jpg"
                alt="Popup Image"
                class="w-full h-auto rounded-xl shadow-lg cursor-pointer"
            >
        </div>
    </div>

    <!-- Script -->
    <script>
        const popup = document.getElementById("popupOverlay");
        const modal = document.getElementById("popupModal");
        const closeBtn = document.getElementById("closePopup");

        // Show popup on page load
        window.addEventListener("load", () => {
            setTimeout(() => {
                popup.classList.remove("opacity-0", "invisible");
                popup.classList.add("opacity-100", "visible");

                modal.classList.remove("scale-95");
                modal.classList.add("scale-100");
            }, 500);
        });

        // Close function
        function closeModal() {
            popup.classList.add("opacity-0", "invisible");
            popup.classList.remove("opacity-100", "visible");

            modal.classList.add("scale-95");
            modal.classList.remove("scale-100");
        }

        // Close button click
        closeBtn.addEventListener("click", closeModal);

        // Click outside to close
        popup.addEventListener("click", (e) => {
            if (e.target === popup) {
                closeModal();
            }
        });
    </script>



    <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"><img src="assets/slider/1.jpeg" class="w-full h-full object-contain"></div>
            <div class="swiper-slide"><img src="assets/slider/2.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/3.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/4.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/5.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/6.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/7.jpeg" class="w-full h-full object-cover"></div>
            <div class="swiper-slide"><img src="assets/slider/8.jpeg" class="w-full h-full object-cover"></div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>


        <!-- If we need scrollbar -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>


    <div class="bg-teal-900 text-white py-3 overflow-hidden">
        <div class="flex items-center space-x-4 px-4">

            <!-- Label -->
            <span class="bg-red-600 px-3 py-1 text-sm font-semibold rounded">
                Latest
            </span>

            <!-- Scrolling -->
            <div class="overflow-hidden w-full relative">
                <div class="flex space-x-10 whitespace-nowrap animate-marquee">

                    <p href="#" class="flex items-center space-x-2 hover:text-blue-400">
                        <span class="text-yellow-400">•</span>
                        <span>The fourth meeting of the Board of Directors of Sammilito Islami Bank PLC was held on 02 February 2026 at City Centre, Motijheel. </span>
                    </p>
                    <p href="#" class="flex items-center space-x-2 hover:text-blue-400">
                        <span class="text-yellow-400">•</span>
                        <span>02 Dec2025: FSIB Administrator exchanges views with the Divisional Heads, Zonal Heads and Branch Managers</span>
                    </p>
                    <p href="#" class="flex items-center space-x-2 hover:text-blue-400">
                        <span class="text-yellow-400">•</span>
                        <span>14 July 2025: গ্লোবাল ইসলামী ব্যাংকের অর্ধবার্ষিক ব্যবসায় উন্নয়ন সম্মেলন- ২০২৫ অনুষ্ঠিত</span>
                    </p>
                    

                </div>
            </div>
        </div>
    </div>

   <?php include 'card.php' ?>

   <?php include 'product-services.php' ?>

    <?php include 'footer.php'; ?>

    <script>
        const swiper = new Swiper('.swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,

            // If we need pagination
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
                type: "progressbar",
            },

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
   

</body>

</html>