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

Merge branch 'feature/fix-ukuran-foto-about'

Browse Source
This commit is contained in:
powji17
2026-06-05 10:29:07 +07:00
parent 563af0ec56 f343a1c7c6
commit 5b62693755
6 changed files with 1022 additions and 944 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/global/localization.js
+8 -4
View File
@@ -617,8 +617,10 @@ const translations = {
grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.", grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
grp_limaem_kegiatan_c5_title: "UPC", grp_limaem_kegiatan_c5_title: "UPC",
grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.", grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
grp_limaem_kegiatan_c6_title: "INFORMERS", grp_limaem_kegiatan_c6_title: "Study Excursion",
grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.", grp_limaem_kegiatan_c6_desc: "Study Excursion menjadi pengalaman berharga bagi mahasiswa semester 5 untuk belajar di luar kampus, memperluas wawasan, mengenal suasana baru, serta menciptakan kenangan berkesan bersama selama perjalanan.",
grp_limaem_kegiatan_c7_title: "INFORMERS",
grp_limaem_kegiatan_c7_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
grp_limaem_sc_title: "STUDY CLUB", grp_limaem_sc_title: "STUDY CLUB",
grp_limaem_sc_arise_title: "ARISE", grp_limaem_sc_arise_title: "ARISE",
@@ -1253,8 +1255,10 @@ const translations = {
grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.", grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
grp_limaem_kegiatan_c5_title: "UPC", grp_limaem_kegiatan_c5_title: "UPC",
grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.", grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
grp_limaem_kegiatan_c6_title: "INFORMERS", grp_limaem_kegiatan_c6_title: "Study Excursion",
grp_limaem_kegiatan_c6_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.", grp_limaem_kegiatan_c6_desc: "Study Excursion is a valuable experience for 5th semester students to study outside the campus, broaden their horizons, get to know new atmospheres, and create memorable memories together during the trip.",
grp_limaem_kegiatan_c7_title: "INFORMERS",
grp_limaem_kegiatan_c7_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
grp_limaem_sc_title: "STUDY CLUBS", grp_limaem_sc_title: "STUDY CLUBS",
grp_limaem_sc_arise_title: "ARISE", grp_limaem_sc_arise_title: "ARISE",
fix.js
-73
View File
@@ -1,73 +0,0 @@
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');
groups/LimaEm/assets/images/kegiatan-unggulan/SE.jpeg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

groups/LimaEm/assets/js/main.js
+3 -2
View File
@@ -465,7 +465,7 @@
// ============================================================================= // =============================================================================
(function () { (function () {
var TOTAL_CARDS = 6; var TOTAL_CARDS = 7;
var AUTO_DELAY_MS = 2000; var AUTO_DELAY_MS = 2000;
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind) var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
@@ -518,7 +518,8 @@
dotsContainer.innerHTML = ''; dotsContainer.innerHTML = '';
for (var i = 0; i < n; i++) { for (var i = 0; i < n; i++) {
var btn = document.createElement('button'); var btn = document.createElement('button');
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5'); btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
btn.setAttribute('data-index', String(i)); btn.setAttribute('data-index', String(i));
btn.setAttribute('aria-label', 'Slide ' + (i + 1)); btn.setAttribute('aria-label', 'Slide ' + (i + 1));
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i); (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
groups/LimaEm/index.html
+278 -155
View File
@@ -1,5 +1,6 @@
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +9,9 @@
<link rel="stylesheet" href="../../assets/global/output.css"> <link rel="stylesheet" href="../../assets/global/output.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style> <style>
/* ===== MOBILE NAV STABILITY FIX ===== /* ===== MOBILE NAV STABILITY FIX =====
@@ -295,16 +298,20 @@
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */ /* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
@media (min-width: 768px) { @media (min-width: 768px) {
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */ /* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
.md-card-half { .md-card-half {
width: calc(50% - 16px) !important; width: calc(50% - 16px) !important;
} }
/* Fix tinggi grid Galeri Keseruan (Tablet) */ /* Fix tinggi grid Galeri Keseruan (Tablet) */
.galeri-grid { .galeri-grid {
height: 420px !important; height: 420px !important;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
/* Fix tinggi grid Galeri Keseruan (Desktop) */ /* Fix tinggi grid Galeri Keseruan (Desktop) */
.galeri-grid { .galeri-grid {
height: 500px !important; height: 500px !important;
@@ -317,6 +324,7 @@
} }
</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">
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a> <a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
@@ -1164,13 +1172,7 @@
</div> </div>
<main id="main-content" class="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" 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 &amp; Himpunan (HMIF)</h1>
<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="w-full"> <div id="assignment-body" class="w-full">
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= --> <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
<!-- Hero Section --> <!-- Hero Section -->
@@ -1179,7 +1181,9 @@
<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 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);"></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"> <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">
@@ -1195,16 +1199,19 @@
COMMUNITY & LEADERSHIP COMMUNITY & LEADERSHIP
</div> </div>
<h1 data-i18n-html="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight"> <h1 data-i18n-html="grp_limaem_hero_title"
class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
Kehidupan Mahasiswa & <span style="color:#feb401;">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"
class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
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" onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})" <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" 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;" style="transition: all 0.25s ease;"
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';" onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
@@ -1229,7 +1236,8 @@
<div class="flex flex-col gap-8 order-1 lg:pr-6"> <div class="flex flex-col gap-8 order-1 lg:pr-6">
<!-- Heading --> <!-- Heading -->
<h2 data-i18n="grp_limaem_about_title" class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug"> <h2 data-i18n="grp_limaem_about_title"
class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
Ruang Tumbuh Bagi<br>Mahasiswa Informatika Ruang Tumbuh Bagi<br>Mahasiswa Informatika
</h2> </h2>
@@ -1253,7 +1261,8 @@
<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">
518</p> 518</p>
<p data-i18n="grp_limaem_about_stat_students" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3"> <p data-i18n="grp_limaem_about_stat_students"
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
Mahasiswa Aktif Mahasiswa Aktif
</p> </p>
</div> </div>
@@ -1261,7 +1270,8 @@
<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">
8</p> 8</p>
<p data-i18n="grp_limaem_about_stat_partners" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3"> <p data-i18n="grp_limaem_about_stat_partners"
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
MITRA MITRA
</p> </p>
</div> </div>
@@ -1277,14 +1287,16 @@
<!-- Frame foto — overflow hidden, foto full width tanpa crop --> <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
<div <div
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default"> class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default"
style="height: 420px;">
<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" class="w-full h-full object-cover block
transition-transform duration-700 ease-out group-hover:scale-[1.03]" /> transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
<!-- Gradient overlay bawah --> <!-- Gradient overlay bawah -->
<div class="absolute inset-0 <div class="absolute inset-0
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div> 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 -->
@@ -1292,12 +1304,14 @@
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;">
<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="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true"> 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" <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 data-i18n="grp_limaem_about_badge" class="text-[11px] lg:text-xs font-bold leading-snug"> <p data-i18n="grp_limaem_about_badge"
class="text-[11px] lg:text-xs font-bold leading-snug">
Inklusivitas &<br>Kolaborasi Inklusivitas &<br>Kolaborasi
</p> </p>
</div> </div>
@@ -1308,9 +1322,10 @@
</section> </section>
<!-- Partner & Kolaborator --> <!-- Partner & Kolaborator -->
<section id="partners" class="bg-white py-16"> <section id="partners" class="bg-white pb-16">
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
<h2 data-i18n="grp_limaem_partners_title" class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10"> <h2 data-i18n="grp_limaem_partners_title"
class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
Partner dan Kolaborator Partner dan Kolaborator
</h2> </h2>
@@ -1322,8 +1337,7 @@
onmouseover="this.style.transform='scale(1.1)'" onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'"> onmouseout="this.style.transform='scale(1)'">
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
title="Partner Aktif" title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
border: 4px solid #feb401; border: 4px solid #feb401;
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3); box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
transition: box-shadow 0.2s ease;" /> transition: box-shadow 0.2s ease;" />
@@ -1336,8 +1350,7 @@
onmouseover="this.style.transform='scale(1.1)'" onmouseover="this.style.transform='scale(1.1)'"
onmouseout="this.style.transform='scale(1)'"> onmouseout="this.style.transform='scale(1)'">
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" <img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
title="Partner Aktif" title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
border: 4px solid #feb401; border: 4px solid #feb401;
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3); box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
transition: box-shadow 0.2s ease;" /> transition: box-shadow 0.2s ease;" />
@@ -1357,8 +1370,7 @@
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;" <div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';" onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';"> onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" <img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease; filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" /> box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div> </div>
@@ -1367,8 +1379,7 @@
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;" <div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';" onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';"> onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" <img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease; filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" /> box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div> </div>
@@ -1377,8 +1388,7 @@
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;" <div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';" onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';"> onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" <img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease; filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" /> box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div> </div>
@@ -1387,8 +1397,7 @@
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;" <div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';" onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';"> onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" <img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease; filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" /> box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div> </div>
@@ -1397,8 +1406,7 @@
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;" <div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease; cursor:default;"
onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';" onmouseover="this.style.transform='scale(1.1)'; this.querySelector('img').style.filter='grayscale(0%)';"
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';"> onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" <img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
filter: grayscale(100%); transition: filter 0.3s ease; filter: grayscale(100%); transition: filter 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" /> box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
</div> </div>
@@ -1412,11 +1420,14 @@
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12"> <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
<!-- Header --> <!-- Header -->
<div class="mb-12 md:mb-16 max-w-3xl"> <div class="mb-12 md:mb-16 max-w-3xl">
<h2 data-i18n="grp_limaem_divisi_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4"> <h2 data-i18n="grp_limaem_divisi_title"
class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
Divisi Kepengurusan HMIF Divisi Kepengurusan HMIF
</h2> </h2>
<p data-i18n="grp_limaem_divisi_desc" class="text-base md:text-lg text-slate-300 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_desc"
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di
berbagai
bidang strategis. bidang strategis.
</p> </p>
</div> </div>
@@ -1434,7 +1445,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b1_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b1_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru, kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
@@ -1453,7 +1465,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Media Komunikasi dan Konten Digital Media Komunikasi dan Konten Digital
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b2_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b2_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
@@ -1471,7 +1484,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Inovasi dan Kompetisi Teknologi Inovasi dan Kompetisi Teknologi
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b3_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b3_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal, Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
@@ -1490,7 +1504,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Pengembangan Organisasi Pengembangan Organisasi
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b4_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b4_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
@@ -1509,7 +1524,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Sosial Masyarakat Sosial Masyarakat
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b5_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b5_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
@@ -1527,7 +1543,8 @@
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary"> class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
Kewirausahaan dan Kemitraan Kewirausahaan dan Kemitraan
</h3> </h3>
<p data-i18n="grp_limaem_divisi_b6_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed"> <p data-i18n="grp_limaem_divisi_b6_desc"
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif, Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
@@ -1544,7 +1561,8 @@
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full"> <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
<!-- Header --> <!-- Header -->
<div class="mb-12"> <div class="mb-12">
<h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight"> <h2 data-i18n="grp_limaem_kegiatan_title"
class="text-3xl font-extrabold text-hmif-primary tracking-tight">
Kegiatan Unggulan Kegiatan Unggulan
</h2> </h2>
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium"> <p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
@@ -1570,16 +1588,19 @@
<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-card-half"> <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"
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">
<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">
<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>
@@ -1587,14 +1608,18 @@
<h3 data-i18n="grp_limaem_kegiatan_c1_title" <h3 data-i18n="grp_limaem_kegiatan_c1_title"
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">
Silaturahmi Keluarga Besar Informatika</h3> Silaturahmi Keluarga Besar Informatika</h3>
<p data-i18n="grp_limaem_kegiatan_c1_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama <p data-i18n="grp_limaem_kegiatan_c1_desc"
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p> class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka
bersama
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.
</p>
</div> </div>
</div> </div>
</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-card-half"> <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"
@@ -1611,25 +1636,31 @@
<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">
GEMASTIK</h3> GEMASTIK</h3>
<p data-i18n="grp_limaem_kegiatan_c2_desc" class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. <p data-i18n="grp_limaem_kegiatan_c2_desc"
class="text-sm text-gray-500 leading-relaxed font-light"> Ajang
kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX. gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data
mining</em>, hingga UI/UX.
</p> </p>
</div> </div>
</div> </div>
</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-card-half"> <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"
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">
<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">
<span class="text-lg font-extrabold text-hmif-primary leading-none">17</span> <span
class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
<span <span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span> class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
</div> </div>
@@ -1637,14 +1668,19 @@
<h3 data-i18n="grp_limaem_kegiatan_c3_title" <h3 data-i18n="grp_limaem_kegiatan_c3_title"
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">
Perayaan 17 Agustus</h3> Perayaan 17 Agustus</h3>
<p data-i18n="grp_limaem_kegiatan_c3_desc" class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik. <p data-i18n="grp_limaem_kegiatan_c3_desc"
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p> class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan
Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan
menarik.
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan
kekeluargaan mahasiswa Informatika.</p>
</div> </div>
</div> </div>
</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-card-half"> <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"
@@ -1653,7 +1689,8 @@
<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">
<span class="text-lg font-extrabold text-hmif-primary leading-none">28</span> <span
class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
<span <span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span> class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
</div> </div>
@@ -1661,15 +1698,19 @@
<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">
Bootcamp HMIF</h3> Bootcamp HMIF</h3>
<p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif <p data-i18n="grp_limaem_kegiatan_c4_desc"
pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari class="text-sm text-gray-500 leading-relaxed font-light">Program
intensif
pengembangan skill teknis mahasiswa Informatika bersama mentor
profesional dari
industri.</p> industri.</p>
</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-card-half"> <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"
@@ -1678,40 +1719,80 @@
<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">
<span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
<span <span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span> class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
</div>
<div class="space-y-1">
<h3
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
UPC</h3>
<p data-i18n="grp_limaem_kegiatan_c5_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
mengasah skill coding mahasiswa Informatika.</p>
</div>
</div>
</div>
<!-- Card 6 Informers -->
<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"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="flex items-start gap-4 mt-6">
<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">
<span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
<span <span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span> class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</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">
UPC</h3>
<p data-i18n="grp_limaem_kegiatan_c5_desc"
class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi
Pemograman untuk
mengasah skill coding mahasiswa Informatika.</p>
</div>
</div>
</div>
<!-- Card 6 Study Excursion -->
<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/SE.jpeg" alt="Study Excursion"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="flex items-start gap-4 mt-6">
<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">
<span
class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
<span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
</div>
<div class="space-y-1">
<h3 data-i18n="grp_limaem_kegiatan_c6_title"
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
Study Excursion</h3>
<p data-i18n="grp_limaem_kegiatan_c6_desc"
class="text-sm text-gray-500 leading-relaxed font-light">Study Excursion
menjadi pengalaman
berharga bagi mahasiswa semester 5 untuk belajar di luar kampus,
memperluas wawasan,
mengenal suasana baru, serta menciptakan kenangan berkesan bersama
selama perjalanan.</p>
</div>
</div>
</div>
<!-- Card 7 Informers -->
<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"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="flex items-start gap-4 mt-6">
<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">
<span
class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
<span
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
</div>
<div class="space-y-1">
<h3 data-i18n="grp_limaem_kegiatan_c7_title"
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">
INFORMERS</h3> INFORMERS</h3>
<p data-i18n="grp_limaem_kegiatan_c6_desc" class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun <p data-i18n="grp_limaem_kegiatan_c7_desc"
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang
tahun
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga
besar
Informatika.</p> Informatika.</p>
</div> </div>
</div> </div>
@@ -1731,18 +1812,25 @@
</button> </button>
</div> </div>
<!-- Dot Indicators --> <!-- Dot Indicators — akan di-render ulang oleh JS, ini hanya placeholder awal -->
<div id="slider-dots" class="flex justify-center gap-2 mt-10"> <div id="slider-dots" class="flex justify-center gap-2 mt-10">
<button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6" <button class="slider-dot h-2.5 w-6 rounded-full bg-hmif-primary transition-all duration-300"
data-index="0" aria-label="Slide 1"></button> data-index="0" aria-label="Slide 1"></button>
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5" <button
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
data-index="1" aria-label="Slide 2"></button> data-index="1" aria-label="Slide 2"></button>
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5" <button
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
data-index="2" aria-label="Slide 3"></button> data-index="2" aria-label="Slide 3"></button>
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5" <button
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
data-index="3" aria-label="Slide 4"></button> data-index="3" aria-label="Slide 4"></button>
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5" <button
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
data-index="4" aria-label="Slide 5"></button> data-index="4" aria-label="Slide 5"></button>
<button
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
data-index="5" aria-label="Slide 6"></button>
</div> </div>
</div> </div>
</section> </section>
@@ -1775,8 +1863,10 @@
<h3 class="text-lg font-bold text-hmif-primary"> <h3 class="text-lg font-bold text-hmif-primary">
ARISE ARISE
</h3> </h3>
<p data-i18n="grp_limaem_sc_arise_desc" class="text-sm text-gray-500 leading-relaxed font-light"> <p data-i18n="grp_limaem_sc_arise_desc"
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang class="text-sm text-gray-500 leading-relaxed font-light">
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka
peluang
mengikuti kompetisi pemrograman di berbagai level. mengikuti kompetisi pemrograman di berbagai level.
</p> </p>
</div> </div>
@@ -1797,9 +1887,11 @@
<h3 class="text-lg font-bold text-hmif-primary"> <h3 class="text-lg font-bold text-hmif-primary">
MINERVA MINERVA
</h3> </h3>
<p data-i18n="grp_limaem_sc_minerva_desc" class="text-sm text-gray-500 leading-relaxed font-light"> <p data-i18n="grp_limaem_sc_minerva_desc"
class="text-sm text-gray-500 leading-relaxed font-light">
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih
model
prediktif untuk menghasilkan <em>insight</em> yang bermakna. prediktif untuk menghasilkan <em>insight</em> yang bermakna.
</p> </p>
</div> </div>
@@ -1819,8 +1911,10 @@
<h3 class="text-lg font-bold text-hmif-primary"> <h3 class="text-lg font-bold text-hmif-primary">
Software Development (Soon) Software Development (Soon)
</h3> </h3>
<p data-i18n="grp_limaem_sc_sd_desc" class="text-sm text-gray-500 leading-relaxed font-light"> <p data-i18n="grp_limaem_sc_sd_desc"
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang class="text-sm text-gray-500 leading-relaxed font-light">
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari
merancang
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta <em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini. mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
</p> </p>
@@ -1836,7 +1930,8 @@
<!-- Header --> <!-- Header -->
<div class="text-center mb-12"> <div class="text-center mb-12">
<h2 data-i18n="grp_limaem_galeri_title" class="text-3xl lg:text-4xl font-bold text-hmif-primary"> <h2 data-i18n="grp_limaem_galeri_title"
class="text-3xl lg:text-4xl font-bold text-hmif-primary">
Galeri Keseruan Galeri Keseruan
</h2> </h2>
</div> </div>
@@ -1864,24 +1959,33 @@
<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 galeri-grid"> <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" rel="noopener noreferrer" <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"> 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" /> <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" rel="noopener noreferrer" <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"> 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" /> <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==" target="_blank" rel="noopener noreferrer" <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"> 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" /> <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" rel="noopener noreferrer" <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"> 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" /> <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>
@@ -1889,21 +1993,31 @@
<!-- ====== 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 galeri-grid"> <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" <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
target="_blank" rel="noopener noreferrer"
class="block w-full h-full 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" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" /> <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> </a>
<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 w-full h-full 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/DSC00091.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/DSC00091.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" <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"> 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" /> <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>
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer" <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"> 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" /> <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>
@@ -1911,21 +2025,29 @@
<!-- ====== 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 galeri-grid"> <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" <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"> 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" /> <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" <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"> 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" /> <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" <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"> 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" /> <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" <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"> 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" /> <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>
@@ -1965,12 +2087,14 @@
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)]">
<div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div> <div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
<div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div> <div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl">
</div>
<div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div> <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
<div class="relative z-10"> <div class="relative z-10">
<div class="mx-auto max-w-4xl text-center"> <div class="mx-auto max-w-4xl text-center">
<h2 data-i18n="grp_limaem_cta_title" class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white"> <h2 data-i18n="grp_limaem_cta_title"
class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
Ada yang Ingin Ditanyakan Seputar HMIF? Ada yang Ingin Ditanyakan Seputar HMIF?
</h2> </h2>
@@ -1981,31 +2105,24 @@
</p> </p>
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row"> <div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" data-i18n="grp_limaem_cta_btn" <a href="https://wa.me/6289694492305" target="_blank" rel="noopener noreferrer"
data-i18n="grp_limaem_cta_btn"
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5"> class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
Hubungi Kami Hubungi Kami
</a> </a>
<div class="flex items-center justify-center gap-3"> <div class="flex items-center justify-center gap-3">
<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="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
aria-label="Instagram HMIF"> aria-label="Instagram HMIF">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="h-4.5 w-4.5"> fill="currentColor" class="h-4.5 w-4.5">
<path <path
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" /> d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
</svg> </svg>
</a> </a>
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
aria-label="YouTube HMIF">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="h-4.5 w-4.5">
<path
d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
</svg>
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -2013,32 +2130,36 @@
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10"> <div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6"> <div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
<div class="text-center md:px-4"> <div class="text-center md:px-4">
<p data-i18n="grp_limaem_cta_info1_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase"> <p data-i18n="grp_limaem_cta_info1_label"
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Sekretariat Sekretariat
</p> </p>
<p data-i18n="grp_limaem_cta_info1_val" class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72"> <p data-i18n="grp_limaem_cta_info1_val"
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
Gedung Fakultas Teknik Lt. 2<br> Gedung Fakultas Teknik Lt. 2<br>
Jl. Prof. Dr. H. Hadari Nawawi Jl. Prof. Dr. H. Hadari Nawawi
</p> </p>
</div> </div>
<div class="text-center md:px-4 md:border-x md:border-white/10"> <div class="text-center md:px-4 md:border-x md:border-white/10">
<p data-i18n="grp_limaem_cta_info2_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase"> <p data-i18n="grp_limaem_cta_info2_label"
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Jam Operasional Jam Operasional
</p> </p>
<p data-i18n="grp_limaem_cta_info2_val"class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72"> <p data-i18n="grp_limaem_cta_info2_val"
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
Senin - Jumat<br> Senin - Jumat<br>
08:00 - 17:00 WIB 08:00 - 17:00 WIB
</p> </p>
</div> </div>
<div class="text-center md:px-4"> <div class="text-center md:px-4">
<p data-i18n="grp_limaem_cta_info3_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase"> <p data-i18n="grp_limaem_cta_info3_label"
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
Media Sosial Media Sosial
</p> </p>
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72"> <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
@hmif.untan<br> @hmif_ftuntan<br>
YouTube: HMIF UNTAN TV
</p> </p>
</div> </div>
</div> </div>
@@ -2110,8 +2231,8 @@
</div> </div>
<div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center"> <div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
<img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom" <img src="../../assets/global/footer.png" alt="Footer Illustration"
style="object-position: bottom;"> class="w-full h-auto object-cover object-bottom" style="object-position: bottom;">
</div> </div>
</footer> </footer>
@@ -2253,7 +2374,7 @@
// ============================================================================= // =============================================================================
(function () { (function () {
var TOTAL_CARDS = 6; var TOTAL_CARDS = 7;
var AUTO_DELAY_MS = 2000; var AUTO_DELAY_MS = 2000;
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind) var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
@@ -2306,7 +2427,8 @@
dotsContainer.innerHTML = ''; dotsContainer.innerHTML = '';
for (var i = 0; i < n; i++) { for (var i = 0; i < n; i++) {
var btn = document.createElement('button'); var btn = document.createElement('button');
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5'); btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
btn.setAttribute('data-index', String(i)); btn.setAttribute('data-index', String(i));
btn.setAttribute('aria-label', 'Slide ' + (i + 1)); btn.setAttribute('aria-label', 'Slide ' + (i + 1));
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i); (function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
@@ -2467,4 +2589,5 @@
<script src="../../assets/global/localization.js"></script> <script src="../../assets/global/localization.js"></script>
</body> </body>
</html> </html>
groups/LimaEm/style.css
+23
View File
@@ -45,3 +45,26 @@ body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); backgr
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; } .footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; } .footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; } .footer-ornament { width: 100%; display: block; opacity: .9; }
/* ===== Slider Dot Indicators ===== */
.slider-dot,
.galeri-dot {
display: inline-block;
height: 10px;
width: 10px;
min-width: 10px;
border-radius: 9999px;
background-color: #d1d5db; /* gray-300 fallback */
cursor: pointer;
border: none;
padding: 0;
transition: width 0.3s ease, background-color 0.3s ease;
flex-shrink: 0;
}
.slider-dot.bg-hmif-primary,
.galeri-dot.bg-hmif-primary {
background-color: #0b2f4c; /* --color-hmif-primary dari output.css */
width: 24px;
}