forked from izu/student-web-if-development-kit
feat(LimaEm): menambahkan beberapa konten dan memperbarui beberapa link
This commit is contained in:
@@ -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_c5_title: "UPC",
|
||||
grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa 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_kegiatan_c6_title: "Study Excursion",
|
||||
grp_limaem_kegiatan_c6_desc: "Study Excursion menjadi salah satu agenda pembelajaran luar kampus bagi mahasiswa semester 5 yang memberikan pengalaman baru, memperluas wawasan, serta mengenalkan suasana dan budaya yang berbeda. Kegiatan ini juga menjadi momen berharga untuk belajar secara langsung, membangun kebersamaan, dan menciptakan kenangan yang berkesan selama perjalanan akademik.",
|
||||
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_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_c5_title: "UPC",
|
||||
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_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
|
||||
grp_limaem_kegiatan_c6_title: "Study Excursion",
|
||||
grp_limaem_kegiatan_c6_desc: "Study Excursion is one of the off-campus learning agendas for 5th semester students, providing new experiences, broadening horizons, and introducing different atmospheres and cultures. This activity is also a precious moment for hands-on learning, building camaraderie, and creating lasting memories during the academic journey.",
|
||||
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_arise_title: "ARISE",
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"prodi": "TEKNIK INFORMATIKA",
|
||||
"jenjang": "S1",
|
||||
"perguruan_tinggi": "UNIVERSITAS TANJUNGPURA",
|
||||
"mahasiswa_aktif": null,
|
||||
"prodi_id": "-r8ls2jHMO0ZPJXW54_mjDzsupgwaib7uuKUVGbhkZQRTlIoA3djkrAHY9Txz4RI_u9_xg==",
|
||||
"source": "pddiktipy"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
@@ -395,7 +395,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);
|
||||
}
|
||||
@@ -465,7 +465,7 @@
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 6;
|
||||
var TOTAL_CARDS = 7;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
@@ -518,9 +518,10 @@
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
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('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);
|
||||
}
|
||||
|
||||
+290
-156
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="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 =====
|
||||
@@ -295,16 +298,20 @@
|
||||
|
||||
/* ===== 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;
|
||||
@@ -317,6 +324,7 @@
|
||||
}
|
||||
</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>
|
||||
@@ -1166,9 +1174,13 @@
|
||||
<main id="main-content" class="min-h-screen bg-white">
|
||||
<div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
|
||||
<div class="mb-8 pb-8 border-b border-slate-200">
|
||||
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa & Himpunan (HMIF)</h1>
|
||||
<p class="text-slate-500 text-sm">Kelompok 07 — LIMA EM · Informatika UNTAN 2026</p>
|
||||
<span
|
||||
class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
|
||||
Halaman Statis</span>
|
||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa & Himpunan (HMIF)
|
||||
</h1>
|
||||
<p class="text-slate-500 text-sm">Kelompok 07 — LIMA EM · Informatika UNTAN
|
||||
2026</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="assignment-body" class="w-full">
|
||||
@@ -1179,7 +1191,9 @@
|
||||
<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">
|
||||
|
||||
@@ -1195,16 +1209,19 @@
|
||||
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';"
|
||||
@@ -1229,7 +1246,8 @@
|
||||
<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>
|
||||
|
||||
@@ -1253,7 +1271,8 @@
|
||||
<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>
|
||||
@@ -1261,7 +1280,8 @@
|
||||
<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>
|
||||
@@ -1284,7 +1304,8 @@
|
||||
<!-- 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 -->
|
||||
@@ -1292,12 +1313,14 @@
|
||||
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">
|
||||
<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>
|
||||
@@ -1310,7 +1333,8 @@
|
||||
<!-- Partner & Kolaborator -->
|
||||
<section id="partners" class="bg-white py-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>
|
||||
|
||||
@@ -1322,8 +1346,7 @@
|
||||
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;" />
|
||||
@@ -1336,8 +1359,7 @@
|
||||
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;" />
|
||||
@@ -1357,8 +1379,7 @@
|
||||
<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>
|
||||
@@ -1367,8 +1388,7 @@
|
||||
<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>
|
||||
@@ -1377,8 +1397,7 @@
|
||||
<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>
|
||||
@@ -1387,8 +1406,7 @@
|
||||
<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>
|
||||
@@ -1397,8 +1415,7 @@
|
||||
<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>
|
||||
@@ -1412,11 +1429,14 @@
|
||||
<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>
|
||||
@@ -1434,7 +1454,8 @@
|
||||
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
|
||||
@@ -1453,7 +1474,8 @@
|
||||
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
|
||||
@@ -1471,7 +1493,8 @@
|
||||
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,
|
||||
@@ -1490,7 +1513,8 @@
|
||||
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
|
||||
@@ -1509,7 +1533,8 @@
|
||||
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
|
||||
@@ -1527,7 +1552,8 @@
|
||||
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
|
||||
@@ -1544,7 +1570,8 @@
|
||||
<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">
|
||||
@@ -1570,16 +1597,19 @@
|
||||
<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>
|
||||
@@ -1587,14 +1617,18 @@
|
||||
<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"
|
||||
@@ -1611,25 +1645,31 @@
|
||||
<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>
|
||||
@@ -1637,14 +1677,19 @@
|
||||
<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"
|
||||
@@ -1653,7 +1698,8 @@
|
||||
<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>
|
||||
@@ -1661,15 +1707,19 @@
|
||||
<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"
|
||||
@@ -1678,40 +1728,82 @@
|
||||
<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-[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>
|
||||
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
|
||||
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">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_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 salah satu agenda pembelajaran luar kampus bagi mahasiswa
|
||||
semester 5
|
||||
yang memberikan pengalaman baru, memperluas wawasan, serta mengenalkan
|
||||
suasana dan budaya yang berbeda.
|
||||
Kegiatan ini juga menjadi momen berharga untuk belajar secara langsung,
|
||||
membangun kebersamaan, dan
|
||||
menciptakan kenangan yang berkesan selama perjalanan akademik.</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_c6_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_c7_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>
|
||||
@@ -1731,18 +1823,25 @@
|
||||
</button>
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -1775,8 +1874,10 @@
|
||||
<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>
|
||||
@@ -1797,9 +1898,11 @@
|
||||
<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>
|
||||
@@ -1819,8 +1922,10 @@
|
||||
<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>
|
||||
@@ -1836,7 +1941,8 @@
|
||||
|
||||
<!-- 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>
|
||||
@@ -1864,24 +1970,33 @@
|
||||
<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>
|
||||
@@ -1889,21 +2004,31 @@
|
||||
<!-- ====== 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://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">
|
||||
<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>
|
||||
@@ -1911,21 +2036,29 @@
|
||||
<!-- ====== 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>
|
||||
@@ -1965,12 +2098,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)]">
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1981,31 +2116,24 @@
|
||||
</p>
|
||||
|
||||
<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">
|
||||
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>
|
||||
@@ -2013,32 +2141,36 @@
|
||||
<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.untan<br>
|
||||
YouTube: HMIF UNTAN TV
|
||||
@hmif_ftuntan<br>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2110,8 +2242,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>
|
||||
|
||||
@@ -2183,7 +2315,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);
|
||||
}
|
||||
@@ -2253,7 +2385,7 @@
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 6;
|
||||
var TOTAL_CARDS = 7;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
@@ -2306,9 +2438,10 @@
|
||||
dotsContainer.innerHTML = '';
|
||||
for (var i = 0; i < n; i++) {
|
||||
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('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);
|
||||
}
|
||||
@@ -2444,27 +2577,28 @@
|
||||
})();
|
||||
</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>
|
||||
@@ -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-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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user