MuhammadFarras/student-web-if-development-kit
1
0
Fork 0
forked from izu/student-web-if-development-kit
Code Pull Requests 1 Activity

Compare commits

base: MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em
Branches Tags
MuhammadFarras/student-web-if-development-kit:main MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan-hover MuhammadFarras/student-web-if-development-kit:feature/fix-ukuran-foto-about MuhammadFarras/student-web-if-development-kit:feature/konten-Lima-em MuhammadFarras/student-web-if-development-kit:feat/limaem-partner-logo-hover-effects MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em-v2 MuhammadFarras/student-web-if-development-kit:enhance/hover-effects-and-interactions MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em MuhammadFarras/student-web-if-development-kit:fix/layout-slider-gradient-limaem MuhammadFarras/student-web-if-development-kit:fix/limaem-slider-layout MuhammadFarras/student-web-if-development-kit:feat/LimaEm-group izu/student-web-if-development-kit:main
...
compare: MuhammadFarras/student-web-if-development-kit:3b52480c8142be77dc30f250a29c883caaa857ec
Branches Tags
MuhammadFarras/student-web-if-development-kit:main MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan MuhammadFarras/student-web-if-development-kit:fix/divisi-kepengurusan-hover MuhammadFarras/student-web-if-development-kit:feature/fix-ukuran-foto-about MuhammadFarras/student-web-if-development-kit:feature/konten-Lima-em MuhammadFarras/student-web-if-development-kit:feat/limaem-partner-logo-hover-effects MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em-v2 MuhammadFarras/student-web-if-development-kit:enhance/hover-effects-and-interactions MuhammadFarras/student-web-if-development-kit:feature/konten-lima-em MuhammadFarras/student-web-if-development-kit:fix/layout-slider-gradient-limaem MuhammadFarras/student-web-if-development-kit:fix/limaem-slider-layout MuhammadFarras/student-web-if-development-kit:feat/LimaEm-group izu/student-web-if-development-kit:main

9 Commits
feature/konten-lima-em ... 3b52480c81

