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",
|
||||
|
||||
@@ -581,9 +581,9 @@ const translations = {
|
||||
grp_limaem_about_stat_students: "Mahasiswa Aktif",
|
||||
grp_limaem_about_stat_partners: "MITRA",
|
||||
grp_limaem_about_badge: "Inklusivitas & Kolaborasi",
|
||||
|
||||
|
||||
grp_limaem_partners_title: "Partner dan Kolaborator",
|
||||
|
||||
|
||||
grp_limaem_divisi_title: "Divisi Kepengurusan HMIF",
|
||||
grp_limaem_divisi_desc: "Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.",
|
||||
grp_limaem_divisi_b1_label: "Bidang 1",
|
||||
@@ -604,7 +604,7 @@ const translations = {
|
||||
grp_limaem_divisi_b6_label: "Bidang 6",
|
||||
grp_limaem_divisi_b6_title: "Kewirausahaan dan Kemitraan",
|
||||
grp_limaem_divisi_b6_desc: "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 pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan profesional.",
|
||||
|
||||
|
||||
grp_limaem_kegiatan_title: "Kegiatan Unggulan",
|
||||
grp_limaem_kegiatan_subtitle: "Kegiatan tahunan yang menjadi ikon Informatika UNTAN.",
|
||||
grp_limaem_kegiatan_c1_title: "Silaturahmi Keluarga Besar Informatika",
|
||||
@@ -617,11 +617,9 @@ 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",
|
||||
grp_limaem_sc_arise_desc: "Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.",
|
||||
@@ -629,9 +627,9 @@ const translations = {
|
||||
grp_limaem_sc_minerva_desc: "Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan algoritma Machine Learning, membedah teknik klasifikasi, hingga melatih model prediktif untuk menghasilkan insight yang bermakna.",
|
||||
grp_limaem_sc_sd_title: "Software Development (Segera Hadir)",
|
||||
grp_limaem_sc_sd_desc: "Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang frontend yang interaktif, membangun backend yang tangguh, serta mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.",
|
||||
|
||||
|
||||
grp_limaem_galeri_title: "Galeri Keseruan",
|
||||
|
||||
|
||||
grp_limaem_cta_title: "Ada yang Ingin Ditanyakan Seputar HMIF?",
|
||||
grp_limaem_cta_desc: "Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.",
|
||||
grp_limaem_cta_btn: "Hubungi Kami",
|
||||
@@ -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",
|
||||
|
||||
@@ -1219,9 +1217,9 @@ const translations = {
|
||||
grp_limaem_about_stat_students: "Active Students",
|
||||
grp_limaem_about_stat_partners: "PARTNERS",
|
||||
grp_limaem_about_badge: "Inclusivity & Collaboration",
|
||||
|
||||
|
||||
grp_limaem_partners_title: "Partners and Collaborators",
|
||||
|
||||
|
||||
grp_limaem_divisi_title: "HMIF Organizational Divisions",
|
||||
grp_limaem_divisi_desc: "An organizational structure designed for efficiency and capacity building across various strategic fields.",
|
||||
grp_limaem_divisi_b1_label: "Division 1",
|
||||
@@ -1242,7 +1240,7 @@ const translations = {
|
||||
grp_limaem_divisi_b6_label: "Division 6",
|
||||
grp_limaem_divisi_b6_title: "Entrepreneurship and Partnerships",
|
||||
grp_limaem_divisi_b6_desc: "This division develops organizational business units, designs creative funding schemes, and establishes strategic partnerships to support the sustainability of HMIF programs. Its work units include business opportunity research, partnership proposal development, and sponsorship management to enhance financial independence and professional networking access.",
|
||||
|
||||
|
||||
grp_limaem_kegiatan_title: "Flagship Events",
|
||||
grp_limaem_kegiatan_subtitle: "Annual events that have become icons of Informatics UNTAN.",
|
||||
grp_limaem_kegiatan_c1_title: "Informatics Family Gathering",
|
||||
@@ -1255,11 +1253,9 @@ 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",
|
||||
grp_limaem_sc_arise_desc: "Learn logic and algorithms together, where you can grow and open opportunities to participate in programming competitions at various levels.",
|
||||
@@ -1267,9 +1263,9 @@ const translations = {
|
||||
grp_limaem_sc_minerva_desc: "Uncover hidden potential from mountains of data! Here we explore Machine Learning algorithms, dissect classification techniques, and train predictive models to generate meaningful insights.",
|
||||
grp_limaem_sc_sd_title: "Software Development (Coming Soon)",
|
||||
grp_limaem_sc_sd_desc: "Turn your ideas into real digital products! We will code together — from designing interactive frontends and building robust backends, to integrating various APIs to create modern web applications.",
|
||||
|
||||
|
||||
grp_limaem_galeri_title: "Fun Gallery",
|
||||
|
||||
|
||||
grp_limaem_cta_title: "Have Questions About HMIF?",
|
||||
grp_limaem_cta_desc: "Join HMIF to expand your network, sharpen your skills, and create real impact.",
|
||||
grp_limaem_cta_btn: "Contact Us",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
+225
-327
@@ -1,20 +1,16 @@
|
||||
<!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>
|
||||
<style>
|
||||
/* ===== MOBILE NAV STABILITY FIX =====
|
||||
Prevents logo bar from collapsing/shifting on Android when
|
||||
address bar hides/shows and triggers viewport reflow.
|
||||
@@ -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>
|
||||
@@ -1155,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">
|
||||
|
||||
@@ -1173,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';"
|
||||
@@ -1210,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>
|
||||
|
||||
@@ -1235,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>
|
||||
@@ -1244,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>
|
||||
@@ -1257,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]" />
|
||||
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>
|
||||
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
||||
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
|
||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
||||
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
||||
bg-hmif-secondary text-hmif-primary
|
||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="2.5" stroke="currentColor" class="w-6 h-6 mx-auto mb-1"
|
||||
aria-hidden="true">
|
||||
bg-hmif-secondary text-hmif-primary
|
||||
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">
|
||||
<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>
|
||||
@@ -1298,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>
|
||||
|
||||
@@ -1311,10 +1317,11 @@
|
||||
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;
|
||||
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;" />
|
||||
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;" />
|
||||
</a>
|
||||
|
||||
<!-- Partner Aktif (Sobat Konveksi) - ring kuning + glow -->
|
||||
@@ -1324,10 +1331,11 @@
|
||||
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;
|
||||
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;" />
|
||||
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;" />
|
||||
</a>
|
||||
|
||||
<!-- Partner Legacy (Ayani) - abu-abu, hover tampil warna asli -->
|
||||
@@ -1336,53 +1344,58 @@
|
||||
onmouseout="this.style.transform='scale(1)'; this.querySelector('img').style.filter='grayscale(100%)';">
|
||||
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall"
|
||||
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);" />
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
</div>
|
||||
|
||||
<!-- Partner Legacy (Indofood) -->
|
||||
<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;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
<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>
|
||||
|
||||
<!-- Partner Legacy (Playhera) -->
|
||||
<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;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
<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>
|
||||
|
||||
<!-- Partner Legacy (PLN) -->
|
||||
<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;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
<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>
|
||||
|
||||
<!-- Partner Legacy (RTech) -->
|
||||
<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;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
<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>
|
||||
|
||||
<!-- Partner Legacy (Rumangsa) -->
|
||||
<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;
|
||||
filter: grayscale(100%); transition: filter 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1394,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>
|
||||
@@ -1419,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
|
||||
@@ -1439,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
|
||||
@@ -1458,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,
|
||||
@@ -1478,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
|
||||
@@ -1498,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
|
||||
@@ -1517,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
|
||||
@@ -1535,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">
|
||||
@@ -1562,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>
|
||||
@@ -1582,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"
|
||||
@@ -1610,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.
|
||||
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
|
||||
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data
|
||||
mining</em>, hingga UI/UX.
|
||||
<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.
|
||||
</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>
|
||||
@@ -1642,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"
|
||||
@@ -1663,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>
|
||||
@@ -1672,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"
|
||||
@@ -1693,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>
|
||||
@@ -1786,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>
|
||||
@@ -1837,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>
|
||||
@@ -1861,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>
|
||||
@@ -1885,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>
|
||||
@@ -1904,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>
|
||||
@@ -1933,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>
|
||||
@@ -1967,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>
|
||||
@@ -1999,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>
|
||||
@@ -2061,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>
|
||||
|
||||
@@ -2079,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>
|
||||
@@ -2104,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>
|
||||
@@ -2205,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>
|
||||
|
||||
@@ -2229,15 +2129,15 @@
|
||||
var AUTO_DELAY_MS = 4000; // 4 detik per slide
|
||||
var GAP_PX = 16 * 2; // grid gap-4 = 1rem? but original used gap-4; keep reasonable spacing if needed
|
||||
|
||||
var track = document.getElementById('galeri-track');
|
||||
var track = document.getElementById('galeri-track');
|
||||
var viewport = document.getElementById('galeri-viewport');
|
||||
var prevBtn = document.getElementById('galeri-prev');
|
||||
var nextBtn = document.getElementById('galeri-next');
|
||||
var prevBtn = document.getElementById('galeri-prev');
|
||||
var nextBtn = document.getElementById('galeri-next');
|
||||
var dotsContainer = document.getElementById('galeri-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
|
||||
var currentSlide = 0;
|
||||
var currentSlide = 0;
|
||||
var autoSlideTimer;
|
||||
var originalHTML = track.innerHTML;
|
||||
|
||||
@@ -2278,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);
|
||||
}
|
||||
@@ -2348,14 +2248,14 @@
|
||||
// =============================================================================
|
||||
|
||||
(function () {
|
||||
var TOTAL_CARDS = 7;
|
||||
var TOTAL_CARDS = 6;
|
||||
var AUTO_DELAY_MS = 2000;
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||
|
||||
var track = document.getElementById('slider-track');
|
||||
var track = document.getElementById('slider-track');
|
||||
var viewport = document.getElementById('slider-viewport');
|
||||
var prevBtn = document.getElementById('slider-prev');
|
||||
var nextBtn = document.getElementById('slider-next');
|
||||
var prevBtn = document.getElementById('slider-prev');
|
||||
var nextBtn = document.getElementById('slider-next');
|
||||
var dotsContainer = document.getElementById('slider-dots');
|
||||
|
||||
if (!track || !viewport || !prevBtn || !nextBtn) return;
|
||||
@@ -2401,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);
|
||||
}
|
||||
@@ -2540,28 +2439,27 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const mobileBtn = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMobileBtn = document.getElementById('close-mobile-menu');
|
||||
if (mobileBtn && mobileMenu) {
|
||||
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 () {
|
||||
mobileMenu.classList.add('-translate-x-full');
|
||||
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
(function() {
|
||||
const mobileBtn = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMobileBtn= document.getElementById('close-mobile-menu');
|
||||
if (mobileBtn && mobileMenu) {
|
||||
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() {
|
||||
mobileMenu.classList.add('-translate-x-full');
|
||||
if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
})();
|
||||
</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