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

fix(lima-em): perbaiki layout ukuran card kegiatan unggulan dan grid galeri keseruan

Browse Source
This commit is contained in:
powji17
2026-06-04 20:38:55 +07:00
parent b42edb3356
commit c8cb265394
1 changed files with 63 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/LimaEm/index.html
+63 -91
View File
@@ -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">
@@ -1492,7 +1510,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 +1534,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 +1560,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 +1584,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 +1607,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 +1633,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 +1802,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>