forked from izu/student-web-if-development-kit
Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bayu
|
e792afec16 | ||
|
Bayu
|
3076c922e3 | ||
|
Bayu
|
3e87d77b04 | ||
|
Bayu
|
6a6f316e5f | ||
|
Bayu
|
3b52480c81 | ||
|
Bayu
|
eef091582d | ||
|
Bayu
|
766a930542 | ||
 powji17
|
c8cb265394 | ||
|
Bayu
|
35f1dd3865 | ||
|
Bayu
|
54b00194a8 | ||
 powji
|
b42edb3356 | ||
|
Bayu
|
bedac5851e | ||
|
Bayu
|
034b131c12 |
@@ -0,0 +1,73 @@
|
||||
const fs = require('fs');
|
||||
let c = fs.readFileSync('groups/LimaEm/index.html', 'utf8');
|
||||
|
||||
const oldHeroGrad = '<div class=\"absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0\"></div>';
|
||||
const newHeroGrad = '<div class=\"absolute inset-0 z-0\" style=\"background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);\"></div>';
|
||||
c = c.replace(oldHeroGrad, newHeroGrad);
|
||||
|
||||
const oldPhotoStr = \<!-- --- Right: Photo --- -->
|
||||
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
||||
|
||||
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
||||
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
||||
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
||||
|
||||
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
||||
<div
|
||||
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
|
||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
|
||||
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
||||
<!-- Gradient overlay bawah -->
|
||||
<div class="absolute inset-0
|
||||
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
||||
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
|
||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
||||
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
||||
bg-hmif-secondary text-hmif-primary
|
||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
||||
Inklusivitas &<br>Kolaborasi
|
||||
</p>
|
||||
</div>
|
||||
</div>\;
|
||||
const newPhotoStr = \<!-- --- Right: Photo --- -->
|
||||
<div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
|
||||
<!-- Offset shadow block biru tua -->
|
||||
<div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
|
||||
|
||||
<!-- Frame foto -->
|
||||
<div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
|
||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
|
||||
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
|
||||
<!-- Gradient overlay bawah -->
|
||||
<div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
|
||||
</div>
|
||||
|
||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
||||
<div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
|
||||
bg-hmif-secondary text-hmif-primary
|
||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
||||
Inklusivitas &<br>Kolaborasi
|
||||
</p>
|
||||
</div>
|
||||
</div>\;
|
||||
c = c.replace(oldPhotoStr, newPhotoStr);
|
||||
fs.writeFileSync('groups/LimaEm/index.html', c);
|
||||
console.log('HTML layout fixed');
|
||||
+81
-103
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -292,6 +292,24 @@
|
||||
border-right: 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>
|
||||
</head>
|
||||
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
|
||||
@@ -1140,22 +1158,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
|
||||
<div class="container mx-auto px-4 lg:px-8 py-12">
|
||||
<main id="main-content" class="min-h-screen bg-white">
|
||||
<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">
|
||||
<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 & Himpunan (HMIF)</h1>
|
||||
<p class="text-slate-500 text-sm">Kelompok 07 — LIMA EM · Informatika UNTAN 2026</p>
|
||||
</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 ================= -->
|
||||
<!-- 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"
|
||||
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>
|
||||
<div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, 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">
|
||||
|
||||
@@ -1164,12 +1183,15 @@
|
||||
<div class="flex flex-col items-start text-left space-y-6">
|
||||
|
||||
<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">
|
||||
class="font-bold text-xs md:text-sm px-3 py-1 rounded-full ring-1 backdrop-blur-sm cursor-default"
|
||||
style="background-color: rgba(254, 180, 1, 0.15); color: #feb401; --tw-ring-color: rgba(254, 180, 1, 0.3); transition: background-color 300ms ease;"
|
||||
onmouseover="this.style.backgroundColor='rgba(254, 180, 1, 0.25)'"
|
||||
onmouseout="this.style.backgroundColor='rgba(254, 180, 1, 0.15)'">
|
||||
COMMUNITY & LEADERSHIP
|
||||
</div>
|
||||
|
||||
<h1 data-i18n="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
||||
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>
|
||||
|
||||
<p data-i18n="grp_limaem_hero_desc" class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
||||
@@ -1177,8 +1199,11 @@
|
||||
kreativitas, membentuk calon pemimpin industri masa depan.
|
||||
</p>
|
||||
|
||||
<button data-i18n="grp_limaem_hero_btn"
|
||||
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">
|
||||
<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 transition-all hover:cursor-pointer"
|
||||
style="transition: all 0.25s ease;"
|
||||
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
|
||||
onmouseout="this.style.backgroundColor='transparent'; this.style.color='white'; this.style.borderColor='white';">
|
||||
Lihat Struktur Kepengurusan
|
||||
</button>
|
||||
|
||||
@@ -1463,7 +1488,7 @@
|
||||
|
||||
<!-- Kegiatan Unggulan Section -->
|
||||
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
|
||||
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
|
||||
<!-- Header -->
|
||||
<div class="mb-12">
|
||||
<h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
||||
@@ -1492,7 +1517,7 @@
|
||||
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1516,7 +1541,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1542,7 +1567,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1566,7 +1591,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1589,8 +1614,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1614,7 +1640,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1783,118 +1809,71 @@
|
||||
|
||||
<!-- ====== Slide 1 ====== -->
|
||||
<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) -->
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
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" />
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
||||
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/DSC00636.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
<!-- Foto kecil kanan atas 1 -->
|
||||
<a href="https://instagram.com/hmif_ftuntan" 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\Copy of DSC09492.JPG" alt="Gemastik"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<a href="https://instagram.com/hmif_ftuntan" 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">
|
||||
<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>
|
||||
|
||||
<!-- Foto kecil kanan atas 2 -->
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
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_0204.JPG" alt="INFORMERS"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" 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">
|
||||
<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>
|
||||
|
||||
<!-- Foto lebar kanan bawah (span 2 kolom) -->
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
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\DSC00456.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block w-full h-full 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" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== Slide 2 ====== -->
|
||||
<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]">
|
||||
|
||||
<!-- Foto besar kiri -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
||||
<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">
|
||||
<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" />
|
||||
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" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</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"
|
||||
class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<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" />
|
||||
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/DSC00091.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</a>
|
||||
|
||||
<!-- Foto lebar kanan bawah -->
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
target="_blank" 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\IMG_5705.JPG" alt="INFORMERS"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" 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">
|
||||
<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" />
|
||||
</a>
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== Slide 3 ====== -->
|
||||
<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]">
|
||||
|
||||
<!-- Foto besar kiri -->
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
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" />
|
||||
<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"
|
||||
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/DSC00252.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</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\DSC00519.JPG" alt="UPC V"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" 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">
|
||||
<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>
|
||||
|
||||
<!-- Foto kecil kanan atas 2 -->
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
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 href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" 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">
|
||||
<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>
|
||||
|
||||
<!-- Foto lebar kanan bawah -->
|
||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
|
||||
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 href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
||||
class="hidden md:block w-full h-full 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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2016,7 +1995,6 @@
|
||||
</div>
|
||||
</section>
|
||||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user