ok
Direktori : /proc/self/root/home2/selectio/www/tnssa/ |
Current File : //proc/self/root/home2/selectio/www/tnssa/gallery.php |
<?php include('header.php'); ?> <!-- Page Header Start --> <div class="page-header parallaxie" style="background-image: url('banner/banner6.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center -1.21449px;"> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- Page Header Box Start --> <div class="page-header-box"> <h1 class="text-anime">Gallery</h1> </div> <!-- Page Header Box End --> </div> </div> </div> </div> <!-- Page Header End --> <!-- Blog Archive Page Start --> <div class="page-blog-archive"> <div class="container"> <div class="relative font-inter antialiased"> <main class="relative min-h-screen flex flex-col justify-center bg-white overflow-hidden"> <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24"> <!-- Tabs component --> <div x-data="{ activeTab: 1 }"> <!-- Buttons --> <div class="flex justify-center" style="text-align:center;"> <div role="tablist" class="max-[480px]:max-w-[180px] inline-flex flex-wrap justify-center bg-slate-200 rounded-[20px] p-1 mb-8 min-[480px]:mb-12" @keydown.right.prevent.stop="$focus.wrap().next()" @keydown.left.prevent.stop="$focus.wrap().prev()" @keydown.home.prevent.stop="$focus.first()" @keydown.end.prevent.stop="$focus.last()" > <!-- Button #1 --> <button id="tab-1" class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" :class="activeTab === 1 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'" :tabindex="activeTab === 1 ? 0 : -1" :aria-selected="activeTab === 1" aria-controls="tabpanel-1" @click="activeTab = 1" @focus="activeTab = 1" style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">All</button> <!-- Button #2 --> <button id="tab-2" class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" :class="activeTab === 2 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'" :tabindex="activeTab === 2 ? 0 : -1" :aria-selected="activeTab === 2" aria-controls="tabpanel-2" @click="activeTab = 2" @focus="activeTab = 2" style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">District Level</button> <!-- Button #3 --> <button id="tab-3" class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" :class="activeTab === 3 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'" :tabindex="activeTab === 3 ? 0 : -1" :aria-selected="activeTab === 3" aria-controls="tabpanel-3" @click="activeTab = 3" @focus="activeTab = 3" style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">State Level</button> <button id="tab-4" class="flex-1 text-sm font-medium h-8 px-4 rounded-2xl whitespace-nowrap focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150 ease-in-out" :class="activeTab === 4 ? 'bg-white text-slate-900' : 'text-slate-600 hover:text-slate-900'" :tabindex="activeTab === 4 ? 0 : -1" :aria-selected="activeTab === 4" aria-controls="tabpanel-4" @click="activeTab = 4" @focus="activeTab = 4" style="color: green;font-family: none;border: 1px solid gray;border-radius: 16px;">National Level</button> </div> </div> <!-- Tab panels --> <div class="max-w-[640px] mx-auto"> <div class="relative flex flex-col"> <!-- Panel #1 --> <article id="tabpanel-1" class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" role="tabpanel" tabindex="0" aria-labelledby="tab-1" x-show="activeTab === 1" x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first" x-transition:enter-start="opacity-0 -translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-12" > <div class="row"> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery1.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery2.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery4.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> </div> <div class="row" style="margin-top:2%;"> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery5.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery6.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery7.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery8.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> </div> </article> <!-- Panel #2 --> <article id="tabpanel-2" class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" role="tabpanel" tabindex="0" aria-labelledby="tab-2" x-show="activeTab === 2" x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first" x-transition:enter-start="opacity-0 -translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-12" > <div class="row"> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery4.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery7.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> </div> </article> <!-- Panel #3 --> <article id="tabpanel-3" class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" role="tabpanel" tabindex="0" aria-labelledby="tab-3" x-show="activeTab === 3" x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first" x-transition:enter-start="opacity-0 -translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-12" > <div class="row"> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery1.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery6.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> </div> </article> <article id="tabpanel-4" class="w-full bg-white rounded-2xl shadow-xl min-[480px]:flex items-stretch focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" role="tabpanel" tabindex="0" aria-labelledby="tab-4" x-show="activeTab === 4" x-transition:enter="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-700 transform order-first" x-transition:enter-start="opacity-0 -translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-12" > <div class="row"> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery2.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> <div class="col-3 col-sm-3 col-md-3 col-lg-3"> <img class="w-full h-[180px] min-[480px]:h-full object-cover rounded-lg" src="img/gallery/gallery5.jpg" alt="Tab 01" style="border-radius: 20px;"/> </div> </div> </article> </div> </div> </div> <!-- End: Tabs component --> </div> </main> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <!-- Blog Archive Page End --> <?php include('footer.php'); ?>