forked from izu/student-web-if-development-kit
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bayu
|
e7a01dd4a1 | ||
 Farras
|
22f957e0f6 | ||
|
Farras
|
9c870cf28c | ||
 ilham652
|
f8500db1dd | ||
 ilham_gmail
|
7f2df4b08e | ||
|
Bayu
|
fa46a434c2 |
@@ -571,7 +571,7 @@ const translations = {
|
|||||||
kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
|
kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
|
||||||
|
|
||||||
grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
|
grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
|
||||||
grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
|
grp_limaem_hero_title: "Kehidupan Mahasiswa & <span style=\"color:#f5c82f;\">Himpunan (HMIF)</span>",
|
||||||
grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
|
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",
|
grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
|
||||||
|
|
||||||
@@ -617,8 +617,10 @@ const translations = {
|
|||||||
grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
|
grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
|
||||||
grp_limaem_kegiatan_c5_title: "UPC",
|
grp_limaem_kegiatan_c5_title: "UPC",
|
||||||
grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
|
grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
|
||||||
grp_limaem_kegiatan_c6_title: "INFORMERS",
|
grp_limaem_kegiatan_c6_title: "Study Excursion",
|
||||||
grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
|
grp_limaem_kegiatan_c6_desc: "Study Excursion menjadi 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_title: "STUDY CLUB",
|
||||||
grp_limaem_sc_arise_title: "ARISE",
|
grp_limaem_sc_arise_title: "ARISE",
|
||||||
@@ -1207,7 +1209,7 @@ const translations = {
|
|||||||
kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
|
kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
|
||||||
|
|
||||||
grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
|
grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
|
||||||
grp_limaem_hero_title: "Student Life & Student Association (HMIF)",
|
grp_limaem_hero_title: "Student Life & <span style=\"color:#f5c82f;\">Student Association (HMIF)</span>",
|
||||||
grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
|
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",
|
grp_limaem_hero_btn: "View Organizational Structure",
|
||||||
|
|
||||||
@@ -1253,8 +1255,10 @@ const translations = {
|
|||||||
grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
|
grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
|
||||||
grp_limaem_kegiatan_c5_title: "UPC",
|
grp_limaem_kegiatan_c5_title: "UPC",
|
||||||
grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
|
grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
|
||||||
grp_limaem_kegiatan_c6_title: "INFORMERS",
|
grp_limaem_kegiatan_c6_title: "Study Excursion",
|
||||||
grp_limaem_kegiatan_c6_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
|
grp_limaem_kegiatan_c6_desc: "Study Excursion is 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_title: "STUDY CLUBS",
|
||||||
grp_limaem_sc_arise_title: "ARISE",
|
grp_limaem_sc_arise_title: "ARISE",
|
||||||
|
|||||||
@@ -1,73 +0,0 @@
|
|||||||
const fs = require('fs');
|
|
||||||
let c = fs.readFileSync('groups/LimaEm/index.html', 'utf8');
|
|
||||||
|
|
||||||
const oldHeroGrad = '<div class=\"absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0\"></div>';
|
|
||||||
const newHeroGrad = '<div class=\"absolute inset-0 z-0\" style=\"background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);\"></div>';
|
|
||||||
c = c.replace(oldHeroGrad, newHeroGrad);
|
|
||||||
|
|
||||||
const oldPhotoStr = \<!-- --- Right: Photo --- -->
|
|
||||||
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
|
||||||
|
|
||||||
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
|
||||||
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
|
||||||
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
|
||||||
|
|
||||||
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
|
||||||
<div
|
|
||||||
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
||||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
|
|
||||||
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
|
||||||
<!-- Gradient overlay bawah -->
|
|
||||||
<div class="absolute inset-0
|
|
||||||
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
|
||||||
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
||||||
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
|
||||||
bg-hmif-secondary text-hmif-primary
|
|
||||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
||||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
||||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round"
|
|
||||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
||||||
</svg>
|
|
||||||
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
||||||
Inklusivitas &<br>Kolaborasi
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>\;
|
|
||||||
const newPhotoStr = \<!-- --- Right: Photo --- -->
|
|
||||||
<div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
|
|
||||||
<!-- Offset shadow block biru tua -->
|
|
||||||
<div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
|
|
||||||
|
|
||||||
<!-- Frame foto -->
|
|
||||||
<div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
||||||
alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
|
|
||||||
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
|
|
||||||
<!-- Gradient overlay bawah -->
|
|
||||||
<div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
||||||
<div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
|
|
||||||
bg-hmif-secondary text-hmif-primary
|
|
||||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
||||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
||||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round"
|
|
||||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
||||||
</svg>
|
|
||||||
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
||||||
Inklusivitas &<br>Kolaborasi
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>\;
|
|
||||||
c = c.replace(oldPhotoStr, newPhotoStr);
|
|
||||||
fs.writeFileSync('groups/LimaEm/index.html', c);
|
|
||||||
console.log('HTML layout fixed');
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
@@ -465,7 +465,7 @@
|
|||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
var TOTAL_CARDS = 6;
|
var TOTAL_CARDS = 7;
|
||||||
var AUTO_DELAY_MS = 2000;
|
var AUTO_DELAY_MS = 2000;
|
||||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||||
|
|
||||||
@@ -518,7 +518,8 @@
|
|||||||
dotsContainer.innerHTML = '';
|
dotsContainer.innerHTML = '';
|
||||||
for (var i = 0; i < n; i++) {
|
for (var i = 0; i < n; i++) {
|
||||||
var btn = document.createElement('button');
|
var btn = document.createElement('button');
|
||||||
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
|
||||||
|
if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
|
||||||
btn.setAttribute('data-index', String(i));
|
btn.setAttribute('data-index', String(i));
|
||||||
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
||||||
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
||||||
|
|||||||
+358
-171
@@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="id" class="scroll-smooth">
|
<html lang="id" class="scroll-smooth">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -8,7 +9,9 @@
|
|||||||
<link rel="stylesheet" href="../../assets/global/output.css">
|
<link rel="stylesheet" href="../../assets/global/output.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<style>
|
<style>
|
||||||
/* ===== MOBILE NAV STABILITY FIX =====
|
/* ===== MOBILE NAV STABILITY FIX =====
|
||||||
@@ -295,23 +298,33 @@
|
|||||||
|
|
||||||
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
|
/* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
|
||||||
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
|
/* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
|
||||||
.md-card-half {
|
.md-card-half {
|
||||||
width: calc(50% - 16px) !important;
|
width: calc(50% - 16px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix tinggi grid Galeri Keseruan (Tablet) */
|
/* Fix tinggi grid Galeri Keseruan (Tablet) */
|
||||||
.galeri-grid {
|
.galeri-grid {
|
||||||
height: 420px !important;
|
height: 420px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
|
|
||||||
/* Fix tinggi grid Galeri Keseruan (Desktop) */
|
/* Fix tinggi grid Galeri Keseruan (Desktop) */
|
||||||
.galeri-grid {
|
.galeri-grid {
|
||||||
height: 500px !important;
|
height: 500px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fix: title divisi berubah kuning saat hover */
|
||||||
|
#divisi .group:hover h3 {
|
||||||
|
color: #f5c82f !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
|
<body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
|
||||||
|
|
||||||
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
|
<a href="#main-content" class="skip-link" data-i18n="skip_to_content">Langsung ke Konten Utama</a>
|
||||||
@@ -1161,9 +1174,13 @@
|
|||||||
<main id="main-content" class="min-h-screen bg-white">
|
<main id="main-content" class="min-h-screen bg-white">
|
||||||
<div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
|
<div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
|
||||||
<div class="mb-8 pb-8 border-b border-slate-200">
|
<div class="mb-8 pb-8 border-b border-slate-200">
|
||||||
<span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
|
<span
|
||||||
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa & Himpunan (HMIF)</h1>
|
class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
|
||||||
<p class="text-slate-500 text-sm">Kelompok 07 — LIMA EM · Informatika UNTAN 2026</p>
|
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>
|
</div>
|
||||||
<div id="assignment-body" class="w-full">
|
<div id="assignment-body" class="w-full">
|
||||||
@@ -1174,7 +1191,9 @@
|
|||||||
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
<img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
|
||||||
class="absolute inset-0 w-full h-full object-cover z-0" />
|
class="absolute inset-0 w-full h-full object-cover z-0" />
|
||||||
|
|
||||||
<div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);"></div>
|
<div class="absolute inset-0 z-0"
|
||||||
|
style="background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
<div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
|
||||||
|
|
||||||
@@ -1190,16 +1209,19 @@
|
|||||||
COMMUNITY & LEADERSHIP
|
COMMUNITY & LEADERSHIP
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 data-i18n="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
<h1 data-i18n-html="grp_limaem_hero_title"
|
||||||
|
class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
|
||||||
Kehidupan Mahasiswa & <span style="color:#feb401;">Himpunan (HMIF)</span>
|
Kehidupan Mahasiswa & <span style="color:#feb401;">Himpunan (HMIF)</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p data-i18n="grp_limaem_hero_desc" class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
<p data-i18n="grp_limaem_hero_desc"
|
||||||
|
class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
|
||||||
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
|
Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
|
||||||
kreativitas, membentuk calon pemimpin industri masa depan.
|
kreativitas, membentuk calon pemimpin industri masa depan.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<button data-i18n="grp_limaem_hero_btn" onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
|
<button data-i18n="grp_limaem_hero_btn"
|
||||||
|
onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
|
||||||
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md transition-all hover:cursor-pointer"
|
class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md transition-all hover:cursor-pointer"
|
||||||
style="transition: all 0.25s ease;"
|
style="transition: all 0.25s ease;"
|
||||||
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
|
onmouseover="this.style.backgroundColor='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401';"
|
||||||
@@ -1224,7 +1246,8 @@
|
|||||||
<div class="flex flex-col gap-8 order-1 lg:pr-6">
|
<div class="flex flex-col gap-8 order-1 lg:pr-6">
|
||||||
|
|
||||||
<!-- Heading -->
|
<!-- Heading -->
|
||||||
<h2 data-i18n="grp_limaem_about_title" class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
|
<h2 data-i18n="grp_limaem_about_title"
|
||||||
|
class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
|
||||||
Ruang Tumbuh Bagi<br>Mahasiswa Informatika
|
Ruang Tumbuh Bagi<br>Mahasiswa Informatika
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
@@ -1248,7 +1271,8 @@
|
|||||||
<p
|
<p
|
||||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||||
518</p>
|
518</p>
|
||||||
<p data-i18n="grp_limaem_about_stat_students" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
<p data-i18n="grp_limaem_about_stat_students"
|
||||||
|
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
||||||
Mahasiswa Aktif
|
Mahasiswa Aktif
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1256,7 +1280,8 @@
|
|||||||
<p
|
<p
|
||||||
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
|
||||||
8</p>
|
8</p>
|
||||||
<p data-i18n="grp_limaem_about_stat_partners" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
<p data-i18n="grp_limaem_about_stat_partners"
|
||||||
|
class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
|
||||||
MITRA
|
MITRA
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1279,7 +1304,8 @@
|
|||||||
<!-- Gradient overlay bawah -->
|
<!-- Gradient overlay bawah -->
|
||||||
<div class="absolute inset-0
|
<div class="absolute inset-0
|
||||||
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
||||||
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
opacity-70 group-hover:opacity-45 transition-opacity duration-500">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
||||||
@@ -1287,12 +1313,14 @@
|
|||||||
bg-hmif-secondary text-hmif-primary
|
bg-hmif-secondary text-hmif-primary
|
||||||
rounded-xl px-4 py-3 text-center shadow-2xl
|
rounded-xl px-4 py-3 text-center shadow-2xl
|
||||||
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||||
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
stroke-width="2.5" stroke="currentColor" class="w-6 h-6 mx-auto mb-1"
|
||||||
|
aria-hidden="true">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round"
|
<path stroke-linecap="round" stroke-linejoin="round"
|
||||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<p data-i18n="grp_limaem_about_badge" class="text-[11px] lg:text-xs font-bold leading-snug">
|
<p data-i18n="grp_limaem_about_badge"
|
||||||
|
class="text-[11px] lg:text-xs font-bold leading-snug">
|
||||||
Inklusivitas &<br>Kolaborasi
|
Inklusivitas &<br>Kolaborasi
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1305,65 +1333,110 @@
|
|||||||
<!-- Partner & Kolaborator -->
|
<!-- Partner & Kolaborator -->
|
||||||
<section id="partners" class="bg-white py-16">
|
<section id="partners" class="bg-white py-16">
|
||||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||||
<h2 data-i18n="grp_limaem_partners_title" class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
|
<h2 data-i18n="grp_limaem_partners_title"
|
||||||
|
class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
|
||||||
Partner dan Kolaborator
|
Partner dan Kolaborator
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
|
<div class="flex flex-wrap gap-6 lg:gap-10 items-center">
|
||||||
<!-- Partner Aktif (Terbaru) -->
|
<!-- Partner Aktif (Terbaru) - ring kuning + glow -->
|
||||||
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
<a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
|
||||||
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
|
rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
|
||||||
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
onmouseover="this.style.transform='scale(1.1)'"
|
||||||
title="Partner Terbaru" />
|
onmouseout="this.style.transform='scale(1)'">
|
||||||
</a>
|
<img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
|
||||||
<!-- Partner Aktif (Sobat Konveksi) -->
|
title="Partner Aktif" style="width:5rem; height:5rem; border-radius:9999px; object-fit:cover; display:block;
|
||||||
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
border: 4px solid #feb401;
|
||||||
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
|
box-shadow: 0 0 0 2px rgba(254,180,1,0.4), 0 4px 16px rgba(254,180,1,0.3);
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
|
transition: box-shadow 0.2s ease;" />
|
||||||
hover:scale-110 transition-transform duration-200 cursor-pointer"
|
|
||||||
title="Partner Aktif" />
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
|
<!-- Partner Aktif (Sobat Konveksi) - ring kuning + glow -->
|
||||||
<div class="relative group">
|
<a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/ayanimegamall.jpeg" alt="Ayani Megamall" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
style="display:inline-block; border-radius:9999px; transition: transform 0.2s ease;"
|
||||||
|
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;" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Partner Legacy (Ayani) - abu-abu, hover tampil warna asli -->
|
||||||
|
<div style="display:inline-block; border-radius:9999px; transition: transform 0.3s ease, box-shadow 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/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);" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative group">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/indofood.jpeg" alt="Indofood" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
<!-- Partner Legacy (Indofood) -->
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
<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);" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative group">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/playhera.jpeg" alt="Playhera" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
<!-- Partner Legacy (Playhera) -->
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
<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);" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative group">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/pln.jpeg" alt="PLN" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
<!-- Partner Legacy (PLN) -->
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
<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);" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative group">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/rtech.jpeg" alt="RTech" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
<!-- Partner Legacy (RTech) -->
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
<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);" />
|
||||||
</div>
|
</div>
|
||||||
<div class="relative group">
|
|
||||||
<img src="./assets/images/ruang-tumbuh/partner/rumangsa.jpeg" alt="Rumangsa" class="w-14 h-14 lg:w-16 lg:h-16 rounded-full object-cover shadow-md grayscale hover:grayscale-0
|
<!-- Partner Legacy (Rumangsa) -->
|
||||||
hover:scale-110 hover:shadow-lg transition-all duration-300" />
|
<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);" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- Divisi Kepengurusan HMIF Section -->
|
<!-- Divisi Kepengurusan HMIF Section -->
|
||||||
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
|
<section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
|
||||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="mb-12 md:mb-16 max-w-3xl">
|
<div class="mb-12 md:mb-16 max-w-3xl">
|
||||||
<h2 data-i18n="grp_limaem_divisi_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
|
<h2 data-i18n="grp_limaem_divisi_title"
|
||||||
|
class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
|
||||||
Divisi Kepengurusan HMIF
|
Divisi Kepengurusan HMIF
|
||||||
</h2>
|
</h2>
|
||||||
<p data-i18n="grp_limaem_divisi_desc" class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_desc"
|
||||||
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
|
class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
|
||||||
|
Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di
|
||||||
|
berbagai
|
||||||
bidang strategis.
|
bidang strategis.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1372,7 +1445,7 @@
|
|||||||
<div
|
<div
|
||||||
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
|
class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
|
||||||
<!-- Bidang 1 -->
|
<!-- Bidang 1 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b1_label"
|
<span data-i18n="grp_limaem_divisi_b1_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 1
|
Bidang 1
|
||||||
@@ -1381,7 +1454,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
|
Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b1_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b1_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
|
Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
|
||||||
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
|
kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
|
||||||
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
|
workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
|
||||||
@@ -1391,7 +1465,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bidang 2 -->
|
<!-- Bidang 2 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b2_label"
|
<span data-i18n="grp_limaem_divisi_b2_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 2
|
Bidang 2
|
||||||
@@ -1400,7 +1474,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Media Komunikasi dan Konten Digital
|
Media Komunikasi dan Konten Digital
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b2_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b2_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
|
Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
|
||||||
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
|
perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
|
||||||
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
|
kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
|
||||||
@@ -1409,7 +1484,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bidang 3 -->
|
<!-- Bidang 3 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b3_label"
|
<span data-i18n="grp_limaem_divisi_b3_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 3
|
Bidang 3
|
||||||
@@ -1418,7 +1493,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Inovasi dan Kompetisi Teknologi
|
Inovasi dan Kompetisi Teknologi
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b3_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b3_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
|
Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
|
||||||
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
|
coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
|
||||||
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
|
Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
|
||||||
@@ -1428,7 +1504,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bidang 4 -->
|
<!-- Bidang 4 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b4_label"
|
<span data-i18n="grp_limaem_divisi_b4_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 4
|
Bidang 4
|
||||||
@@ -1437,7 +1513,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Pengembangan Organisasi
|
Pengembangan Organisasi
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b4_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b4_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
|
Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
|
||||||
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
|
pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
|
||||||
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
|
mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
|
||||||
@@ -1447,7 +1524,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bidang 5 -->
|
<!-- Bidang 5 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b5_label"
|
<span data-i18n="grp_limaem_divisi_b5_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 5
|
Bidang 5
|
||||||
@@ -1456,7 +1533,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Sosial Masyarakat
|
Sosial Masyarakat
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b5_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b5_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
|
Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
|
||||||
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
|
berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
|
||||||
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
|
meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
|
||||||
@@ -1465,7 +1543,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bidang 6 -->
|
<!-- Bidang 6 -->
|
||||||
<div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
|
<div class="group flex flex-col space-y-3 cursor-default p-8 lg:p-10">
|
||||||
<span data-i18n="grp_limaem_divisi_b6_label"
|
<span data-i18n="grp_limaem_divisi_b6_label"
|
||||||
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
|
||||||
Bidang 6
|
Bidang 6
|
||||||
@@ -1474,7 +1552,8 @@
|
|||||||
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
|
||||||
Kewirausahaan dan Kemitraan
|
Kewirausahaan dan Kemitraan
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_divisi_b6_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
<p data-i18n="grp_limaem_divisi_b6_desc"
|
||||||
|
class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
|
||||||
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
|
Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
|
||||||
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
|
dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
|
||||||
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
|
kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
|
||||||
@@ -1491,7 +1570,8 @@
|
|||||||
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
|
<div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 relative w-full">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="mb-12">
|
<div class="mb-12">
|
||||||
<h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
<h2 data-i18n="grp_limaem_kegiatan_title"
|
||||||
|
class="text-3xl font-extrabold text-hmif-primary tracking-tight">
|
||||||
Kegiatan Unggulan
|
Kegiatan Unggulan
|
||||||
</h2>
|
</h2>
|
||||||
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
|
<p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
|
||||||
@@ -1517,16 +1597,19 @@
|
|||||||
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
<div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
|
||||||
|
|
||||||
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
<!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
<div
|
<div
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
|
<img src="./assets/images/kegiatan-unggulan/SKBI.jpeg"
|
||||||
|
alt="Silaturahmi Keluarga Besar"
|
||||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start gap-4 mt-6">
|
<div class="flex items-start gap-4 mt-6">
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
<span
|
||||||
|
class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
|
||||||
<span
|
<span
|
||||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1534,14 +1617,18 @@
|
|||||||
<h3 data-i18n="grp_limaem_kegiatan_c1_title"
|
<h3 data-i18n="grp_limaem_kegiatan_c1_title"
|
||||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
Silaturahmi Keluarga Besar Informatika</h3>
|
Silaturahmi Keluarga Besar Informatika</h3>
|
||||||
<p data-i18n="grp_limaem_kegiatan_c1_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
|
<p data-i18n="grp_limaem_kegiatan_c1_desc"
|
||||||
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
|
class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka
|
||||||
|
bersama
|
||||||
|
seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 2 Gemastik -->
|
<!-- Card 2 Gemastik -->
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
<div
|
<div
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
|
<img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
|
||||||
@@ -1558,25 +1645,31 @@
|
|||||||
<h3
|
<h3
|
||||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
GEMASTIK</h3>
|
GEMASTIK</h3>
|
||||||
<p data-i18n="grp_limaem_kegiatan_c2_desc" class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
|
<p data-i18n="grp_limaem_kegiatan_c2_desc"
|
||||||
|
class="text-sm text-gray-500 leading-relaxed font-light"> Ajang
|
||||||
|
kompetisi IT bergengsi tingkat nasional tahunan dari kementerian.
|
||||||
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
|
Wadah bagi mahasiswa Informatika UNTAN untuk unjuk
|
||||||
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
|
gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data
|
||||||
|
mining</em>, hingga UI/UX.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 3 17 agustus -->
|
<!-- Card 3 17 agustus -->
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
<div
|
<div
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
|
<img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg"
|
||||||
|
alt="Perayaan 17 Agustus"
|
||||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start gap-4 mt-6">
|
<div class="flex items-start gap-4 mt-6">
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
|
<span
|
||||||
|
class="text-lg font-extrabold text-hmif-primary leading-none">17</span>
|
||||||
<span
|
<span
|
||||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1584,14 +1677,19 @@
|
|||||||
<h3 data-i18n="grp_limaem_kegiatan_c3_title"
|
<h3 data-i18n="grp_limaem_kegiatan_c3_title"
|
||||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
Perayaan 17 Agustus</h3>
|
Perayaan 17 Agustus</h3>
|
||||||
<p data-i18n="grp_limaem_kegiatan_c3_desc" class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
|
<p data-i18n="grp_limaem_kegiatan_c3_desc"
|
||||||
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
|
class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan
|
||||||
|
Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan
|
||||||
|
menarik.
|
||||||
|
Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan
|
||||||
|
kekeluargaan mahasiswa Informatika.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 3 Bootcamp -->
|
<!-- Card 3 Bootcamp -->
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
<div
|
<div
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
|
<img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
|
||||||
@@ -1600,7 +1698,8 @@
|
|||||||
<div class="flex items-start gap-4 mt-6">
|
<div class="flex items-start gap-4 mt-6">
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
|
<span
|
||||||
|
class="text-lg font-extrabold text-hmif-primary leading-none">28</span>
|
||||||
<span
|
<span
|
||||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1608,57 +1707,103 @@
|
|||||||
<h3
|
<h3
|
||||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
Bootcamp HMIF</h3>
|
Bootcamp HMIF</h3>
|
||||||
<p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
|
<p data-i18n="grp_limaem_kegiatan_c4_desc"
|
||||||
pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
|
class="text-sm text-gray-500 leading-relaxed font-light">Program
|
||||||
|
intensif
|
||||||
|
pengembangan skill teknis mahasiswa Informatika bersama mentor
|
||||||
|
profesional dari
|
||||||
industri.</p>
|
industri.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Card 5 UPC 2025 -->
|
<!-- Card 5 UPC 2025 -->
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
<div
|
<div
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
<img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
|
<img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
|
||||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start gap-4 mt-6">
|
<div class="flex items-start gap-4 mt-6">
|
||||||
<div
|
<div
|
||||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">13</span>
|
|
||||||
<span
|
<span
|
||||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Sep</span>
|
class="text-lg font-extrabold text-hmif-primary leading-none">20</span>
|
||||||
</div>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<h3
|
|
||||||
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
|
||||||
UPC</h3>
|
|
||||||
<p data-i18n="grp_limaem_kegiatan_c5_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
|
|
||||||
mengasah skill coding mahasiswa Informatika.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 6 Informers -->
|
|
||||||
<div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
|
||||||
<div
|
|
||||||
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
|
||||||
<img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
|
|
||||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-4 mt-6">
|
|
||||||
<div
|
|
||||||
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
|
||||||
<span class="text-lg font-extrabold text-hmif-primary leading-none">25</span>
|
|
||||||
<span
|
<span
|
||||||
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Okt</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<h3
|
<h3
|
||||||
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
|
UPC</h3>
|
||||||
|
<p data-i18n="grp_limaem_kegiatan_c5_desc"
|
||||||
|
class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi
|
||||||
|
Pemograman untuk
|
||||||
|
mengasah skill coding mahasiswa Informatika.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 6 Study Excursion -->
|
||||||
|
<div
|
||||||
|
class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
|
||||||
|
<div
|
||||||
|
class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
|
||||||
|
<img src="./assets/images/kegiatan-unggulan/SE.jpeg" alt="Study Excursion"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start gap-4 mt-6">
|
||||||
|
<div
|
||||||
|
class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
|
||||||
|
<span
|
||||||
|
class="text-lg font-extrabold text-hmif-primary leading-none">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">
|
class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
|
||||||
INFORMERS</h3>
|
INFORMERS</h3>
|
||||||
<p data-i18n="grp_limaem_kegiatan_c6_desc" class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
|
<p data-i18n="grp_limaem_kegiatan_c7_desc"
|
||||||
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
|
class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang
|
||||||
|
tahun
|
||||||
|
Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga
|
||||||
|
besar
|
||||||
Informatika.</p>
|
Informatika.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1678,18 +1823,25 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dot Indicators -->
|
<!-- Dot Indicators — akan di-render ulang oleh JS, ini hanya placeholder awal -->
|
||||||
<div id="slider-dots" class="flex justify-center gap-2 mt-10">
|
<div id="slider-dots" class="flex justify-center gap-2 mt-10">
|
||||||
<button class="slider-dot h-2.5 rounded-full bg-hmif-primary transition-all duration-300 w-6"
|
<button class="slider-dot h-2.5 w-6 rounded-full bg-hmif-primary transition-all duration-300"
|
||||||
data-index="0" aria-label="Slide 1"></button>
|
data-index="0" aria-label="Slide 1"></button>
|
||||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
<button
|
||||||
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||||
data-index="1" aria-label="Slide 2"></button>
|
data-index="1" aria-label="Slide 2"></button>
|
||||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
<button
|
||||||
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||||
data-index="2" aria-label="Slide 3"></button>
|
data-index="2" aria-label="Slide 3"></button>
|
||||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
<button
|
||||||
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||||
data-index="3" aria-label="Slide 4"></button>
|
data-index="3" aria-label="Slide 4"></button>
|
||||||
<button class="slider-dot h-2.5 rounded-full bg-gray-200 transition-all duration-300 w-2.5"
|
<button
|
||||||
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||||
data-index="4" aria-label="Slide 5"></button>
|
data-index="4" aria-label="Slide 5"></button>
|
||||||
|
<button
|
||||||
|
class="slider-dot h-2.5 w-2.5 rounded-full bg-gray-200 transition-all duration-300 cursor-pointer"
|
||||||
|
data-index="5" aria-label="Slide 6"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1722,8 +1874,10 @@
|
|||||||
<h3 class="text-lg font-bold text-hmif-primary">
|
<h3 class="text-lg font-bold text-hmif-primary">
|
||||||
ARISE
|
ARISE
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_sc_arise_desc" class="text-sm text-gray-500 leading-relaxed font-light">
|
<p data-i18n="grp_limaem_sc_arise_desc"
|
||||||
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
||||||
|
Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka
|
||||||
|
peluang
|
||||||
mengikuti kompetisi pemrograman di berbagai level.
|
mengikuti kompetisi pemrograman di berbagai level.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1744,9 +1898,11 @@
|
|||||||
<h3 class="text-lg font-bold text-hmif-primary">
|
<h3 class="text-lg font-bold text-hmif-primary">
|
||||||
MINERVA
|
MINERVA
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_sc_minerva_desc" class="text-sm text-gray-500 leading-relaxed font-light">
|
<p data-i18n="grp_limaem_sc_minerva_desc"
|
||||||
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
||||||
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
|
Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
|
||||||
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
|
algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih
|
||||||
|
model
|
||||||
prediktif untuk menghasilkan <em>insight</em> yang bermakna.
|
prediktif untuk menghasilkan <em>insight</em> yang bermakna.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -1766,8 +1922,10 @@
|
|||||||
<h3 class="text-lg font-bold text-hmif-primary">
|
<h3 class="text-lg font-bold text-hmif-primary">
|
||||||
Software Development (Soon)
|
Software Development (Soon)
|
||||||
</h3>
|
</h3>
|
||||||
<p data-i18n="grp_limaem_sc_sd_desc" class="text-sm text-gray-500 leading-relaxed font-light">
|
<p data-i18n="grp_limaem_sc_sd_desc"
|
||||||
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
|
class="text-sm text-gray-500 leading-relaxed font-light">
|
||||||
|
Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari
|
||||||
|
merancang
|
||||||
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
|
<em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
|
||||||
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
|
mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
|
||||||
</p>
|
</p>
|
||||||
@@ -1783,7 +1941,8 @@
|
|||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-12">
|
||||||
<h2 data-i18n="grp_limaem_galeri_title" class="text-3xl lg:text-4xl font-bold text-hmif-primary">
|
<h2 data-i18n="grp_limaem_galeri_title"
|
||||||
|
class="text-3xl lg:text-4xl font-bold text-hmif-primary">
|
||||||
Galeri Keseruan
|
Galeri Keseruan
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
@@ -1811,24 +1970,33 @@
|
|||||||
<div class="flex-shrink-0 w-full">
|
<div class="flex-shrink-0 w-full">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
||||||
<!-- Foto besar kiri (span 2 baris) -->
|
<!-- Foto besar kiri (span 2 baris) -->
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC00636.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<!-- Foto kecil kanan atas 1 -->
|
<!-- Foto kecil kanan atas 1 -->
|
||||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.JPG" alt="Gemastik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg"
|
||||||
|
alt="Gemastik"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<!-- Foto kecil kanan atas 2 -->
|
<!-- Foto kecil kanan atas 2 -->
|
||||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/IMG_0204.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<!-- Foto lebar kanan bawah (span 2 kolom) -->
|
<!-- Foto lebar kanan bawah (span 2 kolom) -->
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC00456.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1836,21 +2004,31 @@
|
|||||||
<!-- ====== Slide 2 ====== -->
|
<!-- ====== Slide 2 ====== -->
|
||||||
<div class="flex-shrink-0 w-full">
|
<div class="flex-shrink-0 w-full">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
||||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSCF8922.JPG" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
|
||||||
|
alt="Ulang Tahun Informatika"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC00091.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC03316.JPG" alt="Silaturahmi Keluarga Besar Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC03316.jpg"
|
||||||
|
alt="Silaturahmi Keluarga Besar Informatika"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/IMG_5705.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1858,21 +2036,29 @@
|
|||||||
<!-- ====== Slide 3 ====== -->
|
<!-- ====== Slide 3 ====== -->
|
||||||
<div class="flex-shrink-0 w-full">
|
<div class="flex-shrink-0 w-full">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
<div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC00252.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC00519.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/IMG_0030.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
|
<a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx"
|
||||||
|
target="_blank" rel="noopener noreferrer"
|
||||||
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
|
||||||
<img src="./assets/images/galeri-keseruan/DSC01002.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
<img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
|
||||||
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1912,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)]">
|
class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
|
||||||
|
|
||||||
<div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
|
<div class="absolute -top-20 -left-16 h-48 w-48 rounded-full bg-white/10 blur-3xl"></div>
|
||||||
<div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl"></div>
|
<div class="absolute -bottom-24 -right-20 h-56 w-56 rounded-full bg-hmif-secondary/15 blur-3xl">
|
||||||
|
</div>
|
||||||
<div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
|
<div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
|
||||||
|
|
||||||
<div class="relative z-10">
|
<div class="relative z-10">
|
||||||
<div class="mx-auto max-w-4xl text-center">
|
<div class="mx-auto max-w-4xl text-center">
|
||||||
<h2 data-i18n="grp_limaem_cta_title" class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
|
<h2 data-i18n="grp_limaem_cta_title"
|
||||||
|
class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
|
||||||
Ada yang Ingin Ditanyakan Seputar HMIF?
|
Ada yang Ingin Ditanyakan Seputar HMIF?
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
@@ -1928,31 +2116,24 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
<div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" data-i18n="grp_limaem_cta_btn"
|
<a href="https://wa.me/6289694492305" target="_blank" rel="noopener noreferrer"
|
||||||
|
data-i18n="grp_limaem_cta_btn"
|
||||||
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
|
class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
|
||||||
Hubungi Kami
|
Hubungi Kami
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="flex items-center justify-center gap-3">
|
<div class="flex items-center justify-center gap-3">
|
||||||
<a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
|
<a href="https://instagram.com/hmif_ftuntan" target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
||||||
aria-label="Instagram HMIF">
|
aria-label="Instagram HMIF">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
||||||
class="h-4.5 w-4.5">
|
fill="currentColor" class="h-4.5 w-4.5">
|
||||||
<path
|
<path
|
||||||
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
|
d="M7.5 2A5.5 5.5 0 0 0 2 7.5v9A5.5 5.5 0 0 0 7.5 22h9a5.5 5.5 0 0 0 5.5-5.5v-9A5.5 5.5 0 0 0 16.5 2h-9Zm9 1.5A4 4 0 0 1 20.5 7.5v9a4 4 0 0 1-4 4h-9a4 4 0 0 1-4-4v-9a4 4 0 0 1 4-4h9Zm-4.5 2.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm0 2a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm5.9-.95a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://youtube.com" target="_blank" rel="noopener noreferrer"
|
|
||||||
class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-white/10 bg-white/10 text-white transition-colors duration-200 hover:bg-white/15"
|
|
||||||
aria-label="YouTube HMIF">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
||||||
class="h-4.5 w-4.5">
|
|
||||||
<path
|
|
||||||
d="M21.6 7.2a2.9 2.9 0 0 0-2.04-2.05C17.77 4.7 12 4.7 12 4.7s-5.77 0-7.56.45A2.9 2.9 0 0 0 2.4 7.2 30.3 30.3 0 0 0 2 12a30.3 30.3 0 0 0 .4 4.8 2.9 2.9 0 0 0 2.04 2.05c1.79.45 7.56.45 7.56.45s5.77 0 7.56-.45a2.9 2.9 0 0 0 2.04-2.05A30.3 30.3 0 0 0 22 12a30.3 30.3 0 0 0-.4-4.8Zm-9.2 7.44V8.36l4.83 3.14-4.83 3.14Z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1960,32 +2141,36 @@
|
|||||||
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
|
<div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
|
||||||
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
|
||||||
<div class="text-center md:px-4">
|
<div class="text-center md:px-4">
|
||||||
<p data-i18n="grp_limaem_cta_info1_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
<p data-i18n="grp_limaem_cta_info1_label"
|
||||||
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
||||||
Sekretariat
|
Sekretariat
|
||||||
</p>
|
</p>
|
||||||
<p data-i18n="grp_limaem_cta_info1_val" class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
<p data-i18n="grp_limaem_cta_info1_val"
|
||||||
|
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
||||||
Gedung Fakultas Teknik Lt. 2<br>
|
Gedung Fakultas Teknik Lt. 2<br>
|
||||||
Jl. Prof. Dr. H. Hadari Nawawi
|
Jl. Prof. Dr. H. Hadari Nawawi
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center md:px-4 md:border-x md:border-white/10">
|
<div class="text-center md:px-4 md:border-x md:border-white/10">
|
||||||
<p data-i18n="grp_limaem_cta_info2_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
<p data-i18n="grp_limaem_cta_info2_label"
|
||||||
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
||||||
Jam Operasional
|
Jam Operasional
|
||||||
</p>
|
</p>
|
||||||
<p data-i18n="grp_limaem_cta_info2_val"class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
<p data-i18n="grp_limaem_cta_info2_val"
|
||||||
|
class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
||||||
Senin - Jumat<br>
|
Senin - Jumat<br>
|
||||||
08:00 - 17:00 WIB
|
08:00 - 17:00 WIB
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-center md:px-4">
|
<div class="text-center md:px-4">
|
||||||
<p data-i18n="grp_limaem_cta_info3_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
<p data-i18n="grp_limaem_cta_info3_label"
|
||||||
|
class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
|
||||||
Media Sosial
|
Media Sosial
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
<p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
|
||||||
@hmif.untan<br>
|
@hmif_ftuntan<br>
|
||||||
YouTube: HMIF UNTAN TV
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2057,8 +2242,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
|
<div class="w-full relative z-0 mt-4 pointer-events-none flex justify-center">
|
||||||
<img src="../../assets/global/footer.png" alt="Footer Illustration" class="w-full h-auto object-cover object-bottom"
|
<img src="../../assets/global/footer.png" alt="Footer Illustration"
|
||||||
style="object-position: bottom;">
|
class="w-full h-auto object-cover object-bottom" style="object-position: bottom;">
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
@@ -2200,7 +2385,7 @@
|
|||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
var TOTAL_CARDS = 6;
|
var TOTAL_CARDS = 7;
|
||||||
var AUTO_DELAY_MS = 2000;
|
var AUTO_DELAY_MS = 2000;
|
||||||
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
var GAP_PX = 32; // gap-8 = 2rem = 32px (tailwind)
|
||||||
|
|
||||||
@@ -2253,7 +2438,8 @@
|
|||||||
dotsContainer.innerHTML = '';
|
dotsContainer.innerHTML = '';
|
||||||
for (var i = 0; i < n; i++) {
|
for (var i = 0; i < n; i++) {
|
||||||
var btn = document.createElement('button');
|
var btn = document.createElement('button');
|
||||||
btn.className = 'slider-dot h-2.5 rounded-full transition-all duration-300 ' + (i === 0 ? 'bg-hmif-primary w-6' : 'bg-gray-200 w-2.5');
|
btn.className = 'slider-dot h-2.5 w-2.5 rounded-full transition-all duration-300 bg-gray-200 cursor-pointer';
|
||||||
|
if (i === 0) { btn.classList.remove('w-2.5', 'bg-gray-200'); btn.classList.add('w-6', 'bg-hmif-primary'); }
|
||||||
btn.setAttribute('data-index', String(i));
|
btn.setAttribute('data-index', String(i));
|
||||||
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
btn.setAttribute('aria-label', 'Slide ' + (i + 1));
|
||||||
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
(function (idx) { btn.addEventListener('click', function () { goTo(idx); startAuto(); }); })(i);
|
||||||
@@ -2414,4 +2600,5 @@
|
|||||||
|
|
||||||
<script src="../../assets/global/localization.js"></script>
|
<script src="../../assets/global/localization.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</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-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
|
||||||
.footer-logo { height: 28px; width: auto; }
|
.footer-logo { height: 28px; width: auto; }
|
||||||
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
.footer-ornament { width: 100%; display: block; opacity: .9; }
|
||||||
|
|
||||||
|
/* ===== Slider Dot Indicators ===== */
|
||||||
|
.slider-dot,
|
||||||
|
.galeri-dot {
|
||||||
|
display: inline-block;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
min-width: 10px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background-color: #d1d5db; /* gray-300 fallback */
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
transition: width 0.3s ease, background-color 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-dot.bg-hmif-primary,
|
||||||
|
.galeri-dot.bg-hmif-primary {
|
||||||
|
background-color: #0b2f4c; /* --color-hmif-primary dari output.css */
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Generated
-1
@@ -917,7 +917,6 @@
|
|||||||
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
|
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user