forked from izu/student-web-if-development-kit
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 powji17
|
30c438e794 |
@@ -571,7 +571,7 @@ const translations = {
|
||||
kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
|
||||
|
||||
grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
|
||||
grp_limaem_hero_title: "Kehidupan Mahasiswa & <span style=\"color:#f5c82f;\">Himpunan (HMIF)</span>",
|
||||
grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
|
||||
grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
|
||||
grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
|
||||
|
||||
@@ -617,10 +617,8 @@ const translations = {
|
||||
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_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
|
||||
grp_limaem_kegiatan_c6_title: "Study Excursion",
|
||||
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_kegiatan_c6_title: "INFORMERS",
|
||||
grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
|
||||
|
||||
grp_limaem_sc_title: "STUDY CLUB",
|
||||
grp_limaem_sc_arise_title: "ARISE",
|
||||
@@ -1209,7 +1207,7 @@ const translations = {
|
||||
kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
|
||||
|
||||
grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
|
||||
grp_limaem_hero_title: "Student Life & <span style=\"color:#f5c82f;\">Student Association (HMIF)</span>",
|
||||
grp_limaem_hero_title: "Student Life & Student Association (HMIF)",
|
||||
grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
|
||||
grp_limaem_hero_btn: "View Organizational Structure",
|
||||
|
||||
@@ -1255,10 +1253,8 @@ 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_c5_title: "UPC",
|
||||
grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
|
||||
grp_limaem_kegiatan_c6_title: "Study Excursion",
|
||||
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_kegiatan_c6_title: "INFORMERS",
|
||||
grp_limaem_kegiatan_c6_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_arise_title: "ARISE",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
+180
-281
@@ -1,18 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Group 07 – LIMA EM | Informatika UNTAN</title>
|
||||
<link href="./assets/css/output.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../assets/global/output.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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">
|
||||
<style>
|
||||
/* ===== MOBILE NAV STABILITY FIX =====
|
||||
@@ -296,9 +292,31 @@
|
||||
border-right: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
|
||||
@media (min-width: 768px) {
|
||||
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
|
||||
.md-card-half {
|
||||
width: calc(50% - 16px) !important;
|
||||
}
|
||||
/* Fix tinggi grid Galeri Keseruan (Tablet) */
|
||||
.galeri-grid {
|
||||
height: 420px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
/* Fix tinggi grid Galeri Keseruan (Desktop) */
|
||||
.galeri-grid {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix: title divisi berubah kuning saat hover */
|
||||
#divisi .group:hover h3 {
|
||||
color: #f5c82f !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<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>
|
||||
@@ -1146,6 +1164,7 @@
|
||||
</div>
|
||||
|
||||
<main id="main-content" class="min-h-screen bg-white">
|
||||
|
||||
<div id="assignment-body" class="w-full">
|
||||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||||
<!-- Hero Section -->
|
||||
@@ -1154,9 +1173,7 @@
|
||||
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
||||
class="absolute inset-0 w-full h-full object-cover z-0" />
|
||||
|
||||
<div class="absolute inset-0 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">
|
||||
|
||||
@@ -1172,19 +1189,16 @@
|
||||
COMMUNITY & LEADERSHIP
|
||||
</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>
|
||||
</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
|
||||
kreativitas, membentuk calon pemimpin industri masa depan.
|
||||
</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"
|
||||
style="transition: all 0.25s ease;"
|
||||
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
|
||||
@@ -1209,8 +1223,7 @@
|
||||
<div class="flex flex-col gap-8 order-1 lg:pr-6">
|
||||
|
||||
<!-- 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
|
||||
</h2>
|
||||
|
||||
@@ -1234,8 +1247,7 @@
|
||||
<p
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||
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
|
||||
</p>
|
||||
</div>
|
||||
@@ -1243,8 +1255,7 @@
|
||||
<p
|
||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||
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
|
||||
</p>
|
||||
</div>
|
||||
@@ -1256,35 +1267,32 @@
|
||||
|
||||
<!-- 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>
|
||||
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-xl"></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"
|
||||
style="height: 420px;">
|
||||
style="height: 460px;">
|
||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
||||
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]" />
|
||||
<!-- 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>
|
||||
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
|
||||
rounded-xl px-4 py-3 text-center shadow-xl
|
||||
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">
|
||||
<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 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
|
||||
</p>
|
||||
</div>
|
||||
@@ -1297,8 +1305,7 @@
|
||||
<!-- Partner & Kolaborator -->
|
||||
<section id="partners" class="bg-white pb-16">
|
||||
<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
|
||||
</h2>
|
||||
|
||||
@@ -1310,7 +1317,8 @@
|
||||
onmouseover="this.style.transform='scale(1.1)'"
|
||||
onmouseout="this.style.transform='scale(1)'">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
|
||||
title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
title="Partner Aktif"
|
||||
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
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);
|
||||
transition: box-shadow 0.2s ease;" />
|
||||
@@ -1323,7 +1331,8 @@
|
||||
onmouseover="this.style.transform='scale(1.1)'"
|
||||
onmouseout="this.style.transform='scale(1)'">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
|
||||
title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
title="Partner Aktif"
|
||||
style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
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);
|
||||
transition: box-shadow 0.2s ease;" />
|
||||
@@ -1343,7 +1352,8 @@
|
||||
<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%)';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood"
|
||||
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
@@ -1352,7 +1362,8 @@
|
||||
<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%)';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera"
|
||||
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
@@ -1361,7 +1372,8 @@
|
||||
<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%)';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN"
|
||||
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
@@ -1370,7 +1382,8 @@
|
||||
<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%)';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech"
|
||||
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
@@ -1379,7 +1392,8 @@
|
||||
<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%)';"
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa"
|
||||
style="width:4rem; height:4rem; border-radius:9999px; object-fit:cover; display:block;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
@@ -1393,14 +1407,11 @@
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||
<!-- Header -->
|
||||
<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
|
||||
</h2>
|
||||
<p data-i18n="grp_limaem_divisi_desc"
|
||||
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
|
||||
<p data-i18n="grp_limaem_divisi_desc" 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.
|
||||
</p>
|
||||
</div>
|
||||
@@ -1418,8 +1429,7 @@
|
||||
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
|
||||
</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
|
||||
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
|
||||
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
|
||||
@@ -1438,8 +1448,7 @@
|
||||
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
|
||||
</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
|
||||
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
|
||||
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
|
||||
@@ -1457,8 +1466,7 @@
|
||||
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
|
||||
</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
|
||||
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
|
||||
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
|
||||
@@ -1477,8 +1485,7 @@
|
||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||
Pengembangan Organisasi
|
||||
</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
|
||||
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
|
||||
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
|
||||
@@ -1497,8 +1504,7 @@
|
||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||
Sosial Masyarakat
|
||||
</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
|
||||
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
|
||||
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
|
||||
@@ -1516,8 +1522,7 @@
|
||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||
Kewirausahaan dan Kemitraan
|
||||
</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,
|
||||
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
|
||||
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
|
||||
@@ -1534,8 +1539,7 @@
|
||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
|
||||
<!-- Header -->
|
||||
<div class="mb-12">
|
||||
<h2 data-i18n="grp_limaem_kegiatan_title"
|
||||
class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
||||
<h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
||||
Kegiatan Unggulan
|
||||
</h2>
|
||||
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
|
||||
@@ -1561,19 +1565,16 @@
|
||||
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
||||
|
||||
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
||||
<div
|
||||
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg"
|
||||
alt="Silaturahmi Keluarga Besar"
|
||||
<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" />
|
||||
</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">27</span>
|
||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
||||
<span
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
||||
</div>
|
||||
@@ -1581,18 +1582,14 @@
|
||||
<h3 data-i18n="grp_limaem_kegiatan_c1_title"
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||
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
|
||||
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.
|
||||
</p>
|
||||
<p data-i18n="grp_limaem_kegiatan_c1_desc" 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>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1609,31 +1606,25 @@
|
||||
<h3
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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" />
|
||||
</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">17</span>
|
||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
|
||||
<span
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
||||
</div>
|
||||
@@ -1641,19 +1632,14 @@
|
||||
<h3 data-i18n="grp_limaem_kegiatan_c3_title"
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||
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.
|
||||
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan
|
||||
kekeluargaan mahasiswa Informatika.</p>
|
||||
<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.
|
||||
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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
|
||||
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"
|
||||
@@ -1662,8 +1648,7 @@
|
||||
<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">28</span>
|
||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
|
||||
<span
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
||||
</div>
|
||||
@@ -1671,19 +1656,15 @@
|
||||
<h3
|
||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||
Bootcamp HMIF</h3>
|
||||
<p data-i18n="grp_limaem_kegiatan_c4_desc"
|
||||
class="text-sm text-gray-500 leading-relaxed font-light">Program
|
||||
intensif
|
||||
pengembangan skill teknis mahasiswa Informatika bersama mentor
|
||||
profesional dari
|
||||
<p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
|
||||
pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
|
||||
industri.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 UPC 2025 -->
|
||||
<div
|
||||
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||
<div
|
||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
|
||||
@@ -1692,80 +1673,40 @@
|
||||
<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">13</span>
|
||||
<span
|
||||
class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</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
|
||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</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 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">
|
||||
INFORMERS</h3>
|
||||
<p data-i18n="grp_limaem_kegiatan_c7_desc"
|
||||
class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang
|
||||
tahun
|
||||
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga
|
||||
besar
|
||||
<p data-i18n="grp_limaem_kegiatan_c6_desc" class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
|
||||
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
|
||||
Informatika.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1785,25 +1726,18 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dot Indicators — akan di-render ulang oleh JS, ini hanya placeholder awal -->
|
||||
<!-- Dot Indicators -->
|
||||
<div id="slider-dots" class="flex justify-center gap-2 mt-10">
|
||||
<button class="slider-dot h-2.5 w-6 rounded-full bg-hmif-primary transition-all duration-300"
|
||||
<button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
|
||||
data-index="0" aria-label="Slide 1"></button>
|
||||
<button
|
||||
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
||||
data-index="1" aria-label="Slide 2"></button>
|
||||
<button
|
||||
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
||||
data-index="2" aria-label="Slide 3"></button>
|
||||
<button
|
||||
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
||||
data-index="3" aria-label="Slide 4"></button>
|
||||
<button
|
||||
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
||||
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>
|
||||
</section>
|
||||
@@ -1836,10 +1770,8 @@
|
||||
<h3 class="text-lg font-bold text-hmif-primary">
|
||||
ARISE
|
||||
</h3>
|
||||
<p data-i18n="grp_limaem_sc_arise_desc"
|
||||
class="text-sm text-gray-500 leading-relaxed font-light">
|
||||
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka
|
||||
peluang
|
||||
<p data-i18n="grp_limaem_sc_arise_desc" 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.
|
||||
</p>
|
||||
</div>
|
||||
@@ -1860,11 +1792,9 @@
|
||||
<h3 class="text-lg font-bold text-hmif-primary">
|
||||
MINERVA
|
||||
</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
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
@@ -1884,10 +1814,8 @@
|
||||
<h3 class="text-lg font-bold text-hmif-primary">
|
||||
Software Development (Soon)
|
||||
</h3>
|
||||
<p data-i18n="grp_limaem_sc_sd_desc"
|
||||
class="text-sm text-gray-500 leading-relaxed font-light">
|
||||
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari
|
||||
merancang
|
||||
<p data-i18n="grp_limaem_sc_sd_desc" 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
|
||||
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
|
||||
</p>
|
||||
@@ -1903,8 +1831,7 @@
|
||||
|
||||
<!-- Header -->
|
||||
<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
|
||||
</h2>
|
||||
</div>
|
||||
@@ -1932,33 +1859,24 @@
|
||||
<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">
|
||||
<!-- 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">
|
||||
<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>
|
||||
<!-- 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">
|
||||
<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>
|
||||
<!-- 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">
|
||||
<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>
|
||||
<!-- 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1966,31 +1884,21 @@
|
||||
<!-- ====== Slide 2 ====== -->
|
||||
<div class="flex-shrink-0 w-full">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
||||
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||
<img src="./assets/images/galeri-keseruan/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 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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1998,29 +1906,21 @@
|
||||
<!-- ====== Slide 3 ====== -->
|
||||
<div class="flex-shrink-0 w-full">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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 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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2060,14 +1960,12 @@
|
||||
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 -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="relative z-10">
|
||||
<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?
|
||||
</h2>
|
||||
|
||||
@@ -2078,24 +1976,31 @@
|
||||
</p>
|
||||
|
||||
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||
<a href="https://wa.me/6289694492305" target="_blank" rel="noopener noreferrer"
|
||||
data-i18n="grp_limaem_cta_btn"
|
||||
<a href="https://instagram.com/hmif_ftuntan" 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">
|
||||
Hubungi Kami
|
||||
</a>
|
||||
|
||||
<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"
|
||||
aria-label="Instagram HMIF">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||
fill="currentColor" class="h-4.5 w-4.5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="h-4.5 w-4.5">
|
||||
<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" />
|
||||
</svg>
|
||||
</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>
|
||||
@@ -2103,36 +2008,32 @@
|
||||
<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="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
|
||||
</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>
|
||||
Jl. Prof. Dr. H. Hadari Nawawi
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
</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>
|
||||
08:00 - 17:00 WIB
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
</p>
|
||||
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
||||
@hmif_ftuntan<br>
|
||||
@hmif.untan<br>
|
||||
YouTube: HMIF UNTAN TV
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2204,8 +2105,8 @@
|
||||
</div>
|
||||
|
||||
<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" style="object-position: bottom;">
|
||||
<img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
|
||||
style="object-position: bottom;">
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -2277,7 +2178,7 @@
|
||||
var btn = document.createElement('button');
|
||||
btn.className = 'galeri-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
||||
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 () { goToSlide(idx); startAutoSlide(); }); })(i);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
@@ -2347,7 +2248,7 @@
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 7;
|
||||
var TOTAL_CARDS = 6;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
@@ -2400,10 +2301,9 @@
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
var btn = document.createElement('button');
|
||||
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.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.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);
|
||||
dotsContainer.appendChild(btn);
|
||||
}
|
||||
@@ -2539,28 +2439,27 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
<script>
|
||||
(function() {
|
||||
const mobileBtn = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMobileBtn = document.getElementById('close-mobile-menu');
|
||||
const closeMobileBtn= document.getElementById('close-mobile-menu');
|
||||
if (mobileBtn && mobileMenu) {
|
||||
mobileBtn.addEventListener('click', function () {
|
||||
mobileBtn.addEventListener('click', function() {
|
||||
const isOpen = !mobileMenu.classList.contains('-translate-x-full');
|
||||
mobileMenu.classList.toggle('-translate-x-full');
|
||||
mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
||||
});
|
||||
}
|
||||
if (closeMobileBtn && mobileMenu) {
|
||||
closeMobileBtn.addEventListener('click', function () {
|
||||
closeMobileBtn.addEventListener('click', function() {
|
||||
mobileMenu.classList.add('-translate-x-full');
|
||||
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<script src="../../assets/global/localization.js"></script>
|
||||
<script src="../../assets/global/localization.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+1
-48
@@ -22,27 +22,7 @@ body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); backgr
|
||||
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
|
||||
|
||||
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
|
||||
@media (min-width: 1024px) {
|
||||
.layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); }
|
||||
/* Fix tinggi grid Galeri Keseruan (Desktop) */
|
||||
.galeri-grid {
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
|
||||
@media (min-width: 768px) {
|
||||
|
||||
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
|
||||
.md-card-half {
|
||||
width: calc(50% - 16px) !important;
|
||||
}
|
||||
|
||||
/* Fix tinggi grid Galeri Keseruan (Tablet) */
|
||||
.galeri-grid {
|
||||
height: 420px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
|
||||
|
||||
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
|
||||
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
|
||||
@@ -65,30 +45,3 @@ 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-logo { height: 28px; width: auto; }
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Fix: title divisi berubah kuning saat hover */
|
||||
#divisi .group:hover h3 {
|
||||
color: #f5c82f !important;
|
||||
}
|
||||
|
||||
Generated
+1
@@ -917,6 +917,7 @@
|
||||
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user