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:fix/limaem-slider-layout
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:766a93054232b2220d5e8b3f51a6bb14c3449e1a
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

5 Commits
fix/limaem-slider-layout ... 766a930542

Author SHA1 Message Date
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
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
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 117 additions and 95 deletions
Expand all files Collapse all files
groups/LimaEm/index.html
+115 -93
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">
@@ -1140,51 +1140,60 @@
</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 <!-- Badge COMMUNITY & LEADERSHIP -->
class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full"> <div 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 &amp; LEADERSHIP
</div> </div>
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight"> <!-- Heading -->
Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span> <h1 style="font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800; color: white; line-height: 1.2; margin: 0;">
Kehidupan Mahasiswa &amp; <span style="color: #feb401;">Himpunan (HMIF)</span>
</h1> </h1>
<p class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl"> <!-- Subtext -->
<p 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 <!-- Button -->
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 onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
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>
@@ -1192,7 +1201,7 @@
<!-- About Section --> <!-- About Section -->
<section id="about" class="bg-white overflow-hidden"> <section id="about" class="bg-white overflow-hidden">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16"> <div class="w-full px-6 lg:px-16 xl:px-24 pt-20 lg:pt-24 pb-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
<!-- ─── Left: Text Content ─── --> <!-- ─── Left: Text Content ─── -->
@@ -1219,19 +1228,19 @@
<!-- Stats --> <!-- Stats -->
<div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100"> <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
<div> <div class="group cursor-default">
<p <p
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums"> class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
518</p> 518</p>
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3"> <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
Mahasiswa Aktif Mahasiswa Aktif
</p> </p>
</div> </div>
<div> <div class="group cursor-default">
<p <p
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums"> class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
8</p> 8</p>
<p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3"> <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
MITRA MITRA
</p> </p>
</div> </div>
@@ -1239,36 +1248,31 @@
</div> </div>
<!-- ─── Right: Photo ─── --> <!-- ─── Right: Photo ─── -->
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4"> <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>
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) --> <!-- Frame foto -->
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%] <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;">
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" <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
transition-transform duration-700 ease-out group-hover:scale-[1.03]" /> class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
<!-- Gradient overlay bawah --> <!-- Gradient overlay bawah -->
<div class="absolute inset-0 <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>
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
</div> </div>
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah --> <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
<div class="absolute z-20 bottom-[-3%] left-[0%] <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 bg-hmif-secondary text-hmif-primary
rounded-xl px-4 py-3 text-center shadow-2xl rounded-xl px-4 py-3 text-center shadow-2xl
border-2 border-white/20" style="min-width: 120px; max-width: 140px;"> 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" <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"> stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" <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" /> 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> </svg>
<p class="text-[11px] lg:text-xs font-bold leading-snug"> <p class="text-[11px] lg:text-xs font-bold leading-snug">
Inklusivitas &<br>Kolaborasi Inklusivitas &amp;<br>Kolaborasi
</p> </p>
</div> </div>
</div> </div>
@@ -1280,26 +1284,45 @@
<!-- Partner & Kolaborator --> <!-- Partner & Kolaborator -->
<section id="partners" class="bg-white py-16"> <section id="partners" class="bg-white py-16">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10"> <h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
Partner dan Kolaborator Partner dan Kolaborator
</h2> </h2>
<div class="flex flex-wrap gap-6 lg:gap-10 items-center"> <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
<!-- Partner Aktif (Terbaru) --> <!-- Partner Aktif (Terbaru) -->
<div class="relative group flex flex-col items-center gap-2">
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank" <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"> rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary class="block relative">
hover:scale-110 transition-transform duration-200 cursor-pointer" <!-- Yellow ring glow on hover -->
title="Partner Terbaru" /> <span class="absolute -inset-1 rounded-full bg-hmif-secondary opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
</a> <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
<!-- Partner Aktif (Sobat Konveksi) --> class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank" style="border-color: #feb401;"
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
hover:scale-110 transition-transform duration-200 cursor-pointer"
title="Partner Aktif" /> title="Partner Aktif" />
</a> </a>
<!-- Label AKTIF -->
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
style="background-color:#feb401; color:#003150;">AKTIF</span>
</div>
<!-- Partner Aktif (Sobat Konveksi) -->
<div class="relative group flex flex-col items-center gap-2">
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
class="block relative">
<!-- Yellow ring glow on hover -->
<span class="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
style="border-color: #feb401;"
title="Partner Aktif" />
</a>
<!-- Label AKTIF -->
<span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
style="background-color:#feb401; color:#003150;">AKTIF</span>
</div>
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna --> <!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
<div class="relative group"> <div class="relative group">
@@ -1332,7 +1355,7 @@
<!-- Divisi Kepengurusan HMIF Section --> <!-- Divisi Kepengurusan HMIF Section -->
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24"> <section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Header --> <!-- Header -->
<div class="mb-12 md:mb-16 max-w-3xl"> <div class="mb-12 md:mb-16 max-w-3xl">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4"> <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
@@ -1346,9 +1369,9 @@
<!-- Grid Card Container --> <!-- Grid Card Container -->
<div <div
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden"> class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden divide-y md:divide-y-0 md:divide-x divide-white/10">
<!-- Bidang 1 --> <!-- Bidang 1 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 1 Bidang 1
@@ -1367,7 +1390,7 @@
</div> </div>
<!-- Bidang 2 --> <!-- Bidang 2 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 2 Bidang 2
@@ -1385,7 +1408,7 @@
</div> </div>
<!-- Bidang 3 --> <!-- Bidang 3 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 3 Bidang 3
@@ -1404,7 +1427,7 @@
</div> </div>
<!-- Bidang 4 --> <!-- Bidang 4 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 4 Bidang 4
@@ -1423,7 +1446,7 @@
</div> </div>
<!-- Bidang 5 --> <!-- Bidang 5 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 5 Bidang 5
@@ -1441,7 +1464,7 @@
</div> </div>
<!-- Bidang 6 --> <!-- Bidang 6 -->
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10"> <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
<span <span
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300"> class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
Bidang 6 Bidang 6
@@ -1464,7 +1487,7 @@
<!-- Kegiatan Unggulan Section --> <!-- Kegiatan Unggulan Section -->
<section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24"> <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="w-full px-6 lg:px-16 xl:px-24 relative">
<!-- Header --> <!-- Header -->
<div class="mb-12"> <div class="mb-12">
<h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight"> <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
@@ -1493,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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
@@ -1501,14 +1524,14 @@
</div> </div>
<div class="flex items-start gap-4 mt-6"> <div class="flex items-start gap-4 mt-6">
<div <div
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm"> class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm transition-transform duration-300 group-hover:scale-110">
<span class="text-lg font-extrabold text-hmif-primary leading-none">27</span> <span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
<span <span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span> class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
</div> </div>
<div class="space-y-1"> <div class="space-y-1">
<h3 <h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors"> class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors duration-300">
Silaturahmi Keluarga Besar Informatika</h3> Silaturahmi Keluarga Besar Informatika</h3>
<p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama <p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p> seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
@@ -1517,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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
@@ -1543,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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
@@ -1567,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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
@@ -1591,10 +1614,10 @@
</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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div> </div>
<div class="flex items-start gap-4 mt-6"> <div class="flex items-start gap-4 mt-6">
@@ -1615,10 +1638,10 @@
</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 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
<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"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div> </div>
<div class="flex items-start gap-4 mt-6"> <div class="flex items-start gap-4 mt-6">
@@ -1671,7 +1694,7 @@
<!-- Study Club Section --> <!-- Study Club Section -->
<section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100"> <section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
<div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Centered Header --> <!-- Centered Header -->
<div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center"> <div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
<h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase"> <h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
@@ -1684,8 +1707,8 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- CP Card --> <!-- CP Card -->
<div <div
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6"> class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
<div class="text-[#b48608]"> <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
<!-- Brackets Icon --> <!-- Brackets Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-8 h-8"> stroke="currentColor" class="w-8 h-8">
@@ -1706,8 +1729,8 @@
<!-- Data Mining Card --> <!-- Data Mining Card -->
<div <div
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6"> class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
<div class="text-[#b48608]"> <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
<!-- Shield Icon --> <!-- Shield Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-8 h-8"> stroke="currentColor" class="w-8 h-8">
@@ -1728,8 +1751,8 @@
</div> </div>
<!-- Software Development Card --> <!-- Software Development Card -->
<div <div
class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6"> class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
<div class="text-[#b48608]"> <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
<!-- Layout Dashboard Icon --> <!-- Layout Dashboard Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-8 h-8"> stroke="currentColor" class="w-8 h-8">
@@ -1754,7 +1777,7 @@
<!-- Galeri Keseruan Section --> <!-- Galeri Keseruan Section -->
<section id="galeri" class="bg-white py-20 lg:py-24"> <section id="galeri" class="bg-white py-20 lg:py-24">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<!-- Header --> <!-- Header -->
<div class="text-center mb-12"> <div class="text-center mb-12">
@@ -1790,7 +1813,7 @@
<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 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" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1798,7 +1821,7 @@
<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 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" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1806,7 +1829,7 @@
<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 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" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1814,7 +1837,7 @@
<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 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" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1828,7 +1851,7 @@
<!-- Foto besar kiri --> <!-- 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 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" alt="Ulang Tahun Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1837,14 +1860,14 @@
<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 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\DSC00091.JPG" alt="UPC V" <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" /> 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/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 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/DSC03316.jpg"
alt="Silaturahmi Keluarga Besar Informatika" alt="Silaturahmi Keluarga Besar Informatika"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1853,7 +1876,7 @@
<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 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\IMG_5705.JPG" alt="INFORMERS" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1868,7 +1891,7 @@
<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 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\DSC00252.JPG" alt="UPC V" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1876,7 +1899,7 @@
<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 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\DSC00519.JPG" alt="UPC V" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1884,7 +1907,7 @@
<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 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_0030.JPG" alt="INFORMERS" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1892,7 +1915,7 @@
<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 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\DSC01002.JPG" alt="UPC V" <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" /> class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</a> </a>
@@ -1929,7 +1952,7 @@
<!-- CTA Section --> <!-- CTA Section -->
<section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20"> <section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="w-full px-6 lg:px-16 xl:px-24">
<div <div
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]"> class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
@@ -2018,7 +2041,6 @@
</section> </section>
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= --> <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
</div> </div>
</div>
</main> </main>
<footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0"> <footer class="bg-untan-navy text-white pt-16 relative overflow-hidden mt-0">