Author SHA1 Message Date
Bayu 3b52480c81 fix(LimaEm): re-apply full-width layout and inline hero styles after merging origin/main 2026-06-04 20:52:07 +07:00
Bayu eef091582d Merge branch 'main' into enhance/hover-effects-and-interactions 2026-06-04 20:50:36 +07:00
Bayu 766a930542 fix(LimaEm): Hero 100% inline style — gradient biru, badge kuning, heading, dan button cocok referensi 2026-06-04 20:41:40 +07:00
powji17 c8cb265394 fix(lima-em): perbaiki layout ukuran card kegiatan unggulan dan grid galeri keseruan 2026-06-04 20:38:55 +07:00
Bayu 35f1dd3865 fix(LimaEm): break sections out of container so content fills full viewport width edge-to-edge 2026-06-04 20:27:33 +07:00
Bayu 54b00194a8 fix(LimaEm): make all sections full-width, fix button hover inline style, add yellow glow on active partners 2026-06-04 20:16:33 +07:00
powji b42edb3356 Merge pull request 'feature/konten-lima-em' (#2) from feature/konten-lima-em into main 
Reviewed-on: #2
 2026-06-04 13:05:55 +00:00
Bayu bedac5851e enhance(LimaEm): restore missing hover/interaction effects across all sections 2026-06-04 20:01:05 +07:00
Bayu 034b131c12 fix(LimaEm): tidy up Ruang Tumbuh layout and add Kehidupan Mahasiswa hero gradient 2026-06-04 19:40:03 +07:00
1 changed files with 85 additions and 108 deletions
Expand all files Collapse all files
groups/LimaEm/index.html
+85 -108
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -292,6 +292,24 @@
border-right: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
} }
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
@media (min-width: 768px) {
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
.md-card-half {
width: calc(50% - 16px) !important;
}
/* Fix tinggi grid Galeri Keseruan (Tablet) */
.galeri-grid {
height: 420px !important;
}
}
@media (min-width: 1024px) {
/* Fix tinggi grid Galeri Keseruan (Desktop) */
.galeri-grid {
height: 500px !important;
}
}
</style> </style>
</head> </head>
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black"> <body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
@@ -1140,51 +1158,57 @@
</div> </div>
</div> </div>
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white"> <main id="main-content" class="min-h-screen bg-white">
<div class="container mx-auto px-4 lg:px-8 py-12"> <div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
<div class="mb-8 pb-8 border-b border-slate-200"> <div class="mb-8 pb-8 border-b border-slate-200">
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span> <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa &amp; Himpunan (HMIF)</h1> <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa &amp; Himpunan (HMIF)</h1>
<p class="text-slate-500 text-sm">Kelompok 07 &mdash; LIMA EM &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p> <p class="text-slate-500 text-sm">Kelompok 07 &mdash; LIMA EM &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
</div> </div>
<div id="assignment-body" class="prose prose-slate max-w-none"> </div>
<div id="assignment-body" class="w-full">
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= --> <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
<!-- Hero Section --> <!-- Hero Section -->
<header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]"> <header class="relative w-full min-h-screen flex items-center overflow-hidden" style="padding-top: 92px;">
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa" <img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
class="absolute inset-0 w-full h-full object-cover z-0" /> class="absolute inset-0 w-full h-full object-cover z-0" />
<div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div> <!-- Gradient biru ke kanan seperti referensi -->
<div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0,49,80,0.85) 40%, rgba(0,49,80,0.4) 65%, transparent 100%);"></div>
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full"> <div class="relative z-10 w-full" style="max-width: 1280px; margin: 0 auto; padding: 4rem 3rem;">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;">
<div class="flex flex-col items-start text-left space-y-6"> <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;">
<div data-i18n="grp_limaem_hero_badge" <div data-i18n="grp_limaem_hero_badge"
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full"> style="background: rgba(254,180,1,0.15); color: #feb401; font-weight: 700; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; letter-spacing: 0.05em;">
COMMUNITY & LEADERSHIP COMMUNITY & LEADERSHIP
</div> </div>
<h1 data-i18n="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight"> <h1 data-i18n="grp_limaem_hero_title" style="font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800; color: white; line-height: 1.2; margin: 0;">
Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span> Kehidupan Mahasiswa & <span style="color: #feb401;">Himpunan (HMIF)</span>
</h1> </h1>
<p data-i18n="grp_limaem_hero_desc" class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl"> <p data-i18n="grp_limaem_hero_desc" style="font-size: 1rem; color: #d1d5db; font-weight: 300; line-height: 1.75; max-width: 36rem; margin: 0;">
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
kreativitas, membentuk calon pemimpin industri masa depan. kreativitas, membentuk calon pemimpin industri masa depan.
</p> </p>
<button data-i18n="grp_limaem_hero_btn" <button data-i18n="grp_limaem_hero_btn" onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer"> style="background: transparent; border: 2px solid white; color: white; font-weight: 700; font-size: 0.9375rem; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; transition: all 0.25s ease; margin-top: 0.5rem;"
onmouseover="this.style.background='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401'; this.style.transform='scale(1.04)'; this.style.boxShadow='0 8px 24px rgba(254,180,1,0.35)';"
onmouseout="this.style.background='transparent'; this.style.color='white'; this.style.borderColor='white'; this.style.transform='scale(1)'; this.style.boxShadow='none';"
onmousedown="this.style.transform='scale(0.97)';"
onmouseup="this.style.transform='scale(1.04)';">
Lihat Struktur Kepengurusan Lihat Struktur Kepengurusan
</button> </button>
</div> </div>
<div class="hidden lg:block"></div> <div></div>
</div> </div>
</div> </div>
@@ -1492,7 +1516,7 @@
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out"> <div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
<!-- Card 1 Silaturahmi Keluarga Besar Informatika--> <!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar" <img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
@@ -1516,7 +1540,7 @@
</div> </div>
<!-- Card 2 Gemastik --> <!-- Card 2 Gemastik -->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF" <img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
@@ -1542,7 +1566,7 @@
</div> </div>
<!-- Card 3 17 agustus --> <!-- Card 3 17 agustus -->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus" <img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
@@ -1566,7 +1590,7 @@
</div> </div>
<!-- Card 3 Bootcamp --> <!-- Card 3 Bootcamp -->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF" <img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
@@ -1589,8 +1613,9 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Card 5 UPC 2025 --> <!-- Card 5 UPC 2025 -->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025" <img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
@@ -1614,7 +1639,7 @@
</div> </div>
<!-- Card 6 Informers --> <!-- Card 6 Informers -->
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md:w-[calc(50%_-_16px)]"> <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
<div <div
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100"> class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
<img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika" <img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
@@ -1783,118 +1808,71 @@
<!-- ====== Slide 1 ====== --> <!-- ====== Slide 1 ====== -->
<div class="flex-shrink-0 w-full"> <div class="flex-shrink-0 w-full">
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]"> <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
<!-- Foto besar kiri (span 2 baris) --> <!-- Foto besar kiri (span 2 baris) -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer"> <img src="./assets/images/galeri-keseruan/DSC00636.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src=".\assets\images\galeri-keseruan\DSC00636.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<!-- Foto kecil kanan atas 1 --> <!-- Foto kecil kanan atas 1 -->
<a href="https://instagram.com/hmif_ftuntan" target="_blank" <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> <img src="./assets/images/galeri-keseruan/Copy of DSC09492.JPG" alt="Gemastik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src=".\assets\images\galeri-keseruan\Copy of DSC09492.JPG" alt="Gemastik"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<!-- Foto kecil kanan atas 2 --> <!-- Foto kecil kanan atas 2 -->
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
target="_blank" rel="noopener noreferrer" class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> <img src="./assets/images/galeri-keseruan/IMG_0204.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src=".\assets\images\galeri-keseruan\IMG_0204.JPG" alt="INFORMERS"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<!-- Foto lebar kanan bawah (span 2 kolom) --> <!-- Foto lebar kanan bawah (span 2 kolom) -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> <img src="./assets/images/galeri-keseruan/DSC00456.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
<img src=".\assets\images\galeri-keseruan\DSC00456.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
</div> </div>
</div> </div>
<!-- ====== Slide 2 ====== --> <!-- ====== Slide 2 ====== -->
<div class="flex-shrink-0 w-full"> <div class="flex-shrink-0 w-full">
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]"> <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
<!-- Foto besar kiri -->
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer"> class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSCF8922.JPG" <img src="./assets/images/galeri-keseruan/DSCF8922.JPG" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
alt="Ulang Tahun Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<!-- Foto kecil kanan atas 1 -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00091.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a>
<!-- Foto kecil kanan atas 2 -->
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer" <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC03316.JPG" <img src="./assets/images/galeri-keseruan/DSC00091.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
alt="Silaturahmi Keluarga Besar Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
<!-- Foto lebar kanan bawah --> class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <img src="./assets/images/galeri-keseruan/DSC03316.JPG" alt="Silaturahmi Keluarga Besar Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
target="_blank" rel="noopener noreferrer" </a>
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer"> <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
<img src=".\assets\images\galeri-keseruan\IMG_5705.JPG" alt="INFORMERS" class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> <img src="./assets/images/galeri-keseruan/IMG_5705.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
</div> </div>
</div> </div>
<!-- ====== Slide 3 ====== --> <!-- ====== Slide 3 ====== -->
<div class="flex-shrink-0 w-full"> <div class="flex-shrink-0 w-full">
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]"> <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
<!-- Foto besar kiri --> class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <img src="./assets/images/galeri-keseruan/DSC00252.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
rel="noopener noreferrer"
class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00252.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
<!-- Foto kecil kanan atas 1 --> class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <img src="./assets/images/galeri-keseruan/DSC00519.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC00519.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
<!-- Foto kecil kanan atas 2 --> class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" <img src="./assets/images/galeri-keseruan/IMG_0030.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
target="_blank" rel="noopener noreferrer"
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\IMG_0030.JPG" alt="INFORMERS"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
<!-- Foto lebar kanan bawah --> class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" <img src="./assets/images/galeri-keseruan/DSC01002.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
rel="noopener noreferrer"
class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
<img src=".\assets\images\galeri-keseruan\DSC01002.JPG" alt="UPC V"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
</div> </div>
</div> </div>
@@ -2016,7 +1994,6 @@
</div> </div>
</section> </section>
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= --> <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
</div>
</div> </div>
</main> </main